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.6k
It's Never Been A Better Time to Learn Layout CSS
jensimmons
12
1.3k
Everything About Web Design Just Changed
jensimmons
32
69k
Designing with Grid — An Event Apart Denver
jensimmons
2
900
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
13k
How CSS Grid Changes Everything
jensimmons
7
1.9k
Designing with Grid — An Event Apart San Francisco
jensimmons
3
440
Designing with Grid — An Event Apart Chicago
jensimmons
1
380
Designing with Grid — An Event Apart D.C.
jensimmons
0
340
Other Decks in Design
See All in Design
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2k
我做了一個詐騙網站...嗎?
crboy
1
140
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
310
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
1
1.7k
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.4k
Speed Design
sergeychernyshev
23
550
SpectrumTokyoMeetup12_自動貯金アプリ『finbee』での取り組みについて
shihorishimazu
2
380
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.2k
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
760
UXデザイナーが肩書きの私がいまUXデザインにそんなに興味がない理由 #uxd2024(字幕入り配布版)
versionfive
7
2.3k
MLP_Cleanup_Olga
olgastoryboard
0
130
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
270
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Testing 201, or: Great Expectations
jmmastey
38
7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Automating Front-end Workflow
addyosmani
1365
200k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Faster Mobile Websites
deanohume
304
30k
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
BBQ
matthewcrist
85
9.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