Video summary

Give me 12 minutes, and I'll improve your web design skills by 176%

Main summary

Key takeaways

Educational

Main ideas and lessons (12-minute web design improvement)

  • The “premium agency” look isn’t about taste—it comes from purposeful design decisions that control:
    • Where the visitor’s eye lands
    • What they trust
    • What they do next
  • Many designers waste effort by making pages feel like “noise” or by building without testing for real-world behavior (especially on mobile).
  • The video frames design as one unified skill delivered through 7 principles: hero, hierarchy, whitespace, contrast/color, social proof, typography, mobile.

7-principle methodology (detailed, step-by-step)

1) Hero section (most important; must work even without scrolling)

Goal: Treat the hero as a “mini site” that can complete the pitch in one screen because many visitors won’t scroll.

  • Ensure the hero includes 4 items, all visible without scrolling:
    • Clear headline: tells visitors what the page/company is
    • Context: who it’s for or what it does
    • Social proof: signals that others trust it
    • Obvious call to action: what you want the visitor to do next

Practical emphasis

  • The hero must do most of the job of the entire site.
  • Validate success by assuming visitors may not see anything below the fold.

Example shown (Markups.ai):

  • Before: CTA lacked context and wasn’t a proper button; the page didn’t quickly communicate what they do or why to trust them.
  • After: Added an “eyebrow” line summarizing the pitch; improved headline clarity; added one-line context; made CTA specific (“book a demo”); added small branding mascot; hero becomes decision-support even with no scroll.

2) Visual hierarchy (guide the eye: first, second, third)

Goal: Make the page read as intentional instead of clutter/noise.

  • Decide a deliberate eye-order:
    • Most important element should be largest and boldest
    • Supporting text should step down in emphasis
    • Fine print should be quieter again
  • Avoid the failure mode:
    • If everything is the same size/weight, the eye has nowhere natural to land, and the page feels cheap.
  • Quick test:
    • Squint or shrink the page—if you can still identify the main focal point, hierarchy works; if not, hierarchy needs work.

3) White space (make elements breathe; restraint signals premium)

Goal: Use empty space to make the site feel expensive and focused.

  • Define it as: empty space around elements
  • Counterintuitive rule:
    • Don’t fill blank areas automatically—space makes elements feel important
  • What to look for in high-end designs:
    • generous padding around text
    • real gaps between sections
  • If your page feels busy/amateur:
    • it likely needs more space, not more stuff

4) Contrast and color (especially to make the CTA pop)

Goal: Use contrast for both readability and attention steering.

  • Contrast does two jobs:
    1. Readability: insufficient contrast (e.g., light gray text on white) makes reading hard and loses visitors.
    2. Attention steering: the CTA/button should be the highest-contrast element on the page.
  • How to apply it:
    • Use a calm, restrained palette for most elements
    • Make the primary action visually “pop” against the background
  • Failure mode:
    • If the button blends into the page, people may not notice it—so it effectively “doesn’t exist.”

Example reference

  • An “electric car” style example: restrained palette with the key action standing out clearly.

5) Social proof (upgrade is placement, not just using it)

Goal: Put trust signals exactly where user doubt is highest.

  • Social proof includes:
    • logos
    • testimonials
    • links to third-party review platforms, etc.
  • Common mistake:
    • burying proof in distant sections (testimonials page nobody clicks, or quotes placed far from decision points)
  • Correct placement rule:
    • Proof must sit at the point of doubt, for example:
      • Client logos near the hero (first seconds)
      • Testimonial next to the price (where worry is strongest)
      • Review score on/near the specific decision moment it supports
  • Result:
    • reassurance is delivered before hesitation fully forms.

6) Typography (use fewer fonts + match text sizes to hierarchy)

Goal: Typography is a strong “professional signal.”

  • Two core moves:
    • Use fewer fonts (usually 1–2 across the site)
      • 4–5 competing fonts = inconsistency = amateur look
    • Establish a clear size order matching the hierarchy:
      • big confident headings
      • clear subheadings
      • readable body text size and spacing
  • Avoid readability killers:
    • don’t get clever with body text or decorative fonts (hurts readability)
  • Rule of thumb:
    • Put personality in headlines, keep body copy clean.

7) Mobile first (not an afterthought; test on a real phone)

Goal: Ensure the design works for the majority who view on phones.

  • Key risk:
    • sites that look great on desktop can “fall apart” on phones.
  • Common mobile failures:
    • text too small to read
    • buttons too close together to tap accurately
    • content spilling off-screen
  • Habits/steps:
    • Check every build on a real phone held in one hand
    • Confirm:
      • everything is readable without zooming
      • the main CTA is thumb-tappable without hitting other buttons
      • nothing spills off the side
    • Build for mobile from the start, not by bolting it on at the end.

Unifying takeaway

  • These principles aren’t seven separate tricks; they’re the same underlying skill:
    • control attention + trust + next action
  • Weak sites happen when decisions are left to chance, causing the eye to wander.
  • Premium sites systematically answer:
    • Where does the visitor look first?
    • Is there breathing room?
    • Does the CTA stand out?
    • Is proof placed where doubt exists?
  • Suggested action:
    • Audit your own site (or one you’re building) by walking through the “7 things” and tightening the loose decisions.

Speakers / sources featured

  • Speaker/Source: Unspecified individual narrator/author (no name given in the subtitles)
  • Company/example source shown: Markups.ai
  • Reference example/source: “Electric car” scheme (example mentioned, not attributed to a specific brand)

Original video