1 / 42

490F Visual Design

490F Visual Design. Outline. Simplification Small Multiples Typography & Grid systems Things to Avoid Color Proportion & Scale Design economy Visualization. Quotes: Mullet and Sano.

hana
Download Presentation

490F Visual Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 490F Visual Design

  2. Outline • Simplification • Small Multiples • Typography & Grid systems • Things to Avoid • Color • Proportion & Scale • Design economy • Visualization

  3. 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.”

  4. 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.”

  5. 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.”

  6. Simplification & Reduction

  7. London Underground

  8. Small Multiples • Economy of line • Many similarities enable us to notice differences

  9. S M A L L M U L T I P L E S International Women’s Day Echeverria, Heriberto 1971March 8 - International Women’s Day Diaz, Estela 1974 March 8 - International Women’s Day Cuban Poster Art Gallery, http:///www.sims.berkeley.edu/~lcush/GenCat.html/

  10. S M A L L M U L T I P L E S Reid Miles, Blue Note Cover

  11. Jan Tschichold’s Revolution • Champion of Modernist Typography Die Neue Typographie Berlin, 1928 Bauhaus schoolDessau, 1925-26

  12. Sans Serif Serif Type Classifications • Typeface (Arial) vs Font (Arial Bold) • Serifs: Structural details in letters that help the reader connect them

  13. J A N T S C H I C H O L D 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).

  14. Grid Systems • A key pattern for implementing rationality, modernism, asymmetry • Note that no elements are “centered” Java Look and Feel Design Guidelines

  15. 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 Bringhurst The Elements of Typographic Style “Information consists of differences that make a difference.” – Edward TufteEnvisioning Information

  16. Avoid • Clutter • Too much in each screen • Hard to scan IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces

  17. Avoid Interference between competing elements IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces

  18. Avoid Excessive Detail & Dimensionality IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces

  19. Avoid Overly literal translation IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces

  20. Avoid Arbitrary Component Dimensions Random Window Sizes and Layouts IMG: Kevin Mullet and Darrell Sano, Designing Visual Interfaces

  21. Avoid “Pridefully Obvious Presentation”

  22. Color • Hue is gradation of colour • Saturation/purity is intensity of the hue • Luminance is the brightness in an image Photo Hue Saturation Luminance

  23. Color Spaces

  24. Technology-Centered Colors • Nice Hex codes, “evenly” distributed • But yowch! Lime green and hot pink?

  25. Human-Centered Colors • Munsell (left): Perceptually based • Pantone (right): Functionally based Anne Spalter, The Computer in the Visual Arts

  26. 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 GUIRlogo#AF2534 Web Safe#993333

  27. Color (Java L&F) • Six color semantic scheme • Clean, consistent look • Easy on eyes (mostly gray)

  28. Color: (Edward Tufte) IMAGE REPLACED using color hues for altitude – can’t tell whatis land & what is sea

  29. Color: Edward Tufte IMAGE REPLACED Using luminance instead for altitude. Sea is shades of blue (darker -> deeper) and land is brown(& in the replacement image, green) (darker -> higher). Better.

  30. How to get color right • Design in grayscale first • Keep luminance values from grayscale when moving to color

  31. Scale

  32. Proportion and Scale Kevin Mullet and Darrell Sano, Designing Visual Interfaces

  33. Palm’s Design Economy

  34. Visualization • Tree maps • Design Galleries

  35. Tree Maps (SmartMoney)

  36. Tree Maps (PhotoMesa)

  37. Design Galleries

  38. Design Galleries

  39. 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

  40. 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/

  41. 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/

  42. 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

More Related