Modern Creator
Self-Made Web Designer · YouTube

The Only 5 Web Design Skills That Actually Matter (2026)

A 14-minute system that collapses a decade of web design learning into five skills every professional actually uses.

Posted
10 months ago
Duration
Format
Tutorial
educational
Views
324.8K
19.7K likes
Big Idea

The argument in one line.

After ten years of web design, only five skills separate amateur work from professional results: typography, layout, color, code basics, and conversion thinking — and most designers are wasting time on everything except these.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • A self-taught or early-career web designer who feels overwhelmed by how much there is to learn and wants a focused path to competency.
  • A freelancer who can build functional sites but whose work lacks the visual polish that commands higher rates.
  • Someone who has taken design courses but still struggles to make type, spacing, and color feel intentional rather than guessed.
  • A developer who handles code but wants to understand design decisions well enough to stop relying on templates.
SKIP IF…
  • You already have a systematic design process and are looking for advanced motion, 3D, or branding-level depth.
  • You are looking for platform-specific tutorials (WordPress, Webflow, Squarespace) rather than foundational principles.
TL;DR

The full version, fast.

Most beginner designers waste years chasing tools and trends when five skills drive the gap between amateur and professional work. Typography comes down to two questions: picking the right fonts and setting up a consistent type scale. Layout means a 12-column grid, an 8-point spacing system, and four visual hierarchy principles. Color means limiting a palette to two or three intentional roles and using opacity instead of extra colors. Code means knowing HTML, CSS, and JS basics well enough to vibe-code the rest. Conversion means designing every page around one single goal and earning trust through clarity and emotional resonance.

Members feature

Chat with this breakdown.

Modern Creator members can chat with any breakdown — ask for the hook, quote a framework, find the exact transcript moment. Unlocks at T2: refer 3 friends + add your own API key.

Create a free account →
Chapters

Where the time goes.

00:0000:33

01 · Cold open and promise

States the premise: after 10 years, only 5 skills matter. Names the outcome the viewer will have by the end.

00:3404:36

02 · Skill 1: Typography

Two questions: how to pick fonts (fontshare, uncut.wtf) and how to set them up (major third type scale, REM values, letter spacing, line height). typescale.net as a shortcut.

04:3707:37

03 · Skill 2: Layout

12-column grid on desktop, 8-column tablet, 4-column mobile. 8-point grid for spacing. Four visual hierarchy principles: proximity, size, contrast, alignment.

07:3810:38

04 · Skill 3: Color

Limit palette to 2-3 colors. 60-30-10 rule for balance. Use opacity instead of adding colors. Prioritize contrast ratios. CSS Overview to steal palettes from professional sites.

10:3911:56

05 · Skill 4: Code basics

HTML, CSS, JS, PHP basics are enough. Learn 80% via courses, vibe code the rest with snippets and AI.

11:5713:49

06 · Skill 5: Conversion

Pro designers design for action, not looks. Personal story: redesign that tanked a client's sales by ignoring the user journey. One goal per page. CTAs in hero + nav + every 2-3 scrolls. Trust, clarity, and feelings.

13:5014:21

07 · Conclusion

Permission to stop chasing everything. Focus on these five and grow faster than chasing trends.

Atomic Insights

Lines worth screenshotting.

  • 99% of web designers can feel when type is off but cannot articulate why — learning two questions eliminates that gap permanently.
  • Using the same overused free fonts as everyone else makes designs blend in rather than stand out.
  • The major third type scale increases each heading level by roughly 25%, removing all guesswork from font sizing decisions.
  • Pro designers do not use more color — they use color more intentionally, limiting palettes to two or three defined roles.
  • One good color used at multiple opacity levels beats five random colors in the palette every time.
  • Google and Apple both use the 8-point grid system for spacing — all margins and padding are multiples of 8.
  • People do not read websites — they scan them — which means visual hierarchy is not decoration, it is navigation.
  • Color contrast ratios are not a preference: 4.5 to 1 is the minimum for small text to be readable by most users.
  • CSS Overview in Chrome DevTools reveals any website's complete color palette and type scale in under 30 seconds.
  • You do not need to be a full-stack developer — find solutions 80% of the way there and vibe code the last 20%.
  • Every page needs exactly one goal: buy, call, or lead magnet — trying to do more splits attention and kills conversion.
  • A beautiful redesign caused a client's sales to plummet because the designer optimized for aesthetics and ignored the user journey.
  • Know, like, and trust is not enough — people also need to feel something from you before they convert.
  • Strategic CTAs should appear in the hero, the nav, and roughly every two to three scrolls — not once at the bottom.
Takeaway

Five systems that make web design feel intentional.

WHAT TO LEARN

Confidence in web design does not come from knowing more tools — it comes from having repeatable systems for typography, layout, color, code, and conversion.

  • Font selection matters more than most designers realize — overused free fonts make designs blend in, while independent repositories like fontshare.com offer high-quality alternatives that actually differentiate client work.
  • A type scale system based on a consistent ratio (the major third scales each level roughly 25%) eliminates guesswork and makes every typographic decision feel deliberate rather than eyeballed.
  • Spacing should never be arbitrary — the 8-point grid system, used by both Google and Apple, ensures all margins and padding are multiples of 8, producing instant visual rhythm without manual calculation.
  • Color palettes work best when limited to two or three roles: neutral for backgrounds and text, secondary for structure, accent for calls to action — adding more colors introduces visual noise without adding clarity.
  • Using opacity variations of a single primary color creates tonal range more coherently than expanding the palette — one well-chosen color at varying opacities reads as a system, not a collection of guesses.
  • Color contrast is not optional — small text below 4.5 to 1 contrast fails most users under typical screen conditions, and Figma's built-in checker makes verification a single click.
  • Code fluency for designers does not mean writing applications from scratch — it means knowing enough HTML, CSS, and JavaScript to modify existing solutions and use AI to close the remaining gap.
  • Conversion is the skill most often missing from visually polished work: a redesign that improves aesthetics while ignoring user flow can actively reduce sales, because beauty and usability are not the same objective.
  • Every page should serve exactly one goal — buy, call, or capture — with CTAs visible immediately on load and repeated at regular scroll intervals throughout the page.
Glossary

Terms worth knowing.

Major third type scale
A typographic sizing system where each heading level is approximately 25% larger than the one below it, creating a consistent visual hierarchy without arbitrary pixel choices.
8-point grid system
A spacing framework where all margins, padding, and gaps are multiples of 8 pixels, producing visual rhythm and consistency. Used by Google Material Design and Apple.
Type scale
A predefined set of font sizes, letter spacing values, and line heights that govern every text element on a site, making typography feel cohesive rather than eyeballed.
60-30-10 rule
A color proportion guideline: 60% neutral tones for backgrounds and body text, 30% secondary colors for sections and cards, 10% accent colors for buttons and calls to action.
Color contrast ratio
A numeric measure of how distinguishable foreground text is against its background, from 1:1 (no contrast) to 21:1 (black on white). Accessibility standards require 4.5:1 for normal-sized text.
Vibe coding
A development approach where you find a snippet or template roughly 80% of the way there and use AI or manual tweaking to close the remaining gap, without writing everything from scratch.
Visual hierarchy
The arrangement of design elements so the most important information draws the eye first, achieved through size, contrast, proximity, and alignment.
CSS Overview
A Chrome DevTools panel that captures a website's complete color palette, font families, and sizing information, letting designers reverse-engineer professional palettes from any live site.
Resources Mentioned

Things they pointed at.

01:28tooluncut.wtf
10:13toolCSS Overview (Chrome DevTools)
05:10toolFigma
Quotables

Lines you could clip.

07:52
Pro designers don't use more color. They use color more intentionally.
Clean, quotable reframe — 12 words, zero setup neededTikTok hook↗ Tweet quote
09:03
One good color used well beats five random colors any day.
Punchy principle, instantly applicableIG reel cold open↗ Tweet quote
04:48
Pro designers don't guess about where things should go on the page. They have systems that guarantee it every time.
Sets up the systems-vs-guessing contrast perfectlynewsletter pull-quote↗ Tweet quote
12:24
I had focused so much on the design that I ignored the user journey.
Vulnerability plus lesson — strong story momentTikTok hook↗ Tweet quote
10:26
People don't read websites. They scan them.
Classic UX truth, delivered casuallyIG reel cold open↗ Tweet quote
The Script

Word for word.

story
00:00In 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.
00:13After 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?
00:31Let'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.
00:47They 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.
00:58And 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.
01:14And 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.
01:31Fontshare 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.
01:44Oh, 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.
01:57Oh, 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?
02:16If 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.
02:29That'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.
02:41And 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.
02:54Typically, people start with about 16 pixels. And then you use a scale to make your headings consistently larger.
03:02A 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%.
03:18So 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.
03:32Instead of using pixels, just use the REM values.
03:36It does all the calculations right there for you. Next up is letter spacing.
03:42For for body text, don't touch it. Right? We want that to be super legible, and so just keep it the default.
03:48But 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.
03:59For 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.
04:11That 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.
04:22Now 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.
04:33It takes two minutes and makes your typography look like a pro. Set it up. Next up is layout.
04:39Most 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.
04:52They 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.
04:58A grid system for structure, a spacing system for rhythm between elements and even vertical spacing, and then visual hierarchy to guide the eye.
05:08Let'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.
05:19Why is that? Well, because it's super flexible to divide evenly to where you don't have to have 12 columns specifically.
05:27It 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.
05:35Figma 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.
05:53I 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.
06:12And 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.
06:30The last piece is visual hierarchy because here's the truth. People don't read websites. They scan them.
06:37So 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.
06:48So 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.
07:07Use contrast. Right? You can use size, weight, or color.
07:11And 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.
07:30When 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.
07:46So how do you know what works? Here's the secret. Pro designers don't use more color.
07:52They 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.
08:01Right? 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.
08:09Each one should have a specific job. One of the most popular systems for creating visual balance is called the sixty thirty ten rule.
08:18So 60% are your neutral colors. Those are things like your whites and your blacks.
08:24You 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.
08:43But 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.
08:55So 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.
09:13So 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.
09:29So always check your color contrast. Color contrast is the contrast between your foreground text and the background color that it sits on.
09:39And 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.
09:51All 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.
10:02Finally, don't build color palettes from scratch. Most great color palettes weren't made out of thin air. They were borrowed and then refined.
10:09You 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.
10:23Scroll 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.
10:33It gives you size settings. It gives you the type scale system. It's such a great tool to use.
10:39Now let's talk code. And I know code, boo, hiss, we don't need that anymore. But here's the truth.
10:45If 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.
10:59Start with the essentials. Right? You've got HTML for structure, CSS for style, then there's JavaScript for interaction.
11:08And 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.
11:17I 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.
11:26Find 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.
11:37Right? Whatever gets you close, and then you just tweak it until it does what you want it to do.
11:41I had a friend who's not a developer who customized WordPress WooCommerce plugin to have a custom checkout process for his wife's website.
11:50You 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.
12:05Most 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?
12:16Way better than the original. But here's the problem. After we launched, their sales plummeted.
12:25Why? 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.
12:35So let's talk about what conversion thinking really means. First, every page needs to have just one goal.
12:44Right? That's it. And that goal should be simple.
12:47You 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.
13:07I 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.
13:24You 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.
13:37Your 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.
13:49So 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.
14:01Focus on these. Right? Build around them, and you'll grow way faster than chasing every single trend.
14:07Hey. 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.
14:15And, hey, go design something great. Don't forget, if you don't quit, you win.
The Hook

The bait, then the rug-pull.

Ten years of reading books, taking courses, and building websites — and it comes down to five things. Not fifty. Not a platform, not a trend, not the latest AI tool. Five durable skills that every working professional actually uses, and that most beginners skip entirely in favor of chasing what looks impressive.

Frameworks

Named ideas worth stealing.

03:01model

Major Third Type Scale

  1. Base: 16px
  2. H6: ~20px
  3. H5: ~25px
  4. H4: ~31px
  5. H3: ~39px
  6. H2: ~49px
  7. H1: ~61px

Scale each heading ~25% larger than the previous using REM values. typescale.net generates the full system automatically.

Steal forAny new web project or client site to eliminate arbitrary font size decisions
06:02model

8-Point Grid System

  1. 8px
  2. 16px
  3. 24px
  4. 32px
  5. 64px
  6. 128px
  7. 256px

All spacing in multiples of 8. Used by Google Material Design and Apple. Set up in Figma as a grid guide.

Steal forSpacing system on any web project to create instant visual rhythm
08:12model

60-30-10 Color Rule

  1. 60% neutral (backgrounds, body text)
  2. 30% secondary (section backgrounds, cards)
  3. 10% accent (buttons, CTAs)

Assigns a percentage and a job to each color in a limited palette, preventing visual chaos.

Steal forAny brand color system or client website redesign
12:39concept

Single-Goal Page Architecture

Every page has one goal: buy a product, sign up for a call, or capture a lead magnet. Multiple goals split user attention and reduce conversion.

Steal forLanding page strategy for any client or personal project
13:30model

Know, Like, Trust, Feel

Extension of the classic KLT framework — adds feel as the emotional layer that moves people from interest to action.

Steal forAny homepage or sales page structure
CTA Breakdown

How they asked for the click.

13:50subscribe
If this video was helpful, make sure to hit that like button and subscribe so you don't miss another episode.

Soft, friendly close CTA. Mid-video CTA at ~1:39 for likes/subscribe plus slide download and font resource list.

Storyboard

Visual structure at a glance.

open
hookopen00:00
typography
valuetypography00:34
font resources
valuefont resources01:23
layout
valuelayout04:37
color
valuecolor07:38
code
valuecode10:39
conversion
valueconversion11:57
close
ctaclose13:50
Frame Gallery

Visual moments.

Watch next

More from this channel + related breakdowns.

13:00
Self-Made Web Designer · Listicle

Steal These Web Design Trends 2026

Nine named patterns — from barely-there AI minimalism to tech-bro gradients — spotted across hundreds of websites, with a one-rule filter for knowing which ones actually belong on your site.

December 4th 2025