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, fixedfixed  Web (screen) – size is unknown, layout may be fixed or fluidfluid

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, [actually ], is achieved where A/B = B/C.

Visual Design : Golden Ratio (2/3) SourceSource: Design and the Divine Proportion

Visual Design : Golden Ratio (3/3) SourceSource: Design and the Divine Proportion

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. SourceSource: 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, photos2photos1photos2

Visual Design : Examples  URLGreyHot – navigationnavigation  Portfolio site – overall (see samples)overall  eCommerce – overall (clickables?)overall  Business – broken gridbroken grid  Inspiration: ZenGarden, DailySlurpZenGardenDailySlurp

Visual Design : Resources  Feeling Your Way Around Grids Feeling Your Way Around Grids  Design Grids For Web Pages Design Grids For Web Pages  Designing Blog Theme Templates 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 – Importance of Value  From Lynda.com Color Principles Lecture – Relative Value (11.110)Relative Value

Color Resources  Choosing Effective Color Schemes Choosing Effective Color Schemes  Why Color Matters Why Color Matters  Tool: Color Harmony ChooserColor Harmony Chooser  Browser Safe Palette Browser Safe Palette

Discussion Leaders  A look at web design practice  Other design resources: Google’s Golden Triangle (“F” shape) and study press release Google’s Golden Triangle study press release EyeTracking Research (blog)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

Card sort (3/3)  Category refinement = taxonomy  Examples: