- Nov 2016
-
designschool.canva.com designschool.canva.com
-
Though this point is often debated, it’s commonly said that serifs make long passages (in print) easier to navigate visually, helping move your eyes along the lines of text. However, because serifs are usually small and thin, they often don’t display as well on pixel-based screens (looking distorted and “noisy” rather than clear and crisp), so many designers favor sans-serif fonts for web use, especially at small sizes.
I believe that points like these are crucial when creating a website. In our last set of readings we discussed how elements of universal design and fonts are an easy way begin down that path.
In our own Service Learning Project, one of the areas we believe that we can help our client is by implementing an easier to read font. Currently the letters are very thin and to some, could be hard to read. But like this article discusses, just by doing something as simple as emboldening the typeface/font can improve the ability of those who might be visually challenged to read and comprehend the material on the website.
Another great point about type faces and fonts is that they make content easier to read across multiple types of devices such as smart phones, laptops and desktop computers. We should all as technical writers and future content managers be cognizant of how our content appears on different platforms.
-
Decorative / Display: When you hear a font categorized as decorative, display, or novelty, it all means the same thing — that font is meant to get your attention. They’re often more unusual than practical and should only be used in small doses and for a specific effect or purpose.
This is something that I believe is very important when thinking about content strategy and also user experience as well. By displaying different typefaces and fonts in different ways, we as technical writers are able to choose where our readers place their eyes. By using multiple font sizes and thicknesses we are able to create a hierarchy within our content and writing.
By thinking in this way we are able to create content that is easy to navigate. Using size and boldness can inform the reader what the important parts of the content are. This is also great for segmenting content by informing the reader what each section may be about so they know if they should keep reading or skip to the parts that they find more interesting or important.
Also, just like the quote above states, these decorative effects should be used sparingly so that their importance is not deluded. If every word is bold, then that effect is meaningless and the article is not easier to read and digest. We as content creators should always be looking for ways that our content can be more easily read and understood.
-
You wouldn’t wear a bathing suit to a job interview; then again, you wouldn’t want to wear a suit and tie during your vacation on the beach either. There’s an element of appropriateness to consider.
I believe this is very important to consider when thinking about how we wish to display our content. In this passage Klienman discusses how our fonts and typefaces are similar to the clothes we wish to wear and I believe that this is true.
This reminds me of something I've learned/overheard many times from my wife: don't use Comic Sans. Anytime someone uses Comic Sans, the author will lose credibility. Unless writing an actual comic book, the font is useless. In my humble opinion.
I believe that when working in the professional world, especially when that work uses design in anyway, the technical writer needs to understand how the content they are creating looks. If that content looks unprofessional, that content will lose credibility. So by having a firm grasp on fonts and typefaces we are working towards implementing better design, more effective content and a brighter future.
-
Before you ever start browsing through fonts on your computer or searching for a new one to buy or download, it would be a good idea to brainstorm some of the qualities or characteristics that you want your design to communicate.
This seems like a simple thing to do, but planning what exactly we want our content to achieve is a great idea. This includes of course, planning what we are going to write, but also what that writing is going to look like. We can plan around images and page sizes, but we also need to plan on how the user reads our content.
For example, if we are writing for a new part of the AARP website, we should probably choose a font that is thicker and stands out for those who may have trouble seeing. If we look back at our previous reading this is also a tenet of Universal Design. If we're going to be thinking about audience and how we can reach as many people as possible, fonts and type faces have to be a part of that discussion. How we emphasize certain words and sentences with fonts and spacing can determine how easy a user can skim through the content we create.
But, back to the beginning, planning. Fonts can seem like something to think about last, but the crux of this reading so far, to me, is that this should be a part of the design process from the beginning since it can inform the reader so much about not only the content, but the author as well.
-
Who is viewing your design may also be important. Is your audience of a certain age or demographic? Will your font choice resonate with them?
This quote points out what I hope should be obvious to us now: we must consider who our audience is before we start creating our content.
If we are going to be competent writers in any realm, our audience needs to guide how and what we write, regardless of the platform. In my own project with The Center For Civic Innovation, we initially focused on a younger audience since their over all vibe, branding, and (seemingly) tech focus seemed to trend that way. But during our pitch presentation and the feedback after, our client informed us that they did indeed want to be more inclusive to more than just the young, but older patrons as well as anyone who had a civic minded venture and needed a work space. Moving forward this has informed some the design choices we have made, which interestingly enough was choosing fonts and type faces that are easy to view for anyone who may happen upon the CCI website.
-
Body typefaces are used in body copy: book text, magazine or newspaper text, website content, any lengthy passages. These fonts are easy on the eyes and easy to read. It’s important that they’re not distracting, so users can easily skim or scan the text.
I believe this passage is important for us as technical writers because we can choose what our words look like. We have the option to choose a font or typeface that flows with the overall design which can prevent it from ending up distracting.
In writing for the web, succinct writing is king (or queen). Users want to read quickly, get to the meat of the article, skim it and then leave. By using the right fonts we are able to catagorize our content so that it is easy to skim and the reader can obtain the information they came for as quickly as possible. This also helps as the screens people will be experiencing the content on will vary in size. While some may be using a phone, others may be using an I-pad or Kindle Fire. I believe both sets of readers will be subconsciously looking for cues that will allow them to skip ahead without feeling like they have missed anything. An easy step in that process is to use fonts effectively.
-
Size: You’ll want to choose point size that fits your design context. A business card will need a different sized font than an event poster. If you’re designing something that might be viewed on mobile devices — social media graphics, for example — open up any word processing program and try typing a few lines using the font you’re considering and then reducing the size. If you can still easily make it out at smaller sizes, then it will probably perform well on small screens.
As the quote mentions, font size can vary by purpose. This is specifically true in my service learning project. One of the deliverables we are charged with creating is a more streamlined newsletter. The current newsletter is too long and because of that length, users are not reading the entire newsletter and missing out on pertinent information that is cultivated just for them.
One area in which we could help is the size of the lettering and spacing throughout the newsletter. While this may not fix the entire problem of the newsletter length, by choosing a small font size we would inevitably condense the newsletter. This approach could also be brought to bear on the images of the letter. By condensing these as well, the over all length of the newsletter is shortened without removing or redesigning any content.
Thinking about the size of the font also helps as Kliever mentions when considering how the content will be viewed on other devices. Large print on a small screen could be disorienting, but print that is too small would also be unreadable. This brings us back to a point we've discussed in class which is product testing. The best way to learn if one of these fonts works is by testing it ourselves on as many devices as we can.
-
The I/l/1 test: For any font you’re considering for passages of text that include both letters and numbers, try this: Type out a capital I, a lowercase L, and the number one. If two or more look identical, then readers might stumble over certain words or letter/number combinations.
This is another passage this semester that blew my mind a little bit. I think many of us have been reading, typing or writing and noticed that our 1's, L's and I's look somewhat similar if not totally identical.
If we are going to be using fonts and typefaces as way to maintain a cohesive design and improve the overall effectiveness of the content, then this test should be tool we all keep in our back pockets. The last thing we want as a content managers is for our content to be confusing. If we look back to elements of universal design, there may be a person who is new to the English language and the similarity of the 1's, L's, and I's may be enough to make the piece to complicated to read or fully understand.
Even if the reader does have a firm grasp of the language, as the article has explained, by making the fonts easier to understand the reader can access the information they need quicker and thus the content is more useful. This is what we as technical writers need to be attempting in our layouts and design.
-
Give each font a job: Your chosen fonts will need to be different enough that they create a clear visual hierarchy — showing viewers where to look and what’s important. One sans-serif and one serif font are often enough to do this effectively.
I found this to be important in that this can help us maintain a cohesive design throughout our content without going crazy picking different fonts.
By picking two or three we can create a hierarchy that is cohesive throughout whatever it is that we are creating. One font for headlines, one for moments of emphasis and one for body copy could easily guide a reader through our immaculate writing so they are able to quickly pick up what we are putting down and not feel as though they have missed anything. While a reader will inevitably miss something by not reading all of our magnificent and colorful prose, they will understand the main points if we the writers allow our chosen fonts to do their jobs. As the article mentions, "Your chosen fonts will need to be different enough so that they create a clear visual hierarchy..."
So we don't need to go crazy, but we do need to be thoughtful and strategic when picking our fonts.
-
If the characteristics the font is communicating don’t match the message of your overall design, then there will be a visual disconnect for the viewers or users of your design, and you don’t want that
The above quote does a great job illustrating how important a font can be to the overall design of a website or any type of content for that matter.
This seems easy and simple, but I could imagine, also over looked: the font should match the design. To borrow an example, if you are writing for a website that is modeled after the New York Times, there is no reason to use Comic Sans as the font. The author as well as the publication will lose credibility. This disconnect will create confusion.
-
-
techwritingf16.robinwharton.net techwritingf16.robinwharton.net
-
Use visuals (photos or illustrations) when it is necessary to show- what something looks like or to depict a perceptual quality such as color, texture, pattern, shape, relative size, spatial location, orientation, arrangement, or appearance
Something that is important to remember when using images is that they can be used to explain what is being described in the text. However, if the image is being used for that purpose, it must be good quality.
If the body copy is explaining the complexities of the inside of a Lilly and how it grows, the image should be clear enough to convey that information. Also when we are using images in our future content creation, I believe that we must test their quality before we officially post them to our future websites. The image could appear pixilated and therefore confusing or even useless. Images appear differently on different quality screens so when we are testing our work we should trying testing the image quality on a lower end device as well as a higher end one to maintain consistency.
-
Isolation Surround important elements with lots of white space. Elements surrounded by generouswww. mintocommercial, com/home. htm),white space are thought to be accorded greater attention. As a result, isolating an element in a display implies that it is more important (Goldsmith
This quote is another aspect of design that seems so simple that it could easily be forgotten. Personally this is something I've probably noticed thousands of times but have never stopped to think about why a title for example, was surrounded by white space.
By surrounding elements that require greater attention with white space as the quote implies, we are assigning that element value. In separating a title from the rest of the body copy in an article, we have created value without having to add any other design elements. Without a fancy font or added font thickness, a piece of text just separate and surrounded by white space is easily understood to be worth remembering.
An example of this could be found when reading an article whether on line or in a magazine when the author takes a quote from their own article and creates white space around it surrounded by body copy. This creates points of emphasis while also breaking up the copy into smaller pieces as well. While they may use a different font or boldness, the separation implies this particular quote is important in regards to the rest of the article.
-
Good design reveals structure when it visually mimics the logical relationships that exist among elements in a display. The human visual system attempts to find the structure of information—whether in a scene, on a page, or on a screen—very early in its efforts to process it, and it does so by looking for visual patterns.
To me, this quote is explaining the psychology of good design.
Humans need structure. Within a structure they are free to improvise, but that structure is what creates a template of understanding. The jazz guitarist can play millions of notes that don't seem to make sense, but he may be actually stringing together multiple scales and arpeggios that to a casual listener sound disjointed, but are actuality a framework for which his seemingly improvised notes are connected.
This type of thinking can be applied to our designs and layouts as well. While we may all want to be totally unique and innovative, we may want to think about how far we stray from conventional designs and templates. Many of these design conventions may exist due to how they are able to easily guide humans through a website for example. As the quote mentions, the "human visual system" is looking for "visual patterns". We are exploiting that by arranging our content in a way that makes the most sense by using fonts and spacing that can create hierarchies which can guide the reader through our writing even easier.
-
A number of assumptions are commonly made about the efficacy of icons in graphical user interfaces. They include the notion that icons, because they are pictorial, are almost invariably easy to interpret. A corollary' is that they' are universally interpretable because the key to meaning conveyed pictorially is not bound to any one language. These assumptions, which are largely incorrect, stem in part from a confusion between the notions of “identification” and “interpretation." While it may well be true that, at least for concrete things and ideas, pictures facilitate rapid, and sometimes universal, identification, it is certainly not always true that they efficiently or unambiguously convey what we intend an object to mean (Salomon 1979; Sebeok 1994; Williams 1996
This quote is so interesting because it was published back in 2000 and the use of icons or in our futuristic world, emoji's, has only increased.
One aspect that Salomon, Sebok and Williams all point out in this excerpt is that not all icons are universally understood. One icon in one culture may have another meaning in another. While a smiley face may be universal, a thumbs up may not be. Today we have a wide array of icons or emojis that are used in online publication but also personal communication. However, if one is not totally caught up on pop culture, the meaning of these icons may be lost. While we may think that a picture is worth a thousand words, we as technical writers need to understand that those words may not translate well in a thousand different languages.
An interesting study would be to find out which emoji's or icons are the most popular in other languages such as French, Chinese, Swahili or Russian for example. In these languages, icons may not even play a significant role in everyday communication as much as they seem to in Western and specifically English speaking cultures.
-
While ''thematic” pictures may be acceptable when their relationship to the site and its contents can be easily inferred, pictures chosen only to decorate a site often confuse. At best such pictures provide no assistance to the viewer in acquiring information being conveyed by a site.
Something that we have touched on all semester is the use of as many modes as possible when we are trying to communicate to as many audiences as possible. One mode we should always think about using is pictures.
Since we are all somewhat young technical writers in training, we need to be training ourselves to communicate as much as possible as succinctly as possible. In regards to this reading and specific quote, that also means making sure that the images we use are actually useful for the overall content we are creating. As Williams mentions, there will be times when we need a decorative image. But most of the time we will be using images to help convey information as clearly as possible. As we have discussed in class, images can help reach more audiences but also enhance the content by adding a visual element which will enhance the effectiveness of the information we are trying to display.
We must also remember that some readers may get what they need from our content just by looking at the pictures and the headlines. That is ok. This is an audience we should be planning for. Users are looking for content and want to digest that content quickly. Adding visual elements will help them accomplish that.
-
Consistency7 has some other advantages for the user, as well. A consistent format speeds searching—it sets up expectations about where certain kinds of information or elements such as menus, navigation aids, or site maps can be found (Tullis 1988). Consistency, then, should exist not just within individual screens but among all screens in a Web site; therefore, secondary7 screens should be logically, visually, and structurally derivative of home or primary pages
This quote can tie into an earlier point I've made for this article about accepted design formats and their usefulness to us as technical writers.
When people are able to see a website that makes sense, flows logically with consistent design, the user is able to search through it at a higher speed. The user is then not having to decipher where exactly the "About" page is, but know already to look at the top left of the menu bar on the home page or any page they may land on in the website.
Williams goes on to explain that consistency should exist "among all screens in a Web site; therefore, secondary screens should be logically, visually, and structurally derivative of home or primary pages". This means that when there is consistency throughout the website, not just a few pages, the user can easily navigate the entire website since it has been logically planned and designed. In my service learning project we find that some pages are well thought out while others are not and that inconsistency creates confusion since the information in the latter pages is not as easy to access. This can be changed of course by applying what we've read in this article.
-
Finally, it’s important to acknowledge in the design of information to be displayed on a screen that screens differ from pages in some very fundamental ways. Screens, for example, may be smaller than pages, at least in the sense that they often display fewer lines of type than a typical paper page. Screens are also customarily oriented differently than paper—they are typically wider than they are tall. The images displayed on screens are also often more crude than those printed on paper, and, unlike paper, screens transmit light rather than reflect it. Issues of screen resolution and luminance are addressed in a later section on typography. Screen size and orientation, though, affect the designer’s decisions about the arrangement of visual elements on a screen and so are considered in the context of our discussion of design.
This is a great quote because it is instructing us to be knowledgeable about how the user will interact with the products and content we create.
We don't know exactly how the end user will view our content. They could be using a smart phone, desktop, I-pad or 1999 Gateway computer and will need to be able to access the information just as easy across all of these the devices. In the case of the gateway computer, this may not be possible, but as we learned with universal design, this should be something we aspire to as we try include as many audiences as we can.
During my undergrad last decade, I was a film minor and was privileged enough to land an actual film production class. Something that has always stuck with me is how we were instructed to edit our sound in our films for the speakers we would be presenting on. In our case it was a basement projector set up in GCB (Langdale Hall). We actually spent the night in the building editing on the large projector screen to make sure our sound was as crisp as possible per the speakers that were attached to the projector. Since many others edited their sound in high end head phones, their sound was actually worse when played to lesser quality speakers. To make a long story end, we need to be thinking of audience in our design, but also how exactly the content we create will be viewed and plan for that specifically if possible for the best possible results.
-
As Tullis notes, “Visual groupings have a significant effect on the semantic interpretations that users assign to the information” (1988, p. 390). Elements that are visually grouped (see Figure 4) will likely be perceived as “associated” with one another. Similarly, elements on a screen that share the same color or texture or orientation, even if spatially separated, are interpreted as being related in some meaningful way. Unrelated elements, of course, should be visually different or spatially separated from one another.
This quote is interesting since this was a part of our lecture last week. The most intriguing aspect of this quote goes back to how good design can also use elements of psychology.
Tullis explaines, "Visual groupings have a significant effect on the semantic interpretations that users assign to the information". Tullis, as well as Williams, is writing about how we as humans can be pre-wired in a sense to take in information in a certain way easier than others. By grouping information into "chunks" we perceive multiple elements to be related to each other since they have been grouped together. We assume that because something is next to something else, they must be connected without really even really thinking about it.
So if we apply this concept to our own designs, we can group certain text, images or data together without explicitly explaining how they are connected and many people will believe them connected just by their proximity to the other. This is handy when trying to create content that needs to be read quickly. By grouping content and information in this way can say more with less.
-
"Backgrounds, consequently, should be, as far as possible, devoid of pattern or, if esthetic considerations demand that they be patterned, be very subtle or muted." (pg. 2, Lynch and Horton 1999)
The above quote points to something so simple that it can easily be overlooked. A background should be simple, that's why it is the background. Think of it as a band with a talented lead singer. The lead singer (the content) is the main attraction. The back up vocalists (the background) are there to support the lead singer (the content). They must know their roles for the entire show to be a success. It was never Smokey Robinson and Jeff, Carl and Glenn. It was Smokey Robinson and the Miracles. There must be order.
When we add different patterns and bold colors that contrast with the beautiful content we've just created we are doing ourselves and possibly our employers a disservice since the content will not be as useful or in some cases even hard to look at for long periods of time. While thinking about design, everything must work in concert for us to achieve the best results. We may not always get there, but we need be to striving towards that goal.
-
"In general, elements that contrast greatly with their backgrounds (black on white - or white on black - shows the most contrast) are relatively easy to see even when they are very small." (pg. 1)
I think by adhering to this quote we can easily achieve content that is easier to understand. Users will be accessing this information quickly, so by creating a clear and easy to comprehend layout using these simple color combinations, we can achieve more effective writing.
We may want to add more colors to a website, but we must being thinking about how someone will be able to read it if they are on their computer or on their mobile device of choice especially. If our writing is somewhat legible on a large screen, it may be nearly impossible to read on a smaller screen. The good news is that this aspect of design can be easily applied by committing to product testing. But we must also understand that we may at times become too close to the work and having another person not ourselves to test our work will also improve our chances of creating easy to understand content.
-
Simply, elements that are logically coordinate ought to be treated graphically in the same way. Subordinate elements ought to appear less prominent than superordinate elements, and elements that are closely tied to one another logically ought either to be grouped spatially or share some other perceptual attribute such as color.
Hierarchy
-
"White backgrounds provide the greatest contrast and, unlike colored backgrounds, are not susceptible to browser or monitor-induced change." (pg. 2)
Just a good point.
-
- Oct 2016
-
techwritingf16.robinwharton.net techwritingf16.robinwharton.net
-
project reflections
Would these be useful on my portfolio site? I'm sure they might help in an interview as far as showing my role in a project and my understanding of the field. Would these be considered more like after action reports?
-
-
www.disruptingdh.com www.disruptingdh.com
-
This current user interface fittingly forces me to confront my own audiocentric (and Anglophone) privilege. I find myself navigating a linguistic environment that is only unevenly or partially configured for my use.
This passage is quite interesting since I too after reading this article, had to confront my own "Anglophone privilege". While playing guitar with a band, I use my ears to listen to the notes of the bass guitar and the rhythm of the drums to find out where I need to come in. When I work I use my ears to listen to any and every noise related to a segway. I have a 6th sense now. I know every way a segway can sound when it hits something. I honestly can't imagine trying to do my job without my hearing. It would be possible, but much more difficult. This why I was very worried when I had a potential loss in hearing at an indoor gun range. WEAR HEARING PROTECTION. Or don't shoot guns.
But some people do have to perform their jobs without the use of their ears or eyes.
-