Download presentation
Presentation is loading. Please wait.
Published byRonan Passe Modified over 9 years ago
1
Graphic Design The “look & feel” The system of imagery
2
Graphic Design It shares aspects of engineering, but with aesthetic, communicative aspects and consumer appeal.
3
Graphic Design As a practice, it has been around for thousands of years.
4
Graphic Design With the industrial revolution, art and design began to diverge.
5
Graphic Design In the US, it grew into a profession after WWII.
6
Graphic Design It relies on a BALANCE and integration of: & feel
7
Graphic Design Objective: relies on quantitative studies, like usability and legibility measures. Does the “look and feel” work?
8
Graphic Design Subjective: “look and feel” relies on subjective judgement by experts, depends on contextual factors.
9
Graphic Design Subjective: “look and feel” Culture is learned, cultural meanings change, meanings can be multiple. Uniqueness is valued (not programmable).
10
Graphic Design You cannot empirically measure its subjective aspects, but it is rigorous in its own epistemological realm (knowledge base).
11
Graphic Design It is rigorous in its own epistemological realm. 1. Graphic Design experts. vs. 2. Deploying graphic design principles (anybody).
12
Graphic Design So what? Deploying graphic design principles will: - enhance your ability to communicate w/designers & feel
13
Graphic Design Deploying graphic design principles will: - enable you to create more user-friendly interfaces
14
Graphic Design Deploying graphic design principles will: - enhance the knowledge base of HCI, which is increasingly necessary with millions of users
15
Sep 21, Fall 2006IAT 41015 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons
16
Sep 21, Fall 2006IAT 41016 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters
17
Sep 21, Fall 2006IAT 41017 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
18
Sep 21, Fall 2006IAT 41018 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
19
Sep 21, Fall 2006IAT 41019 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
20
Sep 21, Fall 2006IAT 41020 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
21
Sep 21, Fall 2006IAT 41021 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
22
Sep 21, Fall 2006IAT 41022 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
23
Sep 21, Fall 2006IAT 41023 Role of Graphic Design The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
24
Sep 21, Fall 2006IAT 41024 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons
25
Sep 21, Fall 2006IAT 41025 Principles of Graphic Design Concept/Metaphor Hierarchy Clarity Consistency Alignment Proximity Contrast
26
Sep 21, Fall 2006IAT 41026 Principles: Concept/Metaphor Concept: what is the overarching idea that every visual aspect of the interface relates to? (It MUST be relevant) Metaphor: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart.
27
Sep 21, Fall 2006IAT 41027 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: (Means of “explaining” concept) If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart. desktop metaphor
28
Sep 21, Fall 2006IAT 41028 Principles: Hierarchy What are the relative “levels” of importance? What should the user see first? Second?
29
Sep 21, Fall 2006IAT 41029 Principles: Hierarchy What are the relative “levels” of importance?
30
Sep 21, Fall 2006IAT 41030 Principles: Hierarchy.
31
Sep 21, Fall 2006IAT 41031 Principles: Clarity Every element in an interface should have a reason for being there Make that reason clear! Less is more
32
Sep 21, Fall 2006IAT 41032 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
33
Sep 21, Fall 2006IAT 41033 Principles: Clarity White space
34
Sep 21, Fall 2006IAT 41034 Principles: Clarity
35
Sep 21, Fall 2006IAT 41035 Principles: Clarity White space
36
Sep 21, Fall 2006IAT 41036 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!
37
Sep 21, Fall 2006IAT 41037 Principles: Alignment Western world Start from top left Allows eye to parse display more easily
38
Sep 21, Fall 2006IAT 41038 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
39
Sep 21, Fall 2006IAT 41039 Principles: Alignment Grids - use them
40
Sep 21, Fall 2006IAT 41040 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
41
Sep 21, Fall 2006IAT 41041 Principles: Alignment Left, center, or right Ragged right or justified Choose one, use it everywhere Novices often center things Hard to read! No definition, calm, very formal Use only in small quantities Here is some new text
42
Sep 21, Fall 2006IAT 41042 Principles: Proximity Items close together appear to have a relationship Large distance implies -- no relationship Time
43
Sep 21, Fall 2006IAT 41043 Principles: Proximity Items close together appear to have a relationship Large distance implies -- no relationship Time
44
Sep 21, Fall 2006IAT 41044 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
45
Sep 21, Fall 2006IAT 41045 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
46
Sep 21, Fall 2006IAT 41046 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons
47
Sep 21, Fall 2006IAT 41047 Animation/Rollovers Blinking Good for grabbing attention, but easily becomes obnoxious; use very sparingly Reverse video, bold Good for making something stand out
48
Sep 21, Fall 2006IAT 41048 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons
49
Sep 21, Fall 2006IAT 41049 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
50
Sep 21, Fall 2006IAT 41050 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
51
Sep 21, Fall 2006IAT 41051 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
52
Sep 21, Fall 2006IAT 41052 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons
53
Sep 21, Fall 2006IAT 41053 Color Attributes Hue native color, pigment Saturation relative purity, brightness, or intensity of a color Value lightness or darkness of a color
54
Sep 21, Fall 2006IAT 41054 Color Use it for a purpose, not to just add some color in
55
Sep 21, Fall 2006IAT 41055 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
56
Sep 21, Fall 2006IAT 41056 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)
57
Sep 21, Fall 2006IAT 41057 How many small rectangles
58
Sep 21, Fall 2006IAT 41058 How many small rectangles
59
Sep 21, Fall 2006IAT 41059 How many small ovals
60
Sep 21, Fall 2006IAT 41060 How many small ovals
61
Sep 21, Fall 2006IAT 41061 Find the R
62
Sep 21, Fall 2006IAT 41062 Find the... V R Z M F G Q J C T D W A P
63
Sep 21, Fall 2006IAT 41063 Find the T
64
Sep 21, Fall 2006IAT 41064 Find the... V R Z M F G Q J C T D W A P
65
Sep 21, Fall 2006IAT 41065 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
66
Sep 21, Fall 2006IAT 41066 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”
67
Sep 21, Fall 2006IAT 41067 Color Palette Example of Color hierarchy
68
Sep 21, Fall 2006IAT 41068 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
69
Sep 21, Fall 2006IAT 41069 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)
70
Sep 21, Fall 2006IAT 41070 Agenda: The Role of Graphic Design Principles of Graphic Design Animation/Rollovers Typography Color Icons
71
Sep 21, Fall 2006IAT 41071 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
72
Sep 21, Fall 2006IAT 41072 Icon Design Represent object or action in a familiar and recognizable manner
73
Sep 21, Fall 2006IAT 41073 Icon Design Represent object or action in a familiar and recognizable manner
74
Sep 21, Fall 2006IAT 41074 Icon Design Represent object or action in a familiar and recognizable manner
75
Sep 21, Fall 2006IAT 41075 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
76
Sep 21, Fall 2006IAT 41076 Icon Legibility Settlers III
77
Sep 21, Fall 2006IAT 41077 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)
78
Sep 21, Fall 2006IAT 41078 Icon Design Is the symbolic aspect of the icon meaningful?
79
Sep 21, Fall 2006IAT 41079 Icon Design Is the symbolic aspect of the icon meaningful?
80
Sep 21, Fall 2006IAT 41080 Icon Design Is the symbolic aspect of the icon meaningful?
81
Sep 21, Fall 2006IAT 41081 Icon Design Meaning is ASCRIBED to icons -- they don’t have an essential, measurable “essence.”
82
Sep 21, Fall 2006IAT 41082 Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
83
Sep 21, Fall 2006IAT 41083 Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
84
Sep 21, Fall 2006IAT 41084 Role of Graphic Design in HCI The “look and feel” portion of an interface: What someone initially encounters Sets a framework for understanding content
85
Sep 21, Fall 2006IAT 41085 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.
86
Sep 21, Fall 2006IAT 41086 Eacmples - WarCraft II 2 Teams: Orcs & Humans Each team has unique biology: Collection of Team physiques Unique means of living Unique culture
87
Sep 21, Fall 2006IAT 41087 WarCraft II 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
88
Sep 21, Fall 2006IAT 41088 WarCraft II How Orcs live & eat Hog farms How humans Grain farms
89
Sep 21, Fall 2006IAT 41089 WarCraft II Orcs do war with offensive spells Humans have defensive spells
90
Sep 21, Fall 2006IAT 41090 WarCraft II Orc People Green Horns Orc Buildings Bone Leather Dark Cast Iron
91
Sep 21, Fall 2006IAT 41091 WarCraft II Human People “Flesh tone” humans Silver armor Human buildings Light wood Light-colored metal (roofs, etc)
92
Sep 21, Fall 2006IAT 41092 WarCraft II Invading Orc Town
93
Sep 21, Fall 2006IAT 41093 Examples Invading human town
94
Sep 21, Fall 2006IAT 41094 WarCraft II
95
Sep 21, Fall 2006IAT 41095 WarCraft II
96
Sep 21, Fall 2006IAT 41096 WarCraft II 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
97
Sep 21, Fall 2006IAT 41097 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
98
Sep 21, Fall 2006IAT 41098 Age of Empires/Kings Historical building style Historical costume
99
Sep 21, Fall 2006IAT 41099 Celts
100
Sep 21, Fall 2006IAT 410100 Celts
101
Sep 21, Fall 2006IAT 410101 Vikings
102
Sep 21, Fall 2006IAT 410102 Vikings
103
Sep 21, Fall 2006IAT 410103 China
104
Sep 21, Fall 2006IAT 410104 China
105
Sep 21, Fall 2006IAT 410105 Persia
106
Sep 21, Fall 2006IAT 410106 Turks
107
Sep 21, Fall 2006IAT 410107 Turks
108
Sep 21, Fall 2006IAT 410108 Byzantium
109
Sep 21, Fall 2006IAT 410109 Age of Kings Problems Tough to recognize foreign buildings Tough to recognize own buildings Where’s my stables? All Castles look very similar
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.