The Easy Way to Pick Perfect Spacing — Transcript

Full transcript

1. 0:00Let's start by setting the right spacing
2. 0:02for this list. Should I make it tighter
3. 0:04or more spacious? Should I keep the same
4. 0:06space for the heading or move it a bit
5. 0:08further or closer to the list? But
6. 0:10before we start, I need to clarify a few
7. 0:13points. This is a 27 in 2K monitor. So,
8. 0:17I have scaled the design to make things
9. 0:19legible at smaller screen sizes as well.
10. 0:21And throughout the video, most of the
11. 0:23font size is 1 rim, which is 16 pixels.
12. 0:26I will use rem instead of pixels because
13. 0:29we want our spacing to scale with the
14. 0:31font size. This helps create a spacing
15. 0:33system that is consistent and useful for
16. 0:36any UI you can imagine. For instance,
17. 0:38let's look at this list as an example.
18. 0:41If we want to try a smaller gap, we
19. 0:43don't have to guess a random pixel
20. 0:44value. We can just go like this. And we
21. 0:48can do the same for higher values as
22. 0:49well. Just increment by 0.25 rem or 4
23. 0:53pixels. So at a smaller scale the
24. 0:55spacing system looks like this. In most
25. 0:58cases you will be reaching for a one rim
26. 1:00spacing because most of the elements are
27. 1:02one rem font size. For example with this
28. 1:05list we can start by setting a one rim
29. 1:07spacing between all elements. And then
30. 1:09we can increase the spacing for the
31. 1:11heading because it is not part of the
32. 1:13list itself. And that's the most
33. 1:15important role of spacing. Grouping and
34. 1:17separating UI elements to help users
35. 1:19navigate the interface. For example, if
36. 1:22you put equal spacing between these
37. 1:23three actions, the UI will look
38. 1:25cluttered. Users will have to think for
39. 1:27a second regarding which button belongs
40. 1:29to which group. Start by grouping the
41. 1:32elements with the smallest space
42. 1:33possible. Then increase the spacing
43. 1:35between distinct groups by one rem. It
44. 1:38could be two rem as well if you have the
45. 1:40space. It all depends on the context and
46. 1:42your preference. Just make sure that
47. 1:45this space is smaller than the outer
48. 1:47space. For instance, look at a button
49. 1:49like this. The inner spacing between the
50. 1:51icon and the text should always be
51. 1:53smaller than the outer spacing or the
52. 1:55horizontal padding of the button.
53. 1:57Otherwise, the button will look ugly and
54. 1:59confusing to the user. You can use the
55. 2:01same spacing if you really want to. But
56. 2:03never make the outer spacing smaller
57. 2:05than the inner spacing. You only put
58. 2:07more inner spacing between elements when
59. 2:09they serve a different purpose. In this
60. 2:11case, the inner space between the like
61. 2:13and dislike buttons is greater than the
62. 2:15outer padding. However, if you notice
63. 2:17the inner space for the button itself is
64. 2:19still smaller than the padding and you
65. 2:21can always try a bigger padding so the
66. 2:23button looks nice and clean at all
67. 2:25screen sizes and of course test
68. 2:27different spacing to see which one is
69. 2:29the best for your design. But let us get
70. 2:31back to these buttons because I want to
71. 2:33talk about vertical padding. Have you
72. 2:35noticed that the vertical padding is
73. 2:37smaller than the horizontal padding?
74. 2:39There is a concept called optical
75. 2:40weight. Text has more visual noise on
76. 2:43the left and right sides because of the
77. 2:45varying widths of letters like U versus
78. 2:47W. Vertical space is much more
79. 2:49constrained by the cap height, which is
80. 2:51the height of flat capital letters, and
81. 2:53descenders, which are the tails on
82. 2:55letters like Y or G. So, if you put
83. 2:58equal vertical padding, that unnecessary
84. 3:00space will look off and make the button
85. 3:02look bloated and ugly. For buttons, just
86. 3:05pick a smaller value for the vertical
87. 3:06padding and two times or three times the
88. 3:09horizontal padding depending on the
89. 3:11context. But if you have a lot of
90. 3:13vertical elements, you are going to need
91. 3:15vertical padding to balance that optical
92. 3:17weight. In this case, we have 1.25 rem
93. 3:20padding on both sides. So the inner
94. 3:22elements have vertical room to breathe.
95. 3:24Can you feel the tension if I decrease
96. 3:26the padding to one rim and maybe scale
97. 3:28it down to its original size? Maybe it
98. 3:31looks fine to you, but if you have the
99. 3:33space, use it. Because a little extra
100. 3:35white space will only make things easier
101. 3:37to read. But a tighter spacing can
102. 3:39literally hurt user experience. So
103. 3:41whenever you want to pick spacing, do
104. 3:43not start with a smaller value like.5
105. 3:45rem and increase if needed. Instead,
106. 3:48start with a bigger value like 1.5 rem
107. 3:51and decrease the spacing if needed. Let
108. 3:53me show you what I mean by setting the
109. 3:55spacing between these inner elements. I
110. 3:57am going to use a bigger spacing like
111. 3:59one rem. This is obviously too much. So
112. 4:02let us try a lower value. This is much
113. 4:05better. But the title and author are
114. 4:07more closely related than other
115. 4:08information. So let us bring them
116. 4:10closer.
117. 4:12Maybe more. Other than that, I don't
118. 4:15think we need to touch anything else.
119. 4:17These buttons have a one rim spacing
120. 4:19because they belong to the same group.
121. 4:21But if you notice closely, they both
122. 4:23have one rim horizontal padding as well.
123. 4:25So the design looks clean and optically
124. 4:27balanced. If you increase or decrease
125. 4:29the spacing, the design will still work,
126. 4:32but it will not look balanced. You have
127. 4:34to train your eyes to notice these small
128. 4:35design details. And for me, it has
129. 4:38always been Mobin, the sponsor of this
130. 4:40video. I use Mobin on a daily basis.
131. 4:43Like today, I was designing some cards
132. 4:45for this video and was stuck on how to
133. 4:47highlight the selected card. So I opened
134. 4:49Mobin and searched for selected card.
135. 4:52And just like that, I got a lot of
136. 4:54professional and clean designs to steal.
137. 4:56I mean, take inspiration from. And this
138. 4:58is just one example. I cannot tell you
139. 5:01how much influence Mobin has on my
140. 5:03design choices. I don't have to visit 10
141. 5:05different sites and waste hours, if not
142. 5:07days, to come up with cool and
143. 5:09professional design ideas. Plus, the
144. 5:11features and functionality of this site
145. 5:13are on another level. And every few
146. 5:15weeks, they add a new feature that I
147. 5:17never knew I needed. Like when I saw
148. 5:20they added animations, I thought, "Yeah,
149. 5:22animations are cool." But then later
150. 5:24realized, of course, screenshots are
151. 5:27nice, but having live animations makes
152. 5:29it so much easier to stay on Mobin and
153. 5:31study these by playing them on a loop.
154. 5:33Mobin is a must have tool if you want to
155. 5:35improve your design game. Go check it
156. 5:37out. You will find the link in the
157. 5:39description. Now, let's get back to the
158. 5:41topic and fix the spacing for this UI.
159. 5:44As you can see, the typography, colors,
160. 5:46and icons are on point. But I kept this
161. 5:49tight spacing on purpose. I kept random
162. 5:51spacing to separate these three
163. 5:53sections. But apart from that, every
164. 5:55icon, text, button, and interactive
165. 5:57element has.5 REM spacing. Even the
166. 6:00padding inside these drop downs and
167. 6:02input fields is.5 rem. This is obviously
168. 6:05very bad for user experience, but the
169. 6:08design might look okay to some of you.
170. 6:10That's because of the consistency. Like
171. 6:12even if we did not pick the right
172. 6:14number, just because the spacing is
173. 6:16consistent throughout, we can still make
174. 6:18sense of what is what. So the first rule
175. 6:20of spacing is being consistent. Even if
176. 6:23the number is not right, if you stay
177. 6:25consistent, the overall design will look
178. 6:27okayish. It might not be very
179. 6:29userfriendly, but it will not look as
180. 6:31ugly as you might expect. Having said
181. 6:33that, let us fix this UI. I am going to
182. 6:36start with the first section by setting
183. 6:38a generous padding of two rem. As I said
184. 6:40earlier, we always start by setting too
185. 6:42much spacing and decrease it if needed.
186. 6:45Now, step one of picking the right
187. 6:47spacing is to break the UI into groups.
188. 6:49This title and text are closely related,
189. 6:51so they belong to group one. Group two
190. 6:54would be these options. And finally,
191. 6:56these two buttons will be group three.
192. 6:58Let's separate them by setting a gap of
193. 7:001.5 rem. You might ask, why this number?
194. 7:04Why not one or two rem? I have been
195. 7:06doing this thing for a while, so I just
196. 7:08know what will work here. But here is a
197. 7:10tip. If you want to group closely
198. 7:12related elements, use a value below one
199. 7:15rim. To separate, use something like 1.5
200. 7:19or 2 rem. And one remains
201. 7:23used for padding and grouping buttons.
202. 7:25But this is just a small tip and not
203. 7:27some science or design rule. Spacing
204. 7:29always depends on the context. You will
205. 7:32see what I mean in a minute. Now group
206. 7:34one looks fine to me as.5 rem spacing
207. 7:37works really well with closely related
208. 7:38elements but these elements definitely
209. 7:41need a little more room to breathe.
210. 7:43Let's try a bigger value like one rim
211. 7:45and see if we need to reduce that gap.
212. 7:47This is better for some of you this
213. 7:50might be too much but remember we are
214. 7:52zoomed in and a little extra spacing is
215. 7:54always better than a little tighter. Now
216. 7:57although we have equal spacing this
217. 7:59section doesn't feel balanced. If you
218. 8:01notice, all these options have equal
219. 8:03height because of these drop- downs and
220. 8:05input field. But the toggle is a bit
221. 8:07shorter. So we have to manually set a
222. 8:10height to this option. So the spacing
223. 8:11feels more balanced. Speaking of
224. 8:14balanced, if you remember, we have
225. 8:16already discussed optical weight and how
226. 8:18we need a bigger horizontal padding for
227. 8:20these elements that flow from left to
228. 8:21right. 0.5 to one rem. And let's change
229. 8:25this gap to space between so it's
230. 8:27cleaner and easier to navigate. Same
231. 8:29thing for this main action button.
232. 8:31People expect these to be on the right.
233. 8:33And finally, apply one remal padding and
234. 8:36gap to finish this section. But now, I
235. 8:39think this two rim padding is probably a
236. 8:41bit too much for this section. So, let's
237. 8:43do 1.5 instead. Better. Now, we can move
238. 8:47on to these two sections. I am sure at
239. 8:50this point you already know the next
240. 8:52steps. First, break the section into
241. 8:54groups. Then apply a bigger spacing like
242. 8:56one rim to separate. The first group is
243. 8:59already working, but these cards
244. 9:01definitely need bigger padding. And if
245. 9:03you remember, we usually put the same
246. 9:05outer spacing or gap as the inner
247. 9:07spacing or padding for a better visual
248. 9:09balance. But something still feels off.
249. 9:12You see, for these cards, we also need a
250. 9:14grid on top of padding, so they all have
251. 9:16equal width. You can do this with
252. 9:18flexbox or grid, or if you really feel
253. 9:21like it, just directly putting a fixed
254. 9:23width. Now we can move to section three.
255. 9:26But these icons feel too close to the
256. 9:28heading. So let's fix that as well.
257. 9:30Section three is super easy. Just use
258. 9:33space between instead of this 5 rem gap
259. 9:36and then separate them with a bigger gap
260. 9:38so they have some room to breathe. Let's
261. 9:41make these proper squares and fix
262. 9:42horizontal padding for this button. Then
263. 9:45we just need to bring everything
264. 9:46together and fix the spacing between
265. 9:48these sections. Let's try to rem. And
266. 9:51finally, let's scale it down to original
267. 9:54size and compare it to where we started.
268. 9:56All we did is group and separate
269. 9:58elements using the spacing system. And
270. 10:00we just use these values. Two remarse
271. 10:04three sections. So actually we just use
272. 10:06these three value. So if you do not want
273. 10:09to use the full system, just these three
274. 10:11can also work for most gaps, margins,
275. 10:14and padding. Not only that, but they
276. 10:16also make nice round corners as well.
277. 10:18Like if you put one rem padding and want
278. 10:20optically balanced border radius, these
279. 10:23values work really well together.