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

Designing with Grid — Society for News Design 2017

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
April 21, 2017

Designing with Grid — Society for News Design 2017

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

April 21, 2017
Tweet

Transcript

  1. Designing With Grid Society for News Design jen Simmons

  2. None
  3. CSS Grid

  4. None
  5. JS CSS <— visual styling HTML

  6. None
  7. CSS Grid revolutionizes web design — page layout on the

    web.
  8. Layout on the web

  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. 6

  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. (not made out of web stuff)

  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. photo by Brad Frost, 2012, CC BY 2.0

  39. None
  40. A C B A C B A C B A

    C B
  41. None
  42. None
  43. None
  44. None
  45. None
  46. The Official Timeline of Web Page Layout

  47. This new CSS revolutionizes web page layout.

  48. None
  49. None
  50. None
  51. None
  52. None
  53. Hot metal composition: Pasteup :: Floats : CSS Grid

  54. CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms

    Object Fit Clip-path Masking Shape-outside Initial-letter
  55. CSS Grid Flexbox Alignment Writing Modes Multicolumn Viewport Units Transforms

    Object Fit Clip-path Masking Shape-outside Initial-letter Flow Floats Block Inline Inline-block Display:table Margin Negative margins Padding everything else in CSS
  56. None
  57. CSS Grid

  58. None
  59. None
  60. labs.jensimmons.com

  61. Grid Area Grid Line Grid Track Grid Track Grid Cell

    Grid Line Grid Line Grid Line Grid Line
  62. Grid Container

  63. Grid Items

  64. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; grid-template-columns: // some sort of code; }
  65. <body> <header>…</header> <main> <article> <h1> <p> <p> <p> <figure> <p>

    </article> </main> <aside>…</aside> <footer>…</footer> </body> body { display: grid; grid-template-columns: // some sort of code; } article { display: grid; grid-template-columns: // some sort of code; }
  66. .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr);

    } .item { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } 1 2 3 4 1 2 3 4 5
  67. Nature of CSS Grid

  68. explicit vs. implicit

  69. You define "e size and/or number of rows and/or columns

    Let "e browser define number or size of rows (or columns)
  70. Place each #em 
 into a specific 
 cell or

    area Let "e browser place every"ing using auto-placement algor#hm
  71. Rows *and* Columns

  72. ROWS!!!!!!!!!!!

  73. None
  74. None
  75. Tracks don’t have to all be the same size.

  76. None
  77. None
  78. Content sized by the size of a track.

  79. Tracks sized by the size of content.

  80. 2 portions of available 
 space set by 
 content

    size fixed 1 portion of available 
 space
  81. Content doesn’t have to fill a track.

  82. None
  83. None
  84. start center end justify-items: s t r e t c

    h
  85. start center end align-items: s t r e t c

    h
  86. None
  87. None
  88. You can use Grid to line things up. Or not.

  89. What shall we do with CSS Grid?

  90. How do we know 
 where to put things?

  91. None
  92. visual hierarchy

  93. visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS

    SIT AMET
  94. symmetry

  95. asymmetry

  96. symmetry

  97. asymmetry

  98. proxim#y

  99. proxim#y

  100. dens#y

  101. dens#y

  102. My deep respect for form and positive and negative space

    comes from studying Frank Lloyd Wright ’s idea of compression and expansion. You walk into a F.L.W. building and the entrance way is so small it makes you almost dip your head. And then as soon as you walk into the main room, he blows up the space, and it makes you feel ‘oh, that ’s so good’. — Platon, photographer “
  103. Graphic design for the web

  104. Graphic design of the web

  105. What I’ve Discovered in 6 parts

  106. 1. Overlap

  107. labs.jensimmons.com/2017/01-003.html

  108. None
  109. labs.jensimmons.com/2017/01-002.html

  110. labs.jensimmons.com/2017/01-002.html

  111. labs.jensimmons.com/2017/01-018.html

  112. labs.jensimmons.com/2017/02-001.html

  113. Overlap

  114. 2, The Viewport

  115. None
  116. None
  117. None
  118. None
  119. None
  120. None
  121. None
  122. None
  123. None
  124. None
  125. None
  126. None
  127. storyboards

  128. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed

    by Stanley Kubrick. Storyboards created by Saul Bass.
  129. None
  130. None
  131. labs.jensimmons.com/2017/01-008.html

  132. labs.jensimmons.com/2017/01-010.html

  133. None
  134. None
  135. None
  136. Grid rows & columns Alignment Viewport Units

  137. Viewport Units 50vh 25vh 50vw 25vh 50vw

  138. Viewport Units 50vmin 100vh

  139. Framing

  140. None
  141. None
  142. what does it mean to have a 
 reading experience

    with 
 a frame, where things move in and out of that frame?
  143. what does it mean to have a 
 interaction experience

    with a frame, where things move in and out of that frame?
  144. The Viewport

  145. 3. White Space

  146. labs.jensimmons.com/2017/01-003.html

  147. None
  148. “ THE VIGNELLI CANON Great designs can be achieved without

    the use of the grid, but the grid is a very useful tool to guarantee results. Ultimately the most important tool is the management of the white space in layouts. It is the white space that makes the layout sing. Bad layouts have no space left for breathing — every little space is covered by a cacophony of type sizes, images, and screaming titles.
  149. None
  150. None
  151. None
  152. None
  153. 1. Control the size of the page? Nope. 2. Line

    things up? Yes. Easy. 3. Create white space? Yes, absolutely. 4. Maintain aspect ratios? Nope. Not yet.
  154. Grid like a Modernist?

  155. White Space

  156. 4. Verticality

  157. None
  158. None
  159. None
  160. None
  161. photo by Fan Ho

  162. photo by Fan Ho

  163. photos by Fan Ho

  164. labs.jensimmons.com/2017/01-020.html

  165. None
  166. Verticality

  167. 5. Flexibility

  168. px em % pixels (or rem) percents 60px 10em 20%

  169. min-content max-content fr minmax()

  170. None
  171. None
  172. labs.jensimmons.com/2017/01-007.html

  173. None
  174. This is a phrase with several words. This is a

    phrase with several words. This is a phrase with several words.
  175. None
  176. None
  177. None
  178. fr unit = “fraction”

  179. None
  180. 100% 33% 33% 33%

  181. 100% 33.33333% 33.33333% 33.33333%

  182. 100% 33.33333% 33.33333% 33.33333%

  183. 100% 33% 33% 33% 2% 2%

  184. 100% 32% 32% 32% 2% 2% 100% – 4% =

    96% = 32% 3 3
  185. 100% 31.333% 31.333% 31.333% 3% 3% 100% – 6% =

    94% = 31.333% 3 3
  186. 100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% =

    95% = 31.666666666666666% 3 3
  187. 100% x x x 2em 2em @media (min-width: 600px) {

    .box { width: calc(100-(2*2em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}
  188. 100% 1fr 1fr 1fr 2em 2em

  189. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr

    = 3fr total therefore, 1fr = 1/3 of the space
  190. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr

    + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
  191. 100px 1fr 1fr 1fr 1fr 100px

  192. 2fr 1fr 50px 1fr min-content

  193. 6fr 2.4fr 1fr 2.4fr 2fr

  194. markboulton.co.uk/journal/five-simple-steps-to- designing-grid-systems-part-1

  195. None
  196. alistapart.com/article/content-out-layout

  197. None
  198. minmax()

  199. labs.jensimmons.com/2017/01-016.html

  200. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 100px

    1fr minmax(40ch, 65ch)
  201. None
  202. “pixel perfect ”

  203. What happens when parts of the content / interface are

    ‘missing’? Or are shorter / longer than ‘ideal’?
  204. Design the flexibility model.

  205. Flexibility

  206. 6. Creativity

  207. labs.jensimmons.com/2017/01-004.html

  208. None
  209. Time to play.
 Time to learn.

  210. www.layout.land

  211. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

    Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
  212. jensimmons.com/post/feb-27-2017/learn-css-grid

  213. None
  214. labs.jensimmons.com

  215. None
  216. None
  217. jensimmons.com/contact @jensimmons (DMs open)

  218. Time to explore.

  219. A basic design is functional. 
 A great one will

    
 say something.” — Tinker Hatfield, shoe designer for Nike “
  220. jensimmons.com @jensimmons layout.land labs.jensimmons.com