Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real Art Direction on the Web

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
April 03, 2016

Real Art Direction on the Web

slides for An Event Apart Seattle

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

April 03, 2016
Tweet

Transcript

  1. Real Art Direction 
 on the Web Jen Simmons labs.jensimmons.com

    thewebahead.net @jensimmons
  2. art direction

  3. brand

  4. None
  5. None
  6. conversation

  7. None
  8. None
  9. ART DIRECTION

  10. Art Direction

  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  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
  21. None
  22. None
  23. None
  24. None
  25. drawing by Dave Ellis novolume.co.uk

  26. None
  27. None
  28. None
  29. None
  30. None
  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
  33. None
  34. None
  35. None
  36. None
  37. Layout shouldn’t be a multiple choice question.

  38. None
  39. Separate tooling needs from the design process.

  40. Layout

  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  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

  54. None
  55. None
  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; }
  58. None
  59. None
  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
  67. None
  68. Object Fit

  69. None
  70. img { width: 50%; height: 400px; object-fit: cover; }

  71. None
  72. img { float: left; margin-right: 2em; width: 50vw; height: 100vh;

    } h1 { font-size: 6vw; }
  73. None
  74. None
  75. Clip Path

  76. None
  77. None
  78. None
  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%); }
  85. None
  86. None
  87. Drop & Raised Caps Non-Rectangular Shapes Images Specified in Both

    Dimensions Sizing Based on Edges
  88. Big Pieces

  89. Flexbox Grid Layout Alignment

  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. Flexbox v. Grid

  98. None
  99. None
  100. None
  101. None
  102. None
  103. CSS Grid Layout

  104. None
  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; } }
  106. None
  107. None
  108. by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

  109. None
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. Round

  118. None
  119. None
  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%; }
  121. None
  122. None
  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.

  129. None
  130. None
  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?

  134. None
  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

  147. None
  148. None
  149. None
  150. None
  151. None
  152. More

  153. None
  154. links from AEA labs.jensimmons.com @jensimmons

  155. Thanks! Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons