Index
Note: Page numbers followed by “b” and “f” refer to boxes and figures respectively.
A
A/B testing, 56
Accordions, 288–289
Aesthetics
colors, 7
consistency, 23–25
personality, 59–77
Affordances. See also Controls
defined, 267
hierarchy, 299–300
implication, 267
integrating motion, 293–298
flipping parts of screen, 295–296
progress indicators, 296–298
rollovers, 294
Alignment
grids and, in practice, 113–116
layout, 110–112
letterform, 141–142
Analytics, 58
Animation, 227–229
details, 228–229
primary characteristics, 227
use, 227–228
B
Backgrounds, 242–250
details, 243
primary characteristics, 242
use, 242–243
Balancing contrast, 192
Baseline, 141
Behavioral design, 53
Bias and disagreements, 80–81
Body typefaces, 144–145
Brightness, 185
Buttons, navigation controls, 271–272
C
Capital letters, 151
small caps, 151
Charts, consistency, 15–16
Chevreul, Michel, 192–193
Choosing paradigm, See Paradigm selection, consistency
Colors
aesthetics, 7
brightness, 185
common mistakes, 208–210
complementary, 192b–193b
consistency, 12–13
contrast, 187–193
balancing, 192
complementary, 189–191
of extension, 191–193
warm–cool, 187–189
defining rationale for, 193–208
case study, 197b–207b
error messaging, 180b–181b
hierarchy, 174–175
hue, 184–185
informed decisions, 210
making relationships visible, 175
symbolic relationships, 178
system relationships, 176–177
models, 183
RGB, 184
traditional, 183–184
overview, 171
primary, 183–184
requirements and constraints, 194
saturation, 184–185
secondary, 183
subtractive, 183
tone, 185–186
typesetting considerations, 152
value, 185
Column width, typesetting, 149–150
Complementary colors, 192b–193b
Complementary contrast, 189–191
Conceptual prototype, 56
Consistency
accessibility and, 25–26
aesthetics across platforms, 23–25
application design, 7–25
charts, 15–16
color, 12–13
common mistakes, 27
controls and affordances, 16–17
documenting decisions, 28
establishing, 4–7
external, 5–7
framework for, 4–7
icons, 14–15
imagery, 13–16
informed decisions, 27–28
internal, 5–7
logos, 15
motion, 17
paradigm selection, 17–23
treatments, 16
typography, 11
Content, personality, 81–83
Content representation, imagery, 217–219
Contextual inquiry, 55–56
Contrast
colors, 187–193
balancing, 192
complementary, 189–191
of extension, 191–193
warm–cool, 187–189
hierarchy, 37–42
Controls
affordances, See Affordances
case study, 301b–305b
data manipulation, 269, 273–288
direct, 282–288
form elements, 274–277
tap, 283
hierarchy, 299–300
inconsistency, 299b
information display, 269
accordions, 288–289
overlays, 289–292
sliding drawers, 292–293
navigation, 268–273
buttons and icons, 271–272
internal scrollbars, 270–271
links, 269–270
stepped progress indicators, 272
personality, 300–306
visual design, 267
Cool contrast, See Warm–cool contrast
Customer feedback, 58
D
direct, 282–288
form elements, 274–277
tap, 283
Data visualizations, 234–239
details, 234–237
primary characteristics, 234
use, 234
Decorative typefaces, See Display typefaces
Demographic data, 58
The Design of Everyday Things (Norman), 267
Direct data manipulation, 282–288
drag and drop, 283–285
sliders, 286–287
tapping, 283
Display typefaces, 145–146
Donis, Dondis A., 246
Drag and drop, 283–285
E
Effects, typesetting considerations, 152
Emotional Design: Why We Love (or Hate) Everyday Things (Norman), 53–54
Error messaging, colors and, 180b–181b
External consistency, 5–7
Eye behavior, 39
F
Flipping parts of screen, 295–296
Flow, hierarchy, 46–47
Fonts, 139–140
licensing programs, 148b
ornament and icon, 147–148
weights and styles, 142–144
G
Gestalt psychology, 37–39
Gradations, 242–250
details, 243
primary characteristics, 242
use, 242–243
Grids, 112–116
and alignment in practice, 113–116
H
Hierarchical system, 36
Hierarchy
characteristics, 37–42
contrast, 37–42
interplay of, 42–44
position, 37–41
treatment, 41–42
colors, 174–175
common mistakes, 49–50
concept, 34–37
controls, 299–300
creating, 33–34
defining, 44–49
flow, 46–47
identifying elements, 45–46
informed decisions, 50
layout, 118–119
list elements, 45–46
at multiple levels, 48–49
overview, 33–34
patterns, 47–48
perception, 33
prototyping and testing, 49
typography, 154–155
user scenarios, 45b
Holtzblatt, Karen, 55–56
Hue, 184–185
Hue, saturation, and brightness (HSB) wheel, 193
Hyman, Luke, 61–62
I
Icons, 231–233
consistency, 14–15
details, 231–232
fonts, 147–148
navigation controls, 271–272
primary characteristics, 231
use, 231
Identities, 80
Illustration, 226–227
details, 227
primary characteristics, 226–227
use, 227
Imagery
animation, 227–229
details, 228–229
primary characteristics, 227
use, 227–228
in applications, 250–261
backgrounds, 242–250
details, 243
primary characteristics, 242
use, 242–243
case study, 252–254
content representation, 217–219
data visualizations, 234–239
details, 234–237
primary characteristics, 234
use, 234
drawing attention, 216–217
examples and details, 217
expressing feeling, brand, or style, 219–220
gradations, 242–250
details, 243
primary characteristics, 242
use, 242–243
hierarchy, 262
icons, 231–233
details, 231–232
primary characteristics, 231
use, 231
illustration, 226–227
details, 227
primary characteristics, 226–227
use, 227
infographics, 238b
interactive graphics, 239–240
details, 240
primary characteristics, 239
use, 240
inviting interaction, 220–221
logos, 229–231
details, 229–231
primary characteristics, 229
use, 229
maps, 240–242
details, 242
primary characteristics, 240
use, 240–242
overview, 213–214
patterns, 242–250
details, 243
primary characteristics, 242
use, 242–243
personality, 262–263
photography, 222–225
details, 224–225
primary characteristics, 222
use, 224
role, 216
similarities and differences, 221
subject matter, 216
symbols, 233–234
details, 233–234
primary characteristics, 233
use, 233
textures, 242–250
details, 243
primary characteristics, 242
use, 242–243
types, 222–250
video, 225–226
details, 226
primary characteristics, 225
use, 225
Infographics, 238b
Information display control, 269
accordions, 288–289
overlays, 289–292
sliding drawers, 292–293
Integrating motion, affordances, 293–298
flipping parts of screen, 295–296
progress indicators, 296–298
rollovers, 294
Interactive graphics, 239–240
details, 240
primary characteristics, 239
use, 240
Internal consistency, 5–7
Internal scrollbars, 270–271
J
jQuery, 14
Justification, typesetting, 149–150
K
Kerning, 151
Krug, Steve, 7
L
Layout
alignment, 110–112
case study, 122b–131b
common mistakes, 135–136
consistency, 117–118
grids, 112–116
and alignment in practice, 113–116
hierarchy, 118–119
informed decisions, 136–137
language, 103–117
margins, 109
personality, 119–132
position, 104–106
proximity, 110
scale, 110–112
screen size, 103–104
templates, 116–117
merging, 130b–131b
white space, 106–110
Leading, 149
Letterform
alignment, 141–142
baseline, 141
midline, 141–142
Letter spacing, 151
kerning, 151
Licensing programs, fonts, 148b
Links, navigation controls, 269–270
List elements, 45–46
Logos, 229–231
consistency, 15
design, 15
details, 229–231
external consistency, 15
position, 15
primary characteristics, 229
use, 229
M
Maeda, John, xvi
Maps, 240–242
details, 242
primary characteristics, 240
use, 240–242
Margins, 109
Merging templates, 130b–131b
Midline, 141–142
Monospaced typefaces, 146–147
Motion, consistency, 17
Mullet, Kevin, 96
N
Navigation controls, 268–273
buttons and icons, 271–272
internal scrollbars, 270–271
links, 269–270
stepped progress indicators, 272
Nesting, 39
Newton, Isaac, 182
O
Organizational requirements, personality, 79–80
stakeholder interviews, 79
team workshops, 79
Ornament and icon, fonts, 147–148
Overlap, 39
Overlays, 289–292
P
Paradigm selection, consistency, 17–23
Pattern libraries, 272b–273b
Patterns, 242–250
details, 243
hierarchy, 47–48
primary characteristics, 242
use, 242–243
Personality, 156
aesthetics, 59–77
bias and disagreements, 80–81
case study, 83–96
clues in personas, 78–79
common mistakes, 99
content, 81–83
controls, 300–306
criteria for, 77–96
defined, 53
delivery types, 83–96
exploring possibilities, 96–99
framework, 53–54
identity requirements, 80
informed decisions, 99–100
layout, 119–132
organizational requirements, 79–80
stakeholder interviews, 79
team workshops, 79
special opportunities for, 75
Personas, 86
personality clues in, 78–79
Photography, 222–225
details, 224–225
primary characteristics, 222
use, 224
Position
hierarchy, 37–41
layout, 104–106
Primary colors, 183–184
Primer of Visual Literacy (Donis), 246
Progress indicators, 296–298
Prototyping, hierarchy, 49
Proximity, layout, 110
Q
Qualities, imagery, 216
R
Red, green, and blue (RGB) model, 184
Reflective design, 53
Research, 55b–58b
methods, 55–58
A/B testing, 56
conceptual prototype, 56
contextual inquiry, 55–56
semantic differentials, 56–58
sources, 58
analytics, 58
customer feedback, 58
demographic data, 58
Role, imagery, 216
Rollovers, 294
S
Sano, Darrell, 96
Sans serif typefaces, 140–141
Saturation, 184–185
Scale, layout, 110–112
Screens
consistency, 8
flipping parts of, 295–296
Screen size, layout, 103–104
Scrollbars, 270–271
Secondary colors, 183
Semantic differentials, 56–58
Serif typefaces, 140–141
Signals, 267–268
defined, 267
Sketchboarding, 98
Skeuomorphs, 245b–249b
Slab serif, 140–141
Sliders, 286–287
Sliding drawers, 292–293
Small caps, 151
Special opportunities for personality, 75
Stakeholder interviews, 79
Stepped progress indicators, 272
Styles, fonts, 142–144
Subject matter, imagery, 216
Subjective opinions, 56
Subtractive colors, 183
Symbolic relationships, colors and, 178
Symbols, 233–234
details, 233–234
primary characteristics, 233
use, 233
System relationships, colors and, 176–177
T
Tapping, 283
Team workshops, 79
Templates, layout, 116–117
merging, 130b–131b
Testing, hierarchy, 49
Textures, 242–250
details, 243
primary characteristics, 242
use, 242–243
Tone, 185–186
Traditional color model, 183–184
Treatments
consistency, 16
hierarchy, 41–42
Typefaces, 139–140
body, 144–145
display, 145–146
monospaced, 146–147
sans serif, 140–141
serif, 140–141
slab serif, 140–141
Typesetting considerations, 148–154
capital letters, 151
small caps, 151
color, 152
column width and justification, 149–150
effects, 152
leading, 149
letter spacing, 151
kerning, 151
type size, 148–149
weight, 149
Type size, 148–149
Typography
case study, 159b–165b
common mistakes, 166
defining rationale for, 156–166
fonts, 139–140
licensing programs, 148b
ornament and icon, 147–148
weights and styles, 142–144
hierarchy, 154–155
informed decisions, 166–168
language, 139–148
letterform
alignment, 141–142
baseline, 141
midline, 141–142
online, 139
overview, 139
personality, 156
types, 144–148
body typefaces, 144–145
display typefaces, 145–146
monospaced typefaces, 146–147
typesetting considerations, 148–154
capital letters, 151
color, 152
column width and justification, 149–150
effects, 152
kerning, 151
leading, 149
letter spacing, 151
small caps, 151
type size, 148–149
weight, 149
x-height, 142
U
V
Value, 185
Video, 225–226
details, 226
primary characteristics, 225
use, 225
Visceral design, 53
Visual design, controls, 267
Visual interface, criteria for, 89b–95b
Visual language, 3
Visual metaphors, 245b–248b
Visual Thinking for Design (Ware), 37
W
WAI, See Web Accessibility Initiative (WAI)
Ware, Colin, 37
Warm–cool contrast, 187–189
Web Accessibility Initiative (WAI), 25–26
Weights
fonts, 142–144
typesetting considerations, 149
White space, 106–110
X
X-height, 142
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.