Every UI/UX Concept Explained in Under 10 Minutes — Transcript

Full transcript

1. 0:00If you want to get good at UI UX design,
2. 0:02you got to start with the basics. So,
3. 0:04let's begin.
4. 0:08This one's easiest to explain with an
5. 0:09example first. If I have three text and
6. 0:12icon pairs, but I put a container around
7. 0:14drinks and food, you know that they're
8. 0:15related and dessert is not. Then, if I
9. 0:18put a container around drinks, you know
10. 0:20that it's selected and you can toggle
11. 0:21over to food. If I gray this text out,
12. 0:23you know that it's inactive and clicking
13. 0:25it probably won't do anything. See how
14. 0:27you just knew all of that? I didn't need
15. 0:29to write instructions on how it worked
16. 0:31because the UI was signifying how things
17. 0:33worked. Good UI has many signifiers,
18. 0:35like a button press state, highlights on
19. 0:38active nav items, hover states, or even
20. 0:40tooltips to tell the user what a UI
21. 0:42affords or what it can do.
22. 0:47Now, take a look at this card. It
23. 0:48displays all of the information in a
24. 0:50logical, repeatable format, but it looks
25. 0:53like a spreadsheet, not a design. So,
26. 0:55let's give it some hierarchy, which is
27. 0:57pretty intuitive. We have size,
28. 0:59position, and color to use to our
29. 1:00advantage. Starting from the top, an
30. 1:02image always adds a great pop of color
31. 1:05and makes scanning super easy, just like
32. 1:07Uber. If in this case the item is the
33. 1:09most important, we want that large and
34. 1:11bold and at the top because otherwise
35. 1:13it'll blend in with something like the
36. 1:14time and date, which can be below and
37. 1:16much smaller. And it's this contrast,
38. 1:18the difference between small and big or
39. 1:21colorful and not, that actually creates
40. 1:23the hierarchy. It's also why price
41. 1:25should be at the top, right aligned, and
42. 1:27blue. It's different than the rest,
43. 1:28which draws the eye to it. The location
44. 1:30should be smaller and below like this.
45. 1:32But, instead of just from and to, we can
46. 1:34use icons and align to demonstrate that
47. 1:36it's moving from Jamesville to Syracuse
48. 1:39without having to actually say that.
49. 1:41Now, with that said, it's not an exact
50. 1:43science and you could definitely end up
51. 1:45with a design that looks like this
52. 1:46instead and it wouldn't be wrong. But,
53. 1:48the same ideas apply. Most important
54. 1:50things near the top, bigger and colorful
55. 1:52is more important, and images are used
56. 1:54whenever possible. And as you start to
57. 1:55design more and more, you'll notice that
58. 1:57similar patterns arise when you need
59. 1:59labels or buttons, which we're going to
60. 2:01talk about in a minute.
61. 2:02>> [music]
62. 2:05>> Now, some people have this misconception
63. 2:07that all of your content needs to align
64. 2:09to a 12-column grid and be exactly eight
65. 2:11pixels apart. But, these are just
66. 2:14guidelines. For example, this design
67. 2:15doesn't line up with any of the columns
68. 2:18and that's not uncommon, especially for
69. 2:20custom landing pages. But, for highly
70. 2:22structured pages like galleries, blogs,
71. 2:24or any repeating content, they can
72. 2:26actually be useful for responsiveness by
73. 2:28giving guidelines for responsive
74. 2:29behavior on tablet [music] with eight
75. 2:31columns and mobile with four. But, much
76. 2:33more important than using excessive
77. 2:35grids and layouts is white space,
78. 2:37letting things breathe. For example, in
79. 2:40a simple section like this, the large
80. 2:41text would have a font size and line
81. 2:43height like this and the subtext would
82. 2:45have a font size and line height like
83. 2:46so. Buttons would be similar and
84. 2:48optionally a top announcement bar like
85. 2:50this. [music] Then, simply 32 pixels
86. 2:52between every item, but you can also
87. 2:54group elements that just go together
88. 2:57like the announcement and text or the
89. 2:59text and subtext, [music] which is just
90. 3:00another form of visual hierarchy. And
91. 3:03this is where we see the four-point grid
92. 3:05system actually come into play.
93. 3:06Everything is a multiple, not because it
94. 3:08inherently looks better, but because you
95. 3:10can always split things in half, which
96. 3:12creates consistency throughout a design.
97. 3:15>> [music]
98. 3:17>> Typography is really interesting because
99. 3:20design is mostly just text. And for
100. 3:23picking a font, I can almost
101. 3:24unilaterally say you'll never need more
102. 3:26than one for any design. So, find a nice
103. 3:29sans serif font like the ones on screen
104. 3:31and stick to it. Over the last seven
105. 3:33years of designing, I've rarely used
106. 3:35[music] any fonts other than what's on
107. 3:37screen and this shouldn't be where
108. 3:38you're spending tons of time. I'm also
109. 3:40not a big fan of calling any design
110. 3:42skill a hack, but this one kind of is.
111. 3:45This design looks okay right now, but
112. 3:47our header text feels a little too
113. 3:49loose. If you tighten up the letter
114. 3:50spacing on this by about -2% to -3% and
115. 3:54drop the line height to about 110% to
116. 3:56120%, it instantly makes any larger text
117. 3:59look super pro real fast. But, hierarchy
118. 4:02with typography is a little bit more
119. 4:04nuanced. And if we look at our previous
120. 4:06example, text sizes can vary wildly. For
121. 4:09landing pages and websites, you
122. 4:10generally don't want more than six font
123. 4:12sizes, which can have a really large
124. 4:14range. For things like dashboards, that
125. 4:15range shrinks dramatically [music] to
126. 4:17where you don't normally have text sizes
127. 4:19larger than 24 pixels because of the
128. 4:21increase in information density. But,
129. 4:24honestly, one of the most important
130. 4:25concepts of design is getting
131. 4:27inspiration and doing research from a
132. 4:28good source, like today's sponsor,
133. 4:30Mobbin, who curates hundreds of
134. 4:32thousands of mobile and web apps along
135. 4:34with landing pages, too. So, you can
136. 4:36always pull inspiration from real
137. 4:37designs built by the top design teams in
138. 4:40the world. [music] And if you're
139. 4:41struggling with a specific section, just
140. 4:43go and search for it and instantly pull
141. 4:45up real-world examples with links to the
142. 4:47live sites, too. If you're interested,
143. 4:49you can check out Mobbin using the first
144. 4:50link down below to get 20% off. Now,
145. 4:53back to the video.
146. 4:54>> [music]
147. 4:57>> Colors are difficult and everyone has
148. 4:59their own taste, but I'm a big fan of
149. 5:01starting with one primary color.
150. 5:03Generally, this is your brand color.
151. 5:05Then, you can lighten it for a good
152. 5:06background or darken it for text colors.
153. 5:08Both good ways to incorporate subtle
154. 5:10color and make an otherwise drab design
155. 5:12look much more interesting. And with all
156. 5:14of that, we're already halfway to a
157. 5:16color ramp, which is what large
158. 5:18companies use to build out chips,
159. 5:19states, charts, and really anything
160. 5:21else. But, I also think it's important
161. 5:23as a beginner to let the color find you.
162. 5:25Like an announcement bar to grab
163. 5:27attention or a focus state on an input
164. 5:30or the green new chip on a link. These
165. 5:31are all semantic colors, which are
166. 5:33colors that have meaning and provide
167. 5:35signifiers to the user. Blue for trust,
168. 5:37red for danger or urgency, yellow for
169. 5:39warning, and green for success. Make
170. 5:41sure you use color for purpose, not just
171. 5:44for decoration.
172. 5:45>> [music]
173. 5:48>> Now, designing in dark mode presents
174. 5:50some pretty interesting challenges for
175. 5:52us. First, this card is using a light
176. 5:54border, which creates a bit too much
177. 5:55contrast. So, we'll lower that down. In
178. 5:57dark mode, we don't have shadows like
179. 5:59light mode, so to create depth, we need
180. 6:01to have a lighter card than the
181. 6:02background. So, I'll make that
182. 6:04adjustment. This chip is also far too
183. 6:06bright, so we can dim down the
184. 6:07saturation and brightness and flip that
185. 6:10for the text to create some hierarchy.
186. 6:12There's also a ton of flexibility for
187. 6:14deep purples, reds, or greens, not just
188. 6:16navy blue or gray.
189. 6:19>> [music]
190. 6:21>> But, speaking of depth, shadows are a
191. 6:23fantastic tool to use on light mode.
192. 6:25This shadow, along with most, is too
193. 6:27strong. So, reducing the opacity and
194. 6:29dialing up the blur helps a lot. The
195. 6:32strength you'll need depends on the
196. 6:33foreground and background, but cards
197. 6:35require less while content that sits
198. 6:37above other content like popovers will
199. 6:39need stronger shadows. We can even use
200. 6:41these techniques with inner and outer
201. 6:43shadows to create effects like raised
202. 6:45tactile buttons. Just remember, if the
203. 6:47shadow is the first thing you notice on
204. 6:49a design, you're not using it right.
205. 6:52>> [music]
206. 6:54>> Now, to create strong designs, you'll
207. 6:56need icons. Most icons are generally too
208. 6:59large, so the trick is to get the line
209. 7:01height of your font, in this case 24
210. 7:03pixels, and make the icons the same size
211. 7:05and then tighten up the text. Sidebar
212. 7:07links like this are actually just
213. 7:08buttons without a background until you
214. 7:10hover, which are often called ghost
215. 7:12buttons. And if we isolate one and
216. 7:13center it, we've got a perfect
217. 7:15standalone button. These are super
218. 7:17common when you have a primary and
219. 7:18secondary CTA side by side. And a good
220. 7:21guideline for padding on these is to
221. 7:22double the height for the width. And
222. 7:25these can be done with or without icons,
223. 7:27too.
224. 7:31A good rule of design is when a user
225. 7:33does anything, there should be a
226. 7:35response. For example, every button
227. 7:37needs at least four states: default,
228. 7:39hovered, active or pressed, and
229. 7:41disabled. Sometimes you'll need a
230. 7:42loading state, too, with a spinner.
231. 7:44Inputs are even more critical. You'll
232. 7:46need a focus state when the user clicks
233. 7:48in, error states with red borders and
234. 7:49messages when something's wrong, and
235. 7:51sometimes even warning states for
236. 7:53optional issues. And this applies
237. 7:55everywhere. Loading spinners when data
238. 7:57is fetching, success messages when an
239. 7:59action completes, even micro animations
240. 8:01on scroll or swipe. Every interaction
241. 8:04needs a response.
242. 8:08And that brings us wonderfully into
243. 8:10micro interactions. Micro interactions
244. 8:12are a form of feedback, but they step
245. 8:15things up a notch. For example, this
246. 8:17copy button has states and feedback when
247. 8:19we hover and click, but we still don't
248. 8:21know that we've copied anything.
249. 8:23Instead, if we have this chip slide up,
250. 8:25that's a micro interaction that confirms
251. 8:28our action. And these can range from
252. 8:30highly practical to much more fun and
253. 8:32playful.
254. 8:37Finally, overlays are really important
255. 8:39because if you screw them up, you're
256. 8:40going to ruin the image and the text,
257. 8:42too. In this case, we can't leave it as
258. 8:44is, so we could add in a full-screen
259. 8:46overlay, but it doesn't do the image
260. 8:48justice. So, instead, add in a linear
261. 8:50gradient that'll display the image then
262. 8:52smoothly converge into a text-readable
263. 8:54background. Or, if we're going for extra
264. 8:57fancy, we can add in a progressive blur
265. 8:59on top of the gradient for an even more
266. 9:01modern look. And that is more or less
267. 9:04every UI UX concept all wrapped up in 10
268. 9:07minutes. If you want to check out
269. 9:08Mobbin, it will be the first link down
270. 9:10below and you can get the link to all of
271. 9:12the Figma assets used in this video down
272. 9:14there, too. Thank you so much for
273. 9:16watching and I will see you in the next
274. 9:17one.