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

An Event Apart Seattle 2017

Jen Simmons
April 04, 2017

An Event Apart Seattle 2017

Jen Simmons

April 04, 2017
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. Designing With Grid
    @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 design

    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. Nicole Sullivan
    2008
    Ana Debenham
    2011
    Brad Frost
    2013
    D!igning Systems of Components

    View full-size slide

  8. color palette
    typography palette
    layout palette

    View full-size slide

  9. The Official Timeline of Web Page Layout

    View full-size slide

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

    View full-size slide

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

  12. Nature of CSS Grid

    View full-size slide

  13. (Let s bust some assumptions)

    View full-size slide

  14. explicit vs. implicit

    View full-size slide

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

  16. Place each #em 

    into a specific 

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

    View full-size slide

  17. Rows *and* Columns

    View full-size slide

  18. ROWS!!!!!!!!!!!

    View full-size slide

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

    View full-size slide

  20. Content sized by
    the size of a track.

    View full-size slide

  21. Tracks sized by
    the size of content.

    View full-size slide

  22. portion of
    available 

    space —
    2 parts
    set by 

    content size
    fixed portion of
    available 

    space —
    1 part

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. What shall we do
    with CSS Grid?

    View full-size slide

  28. How do we know 

    where to put things?

    View full-size slide

  29. visual hierarchy

    View full-size slide

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

    View full-size slide

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

  32. Graphic design for the web

    View full-size slide

  33. Graphic design of the web

    View full-size slide

  34. labs.jensimmons.com

    View full-size slide

  35. Discovery in 6 parts

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. li:nth-child(1) {
    grid-row: 1 / 4;
    grid-column: 1 / 4;
    }
    li:nth-child(2) {
    grid-row: 3 / 6;
    grid-column: 3 / 6;
    }

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. 2, The Viewport

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Grid rows & columns
    Alignment
    Viewport Units

    View full-size slide

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

    View full-size slide

  49. Viewport Units
    50vmin
    100vh

    View full-size slide

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

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

  52. The Viewport

    View full-size slide

  53. 3. White Space

    View full-size slide


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

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

    View full-size slide

  56. 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;
    }

    View full-size slide

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

  58. markboulton.co.uk/journal/a-richer-canvas

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Grid like a Modernist?

    View full-size slide

  62. 4. Verticality

    View full-size slide

  63. 4. Verticality

    View full-size slide

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

    View full-size slide

  65. 5. Flexibility

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

  70. fr unit = “fraction”

    View full-size slide

  71. 100%
    33% 33% 33%

    View full-size slide

  72. 100%
    33% 33% 33%
    2% 2%

    View full-size slide

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

    View full-size slide

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

  75. 100%
    1fr 1fr 1fr
    2em 2em

    View full-size slide

  76. 100px 1fr 1fr
    1fr 1fr
    100px

    View full-size slide

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

    View full-size slide

  78. 6fr 2.4fr
    1fr 2.4fr 2fr

    View full-size slide

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

    View full-size slide

  80. alistapart.com/article/content-out-layout

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  83. “pixel perfect ”

    View full-size slide

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

    View full-size slide

  85. Design the flexibility model.

    View full-size slide

  86. 6. Creativity

    View full-size slide

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

    View full-size slide

  88. Time to play.

    Time to learn.

    View full-size slide

  89. www.layout.land

    View full-size slide

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

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

    View full-size slide

  92. labs.jensimmons.com

    View full-size slide

  93. Time to explore.

    View full-size slide

  94. A basic design is
    functional. 

    A great one will 

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

    View full-size slide

  95. jensimmons.com
    @jensimmons
    layout.land
    labs.jensimmons.com

    View full-size slide