WEBVTT 00:00:00.000 --> 00:00:32.220 In this video, I'm gonna show you the only five web design skills that actually matter. You can usually tell right away if a site was built by a pro or by somebody who's still kinda figuring it out. And it's easy to think that that takes a ton of different skills. After ten years of reading books, taking courses, and plain old building a ton of websites, I can actually tell you there are really just five things you need to know. By the end of this video, you're gonna know exactly what to focus on to level up fast and finally feel confident as a web designer. Are you ready? Let's go. 00:00:34.140 --> 00:00:42.220 First up are your typography skills. Outside of white space, text takes up the most real estate on your website, but 99% 00:00:42.220 --> 00:00:55.545 of web designers can't tell the difference between bad type choices and good type choices. They might be able to feel when something's off, but it just kinda stops there. But here's the good news. You actually only need to answer two questions 00:00:55.625 --> 00:00:58.425 to master typography for websites. 00:00:58.585 --> 00:01:04.120 And when you can do that confidently on every project, you'll be in the top 1% of web designers. 00:01:04.280 --> 00:01:12.840 So question number one is, how do I pick the right fonts for my project? Most web designers use the same free fonts 00:01:12.840 --> 00:01:23.545 over and over again. And when you use those same fonts as everyone else, your designs start to blend in, not stand out. So you gotta find fonts from places that aren't overused. 00:01:23.545 --> 00:01:27.705 Two of my favorite resources are fontshare.com 00:01:27.705 --> 00:01:30.840 and uncut.wtf. 00:01:31.000 --> 00:01:32.360 Fontshare is 00:01:32.600 --> 00:01:39.560 clean, high quality, and completely free to use, while uncut is a bit more experimental. 00:01:39.800 --> 00:02:16.145 But they're both packed with personality and tons of free fonts to use. Oh, and I've got a running list of free and affordable fonts that I found out in the wild. Every one of them are chef's kiss. So you're gonna find the link to that list in the description of this video. Oh, and by the way, make sure that you like and subscribe so you don't miss another episode. And if you want the slides that I use to teach these five skills, there's a link for those in the description. Question number two is how do you set up your fonts in such a way that it actually improves your design and makes your site easier to use? 00:02:16.625 --> 00:02:23.940 If you've ever looked at a site that was designed by a true web pro, you're gonna notice something. Right? All the text feels cohesive 00:02:23.940 --> 00:02:27.380 yet predictable without feeling super robotic, 00:02:27.380 --> 00:02:30.660 like you're kinda reading a Wikipedia page. That's 00:02:30.660 --> 00:02:40.115 because pro designers use something called a type scale system. And it's just a simple set of rules that determines things like font sizes, letter spacing, 00:02:40.115 --> 00:02:46.595 and line height. And once you set it up, your typography starts to feel intentional instead of just eyeballed. 00:02:46.595 --> 00:02:48.595 Let's start with font size. 00:02:48.915 --> 00:02:53.710 What you wanna do is pick a base font size for your paragraph 00:02:53.710 --> 00:02:57.390 text. Typically, people start with about 16 pixels. 00:02:57.790 --> 00:03:01.470 And then you use a scale to make your headings consistently 00:03:01.550 --> 00:03:09.385 larger. A popular one is called the major third scale. And if you've ever learned an instrument, this might sound a little bit familiar. 00:03:09.625 --> 00:03:14.345 All it means is that you're actually going to scale up in size 00:03:14.585 --> 00:03:18.345 from one text to the next by about 25%. 00:03:18.345 --> 00:03:20.185 So if your base size is 16, 00:03:20.600 --> 00:03:31.080 your h six would be 20, and then your h five would be 25, so on and and so forth until you reach your h ones. And you actually don't have to calculate this 00:03:31.400 --> 00:03:32.280 manually. 00:03:32.360 --> 00:03:34.040 Instead of using pixels, 00:03:34.040 --> 00:03:36.600 just use the REM 00:03:36.255 --> 00:03:38.415 values. It does all the calculations 00:03:38.415 --> 00:03:47.855 right there for you. Next up is letter spacing. For for body text, don't touch it. Right? We want that to be super legible, and so just keep it the default. 00:03:48.175 --> 00:03:57.390 But for headings, you wanna tighten it up a little bit as they get bigger. As text gets larger, it often looks cleaner with slightly reduced spacing. 00:03:57.710 --> 00:03:58.750 And then finally, 00:03:58.830 --> 00:04:02.430 line height. For paragraphs, go with about a 150% 00:04:02.430 --> 00:04:06.915 of font size. So if the font size is 16 pixels, 00:04:07.155 --> 00:04:16.275 then you would take that and then multiply it by 1.5 to get your line height. That gives the text room to breathe and makes it easier to read. And then as text gets bigger, 00:04:16.930 --> 00:04:27.410 like with headings, you can tighten up the line height a bit to make it feel a bit more impactful and scannable. Now if all that sounds like a lot, here's a shortcut. Go to typescale.net. 00:04:27.410 --> 00:04:47.760 You pick your base size, choose a ratio, and then it just generates the whole system for you. It takes two minutes and makes your typography look like a pro. Set it up. Next up is layout. Most new web designers just kinda drag things around until it feels right. And, hey, you might even be following some design rules without realizing. 00:04:48.000 --> 00:05:00.885 But pro designers don't guess about where things should go on the page. They have systems that guarantee it every time. And you actually don't need to memorize a ton of layout rules. You just need three things. A grid system for structure, 00:05:00.885 --> 00:05:05.125 a spacing system for rhythm between elements and even vertical spacing, 00:05:05.365 --> 00:05:17.270 and then visual hierarchy to guide the eye. Let's start with the grid. Think of this as your layout's foundation. I like to use a 12 column layout on desktop, eight columns on tablets, 00:05:17.270 --> 00:05:19.670 and then four columns on mobile. 00:05:19.830 --> 00:05:24.070 Why is that? Well, because it's super flexible to divide evenly 00:05:24.245 --> 00:05:27.205 to where you don't have to have 12 columns specifically. 00:05:27.205 --> 00:06:01.875 It could be two columns that take up six columns on the right and six columns on the left. And then you could make it three or four. It's just easy to work with. Figma actually makes this super simple to set up. All you have to do is select your frame, come all the way down to layout guide, add the plus sign, change grid to columns, and then add the amount of columns that you're wanting to work with. Next up is spacing, and this is what gives your design room to breathe. I use what's called an eight point grid system, and it just means that your spacing is always multiples of eight, like eight, sixteen, 00:06:02.195 --> 00:06:24.745 24, 32, so on and so forth. It's the same approach that's used by Google for material design and Apple in in their design systems as well. And if major players like Google and Apple are using it, then you know you can't ignore it. This is also super easy to set up. You do the same thing in Figma as if you're setting up columns, but then when you add a guide, 00:06:24.985 --> 00:06:48.160 you just remain on grid and then change the size of the grid to whatever you're wanting to use. The last piece is visual hierarchy because here's the truth. People don't read websites. They scan them. So your layout needs to guide the eyes from the things that are most important to things that maybe don't matter all that much. Here are a few quick principles to do just that. Use proximity. 00:06:48.160 --> 00:06:54.555 So keep related things close together as if they're in the same space on a page. 00:06:54.955 --> 00:07:06.960 Then use size to tell users what's more important or least important. You can see that this website's done a good job with that on their big text and the big image down here. 00:07:07.360 --> 00:07:47.760 Use contrast. Right? You can use size, weight, or color. And you can see that this website's done that really well with the opacity of their headers versus their body text. So they're signaling to you that they really want you to read this and this other stuff might not be that important. And then alignment because clean lines always equal a clear structure. When you use those four together, you're gonna build a layout that feels effortless to navigate, and that's what separates the pros from the beginners. Next up, let's talk about color. For a lot of designers, this is where things start to feel really overwhelming because there are millions of colors out there. So how do you know what works? 00:07:48.335 --> 00:07:49.455 Here's the secret. 00:07:49.695 --> 00:07:54.735 Pro designers don't use more color. They use color more intentionally. 00:07:54.735 --> 00:08:12.360 Let me show you some quick wins that are gonna instantly level up your color game. First, you wanna limit your color palette. Right? You don't need more than, like, two or three different colors for any project that you're working on. But here's the key. Each one should have a specific 00:08:12.360 --> 00:08:13.000 job. 00:08:13.320 --> 00:08:20.405 One of the most popular systems for creating visual balance is called the sixty thirty ten rule. So 60% 00:08:20.405 --> 00:08:34.330 are your neutral colors. Those are things like your whites and your blacks. You use that for your background and your text. 30% are your secondary colors, and you use those for maybe different backgrounds or cards, headers, or visuals. 00:08:34.650 --> 00:08:43.765 And then finally, the 10% is your accent colors, and that's what you use if you want something to really stand out like buttons or CTAs. 00:08:43.765 --> 00:08:52.725 But that's all you need, really. As you get more confident with color, you can expand your palettes, but don't feel like you need to. Another tip is use opacity 00:08:52.725 --> 00:09:30.880 rather than adding more colors to your palette. So take your primary color like this yellow here, and then just scroll down on the opacity to create different color layers. This is something that I actually learned when I was looking through Google's material design. Noticed that they used opacity to create a lot of different color variations. So one good color used well beats five random colors any day. Next, you wanna prioritize contrast, and this one's huge, and it's one that a lot of new designers miss. Your color combo might look nice, but if your users can't read it, it doesn't matter how pretty it is. So always check 00:09:31.040 --> 00:09:45.085 your color contrast. Color contrast is the contrast between your foreground text and the background color that it sits on. And and you can see here that passable contrast is three to one on larger text and 4.5 00:09:45.085 --> 00:10:13.825 to one on smaller text. Figma has a contrast checker baked right into its color system. All you gotta do is select the text that you wanna check, go to fill, and then there's a contrast icon right in the top right hand corner. It'll tell you whether or not it passes or doesn't. It's a great tool. Finally, don't build color palettes from scratch. Most great color palettes weren't made out of thin air. They were borrowed and then refined. You can actually find any site's color palette with a tool called CSS 00:10:13.825 --> 00:10:17.585 overview. All you've gotta do is go to Chrome developer tools 00:10:17.980 --> 00:10:23.100 and then select the three dot option right here in the top right hand corner. 00:10:23.180 --> 00:10:27.100 Scroll down, go to more tools, and then you'll see CSS overview. 00:10:27.340 --> 00:11:10.625 Capture the overview and then it'll give you all the colors for that specific site. It even gives you fonts. It gives you size settings. It gives you the type scale system. It's such a great tool to use. Now let's talk code. And I know code, boo, hiss, we don't need that anymore. But here's the truth. If you wanna be better than 99% of the other web designers out there, you're gonna need to at least get comfortable with it. But you don't need to know how to build a full web app. You just need to know the basics and then know how to use the right tools to get you the rest of the way. Start with the essentials. Right? You've got HTML for structure, CSS for style, then there's JavaScript for interaction. And if you're working with platforms like WordPress, 00:11:10.785 --> 00:11:20.520 PHP basics can go a long way. That alone is gonna take you further than most web designers would ever go. I started with free courses on Codecademy, 00:11:20.520 --> 00:11:32.345 and then I would learn more as projects that I worked on needed it. And once you get the basics down, here's the real trick. Find solutions that are about 80% of the way there and then vibe code the rest. 00:11:32.905 --> 00:11:38.905 So what do I mean by that? Use code pens or snippets, even chat gbt. Right? Whatever gets you close, 00:11:39.145 --> 00:11:44.770 and then you just tweak it until it does what you want it to do. I had a friend who's not a developer who customized 00:11:44.770 --> 00:11:48.770 WordPress WooCommerce plugin to have a custom checkout process 00:11:49.010 --> 00:12:03.455 for his wife's website. You don't need to be a full stack developer. You just learn by doing, don't overthink it, and use the tools that are available to you. And finally, the fifth skill to stand out as the top one percent of all web designers, 00:12:03.695 --> 00:12:04.975 conversion skills. 00:12:05.295 --> 00:12:21.010 Most designers design for looks, but pro designers design for action. Early in my career, I redesigned a client's website from the ground up, and it looked amazing. Right? Way better than the original. But here's the problem. 00:12:21.410 --> 00:12:23.815 After we launched, their sales 00:12:23.895 --> 00:12:24.775 plummeted. 00:12:25.015 --> 00:12:31.335 Why? Because I had focused so much on the design that I ignored the user journey. 00:12:31.495 --> 00:12:37.670 And that was a turning point for me and a really hard lesson to learn. So let's talk about what conversion thinking 00:12:37.910 --> 00:12:39.110 really means. 00:12:39.590 --> 00:12:44.070 First, every page needs to have just one goal. 00:12:44.070 --> 00:13:01.455 Right? That's it. And that goal should be simple. You either want somebody to buy a product, sign up for a phone call, or get a lead magnet, and that's it. You lose users when you're trying to do too much at once. Second, you you need to have clear strategic 00:13:01.455 --> 00:13:02.335 CTAs, 00:13:02.335 --> 00:13:07.530 and they need to be visible within seconds of someone landing on the page. 00:13:07.850 --> 00:13:22.765 I like to include a clear CTA in the hero section, one in the navigation, and then one about every two or three seconds as a user scroll down. Third, it's about trust, clarity, and maybe most importantly, 00:13:22.845 --> 00:13:23.805 feelings. 00:13:24.285 --> 00:13:30.205 You probably heard it said that people buy from brands that they know, like, and trust. 00:13:30.850 --> 00:13:35.730 But I like to take it one step further. They need to know, like, trust, 00:13:35.730 --> 00:13:40.370 and feel something from you. Your site has to speak to real motivations, 00:13:40.450 --> 00:13:58.465 clearly explain what they're getting, and it needs to show them that they're not alone. And that's where things like testimonials and reviews and social proof can really come in handy. So there you go. Those are the five skills that separate beginner designers from the top 1%. And if you're still trying to learn absolutely everything, 00:13:58.465 --> 00:14:20.835 take this as your permission to just stop. Focus on these. Right? Build around them, and you'll grow way faster than chasing every single trend. Hey. I hope this video was helpful. If it was, make sure to hit that like button and subscribe so you don't miss another episode that we've got coming out. And, hey, go design something great. Don't forget, if you don't quit, you win.