Perfect Spacing for Web Designers — Transcript

Full transcript

1. 0:00how much space should there be between
2. 0:02the these blocks of text if there's too
3. 0:04much they start to look unrelated but if
4. 0:07there's too little it's hard to make
5. 0:09sense of the information what should it
6. 0:12be the same equal between each block uh
7. 0:16what about between lines of type do we
8. 0:18need to change that does type size
9. 0:21affect these choices what about if we
10. 0:23make this title here twice as big and
11. 0:26what about if we introduce other
12. 0:28elements like maybe there's a photo
13. 0:30graph or a card or something like that
14. 0:32to the side how close should that be to
15. 0:34the block of text do we sort of eyeball
16. 0:37it there's 27 pixels in between what
17. 0:40about if there's multiple Graphics here
18. 0:42how do we sort of make sense of all this
19. 0:45sort of spacing and get it work together
20. 0:47well expert spacing is what makes
21. 0:49layouts work properly and look polished
22. 0:53so by the end of this short video my
23. 0:55goal is that you'll be able to make
24. 0:57beautiful and functional layouts in
25. 0:59figma and have a way of doing it and a
26. 1:01process for doing so so any type of
27. 1:05layout design is about managing spacing
28. 1:07the negative space this is a key skill
29. 1:10and it starts with handling type
30. 1:12typographers have a real Advantage when
31. 1:15moving over to digital design because
32. 1:17knowing how to set type properly gives
33. 1:20you lots of principles about spacing
34. 1:22that you can apply to other graphic
35. 1:24elements that you bring into the
36. 1:26composition so let's have a bit of a
37. 1:28look at type and then bring bring that
38. 1:30into a wider layout on a website so
39. 1:33looking at this type first of all um we
40. 1:37have all these sort of issues and
41. 1:38questions that I've just talked about
42. 1:40now let's come back to this block and I
43. 1:41want to demonstrate uh first of all just
44. 1:44on a huge headline some of the key
45. 1:46considerations so I've got one prepared
46. 1:48here to the side let's zoom out back to
47. 1:51100% in figma and if I just click on
48. 1:54this type here I've got it set in
49. 1:56another width and weight of this same
50. 1:59type that we're using today
51. 2:02ouro and it is starting off at the same
52. 2:05point size 16 so let's change that to
53. 2:07something huge like 240
54. 2:11pixels and then we've got these
55. 2:12different options so first of all I'm
56. 2:15going to go to type settings and I'm
57. 2:16going to make this uppercase and then
58. 2:18I'm going to look at um this option here
59. 2:21which is leading they call it line High
60. 2:24um for digital design and you'll use
61. 2:28that term in code and we can look at
62. 2:30increasing or decreasing this now with
63. 2:32body copy we generally wouldn't take it
64. 2:34under 100% we usually go up but with
65. 2:37headlines especially when the capitals
66. 2:38like this you can bring it down and sort
67. 2:40of tighten up this whole unit so about
68. 2:4390% is okay not too over the top and
69. 2:46then next to it we have letter spacing
70. 2:49now if you begin to space the Letters
71. 2:51Out you get these sort of different sort
72. 2:52of looks that you can create but in
73. 2:55general the larger the type the narrower
74. 2:58the tracking the letter spacing wants to
75. 3:00be so I'll maybe just bring this down to
76. 3:02just like minus 1% just to tighten that
77. 3:06up a little bit if you see if we do
78. 3:08before at zero and then after at minus
79. 3:11one it just tightens it and make this
80. 3:13look like more of a unit together okay
81. 3:17let's go back to our body copy and think
82. 3:19about how that works so the same
83. 3:21principles here if we select this body
84. 3:24copy which these longer sentences here
85. 3:26now we already have an okay uh measure
86. 3:28for the web you wouldn't really want the
87. 3:31line lens to be much smaller than this
88. 3:33but this is okay for a start but to make
89. 3:35this a bit more legible I'm going to
90. 3:37actually increase the leading the line
91. 3:39height so I'm going to start about
92. 3:42130% which is tends to be my kind of
93. 3:44go-to start for uh body copy and then
94. 3:48I'll bring it up or down from that
95. 3:50depending on the particular font that
96. 3:52we're using so this is pretty good but
97. 3:55then we have a paragraph here so what a
98. 3:57lot of people do is just hit a carage
99. 4:00return and have that as a full space
100. 4:02there but that's not like the proper typ
101. 4:06setting way of of doing it the best
102. 4:09thing to do if we just delete that
103. 4:10carriage return like we would do uh in
104. 4:13print um and you know I've in my time
105. 4:16you know set books and larger documents
106. 4:20and things like that is actually have a
107. 4:21paragraph spacing so we've got it here
108. 4:24so you can start to just push this up
109. 4:26and you don't want it as large as that
110. 4:28full carriage turn which was something
111. 4:30like that around 24 so I would bring
112. 4:33that down to be something narrower like
113. 4:36maybe eight and that looks a lot better
114. 4:39together kind of as a unit right now we
115. 4:43need to think about this type and how
116. 4:44that
117. 4:46all uh goes together and how much sort
118. 4:48of space we want between things
119. 4:51now this is all about your hierarchy and
120. 4:55establishing that hierarchy and the
121. 4:57other principle of layout that you want
122. 4:59to think about is grouping or proximity
123. 5:02so every element in your layout is
124. 5:04related to one another so you just have
125. 5:06to think about how strong those
126. 5:08relationships are and the stronger the
127. 5:11relationship in general the more
128. 5:13connected things are going to be and
129. 5:15often that's by proximity just putting
130. 5:17them closer together this will become
131. 5:19more obvious as we start to you know do
132. 5:21some uh real examples so really this is
133. 5:25almost like one headline where it says
134. 5:26submit the Andes and then it says uh ma
135. 5:29a pict to track so really these things
136. 5:32don't want to be too far away from
137. 5:33another so I'm going to actually bring
138. 5:36everything you know sort of closer to
139. 5:39one another so I've just here I'm using
140. 5:41Auto layout on this Frame here bringing
141. 5:44this vertical gap down to four to start
142. 5:48with then I want to group uh these guys
143. 5:51together I'll just put them in a frame
144. 5:54there and so then maybe it's the it's
145. 5:57it's actually this Frame um where we
146. 6:00have that Gap so I'm going to turn that
147. 6:01to an auto layout and that's four and
148. 6:03then this
149. 6:05overall uh gap between the other eight
150. 6:07items maybe we're going to increase that
151. 6:11a bit now hang on a second how do we
152. 6:13know what numbers to choose here are we
153. 6:15just kind of dragging this thing around
154. 6:17and seeing what looks good like okay
155. 6:20like 22 looks good well I think what you
156. 6:24need to do is work to a layout system
157. 6:26and it's best to have you know a
158. 6:28consistent math ma matics that work
159. 6:30through your layout now the common one
160. 6:33on the web is derived from the fact that
161. 6:38this type like we can see here is
162. 6:40actually 16 because on the
163. 6:43web we have something called Rems and
164. 6:47this is set in the browser it's like the
165. 6:50it means root M and 1 m is like the
166. 6:53default um font size and that tends to
167. 6:56be uh 16 pixels in most sort of uh
168. 7:01modern browsers So based off this kind
169. 7:04of math obviously like 16 you know the
170. 7:07rout is four going up in increments like
171. 7:114 8 12 16 20 24 and then that's kind of
172. 7:18too small an increment then we' maybe
173. 7:20jump up in eight and do 32 40
174. 7:2548 Etc okay so using this for 4/8
175. 7:31pixel grid system that becomes our
176. 7:35layout system that we use so here I'm
177. 7:38not going to just choose random elements
178. 7:40like this is a gap of four here I'm not
179. 7:43going to then say okay now I'm that's
180. 7:45I've done that at 16 but I'm not going
181. 7:47to say all right now it's going to be
182. 7:48like 27 and then the next one's going to
183. 7:51be seven and then it it's actually
184. 7:54following you know this system so that
185. 7:57the gaps go up according to these you
186. 8:00know multiples all the way through so
187. 8:03that's what we're going to start with so
188. 8:05let's bring this into more of a layout
189. 8:07so let's go over to our frame here and
190. 8:10I've just brought in a standard uh
191. 8:12desktop frame you can just create it
192. 8:14here in figma the 1440 wide one and what
193. 8:19I'm going to do is add a layout Grid in
194. 8:22here now you can see here we've got a 10
195. 8:24pixel grid so we might want to say do a
196. 8:2716 or a four if you really zoomed in you
197. 8:31know kind of laying out like detailed
198. 8:33icons or something you know to give us a
199. 8:35general idea but actually what I'm going
200. 8:37to do is go over to a column
201. 8:41grid and I want 12 columns which is the
202. 8:44standard one that I tend to use because
203. 8:4612 is divisible by 1 2 3 4 6 and 12 so
204. 8:49it gives me lots of options for layouts
205. 8:53and I'm going to keep the setting on
206. 8:54stretch which is going to adjust the
207. 8:56size of the column but then we set the
208. 8:58Gap so I'm I'm going to make the margin
209. 9:00on each side of the website 64 that's a
210. 9:04multiple of eight and the gutter I'm
211. 9:06going to go with half of that that's the
212. 9:08little space in between the columns and
213. 9:10I'm going to set that to 32 so now we
214. 9:14have our 12 colum layout here that we
215. 9:17can sort of um begin to work
216. 9:21with so let's bring what we've got over
217. 9:24into this and start to do a bit of a
218. 9:27layout now I had this little type unit
219. 9:30that we were using here but I've
220. 9:32actually got three of these for this
221. 9:35travel website so I want to create three
222. 9:39cards so I'm going to do a little layout
223. 9:40for that so we can demonstrate these
224. 9:43principles of spacing and these assets
225. 9:45that we're going to use I just grabbed
226. 9:47them from another video that we did a
227. 9:50little layout um challenge here on the
228. 9:53Channel with Maddie so let's bring these
229. 9:56over so we've got this trip number one
230. 10:00I'm just going to bring that into this
231. 10:05frame for the desktop and I'm think
232. 10:09because I've got three instead of just
233. 10:10doing three in a row which is a little
234. 10:12bit boring we'll do a big one on the
235. 10:14left and then two smaller ones over on
236. 10:18the right here so let me make a frame
237. 10:22before I do that actually I'm just
238. 10:24looking at this big type and there's no
239. 10:25spacing around it so using my principles
240. 10:28here I'm just going to add some padding
241. 10:31according to these
242. 10:34um you know multiples so I could maybe
243. 10:37do like 64 whoops that's not the right
244. 10:40one that's a gap between I want this top
245. 10:42and bottom P padding here which is okay
246. 10:45or maybe that's not big enough so we'll
247. 10:47maybe do like a one to a or something
248. 10:49like that and that goes down to the
249. 10:51bottom there just make sure our whole
250. 10:53frame is snapped to that okay fantastic
251. 10:57so you can see here we've got this sort
252. 10:59of this section here of like a big type
253. 11:01as we go through a website after these
254. 11:03featured ones and I'm just pressing
255. 11:05shift and G to just turn this grid view
256. 11:08off and on so I want another frame here
257. 11:12um so I'm actually going to draw it out
258. 11:15just you can see I want to go over six
259. 11:17columns so there's three and then
260. 11:20another one two three so that's 640 so
261. 11:24let's maybe do a square one so I'll type
262. 11:27in 640 for the height there The Fill I'm
263. 11:31just going to add a white fill because
264. 11:33if we turn this grid off you can see a
265. 11:34bit more clearly we've just got a light
266. 11:35gray background on this desktop if you
267. 11:37want to copy this it's just EA
268. 11:41EA there so I'm going to put this trip
269. 11:44within this Frame
270. 11:48here and I want to introduce a
271. 11:50photograph so maybe because I've got six
272. 11:52columns here I can bring this trip one
273. 11:55over to the right hand side here and
274. 11:58then
275. 11:59I can bring a photograph over on this
276. 12:02other side so let me find the correct
277. 12:05photograph and it is this one I'm just
278. 12:08going to alt option copy that down into
279. 12:11here I'm going to bring it into this
280. 12:14Frame number two and I'm just going to
281. 12:16change the height of it here actually to
282. 12:19640 so that's the exact right height and
283. 12:22then align it to the left and the
284. 12:25top and then I just want to drag the
285. 12:28size of it so it covers over my three
286. 12:30columns but I'm going to leave the
287. 12:32gutter here so that can be our sort of
288. 12:34space
289. 12:36between so what I've actually done there
290. 12:38by mistake is I've dragged the frame
291. 12:40instead of the image underneath so I'm
292. 12:41going to undo
293. 12:43that and I want to make sure it's this
294. 12:46that I'm selecting which now I've got
295. 12:48that image and I'm going to hold down
296. 12:51command to my guides back on so I can
297. 12:54see what I'm
298. 12:55doing and I'll bring that to three or
299. 12:57four which snaps to there okay let's
300. 13:01just recrop this
301. 13:06Photograph fantastic so now we have a
302. 13:08little bit of uh a layout going
303. 13:11on now with this type on the left I want
304. 13:15to make sure I can set all these margins
305. 13:17completely because this is just floating
306. 13:18around at the moment so what I'm going
307. 13:22to do is make this the whole size of
308. 13:25this
309. 13:26column if I just drag this over here
310. 13:30and that again the width should go to
311. 13:31three or four and this should be
312. 13:34640 okay fantastic so then I can
313. 13:38actually set within here the the borders
314. 13:40that I want I'm actually going to go to
315. 13:42this Frame and let's call rename this
316. 13:46left and I'm going to make a size of
317. 13:49round the corners now again you can just
318. 13:50sort of drag this out with your eye and
319. 13:53just sort of see when you think it looks
320. 13:56pretty good but obviously we want to use
321. 13:59system so I'm going to type in 16 rather
322. 14:01than doing it at
323. 14:0415
324. 14:05um then this type here let's select this
325. 14:11trip Auto layout frame and let's just
326. 14:15set some borders on this so remember our
327. 14:18gutter here is 32 so we probably want to
328. 14:22think about that being our sort of
329. 14:25padding within this little card
330. 14:29so I could just do this as 32 32 for
331. 14:33these paddings horizontally and
332. 14:35vertically the problem with that is well
333. 14:38firstly we don't need it on the left
334. 14:43because
335. 14:45the gutter here of the columns already
336. 14:48serves as that so I'm going to do
337. 14:50individual padding I'm going to turn the
338. 14:52left one off and now we can see a bit
339. 14:55more if we zoom in actually it looks
340. 14:57like there's more space above this type
341. 15:00then to the left and that's just because
342. 15:02of the way these type um containers work
343. 15:07so I'm actually going to make here in
344. 15:09this Frame I'm going to change this to
345. 15:12copy I'm going to change that slightly
346. 15:16here to sorry that's just the top bit
347. 15:19isn't it I'm going to change that to
348. 15:22headline I'm going to change the top
349. 15:24padding to 24 so just taking eight away
350. 15:29and that looks to the eye a bit more
351. 15:31correct there
352. 15:35okay right
353. 15:37so this is improved but it's still you
354. 15:40know not ideal so we we need to now get
355. 15:44this to the point where it's uh finessed
356. 15:47so what I'm going to do
357. 15:49is I'm going to bring in some icons so I
358. 15:54prepared a couple
359. 15:56here in blue Peter style for all all you
360. 15:59uh British
361. 16:03viewers let's drag the whole frame
362. 16:06calendar
363. 16:07icon and then I've also got this Earth
364. 16:10icon here drag that in as well now
365. 16:13because this is on auto layout they've
366. 16:15just gone here in this order so we want
367. 16:18the calendar above the days and I think
368. 16:22what we'll do is put these next to each
369. 16:23other so let's do that for a minute
370. 16:25we're just going to create frames and
371. 16:27then Auto layouts if you want want to
372. 16:29just follow along make them go
373. 16:32sideways so again here you see these
374. 16:34issues straight away so first of all we
375. 16:36want to align
376. 16:37them centrally um middle you know
377. 16:42vertically but from the left and then
378. 16:44again you've got this Gap so like what
379. 16:45what's a good Gap like this starts to
380. 16:47look like unrelated so we have to think
381. 16:50about these principles of proximity when
382. 16:52we're doing the frames let's just do the
383. 16:54same thing with the Earth
384. 16:59this for some reason has changed its uh
385. 17:03size let's change it back we want to do
386. 17:07vertical from the middle but from the
387. 17:09left so we might want to think about
388. 17:10what's a good distance again you don't
389. 17:12want it too close doesn't look like
390. 17:15comfortable polish but you don't too far
391. 17:17away you need proximity so let's try
392. 17:19like eight that looks pretty good for
393. 17:22now so we'll try with
394. 17:25eight so these things now feel
395. 17:29uh a bit more related so I'm going to
396. 17:31change the name of
397. 17:34these I'm going to group the icon
398. 17:37[Music]
399. 17:39elements so we've got our headline our
400. 17:41body copy and our icon so we might want
401. 17:43to then revisit you know these sort of
402. 17:47gaps and may maybe see what's a good a
403. 17:51good amount so maybe it's like more like
404. 17:53a 40 or something like
405. 17:55that okay and we need some sort of
406. 17:57button here
407. 17:59so let's add a little bit of this um
408. 18:02something for a button so I'm going
409. 18:05to just copy this type here first of all
410. 18:10I'm just going to duplicate that where
411. 18:11it says five days I'm going to take it
412. 18:13outside of the the flow of
413. 18:17this and uh let's
414. 18:21just write something generic like learn
415. 18:23more something like that um and again
416. 18:27I'm going to bring that into a frame
417. 18:29let's just give that frame a
418. 18:31fill um I've got some colors up here
419. 18:35which I
420. 18:36prepared so I'm going to ey drop that
421. 18:38one it was also there in the bottom but
422. 18:41just so you can
423. 18:42see and again we've got these questions
424. 18:45about about spacing so w with buttons
425. 18:49and let's name this button let's make it
426. 18:50auto layout so we can just type in our
427. 18:53spacing with
428. 18:55buttons you want to allow you know a
429. 18:57good bit of space
430. 18:59you know on the top and bottom just so
431. 19:01they kind of they feel like a button
432. 19:03they're easy to click you know
433. 19:04particularly you know when we go over to
434. 19:06mobile as well so people's fat fingers
435. 19:09can hit these buttons so um let's you
436. 19:13know we'll just start with something
437. 19:15that's part of our system so let's do 16
438. 19:17and and eight maybe to begin with um and
439. 19:21I think I actually want this as a
440. 19:23rounded button so I'm going to do these
441. 19:25round corners here and I'm just going to
442. 19:27give it a big number like 6 before so
443. 19:29even if our button gets taller it's a
444. 19:31perfect pill shape actually looking at
445. 19:33this we've got another icon we can bring
446. 19:36in which is this Arrow
447. 19:40here and let's bring the arrow within
448. 19:44the button
449. 19:47frame Okay cool so then we'd M to think
450. 19:51about the Gap in between these things
451. 19:52but you know what I think I might
452. 19:53actually do is set that to Auto and I
453. 19:56think I'm going to change the width of
454. 19:58this button
455. 19:59to fill container so it goes right
456. 20:01across
457. 20:03here and then this might look cool kind
458. 20:07of at the bottom of this little card so
459. 20:11I'm going to go back over to my whole um
460. 20:16trip one info which is all the text here
461. 20:19you see and I'm actually going to change
462. 20:21the Gap here that I've been setting
463. 20:23manually Auto would drop this down but I
464. 20:26kind of like those gaps have established
465. 20:28so what I'm going to to do is group the
466. 20:30headline the body copy and the
467. 20:33icons let's put them in a frame then I'm
468. 20:36going to go to trip and I'm going to
469. 20:37change this vertical Gap to Auto and
470. 20:42that's going to drop because we've got
471. 20:43this fixed height the button to the
472. 20:46bottom so I can keep my side of look
473. 20:49okay so far so good now this spacing
474. 20:52doesn't look even by the way where this
475. 20:53is placed on the frame this left so I've
476. 20:57noticed it's 64 from the left because
477. 21:00that's what we set there as our outer
478. 21:02margin so let's change the Y to 64 as
479. 21:05well so then we have that good Gap
480. 21:07around it and that looks pretty
481. 21:11good okay so what we can do now is just
482. 21:15Co copy this guy over bring our grid
483. 21:18back
484. 21:19on so I'm going to hold option and shift
485. 21:23as I click and
486. 21:25drag
487. 21:27fantastic and for these next two we
488. 21:30don't have as much information let me
489. 21:32just cut
490. 21:33these I'm just going to paste them up
491. 21:37here we've just got the body copy after
492. 21:40the title so what I can do is go over to
493. 21:42this one that says left I'm going to
494. 21:44change that to right
495. 21:46top uh open this up I'm just going to
496. 21:51hide these
497. 21:53icons and then we can update the copy in
498. 21:57here
499. 21:59and just make sure you copy whilst
500. 22:02holding down shift so it whoops I chose
501. 22:05the wrong one so you copy the
502. 22:07formatting I actually think maybe we
503. 22:09could make this sort of bold might
504. 22:12just separate it out a little bit let's
505. 22:15change the weight up to
506. 22:18bold and maybe just bring that in at
507. 22:22minus one% as
508. 22:24well yeah that tightens it up nicely
509. 22:31bold minus
510. 22:341% now obviously we've got the height
511. 22:37here
512. 22:38wrong because I want two of these so I'm
513. 22:41going to make it half so you could just
514. 22:44go divided by two but then obviously
515. 22:46we're going to need a gap in between so
516. 22:49this Gap here this gutter was 32 I
517. 22:52remember so if I take 16 off then I'll
518. 22:55have a 32 Gap in the middle so you can
519. 22:57just type minus 16
520. 23:01fantasti so we've got that
521. 23:03there right top we need to change our
522. 23:07image which we can do momentarily now
523. 23:10it's this one on the right we've not
524. 23:11changed the height of that so if we
525. 23:13change this to 30 or4 our button should
526. 23:17appear beautiful and we've already
527. 23:19because of Auto layout all these
528. 23:21settings are fine so let's just quickly
529. 23:25change the image and duplicate all the
530. 23:27text so we can see what this whole thing
531. 23:29looks
532. 23:35like here we go so this is our layout
533. 23:38that we put together in just a few
534. 23:40minutes and one thing to bear in mind is
535. 23:44you create this system is just how we
536. 23:46worked in with those sizes so we had 64
537. 23:50here out on this outer margin and then
538. 23:53we used 32 on the the next bit around
539. 23:56and then and we kind of keep going down
540. 23:59like that as we go through I think this
541. 24:00one might have been slightly taller
542. 24:02maybe we could make that the same the 32
543. 24:05and then you know by the time we had
544. 24:07just a gap between an icon it's eight so
545. 24:09kind of getting the thing on the outside
546. 24:12and then working in you know is a really
547. 24:14smart way of doing it I'm just looking
548. 24:17at that now and I'm not happy with it so
549. 24:18I'm just going to go back in and fix
550. 24:20actually all these spaces so that
551. 24:23there's a little bit more here this
552. 24:26instead of four let's make it eight in
553. 24:29between these headlines and then make
554. 24:32sure actually this
555. 24:34Frame is an auto
556. 24:36layout and we'll change this Gap to
557. 24:4032 all the way
558. 24:43through and I've already done that over
559. 24:46on the left
560. 24:48here just to uh tighten all that up and
561. 24:52I think now that's looking good so
562. 24:54having that system which is based on the
563. 24:58the 4 8 12 16 20 24 then 32 and it kind
564. 25:02of goes up with the multiples of eight
565. 25:04really helps you make sure that
566. 25:06everything feels consistent it also
567. 25:09makes it a lot easier for a developer
568. 25:11and another thing you should do is this
569. 25:13stage is like the experimenting stage so
570. 25:16you should be fooling around and trying
571. 25:18out you know different larger uh sizes
572. 25:21of gaps and spacing and trying that on
573. 25:24multiple sections like we had this next
574. 25:26section we used a much lar larger
575. 25:29padding around this big type uh than we
576. 25:32did around our cards so just working
577. 25:34through that and then once you've done
578. 25:36that experimenting it's deciding on and
579. 25:39then writing out your layout system so
580. 25:42what are going to be the size of the
581. 25:44corners the left and right margins the
582. 25:46vertical padding the gaps um all the
583. 25:49settings for type like the fonts you're
584. 25:51using the line Heights the letter
585. 25:53spacing get those things written down
586. 25:56and if you also write down the colors
587. 25:58that you've used that becomes a whole
588. 26:00style guide which you can hand off to
589. 26:02the developer the developer will thank
590. 26:04you or if you're developing this website
591. 26:06yourself then it will really help you as
592. 26:09well save a lot of time and also work
593. 26:12with a lot more accuracy and help the
594. 26:14thing all kind of come together and the
595. 26:17thing about spacing is it is it has to
596. 26:19feel right you know Aaron Burns talks
597. 26:21about this I've got here actually his
598. 26:23famous book typography which was written
599. 26:26in
600. 26:261961 which still you know a brilliant
601. 26:29resource and if you learn to work with
602. 26:30type you can apply those principles into
603. 26:32all your layouts and he talks about the
604. 26:34fact that spacing has to feel right and
605. 26:37it's something that only comes through
606. 26:39experience let me put this up on the
607. 26:40screen and working with type it's good
608. 26:43training to try increasing or decreasing
609. 26:46the space between lines letters and
610. 26:48words until you begin to arrive
611. 26:50consistently at a satisfactory style of
612. 26:53spacing that is reflective of your own
613. 26:55particular taste that's what we were
614. 26:57just talking about you you experiment
615. 26:59you drag these things around you try
616. 27:00different numbers until it feels right
617. 27:03for the project and the feel that you're
618. 27:05trying to convey squint your eyes when
619. 27:08spacing that's a brilliant tip and then
620. 27:10it'll help you see the overall color
621. 27:12that doesn't mean coloring up the type
622. 27:14so the type is red or blue or green the
623. 27:17actual characters color in type is like
624. 27:20the the weight the color that it makes
625. 27:22on the page uh the impression it makes
626. 27:24on the page so squint your eyes and it
627. 27:27helps you see the over color and will
628. 27:29show uneven or spotty color of bad
629. 27:32spacing or alignment and I think if you
630. 27:34kind of squint your eyes here this
631. 27:37layout works now because everything
632. 27:40belongs to each other there's good
633. 27:42proximate relationships there's there's
634. 27:45use of
635. 27:46scale uh that brings interests and it
636. 27:49also guides the re view around this
637. 27:51layout it allows this to scan and
638. 27:53quickly find what they need uh within
639. 27:56this layout so bring all those
640. 27:58principles together keep practicing and
641. 28:02experiment before you firm up your
642. 28:03layout systems and work to a system and
643. 28:07you'll have great success until next
644. 28:08time happy designing