Designing with Grid

Designing With Grid UX Bur lington

@jenSimmons

Slides & more:
@jensimmons

CSS Grid

The Kiss, 1896

Ou r medium is not done

Layout on the web

photo by Brad Frost, 2012, CC BY 2.0

A C B A C B A C B A C B

starter-kit framework

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.

Nature of CSS Grid

(Let

s bust some a ssumptions) ’

explicit vs. implicit

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

Row s and Columns

ROWS!!!!!!!!!!!

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

Conte nt sized by
t he size of a track.

Tracks sized by
t he size of c onte nt.

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

1 part

Content doesn’t have
to fill a track.

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.

What shall we do
with C SS Grid?

How do we know   where to put things?

visual hierarchy

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

symmetry

asymmetry

symmetry

asymmetry

proxim

y

proxim

y

de n s

y

de n s

y

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 “

Graphic design for the web

Graphic design of the web

labs.jensimmons.com

What I ’ve Discovered
in Six parts

O v e r l a p

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

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

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

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

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

Overlap

2, The Vie wpor t

storyboards

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

Storyboards created by Saul Bass .

Grid rows & columns Alignment

Viewport Units

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

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

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

Viewport Units 50vmin 10 0 v h

Framing

Filmic Language

Webic Language

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 Vie wpor t

W h i t e S p a c e

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

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

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

Grid like a Modernist?

White Space

V e r t i c a l i t y

V e r t i c a l i t y

photo by Fan Ho

photos by Fan Ho

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

Verticality

F l e x i b i l i t y

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

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

min-content max-content fr minmax()

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

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

fr unit = “fraction”

10 0 % 33% 33% 33%

10 0 % 33.33333% 33.33333 % 33.33333 %

10 0 % 33% 33% 33% 2% 2%

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)%;}}

10 0 % 1fr 1fr 1fr 2em 2em

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

10 0 p x 1fr 1fr 1fr 1fr 10 0 p x

2fr 1fr 50px 1fr min-content

6fr 2.4fr 1fr 2.4fr 2fr

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

minmax()

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

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

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

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

“pi xel perfect ”

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

Design the flexibility model.

Flexibility

C r e a t i v i t y

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

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

Time to play.   Time to learn.

www.layout.land

labs.jensimmons.com

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

Time to explore.

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!