Speaker A
In this video, I'm going to show you the only five web design skills that actually matter.
Learn the 5 essential web design skills to level up fast, including typography, layout, color, and more from a pro with 10 years of experience.
Key Takeaways
- Only five core web design skills are essential to becoming a pro.
- Typography mastery involves font selection and a systematic approach to sizing and spacing.
- Structured layouts using grids and spacing systems create rhythm and clarity.
- Visual hierarchy is critical for guiding user attention on websites.
- Intentional, limited color use improves design balance and user experience.
Summary
- Master typography by choosing unique fonts and using a type scale system for consistent sizing, spacing, and line height.
- Use grid systems (12 columns desktop, 8 tablet, 4 mobile) for structured layouts and apply an 8-point spacing system for rhythm.
- Create visual hierarchy with proximity, size, contrast, and alignment to guide users' eyes effectively.
- Limit color palettes to 2-3 colors with distinct roles, applying the 60-30-10 rule for visual balance.
- Avoid common beginner mistakes by relying on proven systems rather than guessing layout and design choices.
- Use resources like fontshare.com and uncut.wtf for high-quality, less common fonts.
- Leverage tools like typescale.net and Figma to simplify typography and layout setup.
- Understand that professional design feels intentional, cohesive, and easy to navigate.
- Focus on readability and usability by adjusting letter spacing and line height appropriately.
- Color usage should be intentional, not excessive, to enhance design clarity and impact.
Full Transcript — Download SRT & Markdown
Speaker A
You can usually tell right away if a site was built by a pro or by somebody who's still kind of figuring it out.
Speaker A
And it's easy to think that that takes a ton of different skills.
Speaker A
After 10 years of reading books, taking courses, and plain old building a ton of websites.
Speaker A
I can actually tell you there are really just five things you need to know.
Speaker A
By the end of this video, you're going to know exactly what to focus on to level up fast and finally feel confident as a web designer.
Speaker A
Are you ready?
Speaker A
Let's go.
Speaker A
First up are your typography skills.
Speaker A
Outside of white space, text takes up the most real estate on your website.
Speaker A
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 kind of stops there.
Speaker A
But here's the good news, you actually only need to answer two questions.
Speaker A
To master typography for websites, and when you can do that confidently on every project.
Speaker A
You'll be in the top 1% of web designers.
Speaker A
So question number one is, how do I pick the right fonts for my project?
Speaker A
Most web designers use the same free fonts over and over again.
Speaker A
And when you use those same fonts as everyone else, your design starts to blend in, not stand out.
Speaker A
So you got to find fonts from places that aren't overused.
Speaker A
Two of my favorite resources are fontshare.com and uncut.wtf.
Speaker A
Font share is clean, high quality and completely free to use.
Speaker A
While uncut is a bit more experimental.
Speaker A
But they're both packed with personality and tons of free fonts to use.
Speaker A
Oh, and I've got a running list of free and affordable fonts that I've found out in the wild.
Speaker A
Every one of them are chef's kiss.
Speaker A
So you're going to find the link to that list in the description of this video.
Speaker A
Oh, and by the way, make sure to like and subscribe so you don't miss another episode.
Speaker A
And if you want the slides that I used to teach these five skills, there's a link for those in the description.
Speaker A
Question number two is, how do you set up your fonts?
Speaker A
In such a way that it actually improves your design and makes your site easier to use.
Speaker A
If you've ever looked at a site that was designed by a true web pro, you're going to notice something, right?
Speaker A
All the text feels cohesive, yet predictable, without feeling super robotic.
Speaker A
Like you're kind of reading a Wikipedia page.
Speaker A
That's because pro designers use something called a type scale system.
Speaker A
And it's just a simple set of rules that determines things like font sizes, letter spacing, and line height.
Speaker A
And once you've set it up, your typography starts to feel intentional.
Speaker A
Instead of just eyeballed.
Speaker A
Let's start with font size.
Speaker A
What you want to do is pick a base font size for your paragraph text.
Speaker A
Typically people start with about 16 pixels.
Speaker A
And then you use a scale to make your headings consistently larger.
Speaker A
A popular one is called the major third scale.
Speaker A
And if you've ever learned an instrument.
Speaker A
This might sound a little bit familiar.
Speaker A
All it means is that you're actually going to scale up in size from one text to the next by about 25%.
Speaker A
So if your base size is 16, your H6 would be 20, and then your H5 would be 25.
Speaker A
So on and and so forth until you reach your H1s.
Speaker A
And you actually don't have to calculate this manually.
Speaker A
Instead of using pixels, just use the REM values.
Speaker A
It does all the calculations right there for you.
Speaker A
Next up is letter spacing.
Speaker A
For for body text, don't touch it, right?
Speaker A
We want that to be super legible.
Speaker A
And so just keep it the default.
Speaker A
But for headings, you want to tighten it up a little bit as they get bigger.
Speaker A
As text gets larger, it often looks cleaner with slightly reduced spacing.
Speaker A
And then finally, line height.
Speaker A
For paragraph, go with about 150% of the font size.
Speaker A
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.
Speaker A
That gives the text room to breathe and makes it easier to read.
Speaker A
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.
Speaker A
Now, if all that sounds like a lot, here's the shortcut.
Speaker A
Go to typescale.net, you pick your base size, choose a ratio, and then it just generates the whole system for you.
Speaker A
It takes two minutes and makes your typography look like a pro set it up.
Speaker A
Next up is layout.
Speaker A
Most new web designers just kind of drag things around until it feels right.
Speaker A
And hey, you might even be following some design rules without realizing.
Speaker A
But pro designers don't guess about where things should go on the page.
Speaker A
They have systems that guarantee it every time.
Speaker A
And you actually don't need to memorize a ton of layout rules.
Speaker A
You just need three things.
Speaker A
A grid system for structure, a spacing system for rhythm between elements and even vertical spacing, and then visual hierarchy to guide the eye.
Speaker A
Let's start with the grid.
Speaker A
Think of this as your layouts foundation.
Speaker A
I like to use a 12 column layout on desktop, eight columns on tablets, and then four columns on mobile.
Speaker A
Why is that?
Speaker A
Well, because it's super flexible to divide evenly to where you don't have to have 12 columns specifically.
Speaker A
It could be two columns that take up six columns on the right and six columns on the left.
Speaker A
And then you can make it three or four.
Speaker A
It's just easy to work with.
Speaker A
Figma actually makes this super simple to set up.
Speaker A
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.
Speaker A
Next up is spacing.
Speaker A
And this is what gives your design room to breathe.
Speaker A
I use what's called an eight point grid system.
Speaker A
And it just means that your spacing is always multiples of eight, like 8, 16, 24, 32, so on and so forth.
Speaker A
It's the same approach that's used by Google for material design and Apple in in their design systems as well.
Speaker A
And if major players like Google and Apple are using it, then you know you can't ignore it.
Speaker A
This is also super easy to set up.
Speaker A
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.
Speaker A
And then change the size of the grid to whatever you're wanting to use.
Speaker A
The last piece is visual hierarchy.
Speaker A
Because here's the truth, people don't read websites.
Speaker A
They scan them.
Speaker A
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.
Speaker A
Here are a few quick principles to do just that.
Speaker A
Use proximity.
Speaker A
So keep related things close together as if they're in the same space on a page.
Speaker A
Then use size to tell users what's more important or least important.
Speaker A
You can see that this website's done a good job with that on their big text and the big image down here.
Speaker A
Use contrast, right?
Speaker A
You can use size, weight, or color.
Speaker A
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.
Speaker A
And then alignment.
Speaker A
Because clean lines always equal a clear structure.
Speaker A
When you use those four together, you're going to build a layout that feels effortless to navigate.
Speaker A
And that's what separates the pros from the beginners.
Speaker A
Next up, let's talk about color.
Speaker A
For a lot of designers, this is where things start to feel really overwhelming.
Speaker A
Because there are millions of colors out there.
Speaker A
So how do you know what works?
Speaker A
Here's the secret.
Speaker A
Pro designers don't use more color, they use color more intentionally.
Speaker A
Let me show you some quick wins that are going to instantly level up your color game.
Speaker A
First, you want to limit your color palette.
Speaker A
Right, you don't need more than like two or three different colors.
Speaker A
For any project that you're working on.
Speaker A
But here's the key, each one should have a specific job.
Speaker A
One of the most popular systems for creating visual balance is called the 60 30 10 rule.
Speaker A
So 60% are your neutral colors, those are things like your whites and your blacks.
Speaker A
You use that for your background and your text.
Speaker A
30% are your secondary colors and you use those for maybe different backgrounds or cards.
Speaker A
Or headers or visuals.
Speaker A
And then finally, the 10% is your accent colors.
Speaker A
And that's what you use if you want something to really stand out.
Speaker A
Like buttons or CTAs.
Speaker A
But that's all you need, really.
Speaker A
As you get more confident with color, you can expand your palettes.
Speaker A
But don't feel like you need to.
Speaker A
Another tip is use opacity.
Speaker A
Rather than adding more colors to your palette.
Speaker A
So take your primary color like this yellow here, and then just scroll down on the opacity to create different color layers.
Speaker A
This is something that I actually learned when I was looking through Google's material design.
Speaker A
And notice that they used opacity to create a lot of different color variations.
Speaker A
So one good color used well beats five random colors any day.
Speaker A
Next, you want to prioritize contrast.
Speaker A
And this one's huge and it's one that a lot of new designers miss.
Speaker A
Your color combo might look nice, but if your users can't read it, it doesn't matter how pretty it is.
Speaker A
So always check your color contrast.
Speaker A
Color contrast is the contrast between your foreground text and the background color that it sits on.
Speaker A
And and you can see here that passable contrast is 3 to 1 on larger text and 4.5 to 1 on smaller text.
Speaker A
Figma has a contrast checker baked right into its color system.
Speaker A
All you got to do is select the text that you want to check, go to fill, and then there's a contrast icon right in the top right hand corner, scroll down, go to more tools, and then you'll see CSS overview.
Speaker A
Capture the overview and it'll give you all the colors for that specific site.
Speaker A
It even gives you fonts, it gives you size settings, it gives you the type scale system.
Speaker A
It's such a great tool to use.
Speaker A
Now let's talk code.
Speaker A
And I know code, boo, hiss, we don't need that anymore.
Speaker A
But here's the truth, if you want to be better than 99% of the other web designers out there.
Speaker A
You're going to need to at least get comfortable with it.
Speaker A
But you don't need to know how to build a full web app, you just need to know the basics.
Speaker A
And then know how to use the right tools to get you the rest of the way.
Speaker A
Start with the essentials, right?
Speaker A
You've got HTML for structure, CSS for style, then there's JavaScript for interaction.
Speaker A
And if you're working with platforms like WordPress, PHP basics can go a long way.
Speaker A
That alone is going to take you further than most web designers would ever go.
Speaker A
I started with free courses on Code Academy, and then I would learn more as projects that I worked on needed it.
Speaker A
And once you get the basics down, here's the real trick.
Speaker A
Find solutions that are about 80% of the way there, and then vibe code the rest.
Speaker A
So what do I mean by that?
Speaker A
Use code pens or snippets, even chat GPT, right, whatever gets you close.
Speaker A
And then you just tweak it until it does what you want it to do.
Speaker A
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.
Speaker A
You don't need to be a full stack developer.
Speaker A
You just learn by doing, don't overthink it, and use the tools that are available to you.
Speaker A
And finally, the fifth skill to stand out as the top 1% of all web designers, conversion skills.
Speaker A
Most designers design for looks, but pro designers design for action.
Speaker A
Early in my career, I redesigned a client's website from the ground up.
Speaker A
And it looked amazing, right?
Speaker A
Way better than the original.
Speaker A
But here's the problem.
Speaker A
After we launched, their sales plummeted.
Speaker A
Why?
Speaker A
Because I had focused so much on the design that I ignored the user journey.
Speaker A
And that was a turning point for me and a really hard lesson to learn.
Speaker A
So let's talk about what conversion thinking really means.
Speaker A
First, every page needs to have just one goal.
Speaker A
Right?
Speaker A
That's it.
Speaker A
And that goal should be simple, you either want somebody to buy a product.
Speaker A
Sign up for a phone call or get a lead magnet.
Speaker A
And that's it.
Speaker A
You lose users when you're trying to do too much at once.
Speaker A
Second, you need to have clear strategic CTAs.
Speaker A
And they need to be visible within seconds of someone landing on the page.
Speaker A
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 scrolled down.
Speaker A
Third, it's about trust, clarity.
Speaker A
And maybe most importantly, feelings.
Speaker A
You probably heard it said that people buy from brands they know, like, and trust.
Speaker A
But I like to take it one step further.
Speaker A
They need to know, like, trust, and feel something from you.
Speaker A
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.
Speaker A
And that's where things like testimonials and reviews and social proof can really come in handy.
Speaker A
So there you go, those are the five skills that separate beginner designers from the top 1%.
Speaker A
And if you're still trying to learn absolutely everything, take this as your permission to just stop.
Speaker A
Focus on these, right, build around them, and you'll grow way faster than chasing every single trend.
Speaker A
Hey, I hope this video was helpful.
Speaker A
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.
Speaker A
And hey, go design something great.
Speaker A
Don't forget, if you don't quit, you win.
Topics:web designtypographylayoutcolor theoryvisual hierarchygrid systemspacing systemweb designer skillsfont selectiondesign principles
