The 80% of UI Design - Typography — Transcript

Full transcript

1. 0:00most of the uis are just text and
2. 0:02buttons with some icons to help users
3. 0:04take necessary actions so mastering
4. 0:07typography is that 20% of the design
5. 0:10that gives you the 80% of the
6. 0:12results let's start by removing all the
7. 0:15font styles from this very popular UI on
8. 0:18the left sidebar we broke the selected
9. 0:20tab that's definitely bad for user
10. 0:23experience we have no idea where we are
11. 0:25right now same thing for the buttons on
12. 0:28top now coming to the feed itself there
13. 0:31is no hierarchy and point of focus so
14. 0:34it's tough to tell what we are looking
15. 0:35at it's just a bunch of text looking at
16. 0:39the original shows the impact of
17. 0:41typography in UI design let's try to
18. 0:43build it from scratch the most obvious
19. 0:46thing is to make the title bigger and a
20. 0:48bit Bolder than the rest of the elements
21. 0:50did you notice the Gap here it's not Gap
22. 0:53margin or padding it's the line height
23. 0:55doing its thing but more on that later
24. 0:58for now we have a UI that is almost
25. 1:00there but we can make it better right
26. 1:02now this whole thing looks like one
27. 1:04single block of information like we are
28. 1:07telling the user hey you better read
29. 1:09this as well but we know that the title
30. 1:12is connected to the thumbnail and users
31. 1:14should look at these two together before
32. 1:16moving on to the other elements in short
33. 1:18we don't just want the title to stand
34. 1:20out we also need it to stand on its own
35. 1:23separate from this group to do that we
36. 1:26need to understand how the human brain
37. 1:28recognizes shapes and patterns what do
38. 1:31you see here how can we separate them
39. 1:34into two groups we could space them out
40. 1:37like this but people might still get
41. 1:39confused between one group of six
42. 1:41circles or two groups of three circles
43. 1:44so let's try
44. 1:45size this is also confusing some might
45. 1:49see this as three groups instead of the
46. 1:50two we
47. 1:51intended let's try
48. 1:54color it's still not clear enough if
49. 1:56it's three or two groups but if we just
50. 1:58move the second group of bit down it
51. 2:00becomes very clear that it's two groups
52. 2:02instead of three you can validate this
53. 2:05by showing it to your friends or
54. 2:07colleagues now let's retrace our steps
55. 2:09before we go back to fonts you are going
56. 2:12to need size color and spacing to group
57. 2:14or separate elements technically spacing
58. 2:17falls under the law of proximity but
59. 2:19it's used for the same purpose to group
60. 2:22or separate elements speaking of laws
61. 2:25you can also use shape to group elements
62. 2:27but it doesn't help us in this case how
63. 2:30however we do have font weight more on
64. 2:32that later for now let's get back to the
65. 2:35UI we were designing earlier from what
66. 2:38we just observed we already have these
67. 2:40three properties to emphasize and
68. 2:41separate the title from this group all
69. 2:44we need is color but which color white
70. 2:47on black is already at the max contrast
71. 2:49possible so to emphasize this we need to
72. 2:53deemphasize that the easiest way to do
73. 2:56that is by tweaking the lightness value
74. 2:58and seeing what works best
75. 3:00in our case 60% lightness is the sweet
76. 3:03spot for keeping the text readable and
77. 3:05still emphasizing the title this is a
78. 3:08pretty brilliant technique in UI design
79. 3:11you know who else is brilliant the
80. 3:13sponsor of this video they are
81. 3:15exceptional at explaining complex topics
82. 3:17in simple ways brilliant offers
83. 3:19interactive lessons in math science
84. 3:22coding and much more all crafted by an
85. 3:25award-winning team of researchers and
86. 3:27professionals from Top tier institutions
87. 3:30the lessons are filled with interactive
88. 3:32problem solving activities that let you
89. 3:33play with the concepts a method proven
90. 3:36to be six times more effective than
91. 3:38watching lecture videos one lesson I
92. 3:41really liked is thinking in code it's
93. 3:43packed with essential coding elements
94. 3:45from loops and variables to nesting and
95. 3:47conditionals making it a great starting
96. 3:50point for your coding Journey if you're
97. 3:52already familiar with the basics you can
98. 3:54jump ahead and explore more advanced
99. 3:57topics brilliant literally has
100. 3:59everything and you can try it all for
101. 4:01free for a full 30 days just visit
102. 4:04brilliant.org
103. 4:05or click the link in the description
104. 4:09plus you'll get 20% off an annual
105. 4:11premium
106. 4:14subscription if we zoom out a bit we'll
107. 4:17see this color trick being used
108. 4:19everywhere the most important elements
109. 4:21have the highest contrast and then to
110. 4:23deemphasize other elements they just
111. 4:25played with the lightness value but this
112. 4:28is a bit different we will come to it
113. 4:30later in the video for now you just have
114. 4:33to understand the hsl color function and
115. 4:36how it's used in UI design it's short
116. 4:39for Hue saturation and lightness this is
117. 4:42the type of color you want like red
118. 4:44green or blue it's measured in degrees
119. 4:47on a color wheel starts at zero with red
120. 4:50120 is green and 240 is blue think of it
121. 4:54as picking the base color saturation
122. 4:57controls the intensity of that base
123. 4:59color a saturation of 100% gives you the
124. 5:03most intense version of the color and 0%
125. 5:06turns it into a shade of gray and
126. 5:08finally we use lightness to control the
127. 5:10brightness at 50% you get the base color
128. 5:14at zero it's black and at 100 it's white
129. 5:18so Hue represents color values that
130. 5:20range from 0 to 360 saturation is the
131. 5:23intensity measured in percentage and
132. 5:26lightness is a percentage that controls
133. 5:28the brightness
134. 5:30to assign a color we use these values
135. 5:32inside the hsl function like this for
136. 5:35this video all we need is the lightness
137. 5:37value after all this video is about font
138. 5:40Styles not
139. 5:42colors that's exactly what we did here
140. 5:45this has a lightness of 100% And this
141. 5:47one has 60 using the same concept we can
142. 5:51wrap this inside a card and give the
143. 5:53card 10 or 20% lightness we can also use
144. 5:57color just focus on the light value this
145. 6:01color is too bright for the card so
146. 6:03let's bring it down to
147. 6:0410% let's apply the base color to this
148. 6:07group and see if it works we'll check
149. 6:10that in a minute but first we need a
150. 6:12lighter color for the title because the
151. 6:14base color won't work in this case 90%
152. 6:18looks good but the base color is a bit
153. 6:20dark for this group so I'm going to bump
154. 6:23it up to 70 and see if that does the job
155. 6:26I think it will work but let's zoom out
156. 6:29and see how looks on a real UI we want
157. 6:31to check if the title stands out and if
158. 6:33the group is legible ideally you'd test
159. 6:36this with real users but you can also
160. 6:38show it to friends or colleagues for
161. 6:41feedback and by the way this is just
162. 6:43using a lighter color to highlight the
163. 6:45active tab lighter Shades appear on top
164. 6:48making them more important before we
165. 6:51move forward with the rest of the video
166. 6:53Let's improve this UI using the basic
167. 6:55concepts we've learned we have a list of
168. 6:58channels the user is Subs subcribed to
169. 7:00how can we provide a better user
170. 7:03experience firstly there is no hierarchy
171. 7:06everything just looks like a blob of
172. 7:08text secondly this button needs to stand
173. 7:11out let's zoom in some size and weight
174. 7:15to emphasize the title then a darker
175. 7:17color and smaller size to deemphasize
176. 7:19the username a lighter color to
177. 7:22highlight the button but the button
178. 7:23doesn't look quite right here let's move
179. 7:26it to the right and wrap everything
180. 7:28inside a card it's looking much better
181. 7:31now the button still looks a bit bulky
182. 7:33though let's reduce the font size to
183. 7:35match the username it looks good but
184. 7:39remember we're zoomed in we need to
185. 7:41check if it works at the original size
186. 7:44the username might be hard to read it
187. 7:46could use some weight and so could the
188. 7:49button I'll leave it to you to judge the
189. 7:51design for now let's shift
190. 7:55gears these are all the font sizes you
191. 7:57need to design 99% of apps and uis and
192. 8:01if you want just these three combined
193. 8:03with weight and color are enough to
194. 8:05build an entire UI how many font sizes
195. 8:08do you see
196. 8:12here these all have the same font size
197. 8:15of 16 pixels except for this one the
198. 8:18impact of weight and color on font size
199. 8:20is pretty wild so you don't need many
200. 8:23sizes to create hierarchy combining size
201. 8:26weight and color can do the trick I'm
202. 8:29not saying you should create a typ scale
203. 8:31like this but this won't help you much
204. 8:33either you'll probably need something
205. 8:35more like this yep that's it everything
206. 8:38you see is 14 pixels except for the
207. 8:41title and the two headings it's the same
208. 8:43on this video page everything is 14
209. 8:46pixels except for the title and the
210. 8:48channel name for your project just pick
211. 8:51a base font size either 14 or 16 pixels
212. 8:55regular weight and 100% lightness I'll
213. 8:58get to light mode in a minute but let's
214. 9:00finish this first once you've picked
215. 9:03your base font try designing everything
216. 9:05with that size and when you absolutely
217. 9:07need to go two pixels up or down from
218. 9:10there that's it that's your typ scale to
219. 9:14make things easier assign them as Global
220. 9:16variables this isn't a CSS video but
221. 9:19here's how you can do it first set the
222. 9:22font weight then the font size and line
223. 9:24height and finally the font family any
224. 9:28popular font will work just fine you can
225. 9:31get them for free from Google first
226. 9:34convert the pixel unit to a rem value we
227. 9:36want our apt to follow accessibility
228. 9:38guidelines so users should be able to
229. 9:41adjust the font size if they need to
230. 9:43secondly this m value is very
231. 9:46important remember this Gap this is
232. 9:49crucial for the title to stand out and
233. 9:51stand alone in most cases we don't need
234. 9:54to manually add a gap or margin the line
235. 9:57height takes care of it automatically
236. 9:59acting as the margin bottom for text
237. 10:01elements so your Global variables might
238. 10:04look something like this and that's it
239. 10:07this is all you need to build a top tier
240. 10:10UI but keep in mind not all H1 elements
241. 10:13will share the same font style code for
242. 10:16document hierarchy but style for visual
243. 10:20hierarchy you might think this is the
244. 10:22obvious
245. 10:23solution but it should actually look
246. 10:25something like
247. 10:27this use your common sense to judge what
248. 10:30the user will focus on and emphasize
249. 10:32that
250. 10:33text once you're happy with the design
251. 10:36zoom out and view the entire UI font
252. 10:39size is a relative unit meaning it
253. 10:41depends on its neighboring elements
254. 10:43right now both are competing for
255. 10:45attention let's try a bigger font size
256. 10:48and see if that
257. 10:49works big bold fonts can often be too
258. 10:52harsh on the eyes so let's bring the
259. 10:54weight down and see if that works it
260. 10:57looks good but this is a dynamic number
261. 11:00so we need to account for that as well
262. 11:03don't just design for visual hierarchy
263. 11:05design for functionality
264. 11:07too let's now wrap things up by
265. 11:09converting this design to light mode
266. 11:12it's much easier than you think let's
267. 11:15start with these three colors white gray
268. 11:17and black as I said earlier all you need
269. 11:20is this L value so always use hsl
270. 11:23instead of hex or
271. 11:25RGB the background is pure black so the
272. 11:28light mode will be pure white but if you
273. 11:30look at the L value we just did a simple
274. 11:33calculation there subtract the L value
275. 11:35from 100 and that's all you need to do
276. 11:38with these colors
277. 11:39too let's do the same thing with this UI
278. 11:42which has a lot of colors in it some
279. 11:45used for gradient backgrounds and others
280. 11:47for text labels and
281. 11:49buttons here's what those colors look
282. 11:51like on a light background without any
283. 11:54modifications and if we subtract the L
284. 11:56value from 100 they'll look something
285. 11:58like this now all you have to do is
286. 12:01switch out the colors with the help of
287. 12:03CSS
288. 12:04variables I could keep going but
289. 12:07remember this video is about font Styles
290. 12:09not colors you can check out this color
291. 12:12generator on my website this could help
292. 12:15you break out of the typical gray color
293. 12:17scheme the link will be in the
294. 12:19description just below the like And
295. 12:21subscribe buttons