Numerics
2/2 document 249
2D graphic design 6
3D
animation 209
infographics 161
texture 49
4/4 document 249
10 point type 92
A
accessibility (web design)
clickable areas 232
links 232
scalable type 232
text equivalents for graphics 232
text and graphics 232
underline hyperlinks 232
video elements 232
accordion menus (web) 228
“aesthetics” term 2
alpha channel (transparency) 127
alternatives to photos
video and multimedia
components 153
animation
3D 209
duration 204
file formats 205
introduction 203
restraint 205
space and time 204
time 204
animation as focal point 151
Announcer (ANNCR) in storyboarding 189
apps, plug-ins and widgets 205–207
plug-ins 206
widgets 206
architect’s renderings 150
Arial font 91
aspect ratios
35mm film and digital
photography (1.5:1) 65
tablets and smartphones (1.78:1 or 1.33:1) 65
United States
cinema (1.85:1 or 2.35:1) 65
standard TV and computer
monitor (1.33:1) 65
Widescreen TV and computer
monitor (178:1) 65
audio
multimedia storytelling 197, 209
slideshows 199
balance
Bauhaus School of Design 115
binding types
“drilled” holes for 3-rings 249
perfect 249
saddle or staple stitch 249
velobinding 249
“blind emboss” 245
bold & italic
fonts 103
Braille 11
Brainstorming
cubing 16
fluent thinking 16
scamper 16
see also research and brainstorming
“Break a leg” term 189
bullets
lines 46
business cards 64
C
camera angle (storyboarding) 183
captions see cutlines
Cascading Style Sheets (CSS) for web
blogs 235
flexible assets 233
fonts 91
media queries 233
paragraph indicators 98
plug-ins/widgets 208
responsive web design 231
RGBA 127
social networking/media sites 235
tracking headlines 97
charts & graphs 162
Christmas colors 119
“Christmas, kings and blue jeans” term 116, 132
classical film lighting 187
closure (Gestalt theory) 44, 60, 61
“clotheslining” layout 83
CMYK colors 125, 126, 129–131, 132
collage layout 83
color
choice
Christmas 119
commercial printing 130
contrast 132
design
color palette and communication 122, 132
main color & accent color 122
spot color 125
visibility and readabililty 124
graphical user interface 229
hexadecimal code 127
logos 111
management 126
neutral gray 123
press check 255
retro 121
saturation 123
screen vs. printed 126
screening color for print 129
separation 129
splashes for visual emphasis 124–125
visibility & readability 124
visual impact 114
web 128
works-every-time 123
color relationships
primary 116
secondary 116
split complements 118
triads 117
color rules!
Christmas, kings and blue jeans 132
color “languages” 132
contrast 132
design 132
inspiration 131
palette 131
unity 132
colorblindness 11
columns
dummies 19
newspaper design 102
rhythm/pattern 57
vertical 69
works-every-time layout 22, 23
commercial/offset printing 244
Common Fate law 58
“complementary colors” 117
contact information (checklist for printers) 252
contact sheets (photographers) 148 “Content is king” (SEO) 221
content management system (CMS) 214, 218
content provision 14
continuity
contrast
color 132
design 44
fonts 54
Cooper Black typeface 5
corners & clutter 32–33, 37–38
Cowan-Neeld, Elizabeth 16
cutlines (captions)
rectangular story 76
works-every-time layout 22, 24
D
dark and light see value
data, multimedia storytelling 209
data visualization 175
De Mille, Cecil B. 189
deadlines 14
“deboss” 245
delivery and distribution 12–13
design
biology 10
co-ordination 11
colorblindness 11
communication 5
computers 5
conclusions
change 260
encouragement 261
hiring professionals 261
golden proportion 51–53, 68, 70
multimedia 209
pictures and words together in space 6–7
planning 6
principles
focal points/emphasis 44, 50–53
sidebars 78
type 86
visual 6
web pages 68
see also designing for the web; infographics
design
designing for the web
accessibility 232
communication 235
how the web works
adding sites to www 216
description 215
domain names 217
file transfer protocol 217–218
server space/web hosting 216
introduction 214
mobile web 229
websites
bend, don’t break 230
content management system 214, 218
graphical user interface 228
interface areas 227
professional designers 215
simple images and content 214
templates 214
diagrams & illustrations (infographics) 162, 176
die cutting 245
digital stock sites (photos) 146–147
direction of pictures 71
domain name server (DNS) 217
duration of animation 204
E
Eberle, Bob 16
“emboss” 245
embossing 245
en dashes 105
End User Licensing Agreements (ELUA) 91
EPS (Encapsulated Postscript) format 139, 142
ethics
F
faux fonts
Federal Trade Commission 145
fever charts 175
animation 205
photos 139
File Transfer Protocol (FTP)
blogs 235
printing 252
film noir lighting 187
focal point
animation 151
contrast 50
foil stamping 245
folios, printer proofs 254
fonts
10 point 92
Arial 91
Categories
decorative 89
introduction 86
old style 88
transitional 88
checklist for printers 252
contrast 54
description 86
display 99
families 86
glyphs 86
old style 88
pairings 111
parts 87
printer proofs 253
proofreading 250
script 90
spacing 95
tab & tab/dot leaders 97
tracking 97
Forestry Stewardship Council (FSI) 242
“form” term 2
“form follows function” term 2–3, 8
“fourth wall” (storyboarding) 181
“function” term 3
FX (visual effects) in storyboarding 189
G
Gestalt theory
application 61
infographics 170
introduction 58
laws
web page design 222
GIF (Graphic Interchange Format) 139, 141
glyphs 86
golden proportion 51–53, 68, 70
graphic design see design
“graphic design” term 6
graphical user interface (GUI)
breadcrumb trail 229
color 229
link names 228
pull-down menus 228
purpose of each page 228
search box 229
graphics packages 166
Greek text (stand in copy) 70
“greeking” 70
Green Seal 242
alleys and gutters 67
custom network 69
equal squares layout 83
focal point 69
HDTV 67
infographics design 172
live area/safe area 66
margins 66
“grip-and-grin” shot 137
H
hardcopy (checklist for printers) 252
HDTV grids 67
Headlines
layout 70
troublesome 77
works-every-time layout 22, 24–25
hexadecimal code for color 127
home page design (web)
headers 224
introduction 224
“hospital green” color 120
HTML (hypertext markup language) 231–232, 235
Hurricane Charley 170
HVAC (heating ventilation and air conditioning) diagram 165
I
illustrations
form to the imaginary 151
history 152
imagination to life 151
sensitive subject matter 151
see also photos and illustrations
images
checklist for printers 252
multimedia storytelling 209
quality 136
resolution 142
in-house printing 243
infographics
diagrams & illustrations 162, 176
dynamic generation 164
graphics packages 166
introduction 160
multimedia 165
next generation diagrams (web) 165
quality control 164
types
charts & graphs 162
diagrams 162
maps 162
sequences 162
text boxes 162
infographics design
data visualization 175
diagrams & illustrations 176
fever charts 175
introduction 170
parts
byline 171
callouts 171
explainer 171
headlines 171
source line 171
unity 172
timelines 176
black and white 173
credit 173
data maps 173
grids 172
groups 172
ornamentation 173
research 172
unity 172
writing length 173
initial and drop caps 104
interactivity
image galleries for slideshows 198
multimedia storytelling 209
web 220
International Color Consortium (ICC) 126
Internet service providers (ISPs) 215–216
interviews and monologues (talking heads) 200
Itten, Johannes 115
J
JPG (Joint Photographic Expert Group)
justification
newspaper design 102
K
“Ken Burns” effect in slideshows 197–198
key light (storyboarding) 186
KISS (keep it simple stupid) principle in video production 189
L
Layout
checklist for printers 252
print/web comparison 219
see also works-every-time layout
layout patterns
“clotheslining” 83
collage 83
grid of equal squares 83
mondrian 83
multipanel 83
type specimen 83
layout sins (amateur errors)
bulky borders & boxes 32–33, 36
corners & clutter 32–33, 37–38
steps to visual success 32–33, 35
tacky type emphasis 32–33, 39–41
trapped negative space 32–33, 38
warped or naked photos 32–33, 34
layout (visuals and type impact)
aspect ratio 65
body copy 75
conclusions 80
Greek text 70
introduction 64
multiple topics on same screen/page 75–78
negative space 73
sidebars 78
sketches 68
“wrapping” text 72
leading (line spacing)
hanging indents 100
display fonts 99
hanging indents 100
lighting (storyboarding) 186–188
line spacing see leading
live area/safe area 66
logo design
clip art 112
colors 111
font-du-jour 112
fonts and graphics 112
horizontal/vertical design 111
reproducibility in black 111
“reverse out” 111
scalability 110
shapes 112
simplicity 111
testing 112
type-open 112
uniqueness 110
to loop or not to loop (slideshows) 198
“Lorem Ipsum” term 70
lower third (storyboarding) 188
M
maps
infographics 162
parts
compass 174
inset 174
key 174
pointer box 174
reference points 174
scale 174
margins
grids 66
printer proofs 254
massively multimedia online role playing games (MMORPG) 194
mini art school
elements of design
size/scale 44
space 44
Gestalt theory
principles of good design
focal points/emphasis 44, 50–53
mobile games, multimedia storytelling 209
“mobile sites” 229
mobile web 229
modular page design
headlines 77
sidebars 78
mondrian layout 83
motion tweens (animation) 203–204
movement
curving S-line 56
depth of field 56
diagonal line 56
motion blur 56
movement (storyboarding) 183–185
MPEG-4 (Motion Pictures Expert Group) format 201–202
mugshots 73
multimedia
apps, plug-ins and widgets 205–207
audio 197
early years 194
infographics 165
introduction 194
thumbnails, storyboard and site maps 195
multipanel layout 83
multiple topics on same screen/page
placing story on modular page 76–78
sidebars 78
multiple visuals
mugshots 73
variety or uniformity of size? 71
multiple-page layouts
type 79
visual unity 78
N
NASA 161
navigation on web
page design 223
navigational signs (multiple-page layouts) 79–80
neutral gray and color 123
newsletters 100
newspaper design
columns 102
story headlines 101
Newton, Isaac 115
next generation diagrams 165
O
objectives 10
Ogilvy, David 181
old style fonts 88
OpenType® for print design
format 86
ligatures 106
swash alternates 106
Osborn, Alex 16
“out of gamut” warning sign 130
P
Pacific Rim cultures 120
pacing in slideshows 197
page design for the web
content hierarchy 222
direction 222
footer 225
grids 222
headers 225
logo as home page link 223
relationships among assets 222
scrolling 223
Pantone Matching System® (PMS) 130–131, 132
paper & printing
budget 242
files for printer
contact information 252
fonts 252
hardcopy 252
images 252
layout 252
finished product 257
finishes
coated 239
specialty 239
uncoated 239
folds
accordion 248
brochure/letter 248
double parallel 248
French 248
gate 248
rolling 248
single 248
introduction 238
look & feel 239
preparation of documents
bleeds 251
image resolutions 251
pasteboard 251
proofreading 250
spot or process? 251
swatch palettes 251
printing estimates
binding and finishing 249
bleeds 249
delivery date 249
flat and finished sizes 247
number of inks 249
number of pages 247
paper and weight 247
quantity 247
printing types and printers
commercial/offset 244
in-house 243
quick 244
web offset 244
properties
brightness/whiteness 241
formation 241
grain 241
opacity 241
smoothness 241
weight 241
right paper for right task 239–240
treatments
die cutting 245
embossing 245
foil stamping 245
varnishing 245
paper folds 248
The Parthenon 5
patterns in web page design
accordion 226
grid of consistently sized boxes 226
GUIs 226
module tabs 226
rotating feature 226
sliding panels 226
PDF (portable document format) 253
photos & illustrations
alternatives to photos 150–151
contact sheets 148
diversity as craft excellence 145–146
ethics of shooting and editing 144–145
file formats
SVG 139
introduction 136
photo composition
asymmetrical balance and rule of thirds 138
interesting light 138
natural lines to create movement 138
tight cropping 138
resolution, file format & size 138–143
tonal range 136
photos/visuals, printer proofs 254
picture window 83 “police line-up” shot 137
Portable Network Graphics (PNG)
positive and negative space 44
POV (point of view) in storyboarding 182, 185
press check (important jobs)
color 255
ink 256
paper 255
registration 255
varnishes 256
visuals and type 255
Price, Tim 211
print differences from the web
interactive experience 220
layouts 219
multi-sensory experience 220
‘screen’ size 219
printer proofs
approval 255
description 253
finished product 257
folios 254
fonts 253
margins 254
photos/visuals 254
specialty items 254
spot colors 254
text 253
typos 254
printers’ other services 257
Priyanka, Vidisha 211
professionals (hiring) 261
proofreading 250
proximity (Gestalt theory) 44, 58–59, 61
public information officers (PIOs) 234
public service announcement (PSA) 178
pull-down menus (web) 228
Q
quick printing, 244
R
rectangular story
body copy 75
byline 76
cutline 76
deck 76
visual/photo 76
research and brainstorming
brainstorming
brown-bag lunches 20
creativity 16
dump 15
ideas 16
morph 15
percolate 15
research
brown-bag lunches 20
co-ordination with other design work 11
content provision 14
delivery and distribution 12–13
infographics 172
objective 10
other constraints 15
timing and turnaround 14
resolution (photos/images) 139–140, 142
responsive web design
flexible assets 233
flexible grid-based layouts 231–233
font size 94
media queries 233
retro color 121
reversed type 103
roughs & comps 19
RSS (Really Simple Syndication) 234
rule of thirds
photos 138
web columns 68
Sagan, Carl 161
saturation (color) 123
Scalable Vector Graphic (SCG) format 139
screen content and bleed 67
screen vs. printed color 126
script fonts 90
search engine optimization (SEO)
cutlines 226
planning and implementation 215
text equivalents for graphics, 232
sequences (infographics) 162
SFX (sound effects)
storyboarding 189
sidebars 78
similarity (Gestalt theory) 44, 60, 61
site exposure (going viral) in multimedia
storytelling 209
site maps and wireframes 18
sketches
layout 68
roughs & comps 19
site maps and wireframes 18
storyboards 18
slideshows (multimedia)
audio 199
captions/cutlines 198
interactive image galleries 198
to loop or not to loop 198
pacing 197
photo-sharing websites 198–199
storyboard 196
small caps font 103
social networking/media sites 235
sound effects (SFX)
storyboarding 189
see also where not to source photos
space
negative (trapped) 32–33, 38, 44, 45, 73
spacing in fonts (leading) 95–96, 97
specialty items, printer proofs 254
splashes of color for visual emphasis 124–125
spot color
design 125
printer proofs 254
storyboarding
animation/video 18
camera angle 183
introduction 178
slideshows 196
type 188
storytelling (multimedia)
content toolbox 209
Sustainable Forestry Initiative (SFI) 242
T
tab & tab/dot leaders 97
tacky type emphasis
Taj Mahal 5
Text
boxes 162
multimedia storytelling 209
printer proofs 253
thumbnails, storyboard and site maps (multimedia) 195
TIF (Tagged Image File) format 139, 141–142
time and animation 204
timelines
animation 204
multimedia storyboarding 211
Times fonts
Bold 86
Italic 86
New Roman 86
timing and turnaround 14
tracking (letter spacing) 95–97
transitions
type
fonts
choice 90
typeface, families and glyph 86
initial and drop caps 104
introduction 86
multiple-page layouts 79
reversed type 103
small caps 103
specimen layout 83
storyboarding 188
typesetting punctuation 104–106
type as image
letterforms 154
pull quotes 155
typesetting punctuation
description 104
typos in printer proofs 254
U
uniform resource locator (URL) 215–216
United States (US)
business cards 64
culture 120
Postal Service 12
Unity
infographics 172
USA Today 160
V
value (dark and light)
variable data printing (VDP) 246
varnishing 245
vector graphics vs. bitmap 141
video clips (multimedia)
components 153
interviews and & monologues 200
introduction 199
shooting tips 200
stock sources 202
storytelling 209
video news release (VNR) 178
visibility & readability (color) 124
visual effects (FX) in storyboarding 189
design 6
mugshots 73
newspapers 77
rectangular story 76
type 86
unity in multiple-page layouts 78
works-every-time layout 22, 23
“wrapping text” 72
Voyager space probe 161
W
web (www)
color 128
do-it-yourself 235
infographics 165
leading, kerning and tracking 97
photos
GIF format 141
JPG format 141
PNG format 141
typesetting punctuation 105–106
see also Cascading Style Sheets; designing for the web
Web Accessibility Initiative 232
Web Content Accessibility Guidelines 232
web offset printing 244
what is design?
computers democratized graphic design 5
graphic design
communication 5
planning 6
pictures and words together in space 6–7
where not to source photos 149–150
Williams, Frank 16
word or tag clouds 163
works-every-time colors 123
works-every-time layout
conclusions 27
focal point/emphasis 51, 69–70
“wrapping text” 72
WYSIWYG (what you see is what you get) 231, 232
Z
zoom shot
“Ken Burns Effect” 197
shooting tips 200
smartphone screens 229
storyboarding 184