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
Amazing Future
Slide 24
Slide 24 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 86
Slide 86 text
nightly.mozilla.org
Slide 87
Slide 87 text
addons.mozilla.org/addon/css-grid-inspector
Slide 88
Slide 88 text
No content
Slide 89
Slide 89 text
How Now?
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
Works Doesn’t
work
Slide 92
Slide 92 text
Use It
Don’t Use It
Slide 93
Slide 93 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 94
Slide 94 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 95
Slide 95 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 96
Slide 96 text
Works Doesn’t
work
Use It
Don’t
Use It
Fired.
Slide 97
Slide 97 text
Works Doesn’t
work
Use It
Don’t
Use It
Fired.
Slide 98
Slide 98 text
Works Doesn’t
work
Use It
Don’t
Use It
Fired.
✔
Slide 99
Slide 99 text
Works Doesn’t
work
Use It
Don’t
Use It
Slide 100
Slide 100 text
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It
Slide 101
Slide 101 text
X
Works and
Doesn’t Work
Use It and
Don’t Use It
Don’t
Use It