Visual design The “look” of your interface
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Visual design
The “look” of your interface
Agenda
Poster information Errors review Visual design
Poster
March 11 (first class after spring break) Present (at least) 3 design possibilities, get
feedback Organization:
– General topic, perhaps scenario, users, requirements, etc.
– At least 3 DIFFERENT designs – sketches, storyboards, perhaps descriptions or features
– You can bring whatever else you have Materials: whatever you like
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
Graphic Design
A comprehensible mental image Appropriate organization of data, functions, tasks and roles High-quality appearances
The “look”
Effective interaction sequencing The “feel”
Classes at UNCC– http://www.uncc.edu/schedule/subject/artg.html
Classes at CPCC– http://www.cpcc.edu/course%5Fdescriptions/grd/
Graphic Design
Involves knowledge of:– Sequencing– Organization– Layout– Imagery– Color– Typography
Graphic Design Principles
Metaphor Clarity Consistency Alignment Proximity Contrast
Clarity
Every element in an interface should have a reason for being there
– Make that reason clear too!
White/open space– Leads the eye– Provides symmetry and balance– Strengthens impact of message– Allows eye to rest between elements of activity– Used to promote simplicity, elegance, class, refinement
Example
Clear, cleanappearance
Opinion?
Example
Does this convey different impressions?
Clarity via “White” Space
White = Open
Consistency
In layout, color, images, icons, typography, text, …
Within screen, across screens Stay within metaphor everywhere
Platform may have a style guide– Follow it!
Example
Home page Content page 1 Content page 2
www.santafean.com
Alignment
Western world– Start from top left
Novices often center things– No definition, calm, very formal
Grids– (Hidden) horizontal and vertical lines to help locate window
components– Align related things– Group items logically
Grids – use them
http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=design
Layout Grids
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Three Column Layout Grids
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Symmetry vs. Asymmetry
Beware of too much symmetry
Proximity
Items close together appear to have a relationship
Distance implies no relationship
Time:
Time
Example
Name
Addr1
Addr2
City
State
Phone
Fax
Name
Addr1Addr2
CityState
PhoneFax
Name
Addr1Addr2
CityState
PhoneFax
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
Slide fromSaul Greenberg
Haphazard layoutfrom mullet & sano
Repairing a Haphazard layoutfrom mullet &sano
Economy of visual elements
– Minimize number of controls
– Include only those that are necessary eliminate, or relegate others to secondary windows (but don’t want too many extra windows!)
– Minimize clutter so information is not hidden
Example
Overuse of3D effects
Contrast
Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus
Example
IBM's Aptiva Communication Center
Example
Visual noise
Color
Use for a purpose and sparingly Draw attention, communicate organization, to
indicate status, to establish relationships, aid search Use redundant cues
– Color-blindness– Enhances performance
Be consistent with color associations from jobs and cultures
How many small ovals?
Now how many small ovals?
Yellow– happy, caution, joy
Brown– warm, fall, dirt, earth
Green– go, on, safe, envy, lush,
pastoral
Purple– royal, sophisticated, Barney
Color Meanings: Contextually Specific
Red– aggression, love – hot, warning, stop, radiation
Pink– female, cute, cotton candy
Orange– warm, autumn, Halloween
Blue– cold, off
Color Meanings: Culturally Specific
http://www.ricklineback.com/culture2.htm
Legibility and readability
Characters, symbols, graphical elements should be easily noticable and distinguishable
Text set in Braggadocio
Text set in Helvetica
TEXT SET INCAPITOLS
Text set in Times Roman
Saul GreenbergU. Calgary
Legibility and readability
Proper use of typography – 1-2 typefaces (3 max)– normal, italics, bold– 1-3 sizes max
LargeMediumSmall
LargeMediumSmall
Readable
Design components to be inviting and attractive
Design components to be inviting and attractive
Unreadable
Design components to be inviting and attractive
Design components to be inviting and attractive
Saul GreenbergU. Calgary
Remember
Form follows function– Visual elements should help convey purpose and meaning
Be consistent Just like all design – iterate and get feedback!!
Let’s analyze:– http://www.cnn.com/ & http://www.nytimes.com/– http://www.microsoft.com/
Related Documents
