How To Get The Perfect Spacing In Web Design — Transcript

Full transcript

1. 0:00[Music]
2. 0:02hi guys welcome back to the channel
3. 0:04today we're going to be talking about
4. 0:05spacing elements in web design
5. 0:07specifically
6. 0:09I'm going to show you the simple rules
7. 0:11we do here and how you can get your
8. 0:13websites to feel natural smooth with
9. 0:16great hierarchy and the main benefits of
10. 0:19this is number one it's going to be
11. 0:21great for the user to have recognizable
12. 0:23patterns they're going to understand
13. 0:24what content belongs to what elements
14. 0:27how it's all grouped together they don't
15. 0:29even need to think about it and second
16. 0:31is that it's going to be much easier for
17. 0:32your developer
18. 0:34build this right we'll get into that so
19. 0:37the first thing we need to be aware of
20. 0:38is the ux law of proximity so if we have
21. 0:41a look at this website here laws of
22. 0:43ux.com and I'll leave a link to this
23. 0:45page in the video description
24. 0:47let's look at the law of proximity I
25. 0:49think this is the bare minimum you need
26. 0:51to understand in order to get a website
27. 0:52to sing so it states that objects that
28. 0:55are near or proximate to each other tend
29. 0:57to be groups together
30. 0:59makes sense key takeaways being
31. 1:02proximity helps to establish
32. 1:03relationship with nearby objects
33. 1:05elements in close proximity are
34. 1:08perceived to share similar functionality
35. 1:09or traits and proximity helps users
36. 1:12understand and organize information
37. 1:13faster and more efficiently this is
38. 1:17really important people don't spend a
39. 1:19long time on websites it's our job to
40. 1:22make it as easy as possible for them to
41. 1:24scan and digest the content let's have a
42. 1:26quick look at this example that they've
43. 1:27included which is really helpful which
44. 1:29shows a Google search result and we know
45. 1:32everyone knows this right this is one
46. 1:34result here at the top this is the next
47. 1:36result this is the next result we can
48. 1:38scan this without even thinking and we
49. 1:40know that and that is all to do with the
50. 1:42spacing of these elements so each sort
51. 1:45of card has or each result which I would
52. 1:47call the card has a maybe four or eight
53. 1:50pixels space between each and then
54. 1:52between the that result and the
55. 1:54following result there's maybe about 40
56. 1:56or 56 pixels Gap there
57. 1:59so we can see groups content together
58. 2:00and then the next group of content and
59. 2:02then the next group of content and
60. 2:04that's all it is so this is the law of
61. 2:06proximity study that one up have a look
62. 2:09at the rest of this website it's a
63. 2:10fantastic resource and you should read
64. 2:12all of these there's also a great book
65. 2:13and I'll leave a link to that in the
66. 2:15description so let's have a look at this
67. 2:17design now with that in mind we can
68. 2:19obviously see that these three elements
69. 2:22as part of the hero design are grouped
70. 2:23closer than they are then the space
71. 2:26above and below so you can see we've got
72. 2:28120 pixels padding top and bottom and
73. 2:30then between these elements we've got 32
74. 2:32pixels and then the button group we've
75. 2:34got 12 to show that they are their own
76. 2:36separate subgroup
77. 2:38so where do you get these numbers from I
78. 2:41hear you ask well let's have a look over
79. 2:43at our handy spacing sizes cheat sheet
80. 2:45over here
81. 2:46and just a few notes here to kind of try
82. 2:49and explain this to you so first thing
83. 2:51we want to contain the information we
84. 2:54don't want the information spreading all
85. 2:55the way to the sides of the website we
86. 2:57need some space we need some breathing
87. 2:59room around everything 1200 pixels is a
88. 3:02good place to start from container a lot
89. 3:04of people do 1280 some people go down as
90. 3:07low as sort of 960 ish which I feel is a
91. 3:10bit dated and everything's a bit too
92. 3:11narrow and squashed I always like to
93. 3:13start 1200 and when we're designing we
94. 3:15set this up on 40 40 width artboard
95. 3:19and then we want to think about padding
96. 3:21between sections we typically use three
97. 3:23different sizes of padding between
98. 3:24sections and these will always be
99. 3:27divisible by eight which we'll get into
100. 3:28in a moment so maybe you'd have you know
101. 3:30your large padding in 44 your medium is
102. 3:3480 and your small is 40. that's just you
103. 3:37know obviously each design is different
104. 3:40that's just a good place to start
105. 3:42this is going to ensure consistency we
106. 3:45don't want all sections to have
107. 3:46different amount of padding it's nothing
108. 3:48worse than from a developer's point of
109. 3:50view when he opens up a design and sees
110. 3:5267.5 pixels at the top and 158 at the
111. 3:56bottom here that means he's going to set
112. 3:58up a separate class for the top and the
113. 4:00bottom spacing and then the next section
114. 4:02is different so he's like oh goodness he
115. 4:04or she sorry and they're going to have
116. 4:06to do a different class for the next bit
117. 4:08and then a different class for the next
118. 4:09one because they should be able to look
119. 4:11at your design create all of their
120. 4:12Styles before to make their job easy and
121. 4:15official which saves money for the
122. 4:18client right everybody's happy so this
123. 4:21is all by using what's known as a four
124. 4:23or eight pixel grid
125. 4:25hopefully you've heard of that before
126. 4:26and the reason we do this is just that
127. 4:29everybody uses it it's really easy
128. 4:32um to work out the spacing system just
129. 4:34works really well on the eyes it's easy
130. 4:36to digest and the reason why I say four
131. 4:38or eight is a lot of people call it four
132. 4:40but if we laid out all of our spacing
133. 4:43and if we did this in increments of four
134. 4:45you'd end up with hundreds and hundreds
135. 4:46of different options you might be a bit
136. 4:48overwhelmed and you don't really need
137. 4:49them so we use
138. 4:51um four pixels up until 20. so a lot of
139. 4:55the times with space elements four
140. 4:56pixels between each other like in a
141. 4:58little card or a little small print text
142. 5:00and stuff like that sometimes 8 12 is
143. 5:02great 16 is Lush 20 Pretty Good Nice
144. 5:06Slice of a checkbox and then we get to
145. 5:0824 and that's obviously divisible by
146. 5:10eight and then we start jumping up by
147. 5:11eights so if for example you laid
148. 5:13something out with 24 pixels between
149. 5:15each three all of the three elements in
150. 5:18your group and it didn't quite feel
151. 5:20right you've just jumped up to 32 you
152. 5:22don't need to go to 28 or 29 just stick
153. 5:25to this eight pixel grid so these few
154. 5:28Simple Rules can help you and you can
155. 5:30also have a think about container sizes
156. 5:32so how we have padding between sections
157. 5:33we've got three sizes here you can have
158. 5:35three container sizes as well you can
159. 5:37have a large a medium and a small
160. 5:40all of that is just going to help your
161. 5:42design
162. 5:43flow really well so let's have a look at
163. 5:45the example and break it down
164. 5:48so if we turn our grids on we can see
165. 5:50that we've got a 12 column grid set up
166. 5:52there are 32 pixels between each of the
167. 5:5512 columns
168. 5:56the 4x8 as we've already gone over 120
169. 6:00top and bottom so that's our sort of
170. 6:02large spacing for a section that we've
171. 6:04decided here and inside this hero we've
172. 6:06got 32 between each great so we're in
173. 6:09bite we're adhering to the law of
174. 6:11proximity straight away we then have
175. 6:14this image which is set in a little bit
176. 6:16so this is only spanning 10 columns
177. 6:18instead of 12 and we might say hey
178. 6:21developer this is what our container
179. 6:23medium is it's going to be this big
180. 6:26then we have our next section so we can
181. 6:28see here we've got essentially three
182. 6:31rows of content so we've got two rows in
183. 6:33this grid and the title here so we've
184. 6:36got 56 pixels between that we've got 56
185. 6:39pixels between that this means that the
186. 6:42developer is going to just create one
187. 6:43Grid it's going to have 56 pixel space
188. 6:45between and then each of the columns is
189. 6:49going to have 32 pixel space between
190. 6:51really easy right so what we want to
191. 6:53think as designers is next time we're
192. 6:55making a grid or a section that needs a
193. 6:57headline and a grid or just three
194. 6:59columns let's do the same thing right
195. 7:01let's have 56 pixels between the title
196. 7:03and the grid let's have 32 pixels
197. 7:06between the cards that way the developer
198. 7:08only has to code this once they can then
199. 7:10copy and paste that code and another
200. 7:12great benefit
201. 7:13is that it's recognizable for the user
202. 7:17right they they've already seen this
203. 7:19they don't want to then be hit by a 25
204. 7:21column what the hell's going on here
205. 7:24they've already recognized this pattern
206. 7:25they see it again and the third major
207. 7:27benefit here is that it's going to keep
208. 7:29the CSS as light as possible which is
209. 7:31what we want to do when we're developing
210. 7:33websites the game is to make it as
211. 7:35efficient and clean as possible if this
212. 7:38if this had you know 100 pixels between
213. 7:41here and 90 between here it's going to
214. 7:44be a lot more difficult to code you're
215. 7:45going to have to write a lot more code
216. 7:47to get that spacing to work and it's
217. 7:49going to clutter the CSS file so again
218. 7:52here next section 120 120
219. 7:56and then here we'll come back to this in
220. 7:58a second sometimes you can break out
221. 8:00this grid that's okay a lot of people
222. 8:03think oh my goodness what on Earth are
223. 8:05you doing no one's going to come in and
224. 8:07measure your designs right we just want
225. 8:09to be
226. 8:10we have to find that balance between
227. 8:12adhering to the rules using the ux laws
228. 8:15which are all based in Psychology and
229. 8:18being creative sometimes if you're too
230. 8:20limited you can't your creativity can't
231. 8:22work so sometimes you could break out
232. 8:24that's okay and I'll show you how we set
233. 8:26this up and why in a moment and here we
234. 8:28go another example we've got a three
235. 8:30column grid let's have a look 32 pixels
236. 8:33between each element so this is the
237. 8:35exact same grid as above just the card
238. 8:38content inside is styled slightly
239. 8:40differently and that's fine because we
240. 8:41need to put in some Creative Flair here
241. 8:43and there 120 top 120 bottom perfect
242. 8:47it's the last thing to talk about let's
243. 8:49just quickly have a look at this and put
244. 8:50our guides on oh my god look that is
245. 8:53like a third over this column oh don't
246. 8:56open Slack
247. 8:57this is coming to here what on Earth is
248. 9:00going on actually in the design it
249. 9:02should be like this and I'll tell you
250. 9:03why right let's have a look looks good
251. 9:06feels natural
252. 9:08fine let's have a look if we adhered to
253. 9:11the rules right let's put this image
254. 9:13here so it's only spanning the six
255. 9:15columns exactly and let's turn our UI
256. 9:18back on
257. 9:21the space between 32 and that's off have
258. 9:24a look
259. 9:25it was really cluttered doesn't it it's
260. 9:27too close and especially because this
261. 9:29image here on the left has got loads of
262. 9:31space in it the whole theme of this
263. 9:33design here is about space we need space
264. 9:36right so I'm going to whack that back up
265. 9:39to 80. 80 is still divisible by hey I'm
266. 9:42cool with that
267. 9:43let's have a look at this it's this
268. 9:46spans six columns right this image the
269. 9:49reason I had it set here before is that
270. 9:51this is then 50 of the container width
271. 9:54this means the coding is really easy and
272. 9:56we can reuse this quite simply across
273. 9:58the site we can just have a class called
274. 10:00image 50 and it literally fills up 50 of
275. 10:04its parent we can just reuse that that's
276. 10:06fine no one is going to go and measure
277. 10:08and go oh my goodness you haven't
278. 10:10allowed for the gutter between the
279. 10:12columns
280. 10:13this doesn't line up let's make it line
281. 10:15up and have a look what happens
282. 10:17uh civil just increase the padding here
283. 10:22now it's working as part of the grid
284. 10:24let's have a look
285. 10:27too far away now they don't feel like
286. 10:29they're connected it feels like we've
287. 10:30got a floating image on one side some
288. 10:32floating text on the other side and the
289. 10:34Gap is too big that your eyes kind of
290. 10:36don't know where to look they're trying
291. 10:37to look out at the same time
292. 10:40so that's why I say it's okay to break
293. 10:43it so what you would do is you'd
294. 10:45probably start
295. 10:47and that's for 32 pixels between and you
296. 10:49go yeah that's what I'm supposed to do
297. 10:51doesn't quite look right and then if you
298. 10:52put your cursor in here hold shift and
299. 10:54press up on your keyboard it's just
300. 10:57going to bump it up in increments of
301. 10:58eight so let's bump it up until it feels
302. 11:01good 64 looks good I'm happy with that
303. 11:04but I'd keep it at 80 very happy with
304. 11:0680.
305. 11:07that works it's no problem sometimes
306. 11:09that's fine okay just don't go crazy
307. 11:12with it so I'm hoping that this video
308. 11:15helps
309. 11:16might be a good idea to take a
310. 11:18screenshot of this if I keep that on
311. 11:20there for you so you've got some sizes
312. 11:22to work with but just remember it's all
313. 11:25about consistency
314. 11:27space and hierarchy if you don't know
315. 11:30how to create good hierarchy in your
316. 11:32designs the easiest way is to get your
317. 11:35design to work just with the typography
318. 11:37just having a really clear set of rules
319. 11:39around your typography and if you're
320. 11:41looking for a video on how to do that
321. 11:43we'll leave one at the end of this video
322. 11:44for you I hope you got something useful
323. 11:47out of this if you did give us a thumbs
324. 11:49up and if you've got any comments let us
325. 11:51know down there we're always around and
326. 11:53we will see you in the next video thanks
327. 12:04[Music]
328. 12:06foreign
329. 12:08[Music]