Designing with Grid

A presentation at An Event Apart San Francisco in October 2017 in San Francisco, CA, USA by Jen Simmons

Slide 1

Slide 1

Designing With Grid An Event Apart San F rancisco @jenSimmons

Slide 2

Slide 2

CSS Grid

Slide 3

Slide 3

The Kiss, 1896

Slide 4

Slide 4

Slide 5

Slide 5

Ou r medium is not done

Slide 6

Slide 6

Layout on the web

Slide 7

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Slide 10

Slide 10

Slide 11

Slide 11

Slide 12

Slide 12

Slide 13

Slide 13

Slide 14

Slide 14

Slide 15

Slide 15

Slide 16

Slide 16

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

photo by Brad Frost, 2012, CC BY 2.0

Slide 34

Slide 34

Slide 35

Slide 35

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

Slide 36

Slide 36

Slide 37

Slide 37

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

starter-kit framework

Slide 41

Slide 41

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

Slide 42

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

Slide 43

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

Slide 44

Slide 44

c olor palet te typography palet te layout palet te

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

This ne w CSS
changes everything
in web layout.

Slide 48

Slide 48

CSS Grid

Slide 49

Slide 49

Nature of
CSS Grid

Slide 50

Slide 50

(Let

s bust some a ssumptions) ’

Slide 51

Slide 51

explicit vs. implicit

Slide 52

Slide 52

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

Slide 53

Slide 53

P lace each

em 
 into a specific 
 cell or area Let " e browser
place each

em using
auto-placement
a lgor

hm

Slide 54

Slide 54

Row s and Columns

Slide 55

Slide 55

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

Slide 56

Slide 56

Slide 57

Slide 57

Slide 58

Slide 58

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

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Conte nt sized by
t he size of a track.

Slide 62

Slide 62

Tracks sized by
t he size of c onte nt.

Slide 63

Slide 63

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

1 part

Slide 64

Slide 64

Content doesn’t have
to fill a track.

Slide 65

Slide 65

Slide 66

Slide 66

Slide 67

Slide 67

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

Slide 68

Slide 68

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

Slide 69

Slide 69

Slide 70

Slide 70

Slide 71

Slide 71

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

Slide 72

Slide 72

What shall we do
with C SS Grid?

Slide 73

Slide 73

How do we know 
 where to put things?

Slide 74

Slide 74

Slide 75

Slide 75

visual hierarchy

Slide 76

Slide 76

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

Slide 77

Slide 77

symmetry

Slide 78

Slide 78

asymmetry

Slide 79

Slide 79

symmetry

Slide 80

Slide 80

asymmetry

Slide 81

Slide 81

proxim

y

Slide 82

Slide 82

proxim

y

Slide 83

Slide 83

de n s

y

Slide 84

Slide 84

de n s

y

Slide 85

Slide 85

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 “

Slide 86

Slide 86

Graphic design for the web

Slide 87

Slide 87

Graphic design of the web

Slide 88

Slide 88

labs.jensimmons.com

Slide 89

Slide 89

What I ’ve Discovered
in Six parts

Slide 90

Slide 90

  1. O v e r l a p

Slide 91

Slide 91

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

Slide 92

Slide 92

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

Slide 93

Slide 93

Slide 94

Slide 94

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

Slide 95

Slide 95

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

Slide 96

Slide 96

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

Slide 97

Slide 97

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

Slide 98

Slide 98

Overlap

Slide 99

Slide 99

2, The Vie wpor t

Slide 100

Slide 100

Slide 101

Slide 101

Slide 102

Slide 102

Slide 103

Slide 103

Slide 104

Slide 104

Slide 105

Slide 105

Slide 106

Slide 106

Slide 107

Slide 107

Slide 108

Slide 108

Slide 109

Slide 109

Slide 110

Slide 110

Slide 111

Slide 111

storyboards

Slide 112

Slide 112

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

Storyboards created by Saul Bass .

Slide 113

Slide 113

Slide 114

Slide 114

Slide 115

Slide 115

Slide 116

Slide 116

Grid rows & columns Alignment

Viewport Units

Slide 117

Slide 117

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

Slide 118

Slide 118

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

Slide 119

Slide 119

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

" at dang “fold ”

Slide 120

Slide 120

Viewport Units 50vmin 10 0 v h

Slide 121

Slide 121

Slide 122

Slide 122

Slide 123

Slide 123

Framing

Slide 124

Slide 124

Slide 125

Slide 125

Slide 126

Slide 126

Slide 127

Slide 127

Filmic Language

Slide 128

Slide 128

Webic Language

Slide 129

Slide 129

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

Slide 130

Slide 130

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

Slide 131

Slide 131

Slide 132

Slide 132

The Vie wpor t

Slide 133

Slide 133

  1. W h i t e S p a c e

Slide 134

Slide 134

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

Slide 135

Slide 135

Slide 136

Slide 136

Slide 137

Slide 137

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

Slide 138

Slide 138

Slide 139

Slide 139

Slide 140

Slide 140

Slide 141

Slide 141

Slide 142

Slide 142

Slide 143

Slide 143

Slide 144

Slide 144

Slide 145

Slide 145

Slide 146

Slide 146

Slide 147

Slide 147

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.

Slide 148

Slide 148

Slide 149

Slide 149

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

Slide 150

Slide 150

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

Slide 151

Slide 151

Slide 152

Slide 152

Grid like a Modernist?

Slide 153

Slide 153

White Space

Slide 154

Slide 154

  1. V e r t i c a l i t y

Slide 155

Slide 155

Slide 156

Slide 156

Slide 157

Slide 157

Slide 158

Slide 158

  1. V e r t i c a l i t y

Slide 159

Slide 159

Slide 160

Slide 160

Slide 161

Slide 161

Slide 162

Slide 162

Slide 163

Slide 163

Slide 164

Slide 164

Slide 165

Slide 165

Slide 166

Slide 166

Slide 167

Slide 167

Slide 168

Slide 168

Slide 169

Slide 169

Slide 170

Slide 170

Slide 171

Slide 171

Slide 172

Slide 172

photo by Fan Ho

Slide 173

Slide 173

photo by Fan Ho

Slide 174

Slide 174

photos by Fan Ho

Slide 175

Slide 175

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

Slide 176

Slide 176

Slide 177

Slide 177

Verticality

Slide 178

Slide 178

  1. F l e x i b i l i t y

Slide 179

Slide 179

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

Slide 180

Slide 180

Slide 181

Slide 181

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

Slide 182

Slide 182

min-content max-content fr minmax()

Slide 183

Slide 183

Slide 184

Slide 184

Slide 185

Slide 185

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

Slide 186

Slide 186

Slide 187

Slide 187

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

Slide 188

Slide 188

Slide 189

Slide 189

Slide 190

Slide 190

Slide 191

Slide 191

Slide 192

Slide 192

Slide 193

Slide 193

fr unit = “fraction”

Slide 194

Slide 194

Slide 195

Slide 195

10 0 % 33% 33% 33%

Slide 196

Slide 196

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 197

Slide 197

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 198

Slide 198

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

Slide 199

Slide 199

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

Slide 200

Slide 200

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

Slide 201

Slide 201

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

Slide 202

Slide 202

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

Slide 203

Slide 203

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

Slide 204

Slide 204

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

Slide 205

Slide 205

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

Slide 206

Slide 206

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

Slide 207

Slide 207

2fr 1fr 50px 1fr min-content

Slide 208

Slide 208

6fr 2.4fr 1fr 2.4fr 2fr

Slide 209

Slide 209

Slide 210

Slide 210

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

Slide 211

Slide 211

minmax()

Slide 212

Slide 212

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

Slide 213

Slide 213

Slide 214

Slide 214

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

Slide 215

Slide 215

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

Slide 216

Slide 216

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

Slide 217

Slide 217

Slide 218

Slide 218

“pi xel perfect ”

Slide 219

Slide 219

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

Slide 220

Slide 220

Design the flexibility model.

Slide 221

Slide 221

Flexibility

Slide 222

Slide 222

  1. C r e a t i v i t y

Slide 223

Slide 223

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

Slide 224

Slide 224

Slide 225

Slide 225

  1. O v e r l a p
  2. The Vie wpor t
  3. W h i t e S p a c e
  4. V e r t i c a l i t y
  5. F l e x i b i l i t y
  6. C r e a t i v i t y

Slide 226

Slide 226

Time to play. 
 Time to learn.

Slide 227

Slide 227

nightly.mozilla.org

Slide 228

Slide 228

www.layout.land

Slide 229

Slide 229

labs.jensimmons.com

Slide 230

Slide 230

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

Slide 231

Slide 231

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

Slide 232

Slide 232

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

Slide 233

Slide 233

Time to explore.

Slide 234

Slide 234

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

Slide 235

Slide 235

jensimmons.com

@jensimmons layout.land

labs.jensimmons.com Thanks!