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

Designing with Grid — An Event Apart Boston

Designing with Grid — An Event Apart Boston

Jen Simmons

May 16, 2017
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. Designing With Grid
    An Event Apart Boston
    @jenSimmons

    View full-size slide

  2. The Kiss, 1896

    View full-size slide

  3. Our medium is not done

    View full-size slide

  4. Layout on the web

    View full-size slide

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

    View full-size slide

  6. A
    C
    B
    A C
    B
    A
    C
    B
    A
    C
    B

    View full-size slide

  7. starter-kit
    framework

    View full-size slide

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

    View full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. color palette
    typography palette
    layout palette

    View full-size slide

  12. The Official Timeline of Web Page Layout

    View full-size slide

  13. 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 full-size slide

  14. This new CSS revolutionizes
    web page layout.

    View full-size slide

  15. Nature of CSS Grid

    View full-size slide

  16. (Let s bust some assumptions)

    View full-size slide

  17. explicit vs. implicit

    View full-size slide

  18. You define
    "e size and/or
    number of rows
    and/or
    columns
    Let "e browser
    define number or
    size of rows
    (or columns)

    View full-size slide

  19. Place each #em 

    into a specific 

    cell or area
    Let "e browser
    place every"ing
    using
    auto-placement
    algor#hm

    View full-size slide

  20. Rows *and* Columns

    View full-size slide

  21. ROWS!!!!!!!!!!!

    View full-size slide

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

    View full-size slide

  23. Content sized by
    the size of a track.

    View full-size slide

  24. Tracks sized by
    the size of content.

    View full-size slide

  25. portion of
    available 

    space —
    2 parts
    set by 

    content size
    fixed portion of
    available 

    space —
    1 part

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. What shall we do
    with CSS Grid?

    View full-size slide

  31. How do we know 

    where to put things?

    View full-size slide

  32. visual hierarchy

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Graphic design for the web

    View full-size slide

  36. Graphic design of the web

    View full-size slide

  37. labs.jensimmons.com

    View full-size slide

  38. What I’ve Discovered
    in 6 parts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. 2, The Viewport

    View full-size slide

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

    View full-size slide

  47. Grid rows & columns
    Alignment
    Viewport Units

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Viewport Units
    50vmin
    100vh

    View full-size slide

  52. Filmic Language

    View full-size slide

  53. Webic Language

    View full-size slide

  54. what does it mean to have a 

    reading experience with 

    a frame, where things move
    in and out of that frame?

    View full-size slide

  55. what does it mean to have a 

    interaction experience with
    a frame, where things move
    in and out of that frame?

    View full-size slide

  56. The Viewport

    View full-size slide

  57. 3. White Space

    View full-size slide

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

    View full-size slide


  59. 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 full-size slide

  60. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  63. Grid like a Modernist?

    View full-size slide

  64. 4. Verticality

    View full-size slide

  65. 4. Verticality

    View full-size slide

  66. photo by Fan Ho

    View full-size slide

  67. photo by Fan Ho

    View full-size slide

  68. photos by Fan Ho

    View full-size slide

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

    View full-size slide

  70. 5. Flexibility

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  76. fr unit = “fraction”

    View full-size slide

  77. 100%
    33% 33% 33%

    View full-size slide

  78. 100%
    33.33333% 33.33333% 33.33333%

    View full-size slide

  79. 100%
    33.33333% 33.33333% 33.33333%

    View full-size slide

  80. 100%
    33% 33% 33%
    2% 2%

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  84. 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 full-size slide

  85. 100%
    1fr 1fr 1fr
    2em 2em

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. 100px 1fr 1fr
    1fr 1fr
    100px

    View full-size slide

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

    View full-size slide

  90. 6fr 2.4fr
    1fr 2.4fr 2fr

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  96. “pixel perfect ”

    View full-size slide

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

    View full-size slide

  98. Design the flexibility model.

    View full-size slide

  99. 6. Creativity

    View full-size slide

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

    View full-size slide

  101. Time to play.

    Time to learn.

    View full-size slide

  102. www.layout.land

    View full-size slide

  103. labs.jensimmons.com

    View full-size slide

  104. Modern Layouts: 

    Getting Out of Our Ruts
    Revolutionize Your Page: 

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  107. Time to explore.

    View full-size slide

  108. A basic design is
    functional. 

    A great one will 

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

    View full-size slide

  109. jensimmons.com
    @jensimmons
    layout.land
    labs.jensimmons.com

    View full-size slide