cognitive science + computer science

Visual Design

Scott Klemmer

Quiz 3• 7 minutes• Don’t start until instructed

A5 Examples

J Delaney, Michael Hohl, & Jennie Yoon

Tavish Grade, Raymond Liu, & Spencer Woo

Chonlada Woointranon, Young Jin Yun, & Arvind Kalathil

Carolyn Thio, Robert Cheng, & Ryan Gurney

What’s wrong with this interface?

Courtesy of Wikipedia: http://en.wikipedia.org/wiki/Text_figures (Hoefler Text, 1991)

Lowercase (aka old style)

Courtesy of Wikipedia: http://en.wikipedia.org/wiki/Font

http://www.adobe.com/type/topics/info5.html

Ligatures

Courtesy of Wikipedia: http://en.wikipedia.org/wiki/Serif

Sans Serif

Serif

Serifs Highlighted

Type Classifications

To learn more...• Robert Bringhurst, The Elements of

Typographic Style• Jennifer Tidwell, Designing Interfaces• Edward Tufte, Envisioning Information• Robin Williams, The Non-Designer’s

Design Book• Gary Hustwit, Helvetica

There are some useful heuristics like design for the longest title

Form alignment

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

Proportion and Scale

Kevin Mullet and Darrell Sano, Designing Visual Interfaces

Technology-Centered

Semantically Resonant Colors

Tree Maps (SmartMoney)

http://www.smartmoney.com/map-of-the-market/

Saccades

Image courtesy Wikipedia: http://en.wikipedia.org/wiki/Eye_tracking

Rob Haitani, Palm, courtesy Bill Moggridge’s Designing Interactions

The fold

Announcements• Piazza responses: we will respond

within 24 hours, do not expect immediate responses

• A6: Meat on the Bones