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.7k
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
930
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
470
Designing with Grid — An Event Apart Chicago
jensimmons
1
420
Designing with Grid — An Event Apart D.C.
jensimmons
0
370
Other Decks in Design
See All in Design
OLTA株式会社/デザイン紹介資料
taxy
0
120
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
130
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.6k
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
300
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
290
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
200
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
850
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
300
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
390
クライアントワークにおける UXリサーチの実践
kozotaira
0
370
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
970
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Writing Fast Ruby
sferik
628
61k
Building Adaptive Systems
keathley
40
2.4k
Why Our Code Smells
bkeepers
PRO
336
57k
A better future with KSS
kneath
238
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Adopting Sorbet at Scale
ufuk
74
9.2k
Site-Speed That Sticks
csswizardry
4
410
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A Philosophy of Restraint
colly
203
16k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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