1. 236: II'nMI Principles of Visual Design

2. Form and Function Good design has good form and good function. Good form: Looks good, pleasing, inviting. Good function: Works well, robust, capable.

3. Chunking and Visual Gestalt Principles Chunking Chunking is a memory strategy that involves taking individual units of information and grouping them into larger units. – 3002200210020002 – The 7 +/- 2 Principle applies to chunks. Chunking happens in the visual domain also. – Visual Gestalt Principles – Gestalt.pdf Gestalt.pdf Let's have a look-see... Chunking kinda sorta happens in maps too... ->

4. Chunking and Bertin’s Visual Variables Jacques Bertin Cartographer Mark – basic visual unit(/atom), able to show relationships between data – point, line, area, surface, volume Semiology of Graphics (1983) Graphical presentations use marks to encode information via their positional (1d/2d/3d), temporal (animation), and visual variables (next page).

5. Size Value Hue Orientation Texture Shape Position Bertin’s Visual Variables

7. Five attributes of visual variables: Associativity: a visual variable is said to be associative if it can be used to group marks together (chunk them) Selectivity: a visual variable is said to be selective if it can be used to separate marks (make one stand out from others) Orderedness: a visual variable is said to be ordered if changes will be interpreted as more or less Quantitativeness: a visual variable is said to be quantitative if the relationship between two marks differing in this variable can be interpreted numerically Length: the length of a visual variable is the number of changes that can be made to the variable before it fails at its intended function Visual Variable Attributes

8. Visual Variables + Attributes Size Value Hue Orientation Texture Shape Position AssociativeSelectiveOrderedQuantitativeLength

9. How Did We Do? Bertin chartBertin chart comparing variables and attributes

10. Andy Rutledge tests your design knowledge with 6 Qs http://www.andyrutledge.com

11. 1. In which of these examples is the logo larger?

13. 2. Which of the two compositions evokes visual discomfort? Why?

14. 3. Which of these two line examples better communicates excitement?

15. 4. What function(s) is/are served by the structural elements in figure A? AB

16. 5. Which arrangement requires less eye movement to take in an article? AB

17. 6. Which grid is “quieter”? AB

18. Design Principles: CRAP Contrast Differentiation Repetition Consistency Alignment Placement Proximity Grouping

19. Contrast If items are not identical, make them dramatically different. Why? To excite the eye. To make text more likely to be read, images more likely to be viewed. To help organize visual information, the logical flow from item to item.

20. Contrast How to get it: Font faces, sizes, weights Line thicknesses Colors, shapes, sizes Empty space What to avoid: Overkill – Eye-straining/illegible color combinations – Too much empty space Wimping out... – Be bold! Stage m akeup effect

21. Repetition Repeat aspects of the design throughout the entire space. Why? To unify and add visual interest. How to get it: Be consistent. Strengthen existing repetitions. Add elements for new repetition. What to avoid: Repeating an element so much it becomes annoying/overwhelming. So much repetition that it undermines the contrast.

22. Alignment Don't place anything arbitrarily on the page; align (visually connect) it with something else. Why? To unify and organize the page. How to get it: Be aware where you put elements. Align with other elements on page. Use (real/imagined) grid. What to avoid: Using too many different text alignments. Too much center alignment (tends to be dull and look amateurish).

23. Proximity Group related items together. Why? See next slide... Be aware of the path that the eye takes. Where does it go first? Next? Etc. Where does it end up?

24. Proximity Why? To organize elements to optimize visibility, understandability. How to get it: Squint your eyes slightly and count the number of visual elements on the page by counting the number of times your eye stops. If there are more than 3-5 items, see which can be grouped together. What to avoid Too many separate elements on a page. Don’t leave equal amounts of white space between elements unless each group is part of a subgroup. Avoid confusion over a headline, caption - create a relationship. Don’t create relationships with elements that don’t belong together.

25. Game Show Time Okay everyone,

26. Game Show Time Okay everyone, let's plaaaaaaaaaaaay:

27. Game Show Time Okay everyone, let's plaaaaaaaaaaaay: Spot the CRAP!

28. Spot the CRAP!

33. Fonts Concordant One font, or one family of fonts, or 2+ similar families Calm and formal Discordant 2+ contrasting fonts Energized and informal Contrast Italic, size, etc. Color – Warm colors come forward (reds, orange) – Cool colors recede (blue, green, pastels) – Larger areas of cool color, just a little of warm

34. Font Types Serif Fonts Sans serif fonts - no serifs Monospace fonts - all characters are the same width Display fonts - not for lots of text EVEN IN A GOOD FONT, LARGE AMOUNTS OF TEXT IN ALL CAPS IS HARD ON THE EYES!

35. Design Tips Establish a visual hierarchy. People first see the graphics, then the text. Balance, organization, and visual contrast are vital. Direct the reader’s eye. People scan text left to right, top to bottom. Only the top four inches may be visible. Use pastel shades for backgrounds or minor elements. Beware of distractions. Garish illustrations and (especially) animated graphics or blinking text pull the user’s eyes away from the content. If everything is emphasized, nothing is emphasized. Be consistent. Don’t have things scattered all over your page. Let your style “evolve” as you improve the page.

36. Design Tips Don't be afraid to... Use plenty of blank space. Be a s ymme t rical. Make words very large or very small. Make graphics very bold or very subtle as long as it complements or reinforces your design.

37. Movie Time! Visual Design Elements of Design (9)Elements of Design Color Color Theory (6)Color Theory – From Apple Color in Motion (~10)Color in Motion – Created by former RIT student, Maria Claudio Cortes.