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
960
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
215
13k
How CSS Grid Changes Everything
jensimmons
7
2.2k
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
400
Other Decks in Design
See All in Design
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
160
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
CMS管理画面のアクセシビリティ
magi1125
8
2.5k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
790
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
デザインシステムの「種」を使って、受託開発を加速させる
akane___ui
0
11k
株式会社バクタム 会社説明資料
bactum
0
290
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4.5k
minpaku-community-scrum-patterns
norinity1103
1
250
harutaka Vision Deck
zenkigenforrecruit
0
200
株式会社Muture_ソーシャル推進事業
muture
PRO
0
140
7 Core Values of Round-L
wired888
0
1.5k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
What's in a price? How to price your products and services
michaelherold
246
12k
Side Projects
sachag
455
43k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
800
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Code Reviewing Like a Champion
maltzj
525
40k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Thoughts on Productivity
jonyablonski
69
4.8k
4 Signs Your Business is Dying
shpigford
184
22k
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