Real Art Direction on the Web

slides for An Event Apart Seattle

1. Real Art Direction 
 on the Web Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons
2. art direction
3. brand
6. conversation
9. ART DIRECTION
10. Art Direction
18. Art Direction
19. Editorial Design
20. “ ” 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
25. drawing by Dave Ellis novolume.co.uk
31. div { width: 400px; padding: 25px; } What is the calculated size of the box? Internet Explorer: 400px Everyone else: 450px
32. div { width: 400px; padding: 25px; } What is the calculated size of the box? Everyone: 400px
37. Layout shouldn’t be a multiple choice question.
39. Separate tooling needs from the design process.
40. Layout
49. Amazing Future
50. Amazing future! The No-layout Layout Table-based Layouts Float-based Layouts The Official Timeline of the Evolution of Web Page Layout
51. labs.jensimmons.com
52. Big Pieces & Little Pieces
53. Initial Letter
56. p::first-letter { color: #FE742F; font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; }
57. 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; }
60. @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; } }
61. Feature Queries
62. @supports (property:value) { // a bunch of CSS }
63. @supports (display:grid) { // your layout }
64. Viewport Units
65. <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh; } h1 { margin: auto; }
66. 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
68. Object Fit
70. img { width: 50%; height: 400px; object-fit: cover; }
72. img { float: left; margin-right: 2em; width: 50vw; height: 100vh; } h1 { font-size: 6vw; }
75. Clip Path
79. img { clip-path: polygon(0% 0%, 100% 3%, 98% 99%, 3% 93%); }
80. img { clip-path: polygon(24% 3%, 98% 4%, 80% 79%, 98% 95%, 46% 100%, 3% 84%); }
81. CSS Shapes
82. img { float: left; shape-outside: circle(); }
83. img { float: left; shape-outside: ellipse(); }
84. 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%); }
87. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both Dimensions Sizing Based on Edges
88. Big Pieces
89. Flexbox Grid Layout Alignment
97. Flexbox v. Grid
103. CSS Grid Layout
105. .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; } }
108. by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/
117. Round
120. .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%; }
123. Process
124. Choose one of the following: B. C. A.
125. 1. Organize Content.
126. 2. Create HTML file, 
 set source order.
127. 3. Sketch Ideas for Page Layout.
128. 4. Design a 
 custom grid.
131. 5. Apply CSS. Write your own layout.
132. 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.
133. How Now?
135. Works Doesn’t work
136. Use It Don’t Use It
137. Works Doesn’t work Use It Don’t Use It
138. Works Doesn’t work Use It Don’t Use It
139. Works Doesn’t work Use It Don’t Use It
140. Works Doesn’t work Use It Don’t Use It Fired.
141. Works Doesn’t work Use It Don’t Use It Fired.
142. Works Doesn’t work Use It Don’t Use It Fired. ✔
143. Works Doesn’t work Use It Don’t Use It
144. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It
145. Works and Doesn’t Work Use It and Don’t Use It Don’t Use It X
146. Progressive Enhancement & The Nature of CSS
152. More
154. links from AEA labs.jensimmons.com @jensimmons
155. Thanks! Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons