cognitive science + computer science
Visual Design
Scott Klemmer
Quiz 3• 7 minutes• Don’t start until instructed
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
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
Announcements• Piazza responses: we will respond
within 24 hours, do not expect immediate responses
• A6: Meat on the Bones