The P.A.R.C. Principles of Visual Design. Proximity. CMPT 165: Design Principles

Transcription

1 The P.A.R.C. Principles of Visual Design CMPT 165: Design Principles Tamara Smyth, School of Computing Science, Simon Fraser University October 24, 2011 In The Non-Designer s Design Book, Williams discusses four basic principles that all visual design should balance: 1. Proximity: Related items should be grouped close together. This provides the viewer with a visual cue that this items are similar and should be treated as a group. 2. Alignment: Every visual element on a page should have some kind of connection to at least one other element. Nothing should be positioned haphazardly. 3. Repetition: Common elements, such as colors, graphics, layout styles, and so on, should be repeated to give a consistent look and feel to a page. 4. Contrast: The idea of contrast is to make dis-similar elements very different. Contrast is one of the most powerful visual design tools. 1 CMPT 165: Introduction to the Internet and the WWW: Design Principles 2 Proximity Consider the same TODO list slightly modified: The proximity principle says that similar items should be grouped together. Consider a TODO list: Figure 2: Physical closeness implies a relationship somehow the last 4 are different. Figure 1: A general list of TODO items. CMPT 165: Introduction to the Internet and the WWW: Design Principles 3 As another example, take a look at the cmpt 165 Schedule and Online Lecure notes. Why are supplemental code examples grouped together? Grouping is easy to see, and it provides extra information in a visual (non-textual) way. CMPT 165: Introduction to the Internet and the WWW: Design Principles 4

2 Techniques for implementing proximity Example of proximity Spacing: decrease spacing between related items, and increase it between unrelated items. Example: Paragraphs in books are separated by space or indentation to show that sentences in it are related. Lines: draw lines to separate unrelated items. Though if used in excess this can make the design look busy, it can take up less visual real-estate than adding space. See lines between news items at nytimes.com. Color: make similar items the same color. For example, change the background color of related text to both show what that text is related to, and what it isn t. CMPT 165: Introduction to the Internet and the WWW: Design Principles 5 Consider the business card below: It has 5 separate elements. Figure 3: A business card with 5 separate elements. Where do you begin reading? In the middle? Where does your eye go next? What happens when you read the bottom-right corner? Do your eyes wander? Items on the card seem unrelated, and it is not clear when you have read all the information. CMPT 165: Introduction to the Internet and the WWW: Design Principles 6 Example of proximity, improved? Summary of proximity Consider the same elements grouped in closer proximity. Figure 4: A business card with 5 separate grouped elements. Grouping related elements together into closer proximity automatically creates organization. Count the number of visual elements. Can these elements be grouped together into closer proximity to become one visual unit? What to avoid: too many separate elements on a page. sticking things in corners and the middle. leaving equal amounts of white space between elements unless each group is part of a subset. avoid confusion over whether an element belongs with its related material. don t create a relationship where there is none! Is there any question where you begin reading the card and when you re finished? CMPT 165: Introduction to the Internet and the WWW: Design Principles 7 CMPT 165: Introduction to the Internet and the WWW: Design Principles 8

3 Alignment Alignment Example Good alignment helps make pages look clean and cohesive. Even elements that are far apart can benefit from alignment: alignment can work like an invisible line connecting them. Nothing should be placed on the page arbitrarily every item should have a visual connection with something else on the page. Alignment is can be a subtle way to give a page a more sophisticated and professional look. Rule of thumb: almost never center text: Centering a lot of multiple lines of text causes ragged (unaligned) left and right margins which usually look sloppy. Instead, align page elements so that either their left or right margin is straight. Figure 5: An unaligned business card. Figure 6: An unaligned, business card with element in proximity. CMPT 165: Introduction to the Internet and the WWW: Design Principles 9 CMPT 165: Introduction to the Internet and the WWW: Design Principles 10 Alignment Example, improved? Repetition Repeating something again and again can have a strong affect on people. In visual design, repeating something, a font weight, an image, a set of colors, etc., gives consistency to the page. Alignment as a kind of repetition: when you align two text elements, you are repeating the use of the same margin or spacing. Figure 7: An unaligned business card. This has the same arrangement as in the proximity example, but now everything is right-aligned instead of centered. The invisible edge connecting two groups of text gives strength to this layout. CMPT 165: Introduction to the Internet and the WWW: Design Principles 11 CMPT 165: Introduction to the Internet and the WWW: Design Principles 12

4 Repetition Example Techniques for implementing repetition In this example, the strong bold typeface from the card holder s name is repeated in the phone number. The intention is for the eye not to wander off the page once it gets to the bottom. Figure 8: Repeating the font at the end of the card causes your eye to wander back to the beginning. Use the same font styles for headers. For less important header, make the font smaller in a systematic way, but retain the other font properties (s.a. family and weight). Put page numbers, footnotes, bars, etc. in the same style and place on each page. An exception in print is the first or last page of a section; you might introduce a change to indicate a section change. Use a different bullet mark (e.g. triangle) but also in some other element (e.g mark the start of a figure s caption). Though the triangle is repeated, it s orientation might depend on where it s placed. Use drawings (or parts of them) and repeat its visual style to have a unique and consistent look. Logos are another good example of repetition: good logos are eye-catching, but also not disruptive so they can be repeated all over the place. CMPT 165: Introduction to the Internet and the WWW: Design Principles 13 CMPT 165: Introduction to the Internet and the WWW: Design Principles 14 Contrast Implementing Contrast DON T BE A WIMP! (Williams) If two things are different, then make them very different. Bigger fonts (e.g. for section headings) contrast with smaller fonts. Font weight (i.e. boldness) contrasts with fonts of the same size but different weight. Color can make strong contrasts: compare black text on a white background to white text on a black background. Horizontal lines (real, or invisible alignment lines) versus vertical lines. For example, most text is written horizontally, so vertical text is a strong contrast. Big pictures versus small pictures. The spacing between lines and letters: more tightly spaced text contrasts with more loosely spaced text. Figure 9: Contrasing the specialty with other information. CMPT 165: Introduction to the Internet and the WWW: Design Principles 15 CMPT 165: Introduction to the Internet and the WWW: Design Principles 16

5 Contrasting Fonts A useful principle to remember when working with fonts is to use bigger fonts for more important things, and smaller fonts for less important things. More important information should be made easier for the reader to see. Titles often look better if they are made bigger, while details can be set as smaller fonts to indicate are not as important. This simple principle is violated on the SFU web pages for computing science: Notice on the CS home page that Computing Science in the title is in a very small font. It is quite hard to read. Is this information important? Furthermore, the name is part of an image, so if you try to increase the page s font size with the browser, the picture only gets bigger and the fonts more pixelated. CMPT 165: Introduction to the Internet and the WWW: Design Principles 17