Visual Design, Info Design 20 Feb 2006
Recap: Genres (1/2)
Group – reach agreement on the definition of your web site class/genre.
Individually: Find three sites that you believe best epitomize
the genre. Also, try to find at least one that categorically fits but visually breaks the genre.
Identify what “makes” this genre immediately self-apparent – regardless of entry point
Identify content types found in this genre
Recap: Genres (2/2)
Regroup tonight – discuss – reach consensus. Try to agree on one or two example sites. What do they have in common? Color? Type? Grid? Page width?
Visual Design
Kelly Goto – video Core process: design the visual interface Iterative redesign case study
Grid How does Gestalt theory play here?
Color
Visual Design : The Grid
A grid orders the elements on a page – whether the page is literal (paper) or figurative (a screen)
Paper (print) – size is known, fixed Web (screen) – size is unknown,
layout may be fixed or fluid
Visual Design : Golden Ratio (1/3)
The Golden Ratio (or the Divine Proportion, Golden Mean, Golden Rectangle, etc) is a visual representation of a number called Phi (pronouned fi) … it’s found throughout nature -- in space, physics, DNA, math, art, architecture (see Greek or Egyptian works)
The Golden Ratio is a measurement between two segments of a whole. If line “A” has two unequal parts, “AB” and “BC” – the golden ratio, 1.618 [actually 1.618033988749895], is achieved where A/B = B/C.
The Nautilus Shell Once you start
splitting a golden rectangle by the ratio, you can keep sub-splitting it down forever. The spiral this produces exactly matches the growth of the Nautilus shell in nature.
Source: Anyone for thirds?
Visual Design: Rule of Thirds Simplified Golden Mean Symmetrical design is, usually,
boring. Most designs can be made more visually interesting by mentally dividing the area (page, photo) into thirds vertically and horizontally and placing the most important elements within those thirds.
Examples: photos1, photos2
Visual Design : Examples
URLGreyHot – navigation Portfolio site – overall (see samples) eCommerce – overall (clickables?) Business – broken grid Inspiration: ZenGarden, DailySlurp
Visual Design : Resources
Feeling Your Way Around Grids Design Grids For Web Pages Designing Blog Theme Templates
Color Models
Computer monitors use additive color model : RGB Projected light
Printers use subtractive color model : CMYK Reflected light
Color – Three Primaries Red: #ff0000 or
#f00 in CSS Blue: #0000ff or
#00f in CSS Yellow: #ffff00 or
#ff0 in CSS
Color – The Secondaries Orange: #ff9900 or
#f90 in CSS Green: #00ff00 or
#0f0 in CSS Purple: #ff00ff or
#f0f in CSS
Color – The Tertiaries Yellow-Orange:
#ffcc00 or #fc0 in CSS Red-Orange: #ff6600
or #f60 in CSS Red-Purple: #cc00cc
or #c0c in CSS Blue-Purple: #9900ff
or #90f in CSS Blue-Green: #00cccc
or #0cc in CSS Yellow-Green: #ccff00
or #cf0 in CSS
Color Harmony
Analogous color: side-by-side on color wheel
Complementary color: opposites on the color wheel
Triads: where the points of an equilateral triangle touches the color wheel
Color Resources
Choosing Effective Color Schemes Why Color Matters Tool: Color Harmony Chooser Browser Safe Palette
Discussion Leaders
A look at web design practice Other design resources:
Google’s Golden Triangle (“F” shape) and study press release
EyeTracking Research (blog)
Sitemaps (1/2)
Organizing content – the backbone of your information architecture
It is human tendency to organize things to make them easier to retrieve
Sitemaps (2/2)
How to learn how people think about your content Observe Visit competitor web sites Evaluate server logs Card sorts
Card sort (1/3)
List of information by topic Cards (or post-it notes for affinity
diagram) Group Name the group
Card sort (2/3)
Look for patterns – dominant organization scheme
Adjust for consistency ID categories that don’t match
May be features May just be oddball
Test the resulting patterns