Designing with Grid

A presentation at UX Burlington in June 2017 in Burlington, VT, USA by Jen Simmons

Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D ! igning Systems of Component s

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

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 This is a paragraph of text. Do we Headline This is a paragraph of text. Do we Headline This is a paragraph of text. Do we

c olor palet te typography palet te layout palet te

The Official Timeline of Web Page Layout The
No-Layout
Layout Table -based Layouts Hand -coded Float Layouts F ramework Layouts Amazing
Future!

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

This ne w CSS
re volutionize s web
page layout.

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

P lace each
em   into a specific   cell or area Let " e browser
place each
em using
auto-placement
a lgor
hm

Tracks don’t have to all
be t he same size.

portion of
available   space —
2 parts set by   content size fixed portion of
available   space —
1 part

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

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

Y ou can use Grid
to line t hings up.
Or not.

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

My dee p r espect for form and positive and negative space comes from studying Frank Lloyd Wright ’s idea of com pr ession and ex pansion. You walk into a F.L.W. building and the entrance way is so sm all it makes you almost dip your head. And then as soon as you walk into the m ain r oom, he blows up the space, and it m akes you fee l ‘oh, that ’s so good’. — P laton, photographer “

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

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

Grid rows & columns Alignment
Viewport Units

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

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

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

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.

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

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

10 0 % 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3

10 0 % 31. 3 3 3 % 31. 3 3 3 % 31. 3 3 3 % 3% 3% 100% – 6% = 94% = 31.333% 3 3

10 0 % 31. 6 6 6 % 31. 6 6 6 % 31. 6 6 6% 2.5% 2.5% 100% – 5% = 95% = 31.666666666666666% 3 3

.box { width: calc(100-(22em)/3)%;} 10 0 % x% x% x% 2em 2em @media (min-width: 600px) { .box { width: calc(100-(22em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(32em)/4)%;}} @media (min-width: 1000px) { .box { width: calc(100-(42em)/5)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}

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

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

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

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

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

What happe ns whe n par ts of
the content / interface are ‘missing’? Or are shorter / longer
than ‘ideal’?

O v e r l a p
The Vie wpor t
W h i t e S p a c e
V e r t i c a l i t y
F l e x i b i l i t y
C r e a t i v i t y

Modern Layouts:   Getting Out of Our Ruts Revolutionize Your Page:   Real Art Direction on the Web 2015 2016 available on jensimmons.com

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

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

A basic design is
functional.   A great one will   say something.” — Tinker Hat field,
shoe de signer for Nike “

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

Jen Simmons
@jensimmons

1 / 231

Now that CSS Grid is here, what are we going to do with it? Sure, we can create page layouts very similar to the ones we’ve been using for the last decade, but Grid also opens up a world of new possibilities. Graphic designers of the 20th century fell in love with using grids for their layouts. How might we apply their ideas to the web, and what might have to change? What do we need to think about when designing for this new paradigm? In this far-ranging talk, Jen will explore the realities and possibilities of new layout technologies and how they will change our craft. You'll leave with exciting new techniques and ideas for your design and development toolkit—and, more importantly, with the inspiration to create bold, new, previously unimagined layouts for the 21st century.

Video

Resources

The following resources were mentioned during the presentation or are useful additional information.

Designing with Grid

Link for this presentation:

HTML code for embedding:

Share on social media:

Video

Resources

Examples from this talk

A giant list of links to resources for learning CSS Grid

Jen Simmons, The benefits of learning how to code layouts with CSS

Jen Simmons, Six Layout Myths Busted

Layout Land

Book recommendation: “Graphic Design the New Basics”

The Vignelli Canon (free PDF)

Mark Boulton, A Richer Canvas

Mark Boulton, Five Simple Steps to Designing Grid Systems, Part 1

The Marber example at Grid Set App

Nathan Ford, Content Out Layout

An article on Fan Ho, the Hong Kong photographer with the beautiful vertical images

Jen Simmons, CSS Writing Modes

Jen Simmons, Using Feature Queries in CSS

Grid Garden, a game for learning bits of CSS Grid

Information on how to use CSS Grid and support Internet Explorer and browsers that don’t support Grid.