Give me 12 minutes, and I'll improve your web design skills by 176% — Transcript

Full transcript

1. 0:00Give me the next few minutes and I'm
2. 0:01going to improve your web design skills
3. 0:02by 176%
4. 0:04and I promise that's not a random
5. 0:06number. I built hundreds of websites for
6. 0:08clients who pay 10K, 20K, sometimes 50K
7. 0:12and beyond including three Fortune 500
8. 0:15companies and every single principle
9. 0:17that I'm about to show you is something
10. 0:19that I learned from that work. These are
11. 0:21the exact things that separate a site
12. 0:23that looks fine from a site that looks
13. 0:25like a premium agency built it and I'm
14. 0:28going to walk through all of them right
15. 0:29now back to back with no filler. Let's
16. 0:32start with the one that matters more
17. 0:33than any of them and it's the one most
18. 0:36designers get wrong because they spread
19. 0:38their effort across the whole page
20. 0:41instead of what people see first and
21. 0:43it's the hero section. The hero is the
22. 0:45first thing on the page, the bit you
23. 0:47land on before you scroll and one fact
24. 0:49about it changes how you should treat
25. 0:51it. A huge share of your visitors never
26. 0:53scroll past it. So whatever job your
27. 0:55whole site is meant to do, the hero has
28. 0:58to do most of it on its own. I treat the
29. 1:00hero almost like a mini site, a complete
30. 1:02pitch in one screen. That means it needs
31. 1:04four things all visible without
32. 1:06scrolling. First up, it needs a clear
33. 1:09headline that says what this is. Then
34. 1:11the context underneath it that says who
35. 1:13it's for or what it does. Social proof
36. 1:16so the visitor sees straight away that
37. 1:18other people trust this and an obvious
38. 1:20call to action, the thing that you want
39. 1:22them to do next. So headline, context,
40. 1:25proof, action all in the first screen.
41. 1:28For this one, let me show you a real
42. 1:29before and after. It's a site that me
43. 1:31and my team rebuilt because it lands the
44. 1:33point harder than any picture-perfect
45. 1:35example would and that company is
46. 1:37markups.ai.
47. 1:38[music] So markups.ai contract reviews
48. 1:41and the clever part of their pitch is
49. 1:43that it all runs over email with no
50. 1:45platform to log in to. The first version
51. 1:48that they had hit this completely. Logo
52. 1:50was slightly off, the main call to
53. 1:52action was too lacking in context, it
54. 1:54wasn't even a proper button and in the
55. 1:56background, it pulled your eye away from
56. 1:58the one thing that mattered. And so,
57. 2:00you'd land on this site with no idea
58. 2:02what they did or why you'd trust them.
59. 2:04So, you'd never book a thing. Now, look
60. 2:06at the rebuild. Right at the top,
61. 2:09there's an eyebrow line that states the
62. 2:10whole pitch in four [music] words, "All
63. 2:12work, no platform." And it's set in a
64. 2:15color that catches the eye. The headline
65. 2:17says exactly what you get. So, message
66. 2:19Agent Marco to negotiate any contract,
67. 2:22no jargon, and no guessing. One line of
68. 2:24context sits under it. That's the agent
69. 2:26trained on your own historical
70. 2:28contracts, so you know exactly what it
71. 2:30is. And the call to action is really
72. 2:32specific now. It says, "Book a demo." On
73. 2:35a software product, a vague sort of
74. 2:37schedule a call, it leaves people
75. 2:39wondering what they're even booking.
76. 2:41But, "Book a demo" tells them exactly
77. 2:43what happens next. We even added a small
78. 2:46custom mascot to bring the site to life
79. 2:48a little bit more. And there's a simple
80. 2:49test that tells you that a hero is
81. 2:51pulling its weight, even if the visitor
82. 2:54never scrolled past them, never saw a
83. 2:56testimonial, or a stat below the fold,
84. 2:58they could still make a decision from
85. 3:00that one screen alone. And that is the
86. 3:02bar the hero has to stand completely on
87. 3:05its own. So, get the hero right, and
88. 3:07you've won most of the battle.
89. 3:08Everything after this is about guiding
90. 3:10the visitor once they're in. The second
91. 3:13principle is visual hierarchy, and it's
92. 3:16the one that decides whether a page
93. 3:17looks professionally designed or just
94. 3:20dumped onto the screen gung-ho. Visual
95. 3:22hierarchy means deciding what the eye
96. 3:24sees first, then second, then third, and
97. 3:27doing it purposefully. When everything
98. 3:29on a page is the same size and weight,
99. 3:32the eye has nowhere to naturally land.
100. 3:34So, the whole thing, it just reads as
101. 3:36noise. The fix for this is to make the
102. 3:38single most important thing the biggest
103. 3:40and the boldest, then incrementally turn
104. 3:43down everything else that matters less.
105. 3:45The main headline is loud. The
106. 3:47supporting text is a little quieter. The
107. 3:49fine print is going to be quieter again.
108. 3:51So, you're building a path for the eye
109. 3:53from top to bottom. The quickest way to
110. 3:55test your own page is just squint your
111. 3:57eyes at it or shrink it down small. If
112. 3:59you can still tell what the most
113. 4:01important thing is, then your hierarchy
114. 4:03works. If it all blurs into one gray
115. 4:05block, then nothing's leading the eye
116. 4:07and the page reads as cheap even if
117. 4:09every individual piece is [music] nice.
118. 4:12That's the order that the eye moves in.
119. 4:14So, the third principle is about white
120. 4:16space and it's the one beginners are
121. 4:18most scared of because it looks like
122. 4:19you're leaving the page unfinished.
123. 4:21White space is essentially the empty
124. 4:23space around your elements and the
125. 4:25instinct when you've got a blank area is
126. 4:28just to fill it because empty space it
127. 4:30looks like wasted space. But,
128. 4:32realistically the opposite is true.
129. 4:35Space is what makes a site feel
130. 4:37expensive. When you give an element room
131. 4:39around it, you're telling the visitor
132. 4:41that this thing matters. So, look over
133. 4:43here. If you cram everything together
134. 4:45and nothing gets to breathe, then
135. 4:47nothing stands out and the whole page it
136. 4:50reads then as busy and quite amateur.
137. 4:53Look at the sites that read the most
138. 4:54high-end and you'll notice how much
139. 4:56nothing is actually on them. You've got
140. 4:58generous padding around text. You've got
141. 5:01real gaps between sections. The
142. 5:03expensive look is mostly restrained. So,
143. 5:05when a section is often, you know, you
144. 5:07can't say why, the answer is almost
145. 5:09always that it needs more space and not
146. 5:12more stuff. The fourth principle is
147. 5:15contrast and color. If you only fix one
148. 5:17thing after this video, fix this one
149. 5:20because it's the change that makes the
150. 5:22biggest visible difference for the least
151. 5:24amount of effort. Contrast is how much
152. 5:26something stands out from what's around
153. 5:28it and it does two jobs. The first is
154. 5:30readability. If your text doesn't have
155. 5:32enough contrast against its background,
156. 5:34then people physically struggle to read
157. 5:36it and a site you can't read comfortably
158. 5:38loses people in seconds no matter how
159. 5:40pretty it is. So, light gray text on a
160. 5:43white background that you might think
161. 5:45looks elegant is often just hard work
162. 5:47for the eye. The second job is steering
163. 5:50attention, [music]
164. 5:51and this is where color really earns its
165. 5:52keep. Your call to action, e.g. the
166. 5:54button that you want clicked, should be
167. 5:56the highest contrast thing on the page.
168. 5:58Most of your site should sit in a calm
169. 6:00restrained palette, and then your one
170. 6:02key action pops out against it. That pop
171. 6:05[music] is what pulls the eye and the
172. 6:07click. When a button blends into
173. 6:09everything around it, people just don't
174. 6:11see it. And a button that people don't
175. 6:13see might as well just not exist.
176. 6:15Electric car scheme is a really clean
177. 6:17example to show here. We have a
178. 6:19restrained palette across most of the
179. 6:20page, and then the key action stands out
180. 6:23against it. And there's no question
181. 6:25where they want you to go. If you'd
182. 6:27rather not hold all of this in your head
183. 6:28while you build, I've got something for
184. 6:30you. I put every single principle in
185. 6:33this video [music] with the weak version
186. 6:34and the strong version side by side into
187. 6:37a single printable [music] checklist.
188. 6:39So, instead of carrying it around in
189. 6:40your memory, you can have it open next
190. 6:42to you and just run down it as you go.
191. 6:44It's the whole video on one page. The
192. 6:46link's in the description, so go ahead,
193. 6:48grab it, and let's get straight back
194. 6:49into the principles. The fifth principle
195. 6:51is social proof, and the upgrade here is
196. 6:54where you put it, not whether you use
197. 6:56it. You already know to use it. Social
198. 6:58proof is basically the evidence that
199. 7:00other people trust you. The logos, the
200. 7:02testimonials, links out to, you know,
201. 7:04third-party review platforms, etc., etc.
202. 7:07And most sites, they actually bury it.
203. 7:09They build a page called testimonials
204. 7:11that nobody clicks. Or they drop a wall
205. 7:13of five-star quotes somewhere far away
206. 7:15from any decision. The proof is, you
207. 7:17know, it's technically there, but it's
208. 7:19nowhere near the moment the visitor is
209. 7:21deciding, so it does nothing. Proof has
210. 7:24to sit at the point of doubt. The
211. 7:25testimonial belongs right next to the
212. 7:27price, where the worry actually lives
213. 7:29for the visitor. The client logos belong
214. 7:32up near the hero section, where I told
215. 7:34you to put them earlier. So, trust, when
216. 7:36you put them there, lands in the first
217. 7:38couple of seconds. The review score, it
218. 7:40belongs on the thing that your user are
219. 7:42deciding about in the moment that
220. 7:44they're deciding. You're putting that
221. 7:46reassurance exactly where hesitation is,
222. 7:49so it answers the doubt before they've
223. 7:50even finished having it. The sixth
224. 7:52principle is typography, e.g. your
225. 7:54fonts. And it's one of the clearest
226. 7:56signals of whether a site was built by a
227. 7:59professional. The whole thing comes down
228. 8:01to two moves. So, first of all, just use
229. 8:04fewer fonts. You may think that you need
230. 8:07more, but one or two across the entire
231. 8:08site is generally does the trick. The
232. 8:10moment you've got four or five different
233. 8:12fonts fighting each other, the site
234. 8:14looks amateur because you've got zero
235. 8:16consistency. Restraint reads as control.
236. 8:19Second, your text needs a clear size
237. 8:21order that matches the hierarchy we
238. 8:24talked about. So, big confident
239. 8:26headings, clear subheadings, and body
240. 8:28text that's set at a size and spacing
241. 8:31that people can read without having to
242. 8:33lean in. And don't get clever with body
243. 8:35text. Decorative fonts, they look fun
244. 8:37for about a second, then they just kill
245. 8:39your readability. A site nobody can
246. 8:42comfortably read is a site that nobody
247. 8:44stays on. So, save the personality for
248. 8:46the headline, keep the body copy clean.
249. 8:48So, now the words look right, the last
250. 8:50principle is the one most people forget
251. 8:53until a client complains. And it's the
252. 8:55one that we never skip. And that
253. 8:56principle is mobile. And I've not left
254. 8:59it near the end because it matters
255. 9:00least. It's actually the contrary. Most
256. 9:02designers treat it as an afterthought,
257. 9:05and it's the one that loses them the
258. 9:06most visitors without them ever
259. 9:08realizing. Most of the people landing on
260. 9:11the sites that you build are going to be
261. 9:12on their phones. Not some of them, most
262. 9:15of them. So, a site that looks beautiful
263. 9:16on your big desktop monitor and then
264. 9:18falls apart on a phone is failing for
265. 9:21the majority of people who are actually
266. 9:22going to see it and interact with it.
267. 9:24Text that's too small to read or buttons
268. 9:27too close to get it to tap, things
269. 9:29running off the edge of the screen.
270. 9:30That's what a lot of visitors are
271. 9:32actually being served. Now, the fix is a
272. 9:35habit to build as opposed to a new skill
273. 9:37set to add. So, check every build on a
274. 9:39real phone held in one hand before you
275. 9:41call it done. Can you read everything
276. 9:43without trying to zoom in? Can you tap
277. 9:45the main button with your thumb without
278. 9:47hitting three other things? Does
279. 9:49anything spill off the side? If you
280. 9:51build for mobile and check on a phone
281. 9:53from the start instead of bolting it on
282. 9:55at the end, you've already beaten most
283. 9:57of the sites [music] out there. So, that
284. 9:59is the full stack. And that is that
285. 10:01these aren't seven separate tricks.
286. 10:04They're one skill wearing seven
287. 10:06different hats. Every single one of
288. 10:08them, the hero, the hierarchy, the
289. 10:10space, the contrast, the proof, the
290. 10:11type, the phone, is doing the same job.
291. 10:14It's controlling where the visitor looks
292. 10:17and what they feel while they're
293. 10:19looking. That is all design is. You are
294. 10:22deciding on a visitor's behalf what they
295. 10:25notice first, what they trust, and what
296. 10:27they do next. And that's the difference
297. 10:29between a site that looks fine and a
298. 10:31site that looks like a premium agency
299. 10:33built it. It isn't taste that you're
300. 10:35born with. It's a set of decisions that
301. 10:38you made on purpose. The weak site isn't
302. 10:40ugly because the person had no eye. It's
303. 10:43because every one of those decisions got
304. 10:45left to chance. And so, the eye, it
305. 10:47wanders. Nothing quite leads it and then
306. 10:49the whole thing just comes across as
307. 10:51cheap without anyone being able to say
308. 10:54why. The premium site made every one of
309. 10:57these calls deliberately. So, go back to
310. 10:59a site that you've built or one that
311. 11:00you're about to and walk it through
312. 11:02these seven things. Where does the eye
313. 11:04land first? Is there room to breathe?
314. 11:06Does the one button you care about stand
315. 11:09out above all else? Is the proof sitting
316. 11:11where the doubt is? You'll spot the
317. 11:13loose decisions instantly. And every one
318. 11:16that you tighten up makes the whole
319. 11:18thing look so much more expensive. You
320. 11:20don't necessarily need more talent. You
321. 11:23just need to stop leaving things to
322. 11:24chance. Now, getting this good at design
323. 11:27is one thing. Getting paid properly for
324. 11:29it is another. And they're not the same
325. 11:31skill. Plenty of talented designers are
326. 11:33chasing a few hundred dollars for work
327. 11:35that should be worth thousands because
328. 11:37nobody showed them how to turn the skill
329. 11:39into real projects. I made a video on
330. 11:42exactly that. How to take design skills
331. 11:44like these and turn them into 10K plus
332. 11:47projects. So, you can go and watch that
333. 11:48one next over here. And I'll see you
334. 11:50there.