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

Modern Layouts: Getting Out of Our Ruts — Generate NYC

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
June 20, 2014

Modern Layouts: Getting Out of Our Ruts — Generate NYC

In the early years of the web, there was a lot of experimentation and variation in where to put content on a web page. Then, it seems we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we could better design for the true medium at hand.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

June 20, 2014
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. Modern Layouts: Getting Out of Our Ruts @jensimmons

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. ATTACK OF THE EVEN-WIDTH GRID SYSTEMS

  15. ATTACK OF THE BLOG SHAPE

  16. None
  17. None
  18. None
  19. The web wasn’t always this way.

  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. Graphic Design isn’t always like this.

  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. It’s Not Our Fault.

  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. 20 years in. What can we do?

  94. Break up the “Sidebars”

  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. Get inventive with your Grids

  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. Play with layers

  112. background-attachment: fixed; position: fixed;

  113. Make translucent

  114. Rotate

  115. normal.

  116. rotated.

  117. rotated.

  118. Animate

  119. Start using Flexbox

  120. None
  121. None
  122. None
  123. Use Multi-column Layout

  124. Bacon ipsum dolor sit amet ex boudin frankfurter pig id

    meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille fatback cow doner proident cillum. Aliquip meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad, shankle esse do consequat chuck nulla incididunt shoulder prosciutto spare ribs. Adipisicing aliquip minim meatball ad pork chop pariatur id laborum jowl kevin boudin sirloin leberkas ullamco. Pariatur kielbasa tail rump pancetta biltong elit capicola incididunt deserunt exercitation ut meatloaf drumstick. Et enim reprehenderit bacon, exercitation aliqua short ribs eu officia spare ribs shankle dolor. Tail leberkas pastrami exercitation, sunt duis short loin drumstick. Hamburger chuck sausage, cupidatat ut in salami do in
  125. Bacon ipsum dolor sit amet ex boudin frankfurter pig id

    meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille fatback cow doner proident cillum. Aliquip meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad,
  126. Bacon ipsum dolor sit amet ex boudin frankfurter pig id

    meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad, shankle esse do consequat chuck nulla incididunt shoulder prosciutto spare ribs. Adipisicing aliquip minim meatball ad pork chop pariatur id laborum jowl kevin boudin sirloin leberkas ullamco. Pariatur kielbasa tail rump pancetta biltong elit capicola incididunt deserunt exercitation ut meatloaf drumstick. Et enim reprehenderit bacon, exercitation aliqua short ribs eu officia spare ribs shankle dolor. Tail leberkas pastrami exercitation, sunt duis short loin drumstick. Hamburger chuck sausage, cupidatat ut in salami do in fugiat meatball elit. Nisi meatloaf fatback strip steak swine bresaola. Bresaola excepteur adipisicing, ad beef turkey short ribs
  127. Bacon ipsum dolor sit amet ex boudin frankfurter pig id

    meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille fatback cow doner proident cillum. Aliquip meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad, shankle esse do consequat chuck nulla incididunt shoulder prosciutto spare ribs. Adipisicing aliquip minim meatball ad pork chop pariatur id laborum jowl kevin boudin sirloin leberkas ullamco. Pariatur kielbasa tail rump pancetta biltong elit capicola incididunt deserunt exercitation ut meatloaf drumstick. Et enim reprehenderit bacon, exercitation aliqua short ribs eu officia spare ribs shankle dolor. Tail leberkas pastrami exercitation, sunt duis short loin drumstick. Hamburger
  128. Bacon ipsum dolor sit amet ex boudin frankfurter pig id

    meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf.
  129. Pray for Regions or Fragmentation or whatever it’ll be

  130. None
  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. Use Viewport Units

  140. None
  141. Shapes Masks

  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. Inspiration

  149. or, aka You Can Raid the Long Legacy of Magazine

    Design
  150. None
  151. None
  152. None
  153. None
  154. None
  155. None
  156. None
  157. None
  158. None
  159. None
  160. None
  161. None
  162. None
  163. None
  164. None
  165. None
  166. None
  167. None
  168. Translate. Don’t Transfer.

  169. None
  170. None
  171. None
  172. None
  173. Keep learning.

  174. #49: CSS Layouts with Rachel Andrew #9: Mark Boulton on

    Grids 5by5.tv/webahead iTunes store
  175. None
  176. None
  177. None
  178. Follow @jensimmons to get these slides.

  179. None
  180. None
  181. None
  182. Thanks! Jen Simmons @jensimmons The Web Ahead 5by5.tv/webahead