Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello...
Transcript of Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello...
![Page 1: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/1.jpg)
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
![Page 2: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/2.jpg)
![Page 3: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/3.jpg)
![Page 4: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/4.jpg)
![Page 5: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/5.jpg)
![Page 6: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/6.jpg)
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.”
![Page 7: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/7.jpg)
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.
![Page 8: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/8.jpg)
Web Design PatternsWeb patterns important and persistent(!)
Source: van Duyne, Doug and James Landay and Jason Hong. The Design of Sites. Prentice Hall, 2006.
![Page 9: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/9.jpg)
Examples: Web Design Patterns
Source: van Duyne, Doug and James Landay and Jason Hong. The Design of Sites. Prentice Hall, 2006.
![Page 10: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/10.jpg)
![Page 11: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/11.jpg)
![Page 12: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/12.jpg)
Jan Tschichold’s Revolution
Champion of Modernist Typography
Die Neue TypographieBerlin, 1928
Bauhaus schoolDessau, 1925-26
![Page 13: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/13.jpg)
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.”
![Page 14: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/14.jpg)
Type Classifications
Sans Serif Serif
![Page 15: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/15.jpg)
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
![Page 16: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/16.jpg)
Grid SystemsA key pattern for implementing rationality, modernism, asymmetryNote that no elements are “centered”
Java Look and Feel Design Guidelines
![Page 17: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/17.jpg)
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
![Page 18: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/18.jpg)
Small Multiples
Economy of lineMany similarities enable us to notice differences
IMAGE REMOVED
![Page 19: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/19.jpg)
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/
![Page 20: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/20.jpg)
Reid Miles, Blue Note CoverS M A L L M U L T I P L E S
![Page 21: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/21.jpg)
Tree Maps (SmartMoney)
![Page 22: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/22.jpg)
Tree Maps (PhotoMesa)
![Page 23: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/23.jpg)
Design Galleries
![Page 24: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/24.jpg)
Design Galleries
![Page 25: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/25.jpg)
London Underground
![Page 26: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/26.jpg)
Color Spaces
![Page 27: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/27.jpg)
Technology-Centered Colors
Nice Hex codes, “evenly” distributedBut yowch! Lime green and hot pink?
![Page 28: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/28.jpg)
Human-Centered ColorsMunsell (left): Perceptually basedPantone (right): Functionally based
Anne Spalter, The Computer in the Visual Arts
![Page 29: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/29.jpg)
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
![Page 30: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/30.jpg)
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)
![Page 31: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/31.jpg)
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/
![Page 32: Visual Design - Stanford HCI Group · 10/23/2007 · Visual Design Scott Klemmer tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano. Quotes: Mihai Nadin](https://reader034.fdocuments.in/reader034/viewer/2022050202/5f5618063e81f62ba55dfa93/html5/thumbnails/32.jpg)
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/