236: ii'nmi principles of visual design. form and function good design has good form and good...
TRANSCRIPT
![Page 1: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/1.jpg)
236: II'nMI
Principles of Visual Design
![Page 2: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/2.jpg)
Form and Function
Good design has good form and good function.• Good form: Looks good, pleasing, inviting.• Good function: Works well, robust, capable.
![Page 3: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/3.jpg)
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 ... ->
![Page 4: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/4.jpg)
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).
![Page 5: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/5.jpg)
Size
Value
Hue
Orientation
Texture
Shape
Position
Bertin’s Visual Variables
![Page 6: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/6.jpg)
Bertin’s Visual Variables
![Page 7: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/7.jpg)
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
![Page 8: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/8.jpg)
Visual Variables + Attributes
Size Value Hue Orientation Texture Shape Position
Ass
ocia
tive
Sel
ectiv
e
Ord
ered
Qua
ntita
tive
Leng
th
![Page 9: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/9.jpg)
How Did We Do?
Bertin chart comparing variables and attributes
![Page 10: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/10.jpg)
Andy Rutledge tests your design knowledge with 6 Qs
http://www.andyrutledge.com
![Page 11: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/11.jpg)
1. In which of these examples is the logo larger?
![Page 12: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/12.jpg)
1. In which of these examples is the logo larger?
![Page 13: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/13.jpg)
2. Which of the two compositions evokes visual discomfort? Why?
![Page 14: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/14.jpg)
3. Which of these two line examples better communicates excitement?
![Page 15: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/15.jpg)
4. What function(s) is/are served by the structural elements in figure A?
A B
![Page 16: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/16.jpg)
5. Which arrangement requires less eye movement to take in an article?
A B
![Page 17: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/17.jpg)
6. Which grid is “quieter”?
A B
![Page 18: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/18.jpg)
Design Principles: CRAP
Contrast• Differentiation
Repetition• Consistency
Alignment• Placement
Proximity• Grouping
![Page 19: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/19.jpg)
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.
![Page 20: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/21.jpg)
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.
![Page 22: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/22.jpg)
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).
![Page 23: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/23.jpg)
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?
![Page 24: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/24.jpg)
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.
![Page 25: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/25.jpg)
Game Show Time
Okay everyone,
![Page 26: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/26.jpg)
Game Show Time
Okay everyone, let's plaaaaaaaaaaaay:
![Page 27: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/27.jpg)
Game Show Time
Okay everyone, let's plaaaaaaaaaaaay:
Spotthe
CRAP!
![Page 33: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/33.jpg)
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
![Page 34: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/34.jpg)
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!
![Page 35: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/35.jpg)
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.
![Page 36: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/36.jpg)
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.
![Page 37: 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](https://reader035.vdocuments.mx/reader035/viewer/2022062516/56649dc45503460f94ab6b3a/html5/thumbnails/37.jpg)
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.