Revolutionize Your Page:
Real Art Direction
on the Web
Jen Simmons
labs.jensimmons.com
thewebahead.net
@jensimmons
Slide 2
Slide 2 text
art direction
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
brand
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
conversation
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
ART DIRECTION
Slide 10
Slide 10 text
Art Direction
Slide 11
Slide 11 text
Editorial Design
Slide 12
Slide 12 text
“ ”
The vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentation
of words (arranged into display and body text)
and visuals.
— Cath Caldwell & Yolanda Zappaterra
Editorial Design, page 8
Slide 13
Slide 13 text
“ ”
The vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentation
of words (arranged into display and body text)
and visuals.
— Cath Caldwell & Yolanda Zappaterra
Editorial Design, page 8
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
“ ”
The vast majority of editorial [design]
has at its heart
the idea of communicating
an idea of story
through the organization and presentation
of words (arranged into display and body text)
and visuals.
— Cath Caldwell & Yolanda Zappaterra
Editorial Design, page 8
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
drawing by Dave Ellis
novolume.co.uk
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Stephen Waller at Enhance Conf expressing how BORED he is with web design today.
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Layout shouldn’t
be a multiple choice
question.
Slide 29
Slide 29 text
Separate tooling needs
from the design process.
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
Layout Design
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Amazing Future
Slide 38
Slide 38 text
The Official Timeline of the Evolution of Web Page Layout
Anyplace you might use em, rem, %, px
you can instead use:
vh viewport height
vw viewport width
vmin smaller viewport number
vmax larger viewport number
Behind a flag
Just Works On Its Way
Chrome
Chrome
Canary
Opera
Opera
Developer
Firefox
Firefox
Dev Edition
Safari Technical
Preview
Firefox
Nightly
Edge
Safari
Slide 117
Slide 117 text
nightly.mozilla.org
Slide 118
Slide 118 text
addons.mozilla.org/addon/css-grid-inspector
Slide 119
Slide 119 text
No content
Slide 120
Slide 120 text
How Now?
Slide 121
Slide 121 text
No content
Slide 122
Slide 122 text
Works Doesn’t
work
Slide 123
Slide 123 text
Use It
Don’t Use It
Slide 124
Slide 124 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 125
Slide 125 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 126
Slide 126 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 127
Slide 127 text
Works Doesn’t
work
Use It
Don’t
Use It
Fired.
Slide 128
Slide 128 text
Works Doesn’t
work
Use It
Don’t
Use It
Fired.
Slide 129
Slide 129 text
Works Doesn’t
work
Use It
Don’t
Use It
Fired.
✔
Slide 130
Slide 130 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 131
Slide 131 text
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It
Slide 132
Slide 132 text
X
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It