Designing With Grid UX Bur lington
@jenSimmons
Slide 1
Slide 2
Slides & more:
@jensimmons
Slide 3
CSS Grid
Slide 4
Slide 5
Slide 6
Slide 7
The Kiss, 1896
Slide 8
Slide 9
Ou r medium is not done
Slide 10
Layout on the web
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
Slide 34
Slide 35
Slide 36
Slide 37
photo by Brad Frost, 2012, CC BY 2.0
Slide 38
Slide 39
A C B A C B A C B A C B
Slide 40
Slide 41
Slide 42
Slide 43
Slide 44
starter-kit framework
Slide 45
Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D ! igning Systems of Component s
Slide 46
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 47
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 48
c olor palet te typography palet te layout palet te
Slide 49
The Official Timeline of Web Page Layout
The
No-Layout
Layout
Table -based
Layouts
Hand -coded
Float Layouts
F ramework
Layouts
Amazing
Future!
Slide 50
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 51
This ne w CSS
re volutionize s web
page layout.
Slide 52
Nature of CSS Grid
Slide 53
(Let
s bust some a ssumptions) ’
Slide 54
explicit vs. implicit
Slide 55
You define
"
e size and/or
number of rows
and/or
columns
Let
"
e browser
define number or
size of rows
or columns
Slide 56
P lace each
em
into a specific
cell or area
Let
"
e browser
place each
em using
auto-placement
a
lgor
hm
Slide 57
Row s and Columns
Slide 58
ROWS!!!!!!!!!!!
Slide 59
Slide 60
Slide 61
Tracks don’t have to all
be t he same size.
Slide 62
Slide 63
Slide 64
Conte nt sized by
t he size of a track.
Slide 65
Tracks sized by
t he size of c onte nt.
Slide 66
portion of
available
space —
2 parts
set by
content
size
fixed
portion of
available
space —
1 part
Slide 67
Content doesn’t have
to fill a track.
Slide 68
Slide 69
Slide 70
start
center
end
justify
-items:
s t r e t c
h
Slide 71
start center end align-items: s t r e t c h
Slide 72
Slide 73
Slide 74
Y
ou can use Grid
to line t hings up.
Or not.
Slide 75
What shall we do
with C
SS
Grid?
Slide 76
How do we know where to put things?
Slide 77
Slide 78
visual hierarchy
Slide 79
visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET
Slide 80
symmetry
Slide 81
asymmetry
Slide 82
symmetry
Slide 83
asymmetry
Slide 84
proxim
y
Slide 85
proxim
y
Slide 86
de n s
y
Slide 87
de n s
y
Slide 88
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 89
Graphic design for the web
Slide 90
Graphic design of the web
Slide 91
labs.jensimmons.com
Slide 92
What I ’ve Discovered
in
Six
parts
Slide 93
- O v e r l a p
Slide 94
from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar
Slide 95
labs.jensimmons.com/2017/01-003.html
Slide 96
Slide 97
labs.jensimmons.com/2017/01-002 .html
Slide 98
labs.jensimmons.com/2017/01-002 .html
Slide 99
labs.jensimmons.com/2017/01-018.html
Slide 100
labs.jensimmons.com/2017/02-001 .html
Slide 101
Overlap
Slide 102
2, The Vie wpor t
Slide 103
Slide 104
Slide 105
Slide 106
Slide 107
Slide 108
Slide 109
Slide 110
Slide 111
Slide 112
Slide 113
Slide 114
storyboards
Slide 115
Storyboards for
Star Wars,
directed by George Lucas.
Spartacus,
directed by Stanley Kubrick.
Storyboards created by Saul Bass .
Slide 116
Slide 117
Slide 118
Slide 119
Grid rows & columns Alignment
Viewport Units
Slide 120
labs.jensimmons.com/2017/01-008.html
Slide 121
labs.jensimmons.com/2017/01-010.html
Slide 122
Viewport Units 50vh 25vh 50vw 25vh 50vw
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 experience with a frame, where things move in and out of that frame?
Slide 133
what does it mean to have a interaction experience with 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
photo by Fan Ho
Slide 170
photo by Fan Ho
Slide 171
photos by Fan Ho
Slide 172
labs.jensimmons.com/2017/01-020.html
Slide 173
Slide 174
Verticality
Slide 175
- F l e x i b i l i t y
Slide 176
labs.jensimmons.com/2017/02-004.html
Slide 177
Slide 178
px em % pixels (or rem) percents 60px 10em 20%
Slide 179
min-content max-content fr minmax()
Slide 180
Slide 181
Slide 182
labs.jensimmons.com/2017/01-007 .html
Slide 183
Slide 184
This is a phrase with
several words.
This is
a
phrase
with
several
words.
This is a phrase with several words.
Slide 185
Slide 186
Slide 187
Slide 188
Slide 189
Slide 190
fr unit = “fraction”
Slide 191
Slide 192
10 0 % 33% 33% 33%
Slide 193
10 0 % 33.33333% 33.33333 % 33.33333 %
Slide 194
10 0 % 33.33333% 33.33333 % 33.33333 %
Slide 195
10 0 % 33% 33% 33% 2% 2%
Slide 196
10 0 % 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3
Slide 197
10 0 % 31. 3 3 3 % 31. 3 3 3 % 31. 3 3 3 % 3% 3% 100% – 6% = 94% = 31.333% 3 3
Slide 198
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 199
.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 200
10 0 % 1fr 1fr 1fr 2em 2em
Slide 201
1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr = 3fr total therefore, 1fr = 1/3 of the space
Slide 202
1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
Slide 203
10 0 p x 1fr 1fr 1fr 1fr 10 0 p x
Slide 204
2fr 1fr 50px 1fr min-content
Slide 205
6fr 2.4fr 1fr 2.4fr 2fr
Slide 206
Slide 207
from alistapart.com/article/content-out-layout
Slide 208
minmax()
Slide 209
labs.jensimmons.com/2017/01-003.html
Slide 210
Slide 211
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
// nothing about rows
}
.item {
// nothing about item placement
}
Slide 212
labs.jensimmons.com/2017/01-016.html
Slide 213
grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 10 0 px 1fr minmax(40ch, 65ch)
Slide 214
Slide 215
“pi xel perfect ”
Slide 216
What happe ns whe n par ts of
the content / interface are ‘missing’?
Or are shorter / longer
than ‘ideal’?
Slide 217
Design the flexibility model.
Slide 218
Flexibility
Slide 219
- C r e a t i v i t y
Slide 220
labs.jensimmons.com/2017/01-004.html
Slide 221
Slide 222
- 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
Slide 223
Time to play. Time to learn.
Slide 224
www.layout.land
Slide 225
labs.jensimmons.com
Slide 226
Modern Layouts: Getting Out of Our Ruts Revolutionize Your Page: Real Art Direction on the Web 2015 2016 available on jensimmons.com
Slide 227
jensimmons.com/post/feb-27-2017/learn-css-grid
Slide 228
developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
Slide 229
Time to explore.
Slide 230
A
basic design is
functional.
A
great one will
say something.”
— Tinker Hat field,
shoe de signer for Nike
“
Slide 231
jensimmons.com
@jensimmons layout.land
labs.jensimmons.com Thanks!
