Graphic Design : Graphic Design The “look & feel”
Graphic Design : Graphic Design It shares aspects of engineering, but with aesthetic, communicative aspects and consumer appeal.
Graphic Design : Graphic Design As a practice, it has been around for thousands of years.
Graphic Design : Graphic Design With the industrial revolution, art and design began to diverge.
Graphic Design : Graphic Design In the US, it grew into a profession after WWII.
Graphic Design : Graphic Design It relies on a BALANCE and integration of:
& feel
Graphic Design : Graphic Design Objective: relies on quantitative studies, like usability and legibility measures. Does the “look and feel” work?
Graphic Design : Graphic Design Subjective: “look and feel” relies on subjective judgement by experts, depends on contextual factors.
Graphic Design : Graphic Design Subjective: “look and feel” Culture is learned, cultural meanings change, meanings can be multiple. Uniqueness is valued (not programmable).
Graphic Design : Graphic Design You cannot empirically measure its subjective aspects, but it is rigorous in its own epistemological realm (knowledge base).
Graphic Design : Graphic Design It is rigorous in its own epistemological realm.
1. Graphic Design experts.
vs.
2. Deploying graphic design principles (anybody).
Graphic Design : Graphic Design So what?
Deploying graphic design principles will:
- enhance your ability to communicate w/designers
& feel
Graphic Design : Graphic Design Deploying graphic design principles will:
- enable you to create more user-friendly interfaces
Graphic Design : Graphic Design Deploying graphic design principles will:
- enhance the knowledge base of HCI, which is increasingly necessary with millions of users
Agenda: : Agenda: The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Conveys an impression, mood
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Role of Graphic Design : Role of Graphic Design The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Agenda: : Agenda: The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Principles of Graphic Design : Principles of Graphic Design Concept/Metaphor
Hierarchy
Clarity
Consistency
Alignment
Proximity
Contrast
Principles: Concept/Metaphor : Principles: Concept/Metaphor Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant)
Metaphor: (specific subset of concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart.
Principles: Concept/Metaphor : Principles: Concept/Metaphor Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant)
Apple: accessible, fun, familiar; “for the rest of us”
Metaphor: (specific subset of concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. desktop metaphor
Principles: Hierarchy : Principles: Hierarchy What are the relative “levels” of importance?
What should the user see first? Second?
Principles: Hierarchy : Principles: Hierarchy What are the relative “levels” of importance?
Principles: Hierarchy : Principles: Hierarchy .
Principles: Clarity : Principles: Clarity Every element in an interface should have a reason for being there
Make that reason clear!
Less is more
Principles: Clarity : Principles: Clarity White space
Leads the eye
Provides symmetry and balance through its use
Strengthens impact of message
Allows eye to rest between elements of activity (increases legibility)
Used to promote simplicity, elegance, refinement
Principles: Clarity : Principles: Clarity White space
Principles: Clarity : Principles: Clarity White space
Principles: Consistency : Principles: Consistency Be consistent in every aspect:
In layout, color, images, icons, typography, text
Within screen, across screens
Stay within metaphor everywhere
Platform may have a style guide -- follow it!
Principles: Alignment : Principles: Alignment Western world
Start from top left
Allows eye to parse display more easily
Principles: Alignment : Principles: Alignment Grids - use them
Principles: Alignment : Principles: Alignment Grids
(Hidden) horizontal and vertical lines to help locate window components
Align related things
Group items logically
Minimize number of controls, reduce clutter
Principles: Alignment : Principles: Alignment Grids
(Hidden) horizontal and vertical lines to help locate window components
Align related things
Group items logically
Minimize number of controls, reduce clutter
Principles: Alignment : Principles: Alignment Left, center, or right
Choose one, use it everywhere
Novices often center things
No definition, calm, very formal
Use only in small quantities (hard to read) Here is some new text Here is some new text Here is some new text
Principles: Proximity : Principles: Proximity Items close together appear to have a relationship
Large distance implies -- no relationship Time
Principles: Proximity : Principles: Proximity Items close together appear to have a relationship
Large distance implies -- no relationship Time
Principles: Contrast : Principles: Contrast Pulls you in
Guides your eyes around the interface
Supports skimming
Take advantage of contrast to guide user through hierarchy of information; add focus; or to energize an interface with “texture”
Can be used to distinguish active control
Principles: Contrast : Principles: Contrast Can be used to set off most important item
Allow it to dominate
Ask yourself what is the most important item in the interface, highlight it
Use geometry to help sequencing
Agenda: : Agenda: The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Animation/Rollovers : Animation/Rollovers Blinking
Good for grabbing attention, but easily becomes obnoxious; use very sparingly
Reverse video, bold
Good for making something stand out
Agenda: : Agenda: The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Typography: White space : Typography: White space White space
Leads the eye
Provides symmetry and balance through its use
Strengthens impact of message
Allows eye to rest between elements of
activity (increases legibility)
Used to promote simplicity, elegance, refinement
Typography: Hierarchy : Typography: Hierarchy How do you lead the user through visual
information (by visual means)?
Some traditional navigation devices (conventions):
Size
Color
Composition (where it is on the rectangle)
Page numbers
Type and Image emphases
Typography : Typography Characters and symbols should be easily noticeable and distinguishable
AVOID HEAVY USE OF ALL UPPERCASE
Studies have found that: mixed case promotes fastest reading and that 55 characters per line is optimal
Agenda: : Agenda: The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Color Attributes : Color Attributes Hue
native color, pigment
Saturation
relative purity, brightness, or intensity of a color
Value
lightness or darkness of a color
Color : Color Use it for a purpose, not to just add some color in
Color Guidelines : Color Guidelines Display color images on black background
Avoid brown and green as background colors
Be sure foreground colors contrast (in both brightness and hue) with background colors
Color Guidelines : Color Guidelines Use color sparingly--Design in b/w then add color where appropriate
Use color to draw attention, communicate organization, to indicate status, to establish relationships
Avoid using color in non-task related ways
(experiment coming next)
How many small rectangles : How many small rectangles
How many small ovals : How many small ovals
Find the... : Find the... V R Z M F G Q J C T D W A P
Color Guidelines : Color Guidelines Color is good for supporting search
Do not use color without another redundant cue
Color-blindness
Monochrome monitors
Redundant coding enhances performance
Be consistent with color associations from jobs and cultures
Color Guidelines : Color Guidelines Limit coding to 8 distinct colors (4 better)
Avoid using saturated blues for text or small, thin lines
Use color on b/w or gray, or b/w on color
To express difference, use high contrast colors (and vice versa)
Make sure colors do not “vibrate”
Color Palette : Color Palette Example of Color hierarchy
Color Associations : Color Associations Red
hot, warning,
aggression, love
Pink
female, cute, cotton candy
Orange
autumn, warm, Halloween, Cell phone Yellow
happy, caution, joy
Brown
warm, fall, dirt, earth
Green
lush, pastoral, envy
Purple
royal, sophisticated, Barney Culturally specific, contextually specific
Color Palettes/Suites : Color Palettes/Suites Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)
Agenda: : Agenda: The Role of Graphic Design
Principles of Graphic Design
Animation/Rollovers
Typography
Color
Icons
Icon Design : Icon Design Relies on drawing ability -- hire someone to do it
(here are standards and ways to critique icon design)
Avoid meaningless, gratuitous use of icons
Too many icons quickly become illegible
Icon Design : Icon Design Represent object or action in a familiar and recognizable manner
Icon Design : Icon Design Represent object or action in a familiar and recognizable manner
Icon Design : Icon Design Represent object or action in a familiar and recognizable manner
Icon Legibility : Icon Legibility Limit number of different icons
Make icon stand out from background
Ensure that a singly selected icon is clearly visible when surrounded by unselected ones
Icon Legibility : Icon Legibility Make each icon distinctive (legible)
but
Make icons harmonious members of icon family
Avoid excessive detail
Accompany with names
(though it shouldn’t be necessary)
Icon Design : Icon Design Is the symbolic aspect of the icon meaningful?
Icon Design : Icon Design Is the symbolic aspect of the icon meaningful?
Icon Design : Icon Design Is the symbolic aspect of the icon meaningful?
Icon Design : Icon Design Meaning is ASCRIBED to icons -- they don’t have an essential, measurable “essence.”
Role of Graphic Design in HCI : Role of Graphic Design in HCI The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Role of Graphic Design in HCI : Role of Graphic Design in HCI The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Role of Graphic Design in HCI : Role of Graphic Design in HCI The “look and feel” portion of an interface:
What someone initially encounters
Sets a framework for understanding content
Graphic Design : Graphic Design Like any design job, there must be a logic to the visual design
The logic drives
Color scheme
Materials choices
Lighting style
Fonts
etc.
Eacmples - WarCraft : Eacmples - WarCraft 2 Teams: Orcs & Humans
Each team has unique biology:
Collection of Team physiques
Unique means of living
Unique culture
WarCraft : WarCraft Culture manifests itself:
What they eat
How they work
How they live
How they kill
How they die
How they live:
Choice of building materials
Choice of fighting styles
WarCraft : WarCraft How Orcs live & eat
Hog farms
How humans
Grain farms
Warcraft : Warcraft Orcs do war with offensive spells
Humans have defensive spells
WarCraft : WarCraft Orc People
Green
Horns
Orc Buildings
Bone
Leather
Dark Cast Iron
WarCraft : WarCraft Human People
“Flesh tone” humans
Silver armor
Human buildings
Light wood
Light-colored metal (roofs, etc)
WarCraft : WarCraft Invading Orc Town
Examples : Examples Invading human town
Warcraft : Warcraft
WarCraft : WarCraft
WarCraft Problems : WarCraft Problems This stark contrast causes problems
Why are Orcs chopping wood?
Why is the Orc woodshed a big, hollow log?
Violates the Orc bone-and-leather look
On the sea, similar problems
These problems arise because of game play
Example: Age of Empires/Kings : Example: Age of Empires/Kings Logic: Numerous historical civilizations do battle
Each civilization specializes
Special force elements
Special resource-gathering
Special Wonders-of-the-world
Age of Empires/Kings : Age of Empires/Kings Historical building style
Historical costume
Celts : Celts
Celts : Celts
Vikings : Vikings
Vikings : Vikings
China : China
China : China
Persia : Persia
Turks : Turks
Turks : Turks
Byzantium : Byzantium
Age of Kings : Age of Kings Problems
Tough to recognize foreign buildings
Tough to recognize own buildings
Where’s my stables?
All Castles look the same