1 / 32

Visual Information Design

Visual Information Design. Quotes: Mullet and Sano.

lenci
Download Presentation

Visual Information 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. Visual Information Design

  2. User Interface Design, Prototyping, and Evaluation

  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.” User Interface Design, Prototyping, and Evaluation

  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.” User Interface Design, Prototyping, and Evaluation

  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.” User Interface Design, Prototyping, and Evaluation

  6. Jan Tschichold’s Revolution • Champion of Modernist Typography Die Neue Typographie Berlin, 1928 Bauhaus schoolDessau, 1925-26 User Interface Design, Prototyping, and Evaluation

  7. Sans Serif Serif Type Classifications User Interface Design, Prototyping, and Evaluation

  8. 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). User Interface Design, Prototyping, and Evaluation

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

  10. 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 User Interface Design, Prototyping, and Evaluation

  11. Small Multiples • Economy of line • Many similarities enable us to notice differences IMAGE REMOVED User Interface Design, Prototyping, and Evaluation

  12. 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/ User Interface Design, Prototyping, and Evaluation

  13. S M A L L M U L T I P L E S Reid Miles, Blue Note Cover User Interface Design, Prototyping, and Evaluation

  14. Tree Maps (SmartMoney) User Interface Design, Prototyping, and Evaluation

  15. Tree Maps (PhotoMesa) User Interface Design, Prototyping, and Evaluation

  16. Design Galleries User Interface Design, Prototyping, and Evaluation

  17. Design Galleries User Interface Design, Prototyping, and Evaluation

  18. London Underground User Interface Design, Prototyping, and Evaluation

  19. Color Spaces User Interface Design, Prototyping, and Evaluation

  20. Technology-Centered Colors • Nice Hex codes, “evenly” distributed • But yowch! Lime green and hot pink? User Interface Design, Prototyping, and Evaluation

  21. Human-Centered Colors • Munsell (left): Perceptually based • Pantone (right): Functionally based Anne Spalter, The Computer in the Visual Arts User Interface Design, Prototyping, and Evaluation

  22. 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 GUIRlogo#AF2534 Web Safe#993333 User Interface Design, Prototyping, and Evaluation

  23. Color (Java L&F) • Six color semantic scheme • Clean, consistent look • Easy on eyes (mostly gray) User Interface Design, Prototyping, and Evaluation

  24. Color: Edward Tufte IMAGE REMOVED User Interface Design, Prototyping, and Evaluation

  25. Color: Edward Tufte IMAGE REMOVED User Interface Design, Prototyping, and Evaluation

  26. How to get color right • Design in grayscale first • Keep luminance values from grayscale when moving to color User Interface Design, Prototyping, and Evaluation

  27. Proper Quotes • Distinguishing open from close makes reading easier • Tags in HTML have open and close, e.g., <html> as opposed to |html| • Spanish has open and close exclamation, question mark, e.g., ¡hay caramba!, ¿que pasa? • Quotes “ ” have open and close too Quotes in HTML &#8220; “ Left Double Quotation &#8221; ” Right Double Quotation&#8216; ‘ Left Single Quotation&#8217; ’ Right Single Quotation User Interface Design, Prototyping, and Evaluation

  28. User Interface Design, Prototyping, and Evaluation

  29. 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 User Interface Design, Prototyping, and Evaluation

  30. 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/ User Interface Design, Prototyping, and Evaluation

  31. 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/ User Interface Design, Prototyping, and Evaluation

  32. Links • Periodic table of visualisations • Infothestics User Interface Design, Prototyping, and Evaluation

More Related