Designing with Grid

A presentation at An Event Apart Denver: Special Edition 2017 in December 2017 in Denver, CO, USA by Jen Simmons

Slide 1

Designing With Grid An Event Apart Denver 2017 @jenSimmons

Slide 2

CSS Grid

Slide 3

The Kiss, 1896

Slide 4

Slide 5

Ou r medium is not done

Slide 6

Layout on the web

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

photo by Brad Frost, 2012, CC BY 2.0

Slide 34

Slide 35

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

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

starter-kit framework

Slide 41

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

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

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

c olor palet te typography palet te layout palet te

Slide 45

Designing custom layout palet tes
is t he ke y to t he nex t
major phase of web design.

Slide 46

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

Slide 47

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 48

This ne w CSS
changes everything
in web layout.

Slide 49

CSS Grid

Slide 50

Nature of
CSS Grid

Slide 51

(Let

s bust some a ssumptions) ’

Slide 52

explicit vs. implicit

Slide 53

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

Slide 54

P lace each

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

em using
auto-placement
a lgor

Slide 55

Row s and Columns

Slide 56

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

Slide 57

Slide 58

Slide 59

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

Slide 60

Slide 61

Slide 62

Conte nt sized by
t he size of a track.

Slide 63

Tracks sized by
t he size of c onte nt.

Slide 64

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

1 part

Slide 65

Content doesn’t have
to fill a track.

Slide 66

Slide 67

Slide 68

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

Slide 69

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

Slide 70

Slide 71

Slide 72

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

Slide 73

What shall we do
with C SS Grid?

Slide 74

How do we know   where to put things?

Slide 75

Slide 76

visual hierarchy

Slide 77

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

Slide 78

symmetry

Slide 79

asymmetry

Slide 80

symmetry

Slide 81

asymmetry

Slide 82

proxim

Slide 83

proxim

Slide 84

de n s

Slide 85

de n s

Slide 86

My dee p r espect for form and positive and negative space comes fr om 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 m akes 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 makes you feel ‘oh, that ’s so good’. — P laton, photographer “ Abstract, Art of Design, season 1 episode 7

Slide 87

Graphic design principles

the web

Slide 88

Graphic design principles of the web

Slide 89

labs.jensimmons.com

Slide 90

What I ’ve Discovered
in Six parts

Slide 91

O v e r l a p

Slide 92

from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

Slide 93

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

Slide 94

Slide 95

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

Slide 96

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

Slide 97

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

Slide 98

Overlap

Slide 99

2, The Vie wpor t

Slide 100

Slide 101

Slide 102

Slide 103

Slide 104

Slide 105

Slide 106

Slide 107

Slide 108

Slide 109

Slide 110

storyboards

Slide 111

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

Storyboards created by Saul Bass .

Slide 112

Slide 113

Slide 114

Fixed Size

Slide 115

Responsive Web Design

Slide 116

The New Flexibility

Slide 117

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

Slide 118

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

Slide 119

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

Slide 120

Grid rows & columns Alignment

Viewport Units

Slide 121

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

Slide 122

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

" at dang “fold ”

Slide 123

Viewport Units 50vmin 10 0 v h

Slide 124

Slide 125

Slide 126

Framing

Slide 127

Slide 128

Slide 129

Slide 130

Filmic Language

Slide 131

Webic Language

Slide 132

What does it mean to have a
  reading ex per ie nce wit h a frame ,   where things move in and out   of that frame?

Slide 133

What does it mean to have an   interaction ex per ie nce wit h a frame ,   where things move in and out   of that frame?

Slide 134

The Vie wpor t

Slide 135

W h i t e S p a c e

Slide 136

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

Slide 137

Slide 138

Slide 139

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

Slide 141

Slide 142

Slide 143

Slide 144

Slide 145

Slide 146

Slide 147

Slide 148

Slide 149

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 150

Slide 151

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

Slide 152

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

Slide 153

Slide 154

Grid like a Modernist?

Slide 155

White Space

Slide 156

V e r t i c a l i t y

Slide 157

Slide 158

Slide 159

Slide 160

V e r t i c a l i t y

Slide 161

Slide 162

Slide 163

Slide 164

Slide 165

Slide 166

Slide 167

Slide 168

Slide 169

Slide 170

Slide 171

Slide 172

Slide 173

Slide 174

photo by Fan Ho

Slide 175

photo by Fan Ho

Slide 176

photos by Fan Ho

Slide 177

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

Slide 178

Slide 179

Verticality

Slide 180

F l e x i b i l i t y

Slide 181

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

Slide 182

Slide 183

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

Slide 184

min-content max-content fr minmax()

Slide 185

Slide 186

Slide 187

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

Slide 188

Slide 189

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

Slide 190

Slide 191

Slide 192

Slide 193

Slide 194

Slide 195

fr unit = “fraction”

Slide 196

Slide 197

10 0 % 33% 33% 33%

Slide 198

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 199

10 0 % 33.33333% 33.33333 % 33.33333 %

Slide 200

33.33333% 33.33333 % 33.33333 % 10 0 % 2% 2%

Slide 201

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

Slide 202

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

Slide 203

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 204

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

Slide 206

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

Slide 207

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

Slide 208

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

Slide 209

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

Slide 210

2fr 1fr 50px 1fr min-content

Slide 211

6fr 2.4fr 1fr 2.4fr 2fr

Slide 212

Slide 213

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

Slide 214

minmax()

Slide 215

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

Slide 216

Slide 217

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