4 levels of UI/UX design (and BIG mistakes to avoid) — Transcript

Full transcript

1. 0:00I've designed apps and websites for over
2. 0:02a decade. And when I look back at my own
3. 0:05design journey, one thing is clear.
4. 0:08There are patterns to the kinds of
5. 0:10mistakes you make as a designer at every
6. 0:13level of your career. In this video, I
7. 0:15will highlight those patterns of
8. 0:17mistakes, what they are, when they
9. 0:19typically happen, and how to fix them so
10. 0:22that you can reach your next design
11. 0:24level faster. Here's how we'll do it. We
12. 0:26will take a screen from a real client
13. 0:28project in my agency portfolio and
14. 0:32redesign it starting from an unpaid
15. 0:34beginner level, iterating all the way to
16. 0:36a high ticket senior level. For each
17. 0:38level, we will call out the biggest
18. 0:40mistakes while providing resources and
19. 0:44guidelines so that you can avoid them.
20. 0:46And then by the end of the video, we'll
21. 0:49dig into a hidden mistake that even lots
22. 0:52of senior designers make and a solution
23. 0:56that can really set you apart in this AI
24. 1:00era that we're in. Let's get started.
25. 1:02So, at the beginner level, nothing
26. 1:04works. However, this isn't a surprise
27. 1:07since we have less than a year of
28. 1:09experience and we're not getting paid
29. 1:12for our work yet. But let's dive into
30. 1:14why it doesn't work. The first mistake
31. 1:16in this design is something as simple as
32. 1:19the copyrightiting. For example, do we
33. 1:21really need four words to communicate a
34. 1:24user's rewards? And does it make sense
35. 1:27for the button to be about earning
36. 1:29tokens when the action is actually about
37. 1:33claiming voting rewards? Clarity is key
38. 1:36in copyrightiting, and we're not really
39. 1:38nailing it here. Therefore, it's a fail
40. 1:42on the first principle, which brings us
41. 1:45to the visuals. Lots of beginners will
42. 1:47overuse flashy gradients, blur effects,
43. 1:51and other cool visual techniques like
44. 1:53that. And to be fair, even mid-level
45. 1:55designers do this, but the difference is
46. 1:57that they make it work. More on that
47. 2:00later. The best quick tip I can give
48. 2:02here is if you're unsure, opt for
49. 2:06simplicity instead of flashiness. A
50. 2:09simple but clear graph will help a user
51. 2:11much more than a fancy graph that is
52. 2:14hard to understand. In this case, since
53. 2:16we went for fancy and we couldn't pull
54. 2:19it off, it's a fail. But what about the
55. 2:22colors? First off, we're using too much
56. 2:25of a very strong red color, which makes
57. 2:28the UI straight up stressful to look at.
58. 2:31Everything here is screaming for
59. 2:33attention and therefore nothing gets
60. 2:35attention. Not even the things we want
61. 2:37to highlight in the UI. Now to make
62. 2:40coloring a bit easier, try the
63. 2:43603010 approach. 60% of the UI is a
64. 2:47neutral color like white or light gray.
65. 2:5030% of the UI is a complimentary color
66. 2:53like black and 10% of the UI has the
67. 2:58main brand color in this case red. This
68. 3:01UI feels more like a reverse at the
69. 3:04moment. And while that could work here
70. 3:07it doesn't. Now however it's time to
71. 3:10count the font sizes. 1 2 3 4 5 6. Six
72. 3:18different font sizes are used here and
73. 3:21four different font weights. It's
74. 3:23impossible to create a greatl looking UI
75. 3:26with this much variety in the text
76. 3:28department. So here's the easy fix. Try
77. 3:32to reduce those numbers that we just
78. 3:34talked about six and four by at least
79. 3:37two. So four sizes and two weights. That
80. 3:41will take you really far. In this case
81. 3:43though, it's a fail. But we're not done.
82. 3:46We don't need to look super closely to
83. 3:48see that things aren't really aligned in
84. 3:51here. And the things that are aligned
85. 3:53are spaced out randomly. 11 pixels here,
86. 3:5725 pixels here, just random numbers. So,
87. 4:00here's a little trick to improve spacing
88. 4:03quickly. It's called the eightoint grid
89. 4:05system. The main idea is that anytime
90. 4:08you use a number in your design, make it
91. 4:11divisible by 8 or 4. Instead of 25
92. 4:14pixels, use 24. Instead of 11, use 12. I
93. 4:19actually have a full video on this that
94. 4:21you can check out after this one linked
95. 4:23down in the description below. Anyways,
96. 4:25unfortunately, we fail here as well.
97. 4:28That's six out of six fails. A pretty
98. 4:30rough start. Surprisingly though, lots
99. 4:33of progress happens with just one year
100. 4:36of design obsession. Which brings us to
101. 4:39the junior designer. But before we go
102. 4:41there, if you want to learn from even
103. 4:43more realworld projects, you can check
104. 4:46out a full case study of this and other
105. 4:48projects that we've designed at SIPAP in
106. 4:51the link I've shared down in the
107. 4:53description below. Now, time for the
108. 4:55junior designer. Here we have a person
109. 4:57with one, two, maybe 3 years of
110. 5:00experience designing apps and websites.
111. 5:02They're likely either working in-house
112. 5:05somewhere or making anywhere from a
113. 5:07hundred to maybe 500 bucks, doing
114. 5:10smaller design gigs as a freelancer. And
115. 5:13usually copywriting is still a big issue
116. 5:16at this level. We still add unnecessary
117. 5:19words and write labels that don't really
118. 5:22make sense. For example, commit time
119. 5:25sounds like we're committing time
120. 5:27instead of votes. These are small
121. 5:30details that make a lot of difference if
122. 5:32we improve it. So, how do we do that?
123. 5:35The easiest solution nowadays is just to
124. 5:37take a screenshot of your UI, pop it
125. 5:40into chat GPT, and then feed it some
126. 5:43more context on the project, emphasizing
127. 5:46that you want copy that is clear but
128. 5:48short. For now, though, it's still a
129. 5:51fail. But that means that we get a shot
130. 5:54at redemption for the visuals. And here
131. 5:57we've actually stepped it up. Now, we
132. 5:59understand that visuals primarily serve
133. 6:01a communication purpose, especially if
134. 6:04it's a graph like in this case. And the
135. 6:06red dot in contrast to the gray bars
136. 6:09here communicates to the user, this is a
137. 6:12thing we want you to focus on. Sadly
138. 6:15though, we still think visuals
139. 6:17absolutely need a trendy skumorphic
140. 6:20effect with 45 layers of shadows. But
141. 6:23it's fine. We're still learning. So, a
142. 6:25first half pass and we're back to the
143. 6:28colors. As juniors, we have enough
144. 6:31experience to know that mixing colors
145. 6:34too freely easily turns into a disaster.
146. 6:37We also understand that overusing a
147. 6:40color could work against you if you want
148. 6:42to assign meaning to colors. So, we're
149. 6:45generally more passive when it comes to
150. 6:48color usage, which actually is a very
151. 6:50good thing. And one of the most
152. 6:52important learnings for creating clean,
153. 6:54professional interfaces, but it's a
154. 6:57balance. Here, we went from a UI that
155. 6:59overused our red main color to a UI that
156. 7:03now barely uses any of it, which makes
157. 7:06it a bit dull and therefore just a half
158. 7:12pass. In terms of font sizes, we still
159. 7:14have issues. Too big sizes, too small
160. 7:17sizes, too many sizes. It still happens
161. 7:20at this level, understandably. So,
162. 7:23sadly, it's a pretty quick fail here
163. 7:25that segus into spacing and structure
164. 7:28again, and we've made progress. But it's
165. 7:30evident that there's still no calculated
166. 7:34approach to how we space or structure
167. 7:36elements. pixel values are still a bit
168. 7:39random, which tells me that someone
169. 7:41forgot to study the eightoint grid
170. 7:44method, so it's a faily fail. That puts
171. 7:48us at two out of five half passes. And
172. 7:51while that might not seem great, we're
173. 7:54moving in the right direction here. The
174. 7:56design we saw isn't close to be worth
175. 7:58serious money, but things are about to
176. 8:01change at our next stage, the mid level.
177. 8:04Before we jump into that though, I'm
178. 8:06curious. How would you score your own
179. 8:09design skills? And how many years of
180. 8:12experience do you have? Let me know in
181. 8:14the comments. Now things start to get
182. 8:16interesting. We have somewhere between 3
183. 8:19and 6 years of design experience, and we
184. 8:22can potentially at this point rack in 8
185. 8:25to 10k USD per month with projects
186. 8:29likely ranging anywhere from 3 to 6K.
187. 8:32And this is clearly reflected in the
188. 8:35design. The copywriting is now even
189. 8:37clearer. There's a sense of it being
190. 8:39written for an actual user. It still
191. 8:42might not be the prettiest, but it
192. 8:44definitely looks better, which means
193. 8:47that we have our first half pass on
194. 8:50copy. But what about the visuals? They
195. 8:54look good, maybe a bit overworked, which
196. 8:57is something we usually see with
197. 8:59mid-level designers. Just like beginners
198. 9:01would add and add and add to the
199. 9:04rituals, designers at the mid level can
200. 9:07sometimes gravitate back towards that
201. 9:10same behavior. At this point of their
202. 9:12career though, they have a much more
203. 9:15trained design eye, which allows them to
204. 9:18make it work. So, while it's not
205. 9:20perfect, it's clearly a half pass, which
206. 9:23means we're stepping into colors with
207. 9:26momentum. As a mid-level designer, we
208. 9:28know that UIs don't need all the colors
209. 9:31of the rainbow to look good. We know how
210. 9:34to balance the UI by using different
211. 9:36shades or tints of one color instead of
212. 9:40multiple different colors. If you want
213. 9:42pro tips on shading and tinting, check
214. 9:45out Eric D. Kennedy's article that I
215. 9:48linked down below. Anyways, it's a good
216. 9:50old half pass. And we're back at the
217. 9:53point where the junior still tripped up,
218. 9:55the font department. But now, for the
219. 9:57first time, we understand how to use
220. 10:00fonts in a UI. We have less sizes, have
221. 10:03less weights, and while some sizes and
222. 10:06weights might still be a bit off, it's
223. 10:09starting to look cleaner. Half pass. And
224. 10:13onto the last point before we reach the
225. 10:15senior level and the hidden mistake. And
226. 10:19for spacing and structure, it's looking
227. 10:21pretty good. Related elements are
228. 10:24grouped nicely. We've started to use a
229. 10:26spacing system like the 8oint grid. And
230. 10:29as a result, the UI feels more
231. 10:31professional. It's not entirely cooked
232. 10:34like the young crowd might say, but it's
233. 10:36definitely a half pass, which brings us
234. 10:39to five out of five half passes. And the
235. 10:43final boss. As a senior designer, you
236. 10:45have at least seven years of experience,
237. 10:48which means you have designed so many
238. 10:50websites and apps that you're a safe bet
239. 10:54for clients that want both beautiful
240. 10:56design, but also design that actually
241. 10:59drives business metrics. That's why you
242. 11:01will see deals all the way from 20K to
243. 11:05over 100K from senior designers. Sounds
244. 11:08crazy. Let's dive into how it's
245. 11:11possible. First of all, the difference
246. 11:12in copyrightiting here might look
247. 11:14subtle, but when we actually study the
248. 11:17words and the length of the words, it
249. 11:20all just harmonizes so much better
250. 11:23because as a senior, we find ways to
251. 11:26communicate better with less. We know
252. 11:29that we don't need to write last 10
253. 11:32votes when we have a big label right
254. 11:35above saying voting or claim um if we
255. 11:39have a heading saying um rewards. And by
256. 11:42not repeating the same words, we reduce
257. 11:45cognitive load and visual clutter
258. 11:48without sacrificing clarity. And I know
259. 11:50that might sound like a minor detail,
260. 11:52but when you scale this across a full
261. 11:55app is a massive difference. So, we have
262. 11:58our first full pass and we're ready to
263. 12:00talk about the visuals again. They are
264. 12:03now clearly made with careful thought.
265. 12:06We add emphasis only to what matters and
266. 12:09we help the user make immediate
267. 12:11connections between different parts of
268. 12:14the UI by reusing visual patterns. For
269. 12:18example, here the commit part of the UI
270. 12:21gets connected to the current voting
271. 12:23period in the graph because we're using
272. 12:27the same pulsing circle. We're achieving
273. 12:29more with less. It's a full pass. But
274. 12:33what about the colors? Well, here we
275. 12:35basically just simplified what the
276. 12:37mid-level designer did. Instead of
277. 12:39gradients, just simple flat colors.
278. 12:41Instead of a button that screams error
279. 12:43states, we're saving the red color for
280. 12:46the graph. the rewards icon and the
281. 12:48commit indicator. It's nicer on the eyes
282. 12:51while calling attention to the right
283. 12:54things even more effectively. It's our
284. 12:57third full pass, which brings us back to
285. 13:00the fonts. We're finally down to only
286. 13:02four font sizes and two font weights.
287. 13:05And you can see here that we introduced
288. 13:07a monospace version of the font for big
289. 13:10numbers. And to avoid collision when
290. 13:13this reward number grows, we reuse the
291. 13:17heading size from the voting label for
292. 13:20our decimal fractions. And that's all it
293. 13:22takes for full passing again as we bring
294. 13:25out our rulers. And dang, this is what
295. 13:28we call structure. Elements are grouped
296. 13:31logically. Spacing is deliberate between
297. 13:35elements, inside elements, everywhere.
298. 13:38Those seven plus years of experience are
299. 13:41becoming really evident. Full freaking
300. 13:44pass were five out of five full score.
301. 13:48But what about that hidden mistake that
302. 13:50even senior designers make? Well, I'm
303. 13:52glad you brought it up. Let's talk about
304. 13:54it. This mistake doesn't have anything
305. 13:56to do with static UI or UX skills
306. 13:59because as you saw, senior designers are
307. 14:02capable of creating greatl lookinging,
308. 14:04well functioning interfaces. But thanks
309. 14:07to AI, in the coming years, we're going
310. 14:10to see an exponential increase in the
311. 14:13amount of apps that are available to us,
312. 14:16which means that designing memorable
313. 14:18experiences that connects us with
314. 14:21technology is going to be the easiest
315. 14:23way to stand out as a designer. And the
316. 14:26mistake most designers make, again,
317. 14:29seniors included, is that we get stuck
318. 14:33just focusing on static images. But to
319. 14:37create a true experience, we need to
320. 14:40treat UI design more like a movie. We
321. 14:43need to piece static screens together in
322. 14:46a way that makes the app a pleasure to
323. 14:49use. That's how we create truly
324. 14:52delightful apps and as a result also
325. 14:56drastically increase our price tags as
326. 14:58designers. Look at Phantom Wallet,
327. 15:01Airbnb, and even Dual Lingo. Those are
328. 15:04all great examples of apps that have
329. 15:07gone that extra mile, which raises the
330. 15:10question, how do you achieve this? Well,
331. 15:13that is a topic that is out of scope for
332. 15:17this video. But luckily, if you're
333. 15:19interested in a breakdown of these kinds
334. 15:21of apps and how they create memorable
335. 15:24experiences, I have a video on that here
336. 15:27that you can check out. Now, until the
337. 15:29next one, I want you to have an amazing
338. 15:31everything and we'll talk