Visual Information Design
description
Transcript of Visual Information Design
![Page 1: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/1.jpg)
CS 160 Spring 2005
Visual Information Design
Slides fromProf. James Landay
![Page 2: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/2.jpg)
2
Outline
• Review
• Typography
• Grids
• Small multiples
• Color
• Proportion & scale
• Design economy
![Page 3: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/3.jpg)
3
![Page 4: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/4.jpg)
4
Quotes: Mullet and Sano
“Design is not something that can be applied after the fact, when the fundamental organization of the product has already been determined–though this is indeed a common misconception. To be effective, design must be an integral part of the product development lifecycle.”
![Page 5: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/5.jpg)
5
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 6: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/6.jpg)
6
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 7: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/7.jpg)
7
Jan Tschichold’s Revolution
• Champion of Modernist Typography
Die Neue Typographie Berlin, 1928
Bauhaus schoolDessau, 1925-26
![Page 8: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/8.jpg)
8
Type Classifications
Sans Serif Serif
![Page 9: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/9.jpg)
9
Grid Systems• A key pattern for implementing
rationality, modernism, asymmetry
• Note that no elements are “centered”
Java Look and Feel Design Guidelines
![Page 10: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/10.jpg)
10
Small Multiples
• Economy of line
• Many similarities enable us to notice differences
![Page 11: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/11.jpg)
11
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 12: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/12.jpg)
12
Reid Miles, Blue Note CoverS M A L L M U L T I P L E S
![Page 13: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/13.jpg)
13
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 Tufte Envisioning Information
![Page 14: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/14.jpg)
14
Color Spaces
![Page 15: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/15.jpg)
15
Technology-Centered Colors
• Nice Hex codes, “evenly” distributed
• But yowch! Lime green and hot pink?
![Page 16: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/16.jpg)
16
Human-Centered Colors• Munsell (left): Perceptually based
• Pantone (right): Functionally based
Anne Spalter, The Computer in the Visual Arts
![Page 17: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/17.jpg)
17
Color is problematic
• On-screen color varies widely from device to device for two reasons– The 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#99333
3
![Page 18: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/18.jpg)
18
Color (Java L&F)
• Six color semantic scheme
• Clean, consistent look
• Easy on eyes (mostly gray)
![Page 19: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/19.jpg)
19
Proportion and Scale
Kevin Mullet and Darrell Sano, Designing Visual Interfaces
![Page 20: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/20.jpg)
20
Marks of Typographic Style
http://www.adobe.com/type/topics/info5.html
Ligatures
Upper and lower case numbers
![Page 21: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/21.jpg)
21
Proper Quotes
• Distinguishing open from close makes reading easier
• Tags in HTML have open and close, e.g., <html> as opposed to |html|
• Many romance languages have open and close exclamation, question mark, e.g., ¡hay caramba!, ¿que pasa?
• Quotes “ ” have open and close too
Quotes in HTML
“ “ Left Double Quotation ” ” Right Double Quotation‘ ‘ Left Single Quotation’ ’ Right Single Quotation
![Page 22: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/22.jpg)
22
Palm’s Design Economy
![Page 23: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/23.jpg)
23
Some Starting Points
• Gather materials you find successful– Could be from a very different domain
• Include visual design professionals in the iterative design cycle
![Page 24: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/24.jpg)
24
Further Reading• Kevin Mullet and Darrell Sano,
Designing Visual Interfaces• Edward Tufte’s books and course• Anne Spalter,
The Computer in the Visual Arts• Robin Williams,
The Non-Designer’s Design Book• Typography
– Jan Tschichold, The New Typography– Robert Bringhurst,
The Elements of Typographic Style– http://www.adobe.com/type/
![Page 25: Visual Information Design](https://reader035.fdocuments.in/reader035/viewer/2022070416/56815027550346895dbe126e/html5/thumbnails/25.jpg)
25
Further Reading
• Color: Charles Poynton, A Technical Introduction to Digital Video– also his SIGGRAPH course– web http://www.inforamp.net/~poynton/
• Typography on the web– http://www.pemberley.com/janeinfo/
latin1.html– http://www.microsoft.com/typography/