visual design - stanford hci group · 10/23/2007  · visual design scott klemmer tas: marcello...

stanford hci group / cs147

http://cs147.stanford.edu23 October 2007

Visual Design

Scott Klemmertas: Marcello Bastea-Forte, Joel Brandt,Neil Patel, Leslie Wu, Mike Cammarano

Quotes: Mihai Nadin

“Method helps intuition when it is not transformed into dictatorship. Intuition augments method if it does not instill anarchy. In every moment of our semiotic existence, method and intuition complement one another.”

The Importance of Patterns

Key optionsDesign patterns Designing by example

Users will work well with UI’s that build upon concepts that they are familiar with

Source: Alexander, Christopher. A Pattern Language. Oxford University Press, 1977. Klemmer, Scott, Examples Research.

Web Design PatternsWeb patterns important and persistent(!)

Source: van Duyne, Doug and James Landay and Jason Hong. The Design of Sites. Prentice Hall, 2006.

Examples: Web Design Patterns

Source: van Duyne, Doug and James Landay and Jason Hong. The Design of Sites. Prentice Hall, 2006.

Jan Tschichold’s Revolution

Champion of Modernist Typography

Die Neue TypographieBerlin, 1928

Bauhaus schoolDessau, 1925-26

Quotes: Antoine de Saint Exupery

“In anything at all, perfection is attained not when there is no longer anything to add, but when there is no longer anything to take away.”

Type Classifications

Sans Serif Serif

Asymmetric Typography

How blocks used to be arranged in magazines. Schematic, thoughtless centering of blocks(= ugly).

The same blocks, correctly arranged in the same type-area. Constructive, meaningful, and economical (= beautiful).

J A N T S C H I C H O L D

Grid SystemsA key pattern for implementing rationality, modernism, asymmetryNote that no elements are “centered”

Java Look and Feel Design Guidelines

Quotes: Bringhurst & Tufte

“Some space must be narrow so that other space may be wide, and some space must be emptied so that other space may be filled.”

– Robert BringhurstThe Elements of Typographic Style

“Information consists of differences that make a difference.”

– Edward TufteEnvisioning Information

Small Multiples

Economy of lineMany similarities enable us to notice differences

IMAGE REMOVED

International Women’s Day

Diaz, Estela 1974 March 8 - International Women’s Day

Echeverria, Heriberto 1971March 8 - International Women’s Day

S M A L L M U L T I P L E S

Cuban Poster Art Gallery, http:///www.sims.berkeley.edu/~lcush/GenCat.html/

Reid Miles, Blue Note CoverS M A L L M U L T I P L E S

Tree Maps (SmartMoney)

Tree Maps (PhotoMesa)

Design Galleries

Design Galleries

London Underground

Color Spaces

Technology-Centered Colors

Nice Hex codes, “evenly” distributedBut yowch! Lime green and hot pink?

Human-Centered ColorsMunsell (left): Perceptually basedPantone (right): Functionally based

Anne Spalter, The Computer in the Visual Arts

Color is problematic

On-screen color varies widely from device to device for two reasonsThe device may not be able to display that color (e.g. #AF5234), replacing it with something else

Web safe sometimes helps here

The presentation of that color

GUIR logo#AF2534

Web Safe#993333

Announcements

Flash Lite Tutorial Sequence 6p-8pTonight (Hewlett 200)Thursday (Hewlett 201)It will be RecordedRemember to sign up for experimental participation (there’s listings now)

Further ReadingKevin Mullet and Darrell Sano, Designing Visual InterfacesEdward Tufte’s books and courseAnne Spalter, The Computer in the Visual ArtsRobin Williams, The Non-Designer’s Design BookTypography

Jan Tschichold, The New TypographyRobert Bringhurst, The Elements of Typographic Stylehttp://www.adobe.com/type/

Further Reading

Color: Charles Poynton, A Technical Introduction to Digital Video

also his SIGGRAPH courseweb http://www.inforamp.net/~poynton/

Typography on the webhttp://www.pemberley.com/janeinfo/latin1.htmlhttp://www.microsoft.com/typography/