Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Real Art Direction on the Web
Search
Jen Simmons
April 03, 2016
Design
7
1.5k
Real Art Direction on the Web
slides for An Event Apart Seattle
Jen Simmons
April 03, 2016
Tweet
Share
More Decks by Jen Simmons
See All by Jen Simmons
Using the HTML width & height attributes to improve web page loading
jensimmons
3
1.7k
It's Never Been A Better Time to Learn Layout CSS
jensimmons
12
1.4k
Everything About Web Design Just Changed
jensimmons
32
70k
Designing with Grid — An Event Apart Denver
jensimmons
2
950
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
13k
How CSS Grid Changes Everything
jensimmons
7
2.1k
Designing with Grid — An Event Apart San Francisco
jensimmons
3
500
Designing with Grid — An Event Apart Chicago
jensimmons
1
440
Designing with Grid — An Event Apart D.C.
jensimmons
0
390
Other Decks in Design
See All in Design
The Golden Whitney
ohtristanart
PRO
0
560
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
140
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
220
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
UXデザインはなぜ定着しないのか?
designstudiopartners
0
760
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
760
Echoes Boomerang
artcloudyu
PRO
0
250
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.6k
21 Ways to Call American Airlines Customer Care Full Guide USA
americanhub
0
180
The Spectacular Lies of Maps
axbom
PRO
0
110
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2k
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Making Projects Easy
brettharned
116
6.3k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Visualization
eitanlees
146
16k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Transcript
Real Art Direction on the Web Jen Simmons labs.jensimmons.com
thewebahead.net @jensimmons
art direction
brand
None
None
conversation
None
None
ART DIRECTION
Art Direction
None
None
None
None
None
None
None
Art Direction
Editorial Design
“ ” The vast majority of editorial 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
None
None
None
None
drawing by Dave Ellis novolume.co.uk
None
None
None
None
None
div { width: 400px; padding: 25px; } What is the
calculated size of the box? Internet Explorer: 400px Everyone else: 450px
div { width: 400px; padding: 25px; } What is the
calculated size of the box? Everyone: 400px
None
None
None
None
Layout shouldn’t be a multiple choice question.
None
Separate tooling needs from the design process.
Layout
None
None
None
None
None
None
None
None
Amazing Future
Amazing future! The No-layout Layout Table-based Layouts Float-based Layouts The
Official Timeline of the Evolution of Web Page Layout
labs.jensimmons.com
Big Pieces & Little Pieces
Initial Letter
None
None
p::first-letter { color: #FE742F; font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4;
initial-letter: 4; }
p::first-letter { color: #ae4ea5; font-family:'Avenir'; font-weight: bold; margin-right: 0.5em; margin-left:
-2em; -webkit-initial-letter: 4 1; initial-letter: 4 1; }
None
None
@supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter
{ color: #ae4ea5; font-family:'Avenir'; font-weight: bold; margin-right: 0.5em; margin-left: -2em; -webkit-initial-letter: 4 1; initial-letter: 4 1; } }
Feature Queries
@supports (property:value) { // a bunch of CSS }
@supports (display:grid) { // your layout }
Viewport Units
<header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh;
} h1 { margin: auto; }
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
None
Object Fit
None
img { width: 50%; height: 400px; object-fit: cover; }
None
img { float: left; margin-right: 2em; width: 50vw; height: 100vh;
} h1 { font-size: 6vw; }
None
None
Clip Path
None
None
None
img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3%
93%); }
img { clip-path: polygon(24% 3%, 98% 4%, 80% 79%, 98%
95%, 46% 100%, 3% 84%); }
CSS Shapes
img { float: left; shape-outside: circle(); }
img { float: left; shape-outside: ellipse(); }
img.grapes { float: left; shape-outside: polygon(nonzero, 72.35% 83.95%, 45.5% 94.3%,
0% 100%, 0% 88.4%, 0% 23.7%, 38.7% 11.35%, 55% 11.1%, 63.5% 22.7%, 72.15% 20.75%, 79.1% 30.6%, 79.8% 34.55%, 87.6% 43.95%, 83.7% 57.3%, 89.15% 65.7%, 92.55% 72.1%, 91.15% 83.2%); }
None
None
Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both
Dimensions Sizing Based on Edges
Big Pieces
Flexbox Grid Layout Alignment
None
None
None
None
None
None
None
Flexbox v. Grid
None
None
None
None
None
CSS Grid Layout
None
.pane-1 { height: 100vh; display: grid; grid-template-rows: repeat(6, 20vh); grid-template-columns:
repeat(6, 20vw); div:nth-child(1) { grid-row: 2 / 3; grid-column: 2 / 3; } div:nth-child(2) { grid-row: 2 / 3; grid-column: 4 / 5; } div:nth-child(3) { grid-row: 4 / 5; grid-column: 2 / 3; } div:nth-child(4) { grid-row: 4 / 5; grid-column: 4 / 5; } }
None
None
by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/
None
None
None
None
None
None
None
None
Round
None
None
.circle1 { position: absolute; polar-angle: 0deg; polar-distance: 50%; } .circle2
{ position: absolute; polar-angle: 90deg; polar-distance: 20%; } .circle3 { position: absolute; polar-angle: 225deg; polar-distance: 100%; }
None
None
Process
Choose one of the following: B. C. A.
1. Organize Content.
2. Create HTML file, set source order.
3. Sketch Ideas for Page Layout.
4. Design a custom grid.
None
None
5. Apply CSS. Write your own layout.
1. Organize content. 2. Create HTML file, set source
order. 3. Sketch ideas for page layout. 4. Design a custom grid. 5. Apply CSS. Write your own layout code.
How Now?
None
Works Doesn’t work
Use It Don’t Use It
Works Doesn’t work Use It Don’t Use It
Works Doesn’t work Use It Don’t Use It
Works Doesn’t work Use It Don’t Use It
Works Doesn’t work Use It Don’t Use It Fired.
Works Doesn’t work Use It Don’t Use It Fired.
Works Doesn’t work Use It Don’t Use It Fired. ✔
Works Doesn’t work Use It Don’t Use It
Works and Doesn’t Work Use It and Don’t Use It
Don’t Use It
Works and Doesn’t Work Use It and Don’t Use It
Don’t Use It X
Progressive Enhancement & The Nature of CSS
None
None
None
None
None
More
None
links from AEA labs.jensimmons.com @jensimmons
Thanks! Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons