Designing with Grid — UX Burlington

Transcript

1. Designing With Grid UX Burlington @jenSimmons
2. Slides & more: @jensimmons
3. CSS Grid
7. The Kiss, 1896
9. Our medium is not done
10. Layout on the web
37. photo by Brad Frost, 2012, CC BY 2.0
39. A C B A C B A C B A C B
44. starter-kit framework
45. Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D!igning Systems of Components
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
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 Headline Headline
48. color palette typography palette layout palette
49. The Official Timeline of Web Page Layout The No-Layout Layout Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!
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
51. This new CSS revolutionizes web page layout.
52. Nature of CSS Grid
53. (Let s bust some assumptions) ’
54. explicit vs. implicit
55. You define "e size and/or number of rows and/or columns Let "e browser define number or size of rows or columns
56. Place each #em 
 into a specific 
 cell or area Let "e browser place each #em using auto-placement algor#hm
57. Rows *and* Columns
58. ROWS!!!!!!!!!!!
61. Tracks don’t have to all be the same size.
64. Content sized by the size of a track.
65. Tracks sized by the size of content.
66. portion of available 
 space — 2 parts set by 
 content size fixed portion of available 
 space — 1 part
67. Content doesn’t have to fill a track.
70. start center end justify-items: s t r e t c h
71. start center end align-items: s t r e t c h
74. You can use Grid to line things up. Or not.
75. What shall we do with CSS Grid?
76. How do we know 
 where to put things?
78. visual hierarchy
79. visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS SIT AMET
80. symmetry
81. asymmetry
82. symmetry
83. asymmetry
84. proxim#y
85. proxim#y
86. dens#y
87. dens#y
88. My deep respect for form and positive and negative space comes from studying Frank Lloyd Wright ’s idea of compression and expansion. You walk into a F.L.W. building and the entrance way is so small it makes you almost dip your head. And then as soon as you walk into the main room, he blows up the space, and it makes you feel ‘oh, that ’s so good’. — Platon, photographer “
89. Graphic design for the web
90. Graphic design of the web
91. labs.jensimmons.com
92. What I’ve Discovered in Six parts
93. 1. Overlap
94. from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar
95. labs.jensimmons.com/2017/01-003.html
97. labs.jensimmons.com/2017/01-002.html
98. labs.jensimmons.com/2017/01-002.html
99. labs.jensimmons.com/2017/01-018.html
100. labs.jensimmons.com/2017/02-001.html
101. Overlap
102. 2, The Viewport
114. storyboards
115. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed by Stanley Kubrick. Storyboards created by Saul Bass.
119. Grid rows & columns Alignment Viewport Units
120. labs.jensimmons.com/2017/01-008.html
121. labs.jensimmons.com/2017/01-010.html
122. Viewport Units 50vh 25vh 50vw 25vh 50vw
123. Viewport Units 50vmin 100vh
126. Framing
130. Filmic Language
131. Webic Language
132. what does it mean to have a 
 reading experience with 
 a frame, where things move in and out of that frame?
133. what does it mean to have a 
 interaction experience with a frame, where things move in and out of that frame?
134. The Viewport
135. 3. White Space
136. labs.jensimmons.com/2017/01-003.html
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.
149. 1. 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.
151. labs.jensimmons.com/2017/01-021.html
152. labs.jensimmons.com/2017/01-021.html
154. Grid like a Modernist?
155. White Space
156. 4. Verticality
160. 4. Verticality
169. photo by Fan Ho
170. photo by Fan Ho
171. photos by Fan Ho
172. labs.jensimmons.com/2017/01-020.html
174. Verticality
175. 5. Flexibility
176. labs.jensimmons.com/2017/02-004.html
178. px em % pixels (or rem) percents 60px 10em 20%
179. min-content max-content fr minmax()
182. labs.jensimmons.com/2017/01-007.html
184. This is a phrase with several words. This is a phrase with several words. This is a phrase with several words.
190. fr unit = “fraction”
192. 100% 33% 33% 33%
193. 100% 33.33333% 33.33333% 33.33333%
194. 100% 33.33333% 33.33333% 33.33333%
195. 100% 33% 33% 33% 2% 2%
196. 100% 32% 32% 32% 2% 2% 100% – 4% = 96% = 32% 3 3
197. 100% 31.333% 31.333% 31.333% 3% 3% 100% – 6% = 94% = 31.333% 3 3
198. 100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% = 95% = 31.666666666666666% 3 3
199. .box { width: calc(100-(2*2em)/3)%;} 100% x% x% x% 2em 2em @media (min-width: 600px) { .box { width: calc(100-(2*2em)/3)%;}} @media (min-width: 800px) { .box { width: calc(100-(3*2em)/4)%;}} @media (min-width: 400px) { .box { width: calc(100-(1*2em)/2)%;}}
200. 100% 1fr 1fr 1fr 2em 2em
201. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr = 3fr total therefore, 1fr = 1/3 of the space
202. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr + 1fr = 4fr total therefore, now 1fr = 1/4 of the space 1fr 2em
203. 100px 1fr 1fr 1fr 1fr 100px
204. 2fr 1fr 50px 1fr min-content
205. 6fr 2.4fr 1fr 2.4fr 2fr
207. from alistapart.com/article/content-out-layout
208. minmax()
209. labs.jensimmons.com/2017/01-003.html
211. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); // nothing about rows } .item { // nothing about item placement }
212. labs.jensimmons.com/2017/01-016.html
213. grid-template-columns: 100px 1fr 1fr minmax(40ch, 65ch) 1fr; 1fr 1fr 100px 1fr minmax(40ch, 65ch)
215. “pixel perfect ”
216. What happens when parts of the content / interface are ‘missing’? Or are shorter / longer than ‘ideal’?
217. Design the flexibility model.
218. Flexibility
219. 6. Creativity
220. labs.jensimmons.com/2017/01-004.html
222. 1. Overlap 2. The Viewport 3. White Space 4. Verticality 5. Flexibility 6. Creativity
223. Time to play.
 Time to learn.
224. www.layout.land
225. labs.jensimmons.com
226. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com
227. jensimmons.com/post/feb-27-2017/learn-css-grid
228. developer.mozilla.org/docs/Web/CSS/CSS_Grid_Layout
229. Time to explore.
230. A basic design is functional. 
 A great one will 
 say something.” — Tinker Hatfield, shoe designer for Nike “
231. jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!