An Event Apart Seattle 2017

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
April 04, 2017

An Event Apart Seattle 2017

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

April 04, 2017
Tweet

Transcript

  1. Designing With Grid @jensimmons

  2. CSS Grid

  3. The Kiss, 1896

  4. None
  5. Our medium is not done

  6. layout design

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. photo by Brad Frost, 2012, CC BY 2.0

  32. None
  33. A C B A C B A C B A

    C B
  34. None
  35. None
  36. None
  37. None
  38. Starter-kit

  39. Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D!igning

    Systems of Components
  40. color palette typography palette layout palette

  41. None
  42. None
  43. The Official Timeline of Web Page Layout

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

    Object Fit Clip-path Masking Shape-outside Initial-letter
  45. 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
  46. None
  47. Nature of CSS Grid

  48. (Let s bust some assumptions) ’

  49. explicit vs. implicit

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

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

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

  53. ROWS!!!!!!!!!!!

  54. None
  55. None
  56. Tracks don’t have to all be the same size.

  57. None
  58. None
  59. Content sized by the size of a track.

  60. Tracks sized by the size of content.

  61. portion of available 
 space — 2 parts set by

    
 content size fixed portion of available 
 space — 1 part
  62. Content doesn’t have to fill a track.

  63. None
  64. None
  65. start center end justify-items: s t r e t c

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

    h
  67. None
  68. None
  69. You can use Grid to line things up. Or not.

  70. What shall we do with CSS Grid?

  71. How do we know 
 where to put things?

  72. None
  73. visual hierarchy

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

    SIT AMET
  75. symmetry

  76. asymmetry

  77. symmetry

  78. asymmetry

  79. proxim#y

  80. proxim#y

  81. dens#y

  82. dens#y

  83. 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 “
  84. Graphic design for the web

  85. Graphic design of the web

  86. labs.jensimmons.com

  87. Discovery in 6 parts

  88. 1. Overlap

  89. from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

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

  91. li:nth-child(1) { grid-row: 1 / 4; grid-column: 1 / 4;

    } li:nth-child(2) { grid-row: 3 / 6; grid-column: 3 / 6; }
  92. None
  93. None
  94. labs.jensimmons.com/2017/01-002.html

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

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

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

  98. Overlap

  99. 2, The Viewport

  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. None
  111. None
  112. storyboards

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

    by Stanley Kubrick. Storyboards created by Saul Bass.
  114. None
  115. None
  116. labs.jensimmons.com/2017/01-008.html

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

  118. None
  119. None
  120. None
  121. Grid rows & columns Alignment Viewport Units

  122. Viewport Units 50vh 25vh 50vw 25vh 50vw

  123. Viewport Units 50vmin 100vh

  124. Framing

  125. None
  126. None
  127. None
  128. None
  129. what does it mean to have a 
 reading experience

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

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

  132. 3. White Space

  133. “ 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.
  134. None
  135. labs.jensimmons.com/2017/01-003.html

  136. ul { display: grid; grid-template-columns: repeat(4, 1fr); } li:nth-child(1) {

    grid-row: 1; grid-column: 2; } li:nth-child(2) { grid-row: 2; grid-column: 4; } li:nth-child(3) { grid-row: 3; grid-column: 3; }
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. None
  144. 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.
  145. markboulton.co.uk/journal/a-richer-canvas

  146. None
  147. labs.jensimmons.com/2017/01-021.html

  148. labs.jensimmons.com/2017/01-021.html

  149. None
  150. Grid like a Modernist?

  151. White Space

  152. 4. Verticality

  153. None
  154. None
  155. None
  156. None
  157. None
  158. None
  159. 4. Verticality

  160. None
  161. None
  162. None
  163. None
  164. None
  165. None
  166. None
  167. None
  168. None
  169. None
  170. None
  171. labs.jensimmons.com/2017/01-020.html

  172. None
  173. Verticality

  174. 5. Flexibility

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

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

  177. None
  178. None
  179. labs.jensimmons.com/2017/01-007.html

  180. None
  181. This is a phrase with several words. This is a

    phrase with several words. This is a phrase with several words.
  182. None
  183. None
  184. None
  185. fr unit = “fraction”

  186. None
  187. 100% 33% 33% 33%

  188. 100% 33% 33% 33% 2% 2%

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

    96% = 32% 3 3
  190. 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)%;}}
  191. 100% 1fr 1fr 1fr 2em 2em

  192. 100px 1fr 1fr 1fr 1fr 100px

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

  194. 6fr 2.4fr 1fr 2.4fr 2fr

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

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

  198. None
  199. minmax()

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

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

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

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

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

  206. Flexibility

  207. 6. Creativity

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

  209. None
  210. Time to play.
 Time to learn.

  211. www.layout.land

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

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

  214. labs.jensimmons.com

  215. None
  216. Time to explore.

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

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