$30 off During Our Annual Pro Sale. View Details »

Designing with Grid — An Event Apart Denver

Jen Simmons
December 11, 2017

Designing with Grid — An Event Apart Denver

Jen Simmons

December 11, 2017
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. Designing With Grid
    An Event Apart Denver 2017
    @jenSimmons

    View Slide

  2. CSS Grid

    View Slide

  3. The Kiss, 1896

    View Slide

  4. View Slide

  5. Our medium is not done

    View Slide

  6. Layout on the web

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. photo by Brad Frost, 2012, CC BY 2.0

    View Slide

  34. View Slide

  35. A
    C
    B
    A C
    B
    A
    C
    B
    A
    C
    B

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. starter-kit
    framework

    View Slide

  41. Nicole Sullivan
    2008
    Ana Debenham
    2011
    Brad Frost
    2013
    D!igning Systems of Components

    View Slide

  42. BUTTON
    Headline 1
    Headline 2
    This is a paragraph of text. Do we
    like how this works? Yes, please. Ok.
    Do all the text like this.
    BUTTON
    BUTTON
    Headline 1
    This is a paragraph of text. Do we
    like how this works? Yes, please. Ok.
    Do all the text like this.
    BUTTON

    View Slide

  43. Headline
    This is a paragraph of text. Do we
    like how this works? Yes, please.
    Ok. Do all the text like this.
    BUTTON
    Headline
    This is a paragraph of text. Do we
    like how this works? Yes, please.
    Ok. Do all the text like this.
    BUTTON
    Headline
    This is a paragraph of text. Do we
    like how this works? Yes, please.
    Ok. Do all the text like this.
    BUTTON
    Headline Headline Headline

    View Slide

  44. color palette
    typography palette
    layout palette

    View Slide

  45. Designing custom layout palettes
    is the key to the next
    major phase of web design.

    View Slide

  46. The Official Timeline of Web Page Layout
    The
    No-Layout
    Layout
    Table-based
    Layouts
    Hand-coded
    Float Layouts
    Framework
    Layouts Amazing
    Future!

    View Slide

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

    View Slide

  48. This new CSS
    changes everything
    in web layout.

    View Slide

  49. CSS Grid

    View Slide

  50. Nature of
    CSS Grid

    View Slide

  51. (Let s bust some assumptions)

    View Slide

  52. explicit vs. implicit

    View Slide

  53. You define
    "e size and/or
    number of rows
    and/or
    columns
    Let "e browser
    define number or
    size of rows
    or columns

    View Slide

  54. Place each #em 

    into a specific 

    cell or area
    Let "e browser
    place each
    #em using
    auto-placement
    algor#hm

    View Slide

  55. Rows *and* Columns

    View Slide

  56. ROWS!!!!!!!!!!!

    View Slide

  57. View Slide

  58. View Slide

  59. Tracks don’t have to all
    be the same size.

    View Slide

  60. View Slide

  61. View Slide

  62. Content sized by
    the size of a track.

    View Slide

  63. Tracks sized by
    the size of content.

    View Slide

  64. portion of
    available 

    space —
    2 parts
    set by 

    content size
    fixed portion of
    available 

    space —
    1 part

    View Slide

  65. Content doesn’t have
    to fill a track.

    View Slide

  66. View Slide

  67. View Slide

  68. start center end
    justify-items:
    s t r e t c h

    View Slide

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

    View Slide

  70. View Slide

  71. View Slide

  72. You can use Grid
    to line things up.
    Or not.

    View Slide

  73. What shall we do
    with CSS Grid?

    View Slide

  74. How do we know 

    where to put things?

    View Slide

  75. View Slide

  76. visual hierarchy

    View Slide

  77. visual hierarchy
    Lorem ipsum dolor sit amet
    FUSCE UT TURPIS SIT AMET

    View Slide

  78. symmetry

    View Slide

  79. asymmetry

    View Slide

  80. symmetry

    View Slide

  81. asymmetry

    View Slide

  82. proxim#y

    View Slide

  83. proxim#y

    View Slide

  84. dens#y

    View Slide

  85. dens#y

    View Slide

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

    Abstract, Art of Design, season 1 episode 7

    View Slide

  87. Graphic design principles
    to the web

    View Slide

  88. Graphic design principles
    of the web

    View Slide

  89. labs.jensimmons.com

    View Slide

  90. What I’ve Discovered
    in Six parts

    View Slide

  91. 1. Overlap

    View Slide

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

    View Slide

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

    View Slide

  94. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  98. Overlap

    View Slide

  99. 2, The Viewport

    View Slide

  100. View Slide

  101. View Slide

  102. View Slide

  103. View Slide

  104. View Slide

  105. View Slide

  106. View Slide

  107. View Slide

  108. View Slide

  109. View Slide

  110. storyboards

    View Slide

  111. Storyboards for Star Wars,
    directed by George Lucas.
    Spartacus, directed by Stanley Kubrick.
    Storyboards created by Saul Bass.

    View Slide

  112. View Slide

  113. View Slide

  114. Fixed Size

    View Slide

  115. Responsive Web Design

    View Slide

  116. The New Flexibility

    View Slide

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

    View Slide

  118. labs.jensimmons.com/2017/01-008.html

    View Slide

  119. labs.jensimmons.com/2017/01-008.html

    View Slide

  120. Grid rows & columns
    Alignment
    Viewport Units

    View Slide

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

    View Slide

  122. Viewport Units
    50vh
    25vh
    50vw
    25vh
    50vw
    "at dang “fold”

    View Slide

  123. Viewport Units
    50vmin
    100vh

    View Slide

  124. View Slide

  125. View Slide

  126. Framing

    View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. Filmic Language

    View Slide

  131. Webic Language

    View Slide

  132. What does it mean to have a 

    reading experience with a frame, 

    where things move in and out 

    of that frame?

    View Slide

  133. What does it mean to have an 

    interaction experience with a frame, 

    where things move in and out 

    of that frame?

    View Slide

  134. The Viewport

    View Slide

  135. 3. White Space

    View Slide

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

    View Slide

  137. View Slide

  138. View Slide


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

    View Slide

  140. View Slide

  141. View Slide

  142. View Slide

  143. View Slide

  144. View Slide

  145. View Slide

  146. View Slide

  147. View Slide

  148. View Slide

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

    View Slide

  150. View Slide

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

    View Slide

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

    View Slide

  153. View Slide

  154. Grid like a Modernist?

    View Slide

  155. White Space

    View Slide

  156. 4. Verticality

    View Slide

  157. View Slide

  158. View Slide

  159. View Slide

  160. 4. Verticality

    View Slide

  161. View Slide

  162. View Slide

  163. View Slide

  164. View Slide

  165. View Slide

  166. View Slide

  167. View Slide

  168. View Slide

  169. View Slide

  170. View Slide

  171. View Slide

  172. View Slide

  173. View Slide

  174. photo by Fan Ho

    View Slide

  175. photo by Fan Ho

    View Slide

  176. photos by Fan Ho

    View Slide

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

    View Slide

  178. View Slide

  179. Verticality

    View Slide

  180. 5. Flexibility

    View Slide

  181. labs.jensimmons.com/2017/02-004.html

    View Slide

  182. View Slide

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

    View Slide

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

    View Slide

  185. View Slide

  186. View Slide

  187. labs.jensimmons.com/2017/01-007.html

    View Slide

  188. View Slide

  189. This is a phrase with
    several words.
    This is
    a
    phrase
    with
    several
    words.
    This is a phrase with several words.

    View Slide

  190. View Slide

  191. View Slide

  192. View Slide

  193. View Slide

  194. View Slide

  195. fr unit = “fraction”

    View Slide

  196. View Slide

  197. 100%
    33% 33% 33%

    View Slide

  198. 100%
    33.33333% 33.33333% 33.33333%

    View Slide

  199. 100%
    33.33333% 33.33333% 33.33333%

    View Slide

  200. 33.33333% 33.33333% 33.33333%
    100%
    2% 2%

    View Slide

  201. 100%
    32% 32% 32%
    2% 2%
    100% – 4% = 96% = 32%
    3 3

    View Slide

  202. 100%
    31.333% 31.333% 31.333%
    3% 3%
    100% – 6% = 94% = 31.333%
    3 3

    View Slide

  203. 100%
    31.666% 31.666% 31.666%
    2.5% 2.5%
    100% – 5% = 95% = 31.666666666666666%
    3 3

    View Slide

  204. .box { width: calc(100-(2*2em)/3)%;}
    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)%;}}

    View Slide

  205. .box { width: calc(100-(2*2em)/3)%;}
    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)%;}}

    View Slide

  206. 100%
    1fr 1fr 1fr
    2em 2em

    View Slide

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

    View Slide

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

    View Slide

  209. 100px 1fr 1fr
    1fr 1fr
    100px

    View Slide

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

    View Slide

  211. 6fr 2.4fr
    1fr 2.4fr 2fr

    View Slide

  212. View Slide

  213. from alistapart.com/article/content-out-layout

    View Slide

  214. minmax()

    View Slide

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

    View Slide

  216. View Slide

  217. .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    // nothing about rows
    }
    .item {
    // nothing about item placement
    }

    View Slide

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

    View Slide

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

    View Slide

  220. View Slide

  221. “pixel perfect ”

    View Slide

  222. Not Your Father’s Web Design
    Ethan’s
    Responsive

    View Slide

  223. %

    View Slide

  224. Program the flexibility model.

    View Slide

  225. What happens when parts of
    the content / interface are ‘missing’?
    Or are shorter / longer
    than ‘ideal’?

    View Slide

  226. Flexibility

    View Slide

  227. 6. Creativity

    View Slide

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

    View Slide

  229. View Slide

  230. 1. Overlap
    2. The Viewport
    3. White Space
    4. Verticality
    5. Flexibility
    6. Creativity

    View Slide

  231. Time to play.

    Time to learn.

    View Slide

  232. View Slide

  233. nightly.mozilla.org

    View Slide

  234. www.layout.land

    View Slide

  235. labs.jensimmons.com

    View Slide

  236. Modern Layouts: 

    Getting Out of Our Ruts
    Revolutionize Your Page: 

    Real Art Direction on the Web
    2015
    2016
    available on jensimmons.com

    View Slide

  237. jensimmons.com/post/feb-27-2017/learn-css-grid

    View Slide

  238. developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout

    View Slide

  239. Time to explore.

    View Slide

  240. A basic design is
    functional. 

    A great one will 

    say something.”
    — Tinker Hatfield,
    shoe designer for Nike

    View Slide

  241. jensimmons.com
    @jensimmons
    layout.land
    labs.jensimmons.com
    Thanks!

    View Slide