Big Idea

The argument in one line.

Beautiful websites fail when designers prioritize aesthetics over conversion, and the fix is treating visual hierarchy, color contrast, typography, and friction reduction as one unified system rather than separate craft skills.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

A beginning or self-taught web designer who has learned layout but has never studied conversion principles.
A freelancer building client sites who wants a portable checklist of fundamentals to apply immediately.
Someone who has shipped a visually polished site and been puzzled when results did not improve.

SKIP IF…

You are already fluent in accessibility, color theory, and conversion-rate optimization.
You are looking for code or platform-specific tutorials — this covers concepts, not implementation.

TL;DR

The full version, fast.

The F-pattern reading model is outdated — designers who enforce it cause users to miss important content. Instead, visual hierarchy guides attention through deliberate size and weight differences. Color must pass accessibility contrast thresholds and follow the 60/30/10 distribution rule. Typography must respect the H1/H2/paragraph weight stack and never use decorative fonts for body copy. None of that matters if the site does not convert: clarity about who the company is, scannability so users can bounce without reading, and emotional motivation are what turn visitors into customers. Design for the audience, not the designer or client preference.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 00:10

01 · Hook

Direct promise: 10 years of knowledge in 7 minutes, no fluff.

00:11 – 01:07

02 · Debunking the F-Pattern

The F-pattern reading model is outdated and actively harmful — forces users to miss content. Replace with visual hierarchy.

01:05 – 02:15

03 · Visual Hierarchy and CTAs

Make the most important elements biggest and boldest. CTAs need maximum contrast. Ghost buttons are invisible — stop using them.

02:16 – 03:34

04 · Color

Accessibility contrast is non-negotiable. Use coolers.co to check. Apply the 60/30/10 rule for color distribution.

03:34 – 04:28

05 · Typography

H1 is the most prominent text on the page. H2 divides sections. Paragraph text must use readable fonts.

04:29 – 05:01

06 · The Pretty Website That Killed Sales

Host admits to designing a beautiful site for a client that caused sales to plummet — pivots the video to conversion.

05:01 – 05:57

07 · Conversion Framework

Three conversion levers: Clarity, Scannability, Motivation.

05:57 – 06:35

08 · Design for the Audience

Design based on target audience research, not personal or client taste.

06:35 – 07:09

09 · AI Warning and Stay Current

Web designers go stale like bread. AI will replace lazy designers. Continuous learning is the only defense.

07:09 – 07:14

10 · CTA

Subscribe prompt, next video link, sign-off: if you don't quit, you win.

Atomic Insights

Lines worth screenshotting.

The F-pattern reading model is outdated — applying it forces users into a single path and causes them to miss important content.
Visual hierarchy is about turning down the volume on less-important elements, not adding decoration to important ones.
Ghost buttons (outline-only, no solid fill) are invisible to most users and do not get clicked.
Your CTA button must have the highest contrast ratio on the page because the button click is the entire point of the page.
The 60/30/10 color rule: 60% dominant neutrals, 30% brand color, 10% accent — accent is where your CTAs live.
Decorative fonts destroy readability at paragraph size; never use them for body copy.
A visually beautiful website can crater sales when it lacks conversion architecture — beauty and conversion are not the same goal.
People scan websites, they do not read them — scannability is a structural requirement, not a nice-to-have.
Design for the website visitor, not for the designer or client taste — their opinion is irrelevant to conversion.
Web designers age like bread, not wine — without continuous learning, skills go stale faster than in almost any other creative field.
AI will not replace all web designers, but it will replace designers who stop learning and rely on static knowledge.
Motivation is the third conversion lever: a site must speak to the emotional driver behind the visitor's yes or no.

Takeaway

Pretty websites fail when conversion is an afterthought.

WHAT TO LEARN

Designers who master aesthetics but skip conversion architecture routinely ship sites that look great and perform terribly.

The F-pattern reading model is outdated — enforcing it on users causes them to miss critical content, so use visual hierarchy to guide attention deliberately.
Visual hierarchy is about subtracting emphasis from less-important elements, not adding decoration to important ones; reduce size, weight, or contrast progressively.
Ghost buttons (outline-only, no fill) are invisible to most users — a solid, high-contrast button on the primary CTA is a functional requirement, not a stylistic choice.
The 60/30/10 color rule gives a portable distribution guideline: neutral dominates, brand color supports, accent color is reserved for the one thing the page most wants the visitor to do.
Decorative fonts destroy readability at paragraph size; reserve them for display headlines and use clean fonts for sustained reading.
A website that does not convert is useless to a client regardless of how polished it looks — the host learned this watching a beautiful redesign cause sales to drop.
Conversion requires three things: clarity about who the company is and what action the visitor should take, scannability so people who do not read can still navigate, and emotional motivation that speaks to the reason they would say yes.
Designing for personal or client taste instead of the target audience is the root cause of most sites that win design praise and lose customers.

Glossary

Terms worth knowing.

Visual hierarchy: A design principle where the most important elements are made largest and boldest, and each less-important element is progressively reduced in size, weight, or contrast so attention flows in a deliberate order.
Ghost button: A call-to-action button with only a border outline and no solid background fill. These have significantly lower click rates because users do not perceive them as interactive.
60/30/10 rule: A color distribution guideline: 60% dominant neutral tones, 30% primary brand color, 10% accent color reserved for highest-priority interactive elements.
Accessibility contrast: The measurable luminance difference between a text color and its background. WCAG guidelines require a minimum ratio so users with visual impairments can read content clearly.
Scannability: The degree to which a page layout allows a user to extract key information quickly without reading every word, achieved through headings, short paragraphs, and visual breaks.

Resources

Things they pointed at.

02:43toolcoolers.co ↗

Quotables

Lines you could clip.

06:05

“Web designers don't age like fine wine. We age like a loaf of bread left on the counter.”

standalone metaphor, no setup needed→ TikTok hook↗ Tweet quote

06:43

“Will AI take lazy web designer jobs? Absolutely.”

two-line call-and-response, punchy close→ IG reel cold open↗ Tweet quote

04:47

“I tried to make it look pretty instead of focusing on good conversion practices.”

personal confession that reframes the whole field→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

00:00I'm gonna give you over ten years of web design knowledge in just seven minutes. No fluff, just the good stuff.

00:08Are you ready? Let's go. You can basically boil all the design knowledge that you need to build great websites down to just three things, layout, color, and typography.

00:21Probably heard it said before that people read or engage websites 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.

00:36But here's the truth. That's actually bogus.

00:40It'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. The truth is is that people engage 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.

01:03So what do you do instead? You use something called visual hierarchy. 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.

01:18And then this really tiny line that's all the way in the left hand corner that says and you'll read this last. 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.

01:36You make it more inconspicuous. 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?

01:46Because 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.

01:57What are ghost buttons? They're buttons that just have an outline without a solid background. The problem is that people don't see them and they don't click on them.

02:06For 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. The first thing is accessibility.

02:18If 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 are still going to be able to see things clearly.

02:35How do you know if a contrast is high enough? Something that I like using is a website called coolers.co. You can actually take all of the brand colors from a website, input it into the dashboard, click on the color contrast teller, and it will instantly tell you which colors pass and which don't.

02:54Super 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 and whites.

03:1030%, you should reserve for your brand colors, and then another 10% you wanna use something for an accent.

03:18So 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?

03:29No. But it's a good principle to stick with, especially when you're first getting started. Then there's typography.

03:34Typography 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, and it goes on and on.

03:56There 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.

04:10Then you've got your h two or your subheadings. These act as ways to divvy up the rest of the page and guide a user's attention.

04:19Then 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.

04:29But 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.

04:41It was modern. It was chef's kiss. The problem was when we launched it, sales plummeted.

04:47Why 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, it's useless to your clients.

04:59So what are good conversion practices? 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.

05:14And 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.

05:26People 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.

05:35And then finally, you want the website to be motivating. It's not just enough to be pretty.

05:40You 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.

05:52It doesn't matter if you love the design. It doesn't even matter if your client loves the design. Who does it matter for?

05:59The website visitors. So do a little research. Who's actually using this website?

06:04Fonts, colors, layout. Choose them based on the target audience and not personal preference.

06:10Finally, make sure that you never stop learning. Web designers don't age like fine wine. Okay?

06:15We 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.

06:25What 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.

06:35Will AI take all of our jobs? Probably not. But will AI take lazy web designer jobs?

06:43Absolutely. The only way to stay valuable is to keep learning, keep adjusting, and keep leveling up.

06:50And 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.

07:06And don't forget, if you don't quit, you win.

The Hook

The bait, then the rug-pull.

Ten years of web design knowledge in seven minutes is an audacious promise. The host earns it by spending the first thirty seconds dismantling a myth almost every designer was taught — then delivering a framework so clean it fits on a napkin.

Frameworks

Named ideas worth stealing.

01:05concept

Visual Hierarchy by Volume

Make the most important element biggest and boldest; for every less-important element, turn down the volume by reducing size, weight, or contrast progressively.

Steal forany landing page or sales page layout

02:48list