490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid...
-
Upload
gabriella-bennett -
Category
Documents
-
view
220 -
download
0
Transcript of 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid...
![Page 1: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/1.jpg)
490F
Visual Design
![Page 2: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/2.jpg)
Outline
• Simplification
• Small Multiples
• Typography & Grid systems
• Things to Avoid
• Color
• Proportion & Scale
• Design economy
• Visualization
![Page 3: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/3.jpg)
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 4: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/4.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 5: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/5.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 6: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/6.jpg)
Simplification & Reduction
![Page 7: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/7.jpg)
London Underground
![Page 8: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/8.jpg)
Small Multiples
• Economy of line
• Many similarities enable us to notice differences
![Page 9: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/9.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 10: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/10.jpg)
Reid Miles, Blue Note CoverS M A L L M U L T I P L E S
![Page 11: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/11.jpg)
Jan Tschichold’s Revolution
• Champion of Modernist Typography
Die Neue Typographie Berlin, 1928
Bauhaus schoolDessau, 1925-26
![Page 12: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/12.jpg)
Type Classifications
• Typeface (Arial) vs Font (Arial Bold)• Serifs: Structural details in letters that help the reader connect them
Sans Serif Serif
![Page 13: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/13.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 14: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/14.jpg)
Grid Systems• A key pattern for implementing
rationality, modernism, asymmetry
• Note that no elements are “centered”
Java Look and Feel Design Guidelines
![Page 15: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/15.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 Tufte Envisioning Information
![Page 16: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/16.jpg)
Avoid
• Clutter
• Too much in each screen
• Hard to scan
IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces
![Page 17: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/17.jpg)
Avoid
Interference between competing elements
IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces
![Page 18: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/18.jpg)
Avoid
Excessive Detail & Dimensionality
IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces
![Page 19: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/19.jpg)
Avoid
Overly literal translation
IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces
![Page 20: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/20.jpg)
Avoid
Arbitrary Component Dimensions
Random Window Sizes and LayoutsIMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces
![Page 21: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/21.jpg)
Avoid
“Pridefully Obvious Presentation”
![Page 22: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/22.jpg)
Color
• Hue is gradation of colour • Saturation/purity is intensity of the hue• Luminance is the brightness in an image
Photo Hue Saturation Luminance
![Page 23: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/23.jpg)
Color Spaces
![Page 24: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/24.jpg)
Technology-Centered Colors
• Nice Hex codes, “evenly” distributed
• But yowch! Lime green and hot pink?
![Page 25: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/25.jpg)
Human-Centered Colors
• Munsell (left): Perceptually based
• Pantone (right): Functionally based
Anne Spalter, The Computer in the Visual Arts
![Page 26: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/26.jpg)
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
• Key: no two monitors looks alike
GUIR logo
#AF2534
Web Safe#99333
3
![Page 27: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/27.jpg)
Color (Java L&F)
• Six color semantic scheme
• Clean, consistent look
• Easy on eyes (mostly gray)
![Page 28: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/28.jpg)
Color: (Edward Tufte)
IMAGE REPLACEDusing color hues for altitude – can’t tell what
is land & what is sea
![Page 29: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/29.jpg)
Color: Edward Tufte
IMAGE REPLACEDUsing luminance instead for altitude. Sea is shades of blue (darker ->
deeper) and land is brown(& in the replacement image, green) (darker -> higher). Better.
![Page 30: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/30.jpg)
How to get color right
• Design in grayscale first
• Keep luminance values from grayscale when moving to color
![Page 31: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/31.jpg)
Scale
![Page 32: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/32.jpg)
Proportion and Scale
Kevin Mullet and Darrell Sano, Designing Visual Interfaces
![Page 33: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/33.jpg)
Palm’s Design Economy
![Page 34: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/34.jpg)
Visualization
• Tree maps
• Design Galleries
![Page 35: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/35.jpg)
Tree Maps (SmartMoney)
![Page 36: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/36.jpg)
Tree Maps (PhotoMesa)
![Page 37: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/37.jpg)
Design Galleries
![Page 38: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/38.jpg)
Design Galleries
![Page 39: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/39.jpg)
Some Starting Points
• Gather materials you find successful– Could be from a very different domain– “Good artists borrow, great artists
steal” - Picasso
• Include visual design professionals in the iterative design cycle
![Page 40: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/40.jpg)
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 41: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/41.jpg)
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/
![Page 42: 490F Visual Design. Outline Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649da15503460f94a8d038/html5/thumbnails/42.jpg)
Summary
• Grid systems help us put information on the page in a logical manner– similar things close together
• Small changes help us see key differences (e.g., small multiples)
• Abstraction is a key to design• RGB color space leads to bad colors• Use color properly – not for ordering!• Avoid clutter