Suzanne Watzman
Watzman Information Design
Everything is Designed: Why We Should Think Before Doing
Making Things Easier to Use and Understand—Thinking About the User's Experience
The Process of Good Design—How Do We Get There from Here?
An Information Design Process Is an Informed Design Process
Visual Design Principles
Universal Principles of Visual Communication and Organization
Visual Design Tools and Techniques
The Five Criteria for Good Design
Visual Design Principles at Work
Typography
Variations in Letterforms
Typographic Guidelines
Design Principles: Page Design
Building the Design of a Page
Other Page Design Techniques
Charts, Diagrams, Graphics, and Icons
Guidelines
Color
Basic Principles of Color
How to Use Color
Creating a System: Graphic Standards and Branding
Designing the Experience
Effective and Appropriate Use of the Medium
The Element of Time
Consistent and Appropriate Visual Language
Navigation Aids
Graphics/Icons
Metaphor
Color
Legibility
Creadability
Guidelines
Challenges and Opportunities: Creating Your Own Guidelines
There Are No Universal Rules, Only Guidelines
Remember the Audience: Be a User Advocate
Structure the Messages
Form Follows Function
People Don ’t Have Time to Read
Be Consistent
Start the Design Process Early
Good Design Is Not About Good Luck
References
Figure 13.1: The nautilus shell is one of nature’s many examples of a perfect synthesis of form and function. It is the result of years of evolution to survive in its current from. The work of evolution is transparent, as we admire its beauty. It is a perfect analogy for design and design process to create valuable user experiences and usable interfaces.
Figure 13.2: An Information Design Process is phased to ensure user and organizational needs are met. It is ongoing and iterative, throughout the life cycle of a product. Any change can trigger a recycling of this process to ensure solutions remain appropriate and useful.
Figure 13.3: The Univers typeface was designed by Adrian Frutiger in 1957 to provide a set of compatible progressive variations easily identified by a series of numbers.
Figure 13.4: The x-height of a typeface (actual height of a lower-case x) is a key characteristic when deciding the visual size of a typeface, particularly where readability is the critical requirement. The above typefaces are the same point size, some will seem larger (e.g. Helvetica) and easier to read than others (e.g. Serifa) though they are the same point size.
Figure 13.5: These five A ’s show typographic style from the 1600 ’s through modern times, reflecting similar changes in tools, fashion and current events. Ultimately, choice of output media should determine typeface choice, given details such as the thick and thin parts of the letterforms, negative space, viewing environment, output resolution, etc.
Figure 13.6: The serif typeface Century below versus the sans serif typeface Univers, above. Understanding the differences within the typeface as well as what the differences between a serif and a sans serif is important. Try setting a paragraph of each with exactly the same line length, size and spacing to compare the differences.
Figure 13.7: Serif typeface (Century) on the bottom versus sans serif typeface Univers, on the top, show the differences in each as well as where the information in each “is held ”are the keys to optimum legibility and readability of text. Try covering up the lower half of lines of type with some other choices, to get an idea of where the information “is held ”in each typeface. How easy or hard is it to understand the words or lines of text? Try this for each situation and you will begin to get an idea of what is critical for optimum readability and legibility of text.
Figure 13.8: The serif typeface Century below versus the sans serif typeface Univers, above. Understanding the differences within the typeface as well as what the differences between a serif and a sans serif is important. Try setting a paragraph of each with exactly the same line length, size and spacing to compare the differences.
Figure 13.9: With current technology, the difference between a justified column and ragged right column can make a huge difference. In a poorly justfied column, spaces within a justified line connect vertically down the page, distracting the eye from easily reading across a line of text.
Figure 13.10: Gray page or screen.
Figure 13.11: Chunking.
Figure 13.12: Queuing.
Figure 13.13: Filtering.
Figure 13.14: Mixing modes.
Figure 13.15: Abstracting.
Figure 13.16: Zen calligraphy is an example of the historically close relationship between word and image. The great Zen master Hakuin of Kyoto, Japan (1768 –1865)created this symbol to mean “dead,” with additional notes saying, “Whenever anyone understands this, then he is out of danger.”
Figure 13.17: When to use what graphic.
Figure 13.18: Thirty centuries of development separate the Chinese ancient characters on the left from the modern writing on the right. The meaning of the characters is (from top to bottom): sun, mountain, tree, middle, field, frontier, and door.
Figure 13.19a & b: It is obvious which of the above examples communicates a important message most quickly. The goal for the designer is to communicate the message in the most direct way, so that the user can understand and make decisions based on that information. Obviously, some situations are more critical than others, but it is no less important to begin design with consideration of the needs of users.
Figure 13.20: Trying examples in your context. Because color is not available in this particular edition, try your own experiment. Take a look at this illustration, and recreate a paragraph of text, with the background graded from 100% to 0%,choosing one color for the background. Then set lines of type in a variety of typefaces and sized, to see where it becomes legible or totally impossible to read. Remember to test your choices with each context and parameters. Such things as lighting, projection distance, and users’ physiological constraints can make the difference whether something can be read or not.
Figure 13.21: There are many ways to say the same thing. What is important is to create an appropriate visual style and design all visual elements in the same way. The goal is to create a consistent visual language throughout the entire product.