WEBVTT

00:00:00.000 --> 00:00:05.920
I'm gonna give you over ten years of web design knowledge in just seven minutes.

00:00:06.000 --> 00:00:06.960
No fluff,

00:00:07.200 --> 00:00:10.160
just the good stuff. Are you ready? Let's go.

00:00:11.920 --> 00:00:18.455
You can basically boil all the design knowledge that you need to build great websites down to just three things,

00:00:18.695 --> 00:00:19.575
layout,

00:00:19.655 --> 00:00:20.455
color,

00:00:20.615 --> 00:00:25.895
and typography. Probably heard it said before that people read or engage websites

00:00:25.975 --> 00:00:38.310
in somewhat of an f pattern. So they start reading at the top left, and then they go right, they come back, they go down on the left, they go right, they come back, and they go down on the left until they're done. But here's the truth.

00:00:38.630 --> 00:00:39.670
That's actually

00:00:39.830 --> 00:00:51.245
bogus. It's outdated information that web designers just kind of keep repeating until everybody thinks it's true. I might have been one of those web designers and for that I apologize.

00:00:51.245 --> 00:00:53.405
The truth is is that people engage

00:00:53.725 --> 00:01:03.680
with websites in all sorts of different patterns and forcing them to pay attention in an f pattern might actually cause them to miss important information.

00:01:03.760 --> 00:01:05.520
So what do you do instead?

00:01:05.760 --> 00:01:08.560
You use something called visual hierarchy.

00:01:08.560 --> 00:01:24.135
You've probably seen an image before where there's this big bold line of text that says you're gonna read this first and the smaller line underneath it says then you'll read it next. And then this really tiny line that's all the way in the left hand corner that says and you'll read this last.

00:01:24.455 --> 00:01:38.360
That is visual hierarchy. You make the most important elements of a section the biggest and the boldest, and then for each other element that isn't maybe as important, you turn down the volume. You make it more inconspicuous.

00:01:38.360 --> 00:02:02.640
For your call to action or buttons, you wanna make sure that they have a high degree of contrast from everything else around them. Why? Because the main thing we want people to do on a website is click a button. If it doesn't stand out, it's gonna make it harder to do that. And please, I beg of you, stop using ghost buttons. What are ghost buttons? They're buttons that just have an outline without a solid background.

00:02:02.640 --> 00:02:16.155
The problem is that people don't see them and they don't click on them. For colors, every website should have a color palette that matches the brand of the website owner. Here's a few important things to consider when it comes to color.

00:02:16.315 --> 00:02:18.555
The first thing is accessibility.

00:02:18.715 --> 00:02:33.350
If you pick colors that make it difficult to read text or tough to see elements clearly, it's going to be hard for users to engage. You wanna pick colors that have a high enough contrast that even users with visual impairments

00:02:33.430 --> 00:02:43.005
are still going to be able to see things clearly. How do you know if a contrast is high enough? Something that I like using is a website called coolers.co.

00:02:43.005 --> 00:02:48.445
You can actually take all of the brand colors from a website, input it into the dashboard,

00:02:48.605 --> 00:02:50.685
click on the color contrast teller,

00:02:50.765 --> 00:03:09.310
and it will instantly tell you which colors pass and which don't. Super helpful tool. Another good rule of thumb for colors is that you wanna use a guideline called the sixty thirty ten rule. Basically, this means is that about 60% of your website should use your dominant colors, things like grays or blacks

00:03:09.615 --> 00:03:11.455
and whites. 30%,

00:03:11.455 --> 00:03:16.815
you should reserve for your brand colors, and then another 10% you wanna use something

00:03:16.975 --> 00:03:34.850
for an accent. So helping things really stand out. That's a great thing to use for like your calls to actions or your buttons. Is this a hard and fast rule that you absolutely have to use every single time? No. But it's a good principle to stick with, especially when you're first getting started. Then there's typography.

00:03:34.850 --> 00:03:54.660
Typography is one of the most underrated design elements of a website, but it has a massive impact on the readability and user experience. Thankfully, there's a ton of great options when it comes to fonts. You've got serifs, you've got sans serifs, you've got handwritten fonts, you've got scripts, you've got display, you've got monospace,

00:03:54.820 --> 00:04:14.245
and it goes on and on. There are three main text elements to consider for your website. You've got your h ones or your main headers, and this should be the biggest most prominent text on the page. This is gonna describe what the entire page is all about. Then you've got your h two or your subheadings. These act as

00:04:14.405 --> 00:04:15.445
ways to

00:04:15.765 --> 00:04:29.010
divvy up the rest of the page and guide a user's attention. Then finally, you've got your paragraph text or your p tags. You don't wanna use really decorative text for this. It might look cool, but it kills readability.

00:04:29.010 --> 00:04:47.680
But here's the thing, good design without good conversion practice doesn't actually help your clients. I designed a website a while back for a client and the result was way better than their old website. It was clean. It was modern. It was chef's kiss. The problem was when we launched it, sales plummeted.

00:04:47.840 --> 00:04:56.960
Why did that happen? It's because I tried to make it look pretty instead of focusing on good conversion practices. If your design doesn't consider conversion,

00:04:57.295 --> 00:05:01.295
it's useless to your clients. So what are good conversion practices?

00:05:01.295 --> 00:05:26.885
Good conversion is all about reducing friction for users. You wanna make it stupid easy for the users to find what they're looking for and to go through and either buy a product or sign up for a service. And that's done through clarity. You wanna be crystal clear about who the company is or if the person is who owns the website and what the user is supposed to do next, why they should even care. You also do it through scannability.

00:05:26.885 --> 00:05:35.125
People aren't reading websites. They're scanning through it. So you need to set things out in such a way that people can bounce around and make decisions.

00:05:35.365 --> 00:05:36.325
And then finally,

00:05:36.405 --> 00:05:57.885
you want the website to be motivating. It's not just enough to be pretty. You actually need to speak to the heart of the user. Speak to the thing that's driving them to say yes or no. But overall, you wanna design for the right audience, not for yourself and not your client. It doesn't matter if you love the design. It doesn't even matter if your client loves the design.

00:05:58.205 --> 00:06:05.980
Who does it matter for? The website visitors. So do a little research. Who's actually using this website? Fonts, colors,

00:06:05.980 --> 00:06:35.220
layout. Choose them based on the target audience and not personal preference. Finally, make sure that you never stop learning. Web designers don't age like fine wine. Okay? We age like a loaf of bread left on the counter. We go stale unless we keep learning. The web design industry is changing fast, and it's gonna continue to do so. What worked just five years ago might not work today. It might not work in the next five years. And if you don't challenge yourself and stay updated, you're gonna fall behind.

00:06:35.460 --> 00:06:38.020
Will AI take all of our jobs?

00:06:38.900 --> 00:06:40.020
Probably not.

00:06:40.260 --> 00:06:43.540
But will AI take lazy web designer jobs?

00:06:43.860 --> 00:06:44.660
Absolutely.

00:06:44.660 --> 00:06:48.775
The only way to stay valuable is to keep learning, keep adjusting,

00:06:48.855 --> 00:07:09.640
and keep leveling up. And you might be asking yourself, that's all well and good, but what do I need to do if I'm getting started today? Thankfully, I've got another video that I'm gonna link to that's gonna answer just those questions. Make sure that you like this video if it was helpful, and be sure to subscribe so that you don't miss another episode. And don't forget, if you don't quit, you win.