visual information design n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Visual Information Design PowerPoint Presentation
Download Presentation
Visual Information Design

Loading in 2 Seconds...

play fullscreen
1 / 29

Visual Information Design - PowerPoint PPT Presentation


  • 104 Views
  • Uploaded on

Visual Information Design. James Landay Jason Hong Scott Klemmer. Quotes: Mullet and Sano.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Visual Information Design' - sheena


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
visual information design

Visual Information Design

James Landay

Jason Hong

Scott Klemmer

quotes mullet and sano
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

quotes mihai nadin
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

quotes antoine de saint exupery
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

jan tschichold s revolution
Jan Tschichold’s Revolution
  • Champion of Modernist Typography

Die Neue Typographie Berlin, 1928

Bauhaus schoolDessau, 1925-26

User Interface Design, Prototyping, and Evaluation

type classifications

Sans Serif

Serif

Type Classifications

User Interface Design, Prototyping, and Evaluation

asymmetric typography

J A N T S C H I C H O L D

Asymmetric Typography

IMAGE REMOVED

How blocks used to be arranged in magazines. Schematic, thoughtless centring of blocks(= ugly).

The same blocks, correctly arranged in the same type-area. Constructive, meaningful, and economical (= beautiful).

User Interface Design, Prototyping, and Evaluation

grid systems
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

small multiples
Small Multiples
  • Economy of line
  • Many similarities enable us to notice differences

IMAGE REMOVED

User Interface Design, Prototyping, and Evaluation

international women s day

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

reid miles blue note cover

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

quotes bringhurst tufte
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

color spaces
Color Spaces

User Interface Design, Prototyping, and Evaluation

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

User Interface Design, Prototyping, and Evaluation

human centered colors
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

color is problematic
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

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

User Interface Design, Prototyping, and Evaluation

color edward tufte
Color: Edward Tufte

IMAGE REMOVED

User Interface Design, Prototyping, and Evaluation

color edward tufte1
Color: Edward Tufte

IMAGE REMOVED

User Interface Design, Prototyping, and Evaluation

proportion and scale
Proportion and Scale

Kevin Mullet and Darrell Sano, Designing Visual Interfaces

User Interface Design, Prototyping, and Evaluation

pridefully obvious presentation
“Pridefully Obvious Presentation”

IMAGE REMOVED

User Interface Design, Prototyping, and Evaluation

marks of typographic style
Marks of Typographic Style

Ligatures

Upper and lower case numbers

http://www.adobe.com/type/topics/info5.html

User Interface Design, Prototyping, and Evaluation

proper quotes
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

&#8220; “ Left Double Quotation &#8221; ” Right Double Quotation&#8216; ‘ Left Single Quotation&#8217; ’ Right Single Quotation

User Interface Design, Prototyping, and Evaluation

palm s design economy
Palm’s Design Economy

User Interface Design, Prototyping, and Evaluation

some starting points
Some Starting Points
  • Gather materials you find successful
    • Could be from a very different domain
  • Include visual design professionals in the iterative design cycle

User Interface Design, Prototyping, and Evaluation

further reading
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

further reading1
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