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.4k
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.5k
It's Never Been A Better Time to Learn Layout CSS
jensimmons
12
1.2k
Everything About Web Design Just Changed
jensimmons
32
68k
Designing with Grid — An Event Apart Denver
jensimmons
2
820
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
12k
How CSS Grid Changes Everything
jensimmons
7
1.8k
Designing with Grid — An Event Apart San Francisco
jensimmons
3
370
Designing with Grid — An Event Apart Chicago
jensimmons
1
320
Designing with Grid — An Event Apart D.C.
jensimmons
0
270
Other Decks in Design
See All in Design
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
130
231206_Book-launch-event_kato
hjmkth
2
1.1k
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.2k
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.4k
意志と、デザインと、ときどきお金
transit_kix
2
1.9k
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
23
2.1k
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
200
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
0
770
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
460
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
0
940
decksh object reference
ajstarks
2
880
Goodpatch Tour💙 / We are hiring!
goodpatch
28
680k
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Gamification - CAS2011
davidbonilla
76
4.5k
A better future with KSS
kneath
230
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Infographics Made Easy
chrislema
237
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
KATA
mclloyd
14
11k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
Become a Pro
speakerdeck
PRO
8
4.2k
Ruby is Unlike a Banana
tanoku
95
10k
How to train your dragon (web standard)
notwaldorf
71
5k
Typedesign – Prime Four
hannesfritz
36
2k
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