The Secret Science of Perfect Spacing — Transcript

Full transcript

1. 0:02hi welcome back to chainlift let me ask
2. 0:04you a question how much space should I
3. 0:06put between this heading in this
4. 0:08paragraph you might say that it could be
5. 0:10like just equal to however tall The
6. 0:12Heading is that would be one unit or
7. 0:14maybe 1.15 or0 25 but if it gets much
8. 0:18further away then it stops really
9. 0:21seeming like they're connected it gets
10. 0:22absurd right like we know that the
11. 0:25heading in the paragraph need to stay
12. 0:27within this sort of comfort zone that's
13. 0:29straight forward enough right well what
14. 0:32about when we get a subheading in the
15. 0:34mix now this is a little bit more
16. 0:36complicated should this be closer to The
17. 0:38Heading closer to the paragraph or
18. 0:41exactly in between what if we put this
19. 0:44in a card and add an image or an action
20. 0:48bar Suddenly It's Not So straightforward
21. 0:50we haven't even talked about other
22. 0:52factors like the Border radius yet but a
23. 0:55properly spaced out card should look
24. 0:56like this when we compare it to what we
25. 0:58started with you can see that the one on
26. 1:00the right feels much more balanced but
27. 1:02is it really let's zoom in and find out
28. 1:05which one of these has symmetrical
29. 1:07padding many of you might think that
30. 1:09it's the one on the right but it's
31. 1:11actually the one on the left the one on
32. 1:13the right feels better due to something
33. 1:15called Optical Corrections and to better
34. 1:17illustrate what I mean by that let's
35. 1:19zoom in on the other one you see
36. 1:22mathematically the padding on this card
37. 1:24is symmetrical the left and the top
38. 1:26padding are equal they're the same
39. 1:27number of pixels but it doesn't really
40. 1:30feel symmetrical we want it to feel like
41. 1:33the text would slide perfectly up into
42. 1:35that top left corner but when the
43. 1:37padding is actually symmetrical you wind
44. 1:39up with a little bit too much on top
45. 1:41there's extra space and if I correct it
46. 1:44you can see how the extra space would
47. 1:46bleed over outside of the card now it
48. 1:48turns out this extra space is actually
49. 1:51derived from the difference between the
50. 1:53bounding box height and the actual
51. 1:55literal rendered pixel height of the
52. 1:58text shapes themselves they're
53. 2:00equivalent so when we offset by that
54. 2:03exact same amount we wind up with
55. 2:05something symmetrical that answers one
56. 2:07question mark and this just gives us an
57. 2:09idea for how complicated spacing can
58. 2:11really be when you dig into the details
59. 2:13but what about all these other ones how
60. 2:15far away should everything be from
61. 2:17everything else how to find the perfect
62. 2:19spacing for our purposes there are three
63. 2:22laws of spacing the first is that every
64. 2:25element is related to every other
65. 2:27element even if it's just because
66. 2:29they're in the same viewport some
67. 2:31relationships are stronger than others
68. 2:33though this is where your information
69. 2:34hierarchy comes from and the stronger
70. 2:37the relationship is the closer the
71. 2:39elements should be together generally
72. 2:41speaking let's talk about relationship
73. 2:43strength and we'll do it by looking at
74. 2:45this mockup of Apple's desktop nail app
75. 2:47by Austin coniff on figma community an
76. 2:50example of strongly related elements
77. 2:52would be the heading and subject line
78. 2:54within each list item here they're part
79. 2:56of the same informational unit the email
80. 2:59but by by contrast we would say that
81. 3:02this specific heading and this sidebar
82. 3:04menu item have a very weak relationship
83. 3:07The Heading is tied to the email but the
84. 3:09sidebar item is tied to the app's
85. 3:12overall navigation some elements are
86. 3:14strongly related like this heading and
87. 3:16subheading and a weekly related pair
88. 3:18would be the heading and the weather
89. 3:20icon they're farther apart and they're
90. 3:22less visually similar we're still just
91. 3:25looking at Laura msum though if we
92. 3:26replace this with actual content then we
93. 3:29add new layer of complexity to the
94. 3:31environment suddenly the relationships
95. 3:33have shifted the strong and weak
96. 3:35relationships are reversed the heading
97. 3:37and the icon are telling us about the
98. 3:40weather so now they have something in
99. 3:41common but the subheading is telling us
100. 3:43what city we're in to fix this card will
101. 3:46move the icon to the left and make it a
102. 3:48little bit
103. 3:49bigger now looking at them side by side
104. 3:52you can see how the one on the right
105. 3:53more accurately reflects the
106. 3:55relationships between the
107. 3:57elements how much space do you to use
108. 4:00and when do we just eyeball it no don't
109. 4:04eyeball it instead we're going to use
110. 4:07preset spacing values from a scaling
111. 4:09system and for this demonstration we're
112. 4:12going to use the lift kit system here
113. 4:15we're designing an employee handbook we
114. 4:17need to break up the spacing to make it
115. 4:19a little bit easier to read now uh the
116. 4:22first thing we're going to do is apply
117. 4:23some color grading to just make it
118. 4:25easier to spot different levels in this
119. 4:27type hierarchy now we're going to look
120. 4:29for relations we'll scan through the
121. 4:31document and group elements together
122. 4:33into pairs for example title and
123. 4:37subtitle that's easy heading and
124. 4:39subheading still pretty easy but what
125. 4:42about this paragraph the paragraph
126. 4:44complicates things but we'll take it one
127. 4:46step at a time we have three text
128. 4:48elements here that are technically part
129. 4:50of the same informational group so it
130. 4:52really comes down to the one in the
131. 4:53middle the subtitle is it more closely
132. 4:56related to the title or to the paragraph
133. 5:00I think it's more of a subtitle right so
134. 5:02that relation is stronger meaning they
135. 5:04are going to be closer together than the
136. 5:06subtitle in the
137. 5:08paragraph we're going to go to our list
138. 5:10of variables and figure out which one of
139. 5:12our presets we want to choose from and
140. 5:14we'll apply extra small so when we zoom
141. 5:17in we do want to remember that the
142. 5:20margin is always derived from the larger
143. 5:22text element always apply the margin to
144. 5:24the bigger
145. 5:25one now that's one relation taken care
146. 5:28of and we can move on to the subtitle
147. 5:31and paragraph the only real rule here is
148. 5:33that they just need to be farther apart
149. 5:36than the first two so in this case uh
150. 5:40I'm going to skip a level I'm applying
151. 5:42the value of medium so that's an extra
152. 5:45small space and medium space and now
153. 5:47we're done with those two and moving on
154. 5:49to removing the annotations you can see
155. 5:52that it's a lot cleaner when we go to
156. 5:54the next pair now we have the same
157. 5:55paragraph and then the heading that's
158. 5:58coming right after it now quick contacts
159. 6:00is an entirely new section in the
160. 6:02document semantically it really has
161. 6:04nothing to do with the paragraph that
162. 6:06comes before it so we can see that if we
163. 6:10look at spaces a b and c a should be
164. 6:13bigger than b which should be greater
165. 6:15than
166. 6:16C remember when we're picking variables
167. 6:20to use here we've already used extra
168. 6:22small and medium so I'm going to choose
169. 6:25large and the reason I'm not skipping a
170. 6:27level again is because the spacing scale
171. 6:30in lift kit is exponential you don't
172. 6:32really have to skip levels once you get
173. 6:34past medium but it can be helpful when
174. 6:37you're dealing with extra small and
175. 6:39small so we'll go through the whole
176. 6:40document like this and we will eyeball
177. 6:44but with parameters the scaling system
178. 6:46gives us some creative freedom and
179. 6:48prevents us from making bad decisions
180. 6:50and at the end of our process all of the
181. 6:53relational pairs will have their spacing
182. 6:54assigned and then when we remove the
183. 6:57annotations we can see how much easier
184. 6:58it is now to
185. 7:00read that does leave these padding
186. 7:04problems in the tab links and the table
187. 7:06cells which I'm just going to do right
188. 7:08here because this video is already
189. 7:09getting kind of long and when we look at
190. 7:11them side by side you can see how much
191. 7:13of a difference it makes to apply this
192. 7:16system here's how you can actually
193. 7:18implement this there's three ways the
194. 7:20first way is to just use liftkit it's a
195. 7:22clonable web flow project that offers a
196. 7:24lot of benefits I'll get into in a
197. 7:26second option two is you can DIY you you
198. 7:29can just learn the math and come up with
199. 7:31your own system and then the third is
200. 7:33that you can just pay chain lift to do
201. 7:34it lift Kit's my favorite suggestion
202. 7:37because not only is it free but it's
203. 7:38also super lightweight it's not a
204. 7:40component Library it's a framework that
205. 7:42just establishes guard rails for you you
206. 7:45can also learn it in like a day uh I
207. 7:48think that a lot of Frameworks that
208. 7:50require courses to learn are kind of
209. 7:52unnecessarily complicated lift kit is
210. 7:54designed to be well designed to have an
211. 7:57incredibly gentle learning curve
212. 7:59and there's no math involved you can
213. 8:01visit chainlift doio liftkit to install
214. 8:04it again it's a web flow clonable you're
215. 8:06going to love it option two option two
216. 8:08is
217. 8:09DIY and one of the pros of DIY is that
218. 8:12it's not really that hard there are a
219. 8:14lot of formulas that inform where these
220. 8:16spacing units come from but they're not
221. 8:18difficult to memorize but it does take
222. 8:20practice it's not as intuitive as
223. 8:22learning lift kit and uh it may require
224. 8:25a few days of practice but overall it's
225. 8:26still not that bad however I can't help
226. 8:29you if you do go for this route then uh
227. 8:32chainlift can't really give you any
228. 8:33support I mean I'm always happy to help
229. 8:36and answer questions and things like
230. 8:37that but uh I can't guarantee that I
231. 8:40will be able to fully wrap my head
232. 8:42around whatever custom system you buil
233. 8:44for this I am working on a patreon
234. 8:45course and I know I just said the
235. 8:46courses are stupid but not mine because
236. 8:49it's
237. 8:50me the last option is you can just hire
238. 8:52chainlift we'll set it up for you uh
239. 8:55we'll offer training teach you and your
240. 8:57staff how to do the whole thing
241. 8:58implement with your framework make sure
242. 9:00that it works correctly do QA all of
243. 9:02that good stuff you know what hiring an
244. 9:03agency is like and you get free support
245. 9:05forever which is also pretty cool so
246. 9:08other than that this has been a glimpse
247. 9:10into the secret science of perfect
248. 9:12spacing so if you have questions please
249. 9:14feel free to leave them in the comments
250. 9:17I get notifications directly uh because
251. 9:20the Channel's still pretty small so uh
252. 9:22there's a chance that you'll hear back
253. 9:23from me pretty quickly and if you leave
254. 9:25a comment uh it's the easiest way to get
255. 9:28in touch you can also email us I think
256. 9:30there's an email plastered everywhere
257. 9:31visit my website
258. 9:33um yeah that's pretty much it so uh
259. 9:36thank you for watching and we'll see you
260. 9:38next time