236: ii'nmi principles of visual design. form and function good design has good form and good...
TRANSCRIPT
236: II'nMI
Principles of Visual Design
Form and Function
Good design has good form and good function.• Good form: Looks good, pleasing, inviting.• Good function: Works well, robust, capable.
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
• Let's have a look-see ...
• Chunking kinda sorta happens in maps too ... ->
Chunking andBertin’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).
Size
Value
Hue
Orientation
Texture
Shape
Position
Bertin’s Visual Variables
Bertin’s Visual Variables
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
Visual Variables + Attributes
Size Value Hue Orientation Texture Shape Position
Ass
ocia
tive
Sel
ectiv
e
Ord
ered
Qua
ntita
tive
Leng
th
How Did We Do?
Bertin chart comparing variables and attributes
Andy Rutledge tests your design knowledge with 6 Qs
http://www.andyrutledge.com
1. In which of these examples is the logo larger?
1. In which of these examples is the logo larger?
2. Which of the two compositions evokes visual discomfort? Why?
3. Which of these two line examples better communicates excitement?
4. What function(s) is/are served by the structural elements in figure A?
A B
5. Which arrangement requires less eye movement to take in an article?
A B
6. Which grid is “quieter”?
A B
Design Principles: CRAP
Contrast• Differentiation
Repetition• Consistency
Alignment• Placement
Proximity• Grouping
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.
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 makeup effect
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.
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).
Proximity
Group related items together.
Why?• See next slide ...
Be aware of the path that the eye takes.
• Where does it go first?• Next?• Next? • Etc.• Where does it end up?
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.
Game Show Time
Okay everyone,
Game Show Time
Okay everyone, let's plaaaaaaaaaaaay:
Game Show Time
Okay everyone, let's plaaaaaaaaaaaay:
Spotthe
CRAP!
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
Font Types
Serif FontsSans 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!
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.
Design Tips
Don't be afraid to ...
• Use plenty of blank space.
•Be asymmetrical.
•Make words very large or very small.
• Make graphics very bold or very subtle as long as it complements or reinforces your design.
Movie Time!
Visual Design• Elements of Design (9)
Color• Color Theory (6)
– From Apple
• Color in Motion (~10)– Created by former RIT student, Maria Claudio Cortes.