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.
First up are your typography skills. Outside of white space, text takes up the most real estate on your website, but 99%
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
to master typography for websites.
And when you can do that confidently on every project, you'll be in the top 1% of web designers.
So question number one is, how do I pick the right fonts for my project? Most web designers use the same free fonts
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.
Two of my favorite resources are fontshare.com
and uncut.wtf.
Fontshare is
clean, high quality, and completely free to use, while uncut is a bit more experimental.
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?
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
yet predictable without feeling super robotic,
like you're kinda reading a Wikipedia page. That's
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,
and line height. And once you set it up, your typography starts to feel intentional instead of just eyeballed.
Let's start with font size.
What you wanna do is pick a base font size for your paragraph
text. Typically, people start with about 16 pixels.
And then you use a scale to make your headings consistently
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.
All it means is that you're actually going to scale up in size
from one text to the next by about 25%.
So if your base size is 16,
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
manually.
Instead of using pixels,
just use the REM
values. It does all the calculations
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.
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.
And then finally,
line height. For paragraphs, go with about a 150%
of font size. So if the font size is 16 pixels,
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,
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.
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.
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,
a spacing system for rhythm between elements and even vertical spacing,
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,
and then four columns on mobile.
Why is that? Well, because it's super flexible to divide evenly
to where you don't have to have 12 columns specifically.
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,
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,
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.
So keep related things close together as if they're in the same space on a page.
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.
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?
Here's the secret.
Pro designers don't use more color. They use color more intentionally.
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
job.
One of the most popular systems for creating visual balance is called the sixty thirty ten rule. So 60%
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.
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.
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
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
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
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
overview. All you've gotta do is go to Chrome developer tools
and then select the three dot option right here in the top right hand corner.
Scroll down, go to more tools, and then you'll see CSS overview.
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,
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,
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.
So what do I mean by that? Use code pens or snippets, even chat gbt. Right? Whatever gets you close,
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
WordPress WooCommerce plugin to have a custom checkout process
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,
conversion skills.
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.
After we launched, their sales
plummeted.
Why? Because I had focused so much on the design that I ignored the user journey.
And that was a turning point for me and a really hard lesson to learn. So let's talk about what conversion thinking
really means.
First, every page needs to have just one goal.
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
CTAs,
and they need to be visible within seconds of someone landing on the page.
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,
feelings.
You probably heard it said that people buy from brands that they know, like, and trust.
But I like to take it one step further. They need to know, like, trust,
and feel something from you. Your site has to speak to real motivations,
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,
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.