Revolutionize Your Page: Real Art Direction on the Web

Revolutionize Your Page: Real Art Direction on the Web

Presented at An Event Apart Boston

We finally have the tools necessary to create amazing page designs on the web. Now we can art direct our layouts, leveraging the power and tradition of graphic design. In this eye-opening talk, Jen will explore concrete examples of an incredible range of new possibilities. She’ll walk through a step-by-step design process for figuring out how to create a layout as unique as your content. You’ll learn how Flexbox, Grid, Shapes, Multicolumn, Viewport Units, and more can be combined together to revolutionize how you approach the page —any page.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

May 16, 2016
Tweet

Transcript

  1. Revolutionize Your Page: Real Art Direction 
 on the Web

    Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons
  2. art direction

  3. None
  4. brand

  5. None
  6. None
  7. conversation

  8. None
  9. None
  10. ART DIRECTION

  11. Art Direction

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. Art Direction

  20. Editorial Design

  21. “ ” The vast majority of editorial [design] 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
  22. “ ” The vast majority of editorial [design] 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
  23. None
  24. “ ” The vast majority of editorial [design] 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. None
  26. None
  27. None
  28. None
  29. drawing by Dave Ellis novolume.co.uk

  30. None
  31. None
  32. None
  33. None
  34. div { width: 400px; padding: 25px; } What is the

    calculated size of the box? Internet Explorer: 400px Everyone else: 450px
  35. div { width: 400px; padding: 25px; } What is the

    calculated size of the box? Everyone: 400px
  36. None
  37. None
  38. None
  39. data from Microsoft, data.microsoftedge.com for more

  40. None
  41. Layout shouldn’t be a multiple choice question.

  42. Separate tooling needs from the design process.

  43. None
  44. Layout

  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. Amazing Future

  53. Amazing future! The No-layout Layout Table-based Layouts Float-based Layouts The

    Official Timeline of the Evolution of Web Page Layout
  54. labs.jensimmons.com

  55. Big Pieces & Little Pieces

  56. Initial Letter

  57. None
  58. None
  59. p::first-letter { color: #FE742F; font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4;

    initial-letter: 4; margin-top: 1em; // bug fix }
  60. 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. @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; } }
  62. Feature Queries

  63. @supports (property:value) { // a bunch of CSS }

  64. // layout using old-technology @supports (display:grid) { // overrides to

    undo old layout // layout using new-technology }
  65. Viewport Units

  66. <header> <h1>A Secret…</h1> </header> header { display: flex; height: 100vh;

    } h1 { margin: auto; }
  67. 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. None
  69. Object Fit

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

  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. Flexbox

  94. None
  95. None
  96. None
  97. None
  98. None
  99. None
  100. Multicolumn

  101. None
  102. CSS Grid Layout

  103. None
  104. None
  105. by Manuel Rego Casasnovas http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/

  106. None
  107. None
  108. None
  109. nightly.mozilla.org

  110. None
  111. None
  112. None
  113. None
  114. Process

  115. Choose one of the following: B. C. A. D. E.

  116. 1. Organize Content.

  117. 2. Create HTML file, 
 set source order.

  118. 3. Sketch Ideas for Page Layout.

  119. 4. Design a 
 custom grid.

  120. None
  121. None
  122. None
  123. None
  124. 5. Apply CSS. Write your own layout.

  125. 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.
  126. How Now?

  127. None
  128. Works Doesn’t work

  129. Use It Don’t Use It

  130. Works Doesn’t work Use It Don’t Use It

  131. Works Doesn’t work Use It Don’t Use It

  132. Works Doesn’t work Use It Don’t Use It

  133. Works Doesn’t work Use It Don’t Use It Fired.

  134. Works Doesn’t work Use It Don’t Use It Fired.

  135. Works Doesn’t work Use It Don’t Use It Fired. ✔

  136. Works Doesn’t work Use It Don’t Use It

  137. Works and Doesn’t Work Use It and Don’t Use It

    Don’t Use It
  138. Works and Doesn’t Work Use It and Don’t Use It

    Don’t Use It X
  139. Progressive Enhancement & The Nature of CSS

  140. None
  141. None
  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. www.layout.land

  149. Thanks! Jen Simmons labs.jensimmons.com jensimmons.com layout.land thewebahead.net @jensimmons