Visual design The “look” of your interface. Role of Graphic Design What someone initially...
-
Upload
patrick-dawson -
Category
Documents
-
view
214 -
download
1
Transcript of Visual design The “look” of your interface. Role of Graphic Design What someone initially...
Visual design
The “look” of your interface
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
Graphic Design
Involves knowledge of:– Sequencing– Organization– Layout– Imagery– Color– Typography
Graphic Design Principles
Metaphor Clarity Consistency Contrast Alignment Proximity
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
Clarity via “White” Space
White = Open
Example
Home page Content page 1 Content page 2
www.santafean.com
Example
Clear, cleanappearance
Opinion?
Example
Does this convey different impressions?
Consistency
In layout, color, images, icons, typography, text, …
Within screen, across screens Stay within metaphor everywhere
Platform may have a style guide– Follow it!
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
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
Haphazard layoutfrom mullet & sano
Repairing a Haphazard layoutfrom mullet &sano
Example
Overuse of3D effects
Example
Visual noise
Contrast
Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus
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/