![Page 1: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/1.jpg)
Visual design
The “look” of your interface
![Page 2: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/2.jpg)
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
![Page 3: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/3.jpg)
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
![Page 4: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/4.jpg)
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
![Page 5: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/5.jpg)
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
![Page 6: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/6.jpg)
Graphic Design
Involves knowledge of:– Sequencing– Organization– Layout– Imagery– Color– Typography
![Page 7: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/7.jpg)
Graphic Design Principles
Metaphor Clarity Consistency Contrast Alignment Proximity
![Page 8: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/8.jpg)
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
![Page 9: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/9.jpg)
Clarity via “White” Space
White = Open
![Page 10: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/10.jpg)
Example
Home page Content page 1 Content page 2
www.santafean.com
![Page 11: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/11.jpg)
Example
Clear, cleanappearance
Opinion?
![Page 12: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/12.jpg)
Example
Does this convey different impressions?
![Page 13: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/13.jpg)
Consistency
In layout, color, images, icons, typography, text, …
Within screen, across screens Stay within metaphor everywhere
Platform may have a style guide– Follow it!
![Page 14: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/14.jpg)
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
![Page 15: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/15.jpg)
Grids – use them
![Page 16: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/16.jpg)
http://hotwired.lycos.com/webmonkey/98/28/
index4a_page2.html?tw=design
Layout Grids
![Page 17: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/17.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Three Column Layout Grids
![Page 18: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/18.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Symmetry vs. Asymmetry
Beware of too much symmetry
![Page 19: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/19.jpg)
Proximity
Items close together appear to have a relationship
Distance implies no relationship
Time:
Time
![Page 20: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/20.jpg)
Example
Name
Addr1
Addr2
City
State
Phone
Fax
Name
Addr1Addr2
CityState
PhoneFax
Name
Addr1Addr2
CityState
PhoneFax
![Page 21: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/21.jpg)
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
Slide fromSaul Greenberg
![Page 22: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/22.jpg)
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
![Page 23: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/23.jpg)
Haphazard layoutfrom mullet & sano
![Page 24: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/24.jpg)
Repairing a Haphazard layoutfrom mullet &sano
![Page 25: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/25.jpg)
Example
Overuse of3D effects
![Page 26: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/26.jpg)
Example
Visual noise
![Page 27: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/27.jpg)
Contrast
Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus
![Page 28: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/28.jpg)
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
![Page 29: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/29.jpg)
How many small ovals?
![Page 30: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/30.jpg)
Now how many small ovals?
![Page 31: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/31.jpg)
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
![Page 32: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/32.jpg)
Color Meanings: Culturally Specific
http://www.ricklineback.com/culture2.htm
![Page 33: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/33.jpg)
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
![Page 34: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/34.jpg)
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
![Page 35: Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content](https://reader035.vdocument.in/reader035/viewer/2022062722/56649f285503460f94c409de/html5/thumbnails/35.jpg)
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/