Designing with Grid — An Event Apart San Francisco

Transcript

1. Designing With Grid An Event Apart San Francisco @jenSimmons

2. CSS Grid

3. The Kiss, 1896

4. None

5. Our medium is not done

6. Layout on the web

7. None
8. None
9. None
10. None
11. None
12. None
13. None
14. None
15. None
16. None
17. None
18. None
19. None
20. None
21. None
22. None
23. None
24. None
25. None
26. None
27. None
28. None
29. None
30. None
31. None
32. None

33. photo by Brad Frost, 2012, CC BY 2.0

34. None

35. A C B A C B A C B A

    C B
36. None
37. None
38. None
39. None

40. starter-kit framework

41. Nicole Sullivan 2008 Ana Debenham 2011 Brad Frost 2013 D!igning

    Systems of Components

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

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

44. color palette typography palette layout palette

45. The Official Timeline of Web Page Layout The No-Layout Layout

    Table-based Layouts Hand-coded Float Layouts Framework Layouts Amazing Future!

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

47. This new CSS changes everything in web layout.

48. CSS Grid

49. Nature of CSS Grid

50. (Let s bust some assumptions) ’

51. explicit vs. implicit

52. You define "e size and/or number of rows and/or columns

    Let "e browser define number or size of rows or columns

53. Place each #em 
 into a specific 
 cell or

    area Let "e browser place each #em using auto-placement algor#hm

54. Rows *and* Columns

55. ROWS!!!!!!!!!!!

56. None
57. None

58. Tracks don’t have to all be the same size.

59. None
60. None

61. Content sized by the size of a track.

62. Tracks sized by the size of content.

63. portion of available 
 space — 2 parts set by

    
 content size fixed portion of available 
 space — 1 part

64. Content doesn’t have to fill a track.

65. None
66. None

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

    h

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

    h
69. None
70. None

71. You can use Grid to line things up. Or not.

72. What shall we do with CSS Grid?

73. How do we know 
 where to put things?

74. None

75. visual hierarchy

76. visual hierarchy Lorem ipsum dolor sit amet FUSCE UT TURPIS

    SIT AMET

77. symmetry

78. asymmetry

79. symmetry

80. asymmetry

81. proxim#y

82. proxim#y

83. dens#y

84. dens#y

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

86. Graphic design for the web

87. Graphic design of the web

88. labs.jensimmons.com

89. What I’ve Discovered in Six parts

90. 1. Overlap

91. from Designing the Editorial Experience, Sue Apfelbaum and Juliette Cezzar

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

93. None

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

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

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

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

98. Overlap

99. 2, The Viewport

100. None
101. None
102. None
103. None
104. None
105. None
106. None
107. None
108. None
109. None
110. None

111. storyboards

112. Storyboards for Star Wars, directed by George Lucas. Spartacus, directed

     by Stanley Kubrick. Storyboards created by Saul Bass.
113. None
114. None
115. None

116. Grid rows & columns Alignment Viewport Units

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

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

119. Viewport Units 50vh 25vh 50vw 25vh 50vw "at dang “fold”

120. Viewport Units 50vmin 100vh

121. None
122. None

123. Framing

124. None
125. None
126. None

127. Filmic Language

128. Webic Language

129. what does it mean to have a 
 reading experience

     with 
 a frame, where things move in and out of that frame?

130. what does it mean to have a 
 interaction experience

     with a frame, where things move in and out of that frame?
131. None

132. The Viewport

133. 3. White Space

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

135. None
136. None

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.
138. None
139. None
140. None
141. None
142. None
143. None
144. None
145. None
146. None

147. 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.
148. None

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

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

151. None

152. Grid like a Modernist?

153. White Space

154. 4. Verticality

155. None
156. None
157. None

158. 4. Verticality

159. None
160. None
161. None
162. None
163. None
164. None
165. None
166. None
167. None
168. None
169. None
170. None
171. None

172. photo by Fan Ho

173. photo by Fan Ho

174. photos by Fan Ho

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

176. None

177. Verticality

178. 5. Flexibility

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

180. None

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

182. min-content max-content fr minmax()

183. None
184. None

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

186. None

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

     phrase with several words. This is a phrase with several words.
188. None
189. None
190. None
191. None
192. None

193. fr unit = “fraction”

194. None

195. 100% 33% 33% 33%

196. 100% 33.33333% 33.33333% 33.33333%

197. 100% 33.33333% 33.33333% 33.33333%

198. 100% 33% 33% 33% 2% 2%

199. 100% 32% 32% 32% 2% 2% 100% – 4% =

     96% = 32% 3 3

200. 100% 31.333% 31.333% 31.333% 3% 3% 100% – 6% =

     94% = 31.333% 3 3

201. 100% 31.666% 31.666% 31.666% 2.5% 2.5% 100% – 5% =

     95% = 31.666666666666666% 3 3

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

203. 100% 1fr 1fr 1fr 2em 2em

204. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr

     = 3fr total therefore, 1fr = 1/3 of the space

205. 1fr 1fr 1fr 2em 2em 1fr + 1fr + 1fr

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

206. 100px 1fr 1fr 1fr 1fr 100px

207. 2fr 1fr 50px 1fr min-content

208. 6fr 2.4fr 1fr 2.4fr 2fr

209. None

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

211. minmax()

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

213. None

214. .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); // nothing

     about rows } .item { // nothing about item placement }

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

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

     1fr minmax(40ch, 65ch)
217. None

218. “pixel perfect ”

219. What happens when parts of the content / interface are

     ‘missing’? Or are shorter / longer than ‘ideal’?

220. Design the flexibility model.

221. Flexibility

222. 6. Creativity

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

224. None

225. 1. Overlap 2. The Viewport 3. White Space 4. Verticality

     5. Flexibility 6. Creativity

226. Time to play.
 Time to learn.

227. nightly.mozilla.org

228. www.layout.land

229. labs.jensimmons.com

230. Modern Layouts: 
 Getting Out of Our Ruts Revolutionize Your

     Page: 
 Real Art Direction on the Web 2015 2016 available on jensimmons.com

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

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

233. Time to explore.

234. A basic design is functional. 
 A great one will

     
 say something.” — Tinker Hatfield, shoe designer for Nike “

235. jensimmons.com @jensimmons layout.land labs.jensimmons.com Thanks!