Modern Creator
Why Modern Creator?
Sam Crawford | Web Design Expert · YouTube

The Only Web Design Video You Will Ever Need

A 94-minute teardown of what separates websites that convert from websites that just exist — with live before/after redesigns across a dozen real clients.

Posted
yesterday
Duration
Format
Tutorial
educational
Views
3.9K
266 likes
Big Idea

The argument in one line.

Most websites fail not because they look bad but because nothing on the page tells the visitor's eye what matters first — and fixing visual hierarchy, not aesthetics, is what doubles conversion rates.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…
  • You own a service business or SaaS product and suspect your website is leaking leads but can't pinpoint why.
  • You've hired a designer or developer and want to evaluate their work against professional conversion principles — not just aesthetics.
  • You're building your own site on Squarespace, Webflow, or a similar platform and want to avoid the structural mistakes that kill conversions.
  • You manage a team that makes design decisions and need a shared vocabulary for hierarchy, social proof, and CTA architecture.
  • You're a junior designer who has absorbed visual taste but hasn't yet studied the business logic behind design choices.
SKIP IF…
  • You're a senior conversion strategist — you'll recognize every principle here within the first 20 minutes.
  • You're looking for technical development tutorials; this covers design strategy and principles, not code.
TL;DR

The full version, fast.

Having a website is not the same as having a website that works. The sites that convert are doing the same handful of things right: clear visual hierarchy (size, contrast, spacing), a hero section that answers 'is this for me?' in under five seconds, social proof woven throughout rather than dumped at the bottom, and a single prominent accent color that points to every call to action. Crawford walks through a dozen real client redesigns — Prova Health, London AV, HomebuilderAI, Markups, Liverpool Podcast Studios, Multifamily, FoKUS, and more — showing how small structural changes (not aesthetic overhauls) produce the measurable business difference. Every design decision should start with the question: what do I want the visitor to do, and does this element help or hinder that?

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 – 02:54

01 · The Hard Truth: Sites That Fail Aren't Ugly

Crawford establishes the core thesis: most websites fail because owners confused having a site with having one that works. Beautiful can lose; structurally sound wins.

02:54 – 09:18

02 · Case Study: Prova Health Before/After

Full walkthrough of the Prova Health redesign — improved nav CTA, animated hero graphic, micro-interactions, logo carousel, and social proof integration.

09:18 – 16:16

03 · Case Study: London AV Before/After

London AV had too many competing CTAs, a two-line nav, and a video background drowning the hero. The redesign clarifies navigation, adds a strong contact CTA, and pushes social proof into the hero.

16:16 – 22:38

04 · Visual Hierarchy: Size, Contrast, and Spacing

When everything screams at the same volume, nothing gets heard. Crawford uses HomebuilderAI and a failing client (Renew) to show how three levers — size, contrast, spacing — direct the eye without the visitor noticing.

22:38 – 29:14

05 · Typography: The Voice Before the Words

Font carries emotional weight before a single word is processed. Two rules: max three fonts, readability beats personality. Case study: Astra (same font, different weights — no new typeface needed).

29:14 – 35:59

06 · Color: Decisions Made Before the First Scroll

Color communicates before language. Three to five colors max, one accent for CTAs. Case study: FoKUS rebrand from monochrome to playful bold palette with restraint.

35:59 – 42:03

07 · Color Case Study: Multifamily's Mondrian Palette

A Mondrian-inspired black-and-white-plus-primary-colors scheme showing how disciplined use of red, yellow, and blue can feel premium and distinctive without shouting.

42:03 – 49:13

08 · Imagery and Bespoke Assets

Custom graphics are the line between a template site and a brand. Stock images send a subconscious signal of low investment. Case study: Scents (Amazon driver AI), Dane Kelly Holmes Trust.

49:13 – 56:16

09 · White Space, Grid Systems, and Alignment

White space isn't empty — it's confidence. Cramped layouts signal desperation. Case studies: Yale School of Art (cautionary) vs Farley House (luxury event venue using space to sell an experience).

56:16 – 1:01:33

10 · Hero Sections and CTAs

The hero has one job: answer 'is this for me?' instantly. Markups.ai before/after shows how eyebrow text, a specific h1, and a precise CTA label (book a demo vs schedule a call) change everything.

1:01:33 – 1:08:24

11 · Social Proof Architecture

Social proof is only effective where visitors hesitate. Liverpool Podcast Studios redesign: testimonial with specific outcome in the hero, logo wall immediately after, then a wall of Google reviews, stats section, and proof woven around pricing.

1:08:24 – 1:13:31

12 · Mobile Design and Navigation

Desktop layouts rarely translate directly to mobile — columns become stacked rows, nav becomes a hamburger, CTAs must be thumb-reachable. The Hybrid Way and other examples show nav overhauls.

1:13:31 – 1:20:26

13 · Forms, Micro-Copy, and Conversion Architecture

Forms should be as short as possible, visually calm, and placed at natural decision points. Micro-copy — small label changes — can dramatically shift conversion. 'Book a demo' outperforms 'schedule a call' in a SaaS context.

1:20:26 – 1:26:00

14 · Footer Architecture and Responsive Spacing

Footers are a terminal CTA — they should offer at least one conversion path, a site map, and contact info. Spacing should be consistent across breakpoints. Case study: Tanager Digital.

1:26:00 – 1:34:02

15 · The Golden Question: Building Backwards from Business Goals

Close: every design decision should start with 'what do I want the visitor to do next?' Work backwards from that goal to every element. Aesthetics follow function.

Atomic Insights

Lines worth screenshotting.

  • Beautiful sites generate zero leads every day; ugly sites print money — the difference is never what people think it is.
  • When everything on a page is the same size and weight, the brain treats it all as equally unimportant, which is worse than bad content.
  • Your hero section is the only section that reliably gets seen — it needs to do all the selling on its own.
  • White space is not empty space; generous space signals confidence, cramped space signals uncertainty.
  • That accent color you picked for buttons is doing more conversion work than almost any other design decision on the site.
  • Three fonts maximum, and your body font should practically disappear — readability beats personality every time.
  • Social proof placed below the fold is proof that never gets seen; weave it throughout, starting in the hero.
  • The 60-30-10 color rule is an accessibility mechanism as much as an aesthetic one — it's how you prevent colors from competing.
  • A testimonial tied to a specific numerical outcome will always outperform a testimonial that just says 'great service'.
  • If your hero headline is clever, it's probably failing — visitors want 'is this for me?', not 'is this interesting?'.
  • Stock photography doesn't just look generic; it signals to the visitor's subconscious that this business isn't invested enough to show itself.
  • Every major page section should be doing one job: addressing a fear, answering an objection, or building enough confidence that the CTA feels like a natural next step.
  • F-pattern and Z-pattern aren't abstract design theory — they're physical paths your visitor's eye takes, and your CTA placement either intercepts that path or misses it.
  • Navigation items that say 'more' or use ambiguous labels aren't neutral — they actively erode trust by forcing the visitor to decode the site.
  • Mobile isn't a secondary consideration: if the desktop layout doesn't translate to a single scrollable column with thumb-reachable CTAs, the design is incomplete.
  • Every design decision should start with a question: what do I want the visitor to do next, and does this element help or hinder that?
Takeaway

What makes a website actually work.

THE DESIGN LESSON

A website that converts isn't better-looking than one that doesn't — it's better structured, and the structure follows a small set of repeatable principles.

01The Hard Truth: Sites That Fail Aren't Ugly
  • Most websites fail because the owner confused having a website with having a website that works — those are two completely different things.
  • Beautiful sites can generate zero leads; structurally sound but 'ugly' sites can print money. The difference is never aesthetics.
02Case Study: Prova Health Before/After
  • When everything on a page competes for attention at the same visual weight, nothing actually gets attention.
  • A full redesign doesn't always mean starting over — small typography and spacing adjustments can reposition a brand without replacing the underlying identity.
03Case Study: London AV Before/After
  • Too many calls to action at the same visual prominence is as bad as no CTA — visitors freeze when asked to choose between equally-weighted options.
  • A two-line navigation bar is a signal to the visitor that the site wasn't carefully considered; compress it before anything else.
04Visual Hierarchy: Size, Contrast, and Spacing
  • If your hero section can't tell a stranger what you do and why it matters in under five seconds, every section below it is paying a conversion tax on that first impression.
  • Visual hierarchy — size, contrast, spacing — is the single cheapest lever for doubling how much information a visitor absorbs before they decide to stay or leave.
05Typography: The Voice Before the Words
  • Fonts carry emotional weight before a word is read: the heading font should express character, the body font should disappear.
  • Your typeface should match who the brand actually is — not who it wishes it were. A thin elegant serif says something different from a chunky rounded sans-serif.
  • You can achieve strong visual distinction between heading and body using only weights, sizes, and kerning of a single font family — no additional typeface required.
06Color: Decisions Made Before the First Scroll
  • Your accent color exists for one purpose — pointing to where the visitor should act next. Every additional use of it dilutes that pointing power.
  • Color restraint and color boldness are not opposites: you can have a vivid, personality-forward palette while still using the 60-30-10 rule to ensure the CTA always stands out.
07Color Case Study: Multifamily's Mondrian Palette
  • The 60-30-10 color rule is an anti-chaos tool: 60% neutral background, 30% secondary color, 10% accent — stick to it and no color will accidentally overpower your CTA.
  • Color selection is also an accessibility mechanism: sufficient contrast ratios between background and text ensure screen readers and low-vision users can parse your content.
08Imagery and Bespoke Assets
  • Custom imagery and bespoke graphics signal investment in a way stock photos structurally cannot — visitors don't consciously notice but subconsciously use it to evaluate trust.
  • AI tools (Claude, ChatGPT, Figma Make) can generate proof-of-concept visual ideas to bring to a designer, cutting briefing time while preserving final quality.
09White Space, Grid Systems, and Alignment
  • White space is a brand signal: premium sites give elements room to breathe because cramped layouts communicate desperation, not value.
  • Visual misalignment — elements that don't share a grid — erodes trust subliminally even when visitors can't name what feels off.
10Hero Sections and CTAs
  • The hero section is the only section that reliably gets seen — it must do all the selling independently.
  • Every call to action label should describe the specific next step: 'book a demo' outperforms 'schedule a call' on a SaaS product because it removes ambiguity.
11Social Proof Architecture
  • Social proof only works where visitors hesitate; proof below the fold is proof that never gets seen.
  • A testimonial tied to a specific numerical outcome will always outperform one that just says 'great service' — guide customers to give outcome-specific reviews.
12Mobile Design and Navigation
  • Mobile design is not a translation of desktop design — it requires rethinking column layouts into vertically-stacked rows with thumb-reachable CTAs.
  • Navigation items that require decoding ('more', ambiguous labels) cost you trust before a visitor reads a single word of your value proposition.
13Forms, Micro-Copy, and Conversion Architecture
  • Forms should be as short as possible, placed at natural decision points, and visually calm — visual noise around a form kills the cognitive ease that makes people fill things in.
  • Micro-copy changes — small label differences on CTAs, form fields, and button text — can shift conversion rates more than layout changes.
14Footer Architecture and Responsive Spacing
  • A footer is a terminal CTA — anyone who scrolls that far has intent; give them at least one conversion path, not just a site map.
  • Responsive spacing should be defined as a system, not adjusted element by element, so it remains consistent across breakpoints without manual effort.
15The Golden Question: Building Backwards from Business Goals
  • Every design decision should start with a question: what do I want the visitor to do next, and does this element make that action more or less obvious?
  • Strategy precedes design: knowing a site's business goals before wireframing is what separates a site that performs from one that just exists.
Glossary

Terms worth knowing.

Visual hierarchy
The deliberate arrangement of elements by size, contrast, and spacing so the viewer's eye moves through a page in a designed sequence — most important first, least important last.
Hero section
The first visible area of a webpage before any scrolling. It must answer 'is this for me?' in under five seconds; everything below it inherits the trust (or distrust) this section creates.
Halo effect
The cognitive bias where one strong first impression colors every subsequent element. A compelling hero makes testimonials more believable; a weak hero makes even great case studies feel suspect.
CRO (Conversion Rate Optimization)
The practice of restructuring a page to increase the percentage of visitors who take a target action — typically a form submission, booking, or purchase — without changing the traffic source.
F-pattern / Z-pattern
Documented eye-tracking patterns for how visitors scan pages. F-pattern: two horizontal scans then a vertical drop down the left. Z-pattern: diagonal from top-left to bottom-right. CTA placement should intercept these paths.
60-30-10 rule
A color distribution guideline: 60% background/neutral, 30% secondary color, 10% accent. Keeps palettes coherent and ensures the accent color — typically on CTAs — stands out.
Social proof
Any third-party evidence that others have trusted and benefited from a product or service: testimonials, logo walls, review counts, case studies, awards, and publication mentions.
Kerning
The spacing between individual letter pairs in a typeface. Too much kerning looks amateurish; too little makes text feel cramped. Adjusting kerning is one of the cheapest ways to shift a brand's perceived quality.
Bespoke assets
Custom-made graphics, illustrations, or icons created specifically for one brand rather than downloaded from stock libraries. They signal investment and make the visual identity non-replicable by competitors.
Micro-interactions
Small animated responses to user actions — hover states, button press effects, scroll-triggered reveals. They guide attention, confirm interactivity, and make a site feel alive without overwhelming it.
Above the fold
The portion of a webpage visible without scrolling. Originally a newspaper term, it refers to the prime real estate where the most persuasive elements should live.
Resources

Things they pointed at.

00:45productProva Health ↗
09:18productLondon AV ↗
18:16productHomebuilderAI
29:14productFoKUS
35:59productMultifamily (Vancouver real estate)
42:03productScents (Amazon driver AI coaching)
43:14productDane Kelly Holmes Trust
45:00toolFigma ↗
45:00toolFigma Make
45:00toolClaude (Anthropic) ↗
45:00toolChatGPT ↗
50:53linkYale School of Art (cautionary example) ↗
51:26productFarley House (luxury venue case study)
56:16productMarkups.ai ↗
1:01:33productLiverpool Podcast Studios
1:20:26productTanager Digital
00:45linkbyCrawford (agency) ↗
00:45linkBuild Your Margin (community waitlist) ↗
00:45productPremium Website Checklist ↗
Quotables

Lines you could clip.

00:12
“This thing that they've been sending every single potential customer is actively costing them money. Not necessarily because it's ugly, but because it's invisible, meaning it communicates absolutely nothing.”
Punchy diagnosis that reframes design as a revenue problem, not an aesthetics problem→ TikTok hook↗ Tweet quote
02:02
“I've seen beautiful sites that generate zero leads and then on the flip side, I've seen really ugly sites that print money.”
Counterintuitive claim with zero setup needed→ IG reel cold open↗ Tweet quote
16:25
“When everything on the page is the same size, the same weight, the same color, your brain treats it as all equally important and thus equally unimportant. And that's worse than having bad content because at least bad content makes you feel something.”
Memorable reframe of hierarchy as psychological not visual→ newsletter pull-quote↗ Tweet quote
26:00
“Fonts are gonna be the voice of your website. And just like a person's voice, they create an impression before anyone processes a single word.”
Clean analogy, quotable standalone→ newsletter pull-quote↗ Tweet quote
28:30
“Choose fonts that match who your brand actually is as opposed to who you wish it was.”
Sharp one-liner with broad applicability→ IG reel cold open↗ Tweet quote
34:10
“That accent color is actually doing more work than almost any other design decision on your site because it's literally pointing to where the money gets made.”
Surprising reframe of an overlooked design element→ TikTok hook↗ Tweet quote
54:00
“Space is a signal. Generous space will signal confidence. Cramped space signals that you're not quite sure what matters.”
Tight aphorism, visually demonstrable→ newsletter pull-quote↗ Tweet quote
59:30
“The hero section isn't a place to be creative. It's a place to be useful. Answer the visitor's question before they have to ask it and you've already beaten 90% of websites.”
Strongest strategic statement in the video→ IG reel cold open↗ 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.

metaphoranalogystory
00:00There's a moment that happens on every project that I work on. I'm sitting across from a business owner and they're showing me the website and they genuinely think it's fine. And I have to figure out how to tell them that this thing that they've been sending every single potential customer is actively costing them money.
00:17Not necessarily because it's ugly, but because it's invisible, meaning it communicates absolutely nothing. I've spent thousands of hours staring at websites, tearing them apart, rebuilding them, and watching what actually happens when real people interact with them.
00:33It's not theory. It's not like best practices from a blog post. I've literally sat there and watched sessions.
00:40I've tracked conversions and I've seen businesses double their revenue from changes that had nothing to do with making things prettier. And after all that, the pattern is so clear.
00:50It's almost boring. The sites that win are doing the same handful of things right and then the sites that lose are making the same handful of mistakes. So this video is gonna be the complete education layout, typography, color, imagery, user experience, conversion, architecture, mobile, animation, and the strategic thinking that ties it all together.
01:11Whether you're building your own site, you're managing someone who builds it for you, or you're just a designer who wants to understand why some of your work converts and some of it doesn't, this is everything I know organized from the ground up.
01:24I'm going to show you all of it on screen so you can actually see what I'm talking about. Let's get into it. Here's the pattern nobody talks about.
01:32The worst websites I've ever seen weren't built by people who didn't actually care. They were built by people who cared a lot, but they focused on the wrong stuff. They spent weeks picking the perfect shade of blue, agonized over the logo placement, and argued with the team about whether the font should be serif or sans serif.
01:51And then they launched a site with no clear message, no structure, and no reason for anyone to stay past the first scroll. That is the trap.
01:58Most websites fail because the owner confused just having a website with having a website that works. Those are two completely different things. I've seen beautiful sites that generate zero leads and then on the flip side, I've seen really ugly sites that print money.
02:15The difference is never what people think it is and it shows up in the same two ways almost every time. Either someone hired a developer handed over the keys and now they can't even update their own home page without sending an email or wait in two weeks or they built it themselves probably on a weekend no strategy, structure, no understanding of what a visitor actually needs to see and then in one order.
02:39Both situations end up in the same place and that's a site that's just sitting there doing nothing for the business. So what I'm gonna do is show you why some sites fail and to show this off, what I'm gonna show is two of our clients.
02:54We've got Proba Health and London AV. I'm gonna bring up the before and explain what's lacking in these Then and I'm gonna bring up the after. So what we've actually done to make these improvements.
03:05What you're seeing on screen here is Proba Health's website. I think this was in about 02/2223, something like that.
03:14But immediately, what you'll see is this hero section, it doesn't really look like a hero section.
03:21If anything, it looks like it should be further down the site. A couple of things that stand out immediately to me is the choice of fonts.
03:29So obviously, this is meant to match, uh, the logo here, But for me, it just looks quite quite stock. Now I think it works okay in the logo and we did keep this in situ for the logo, but we made some small tweaks to the typography when we came to actually build the main site.
03:44So nothing drastic, but you'll see the difference when I bring it up on screen in a minute. Now they do have a lot of space. So one thing I'll notice with site and I'll show you on the London AV site is they don't have much breathing room.
03:58So everything is competing for the same real estate in the same amount of attention. And when things compete for attention and they're all screaming at the same level, then nothing actually gets attention.
04:09So prover here, they do it quite well. But when you look at it, nothing particularly stands out and the call to action itself just contact us.
04:20For me, that's not doing much. And I'll come onto it a little bit later in the video, but the hero section is what does basically all the heavy lifting on a website.
04:29So this needed to be improved a lot. And just a final note up here in the nav, more shouldn't really be in there.
04:37More doesn't really make sense to a user. It should be just a nav item with a clear path to another page or it should be a call to action. Ideally, it would be a call to action and it would draw the user's eye.
04:49I'm gonna talk a little bit about f pattern and zed pattern later on, but this is something just to stay cognizant of as we go through this. As we go down, you can see, yes, there's breathing room, but there's not any particular hierarchy.
05:04So there's custom graphics. Yes. But it doesn't really make sense.
05:09And if we zoom in, this is very nitpicky of me, but these don't align. So if you're gonna do full bleed elements, make sure they align. And then obviously also make sure that things don't cut off.
05:21So for me, even though I like these graphics and we did reintegrate these graphics, they're not doing anything right now.
05:29So I'll show you in a minute how we improve this. And as we scroll through, you can see even though they operate at a very high level, all the small mistakes kind of ruin the halo effect.
05:41So someone's gonna come in, they're gonna notice things aren't quite aligned, nothing is particularly standing out because everything's just the same sort of weight. And so before anyone's had a chance to, you know, get to the bottom of the site or take action, they're looking at the site through a lens of, do I really trust this business?
06:00Now if we contrast this with the redesign that we did here, you'll see that we cleared up the nav and we've made the call to action stand out a lot more. So there's a bit of movement in here just so it draws the eye. It draws people right across from the logo to the get in touch and then they go to the h one.
06:17So you'll notice, you know, if I flick between the sites, there's not that much of a difference in the font.
06:24But we've changed some of the kerning and the leading just to make it look a little bit more premium. So sometimes, uh, full website redesign, it doesn't necessarily require to rip everything up and start again.
06:37It can just be small tweaks to position the site a lot more in line with what you'd expect from a large scale company. And you can see here we've animated the graphic. We've really brought it to life.
06:49So if someone lands on this site and they see the hero section alone, they can see, okay, who we are, what we do, who we work with. They can look in the knowledge bank. They can go to their sub site and they can get in touch.
07:00So again, it's not a drastic change from contact us to get in touch. It's just slightly more intent driven. So if someone looks on this, they get a nice micro interaction when they hover over get in touch and then they know immediately what to do.
07:14Now as we scroll down, you can see we've added a bit more movement. So pro will work with huge businesses and they weren't really shouting about this on the site.
07:24So we've just put in a nice moving carousel to display all of their clients or at least a select few. So for instance, they've got Microsoft on the roster. When you hover over, it stops so you can get a clear look at who they're working with.
07:38We go down and we get those really nice micro interactions that drive people to learn more, to click through, to stay on the site and not bounce. We go down again, we've got published in. So what we're trying to build is a ton of social proof.
07:53So social proof doesn't always have to come in the form of just testimonials, and we'll come on to that a little bit later in the video. But it can be logo walls, it can be logo carousels, it can be featured and worked with.
08:04All of these things build social proof on your site and it makes users trust you more. And then we go down and we're just explaining the difference that prover actually offers. So you can see now we've built a lot more info into the home page.
08:19It's not just a simple text and button or text and image. There's a bit more of a flow to the page. It's not really harsh sort of image here, text here.
08:29It doesn't quite align, know, jarring for the user. It's a very clean flow that invites people to scroll down. And then we go down a little bit further and we've got our testimonials here.
08:42So really strong case studies for prover. We go down here and again we've got another call to action to get in touch. Once someone gets to the bottom of a page, you want them to do something.
08:54If it's not clear where someone can go, so for instance, you know, they can scroll through your sitemap, they can get in touch, they can do something. If that's not clear, then they're gonna bounce and obviously that's gonna hit your bounce rate and it's gonna hurt your conversions as well. So that's proverb and that is why some websites fail and some websites succeed.
09:14Now just to drive this point home, I'm gonna show you the London AV example now. So this is London AV, really great client. They do amazing work with huge huge clients.
09:24Now one thing that immediately stands out is there's quite a lot going on. You've got the video background which isn't always a bad thing. I think it can work well.
09:33But this along with many many calls to action, probably too many, sort of talk to an expert, then they've got the pop up, then they've got this widget here, They've got the inquire now in a green which isn't within the font palette. There's a lot going on. Then we look at the nav which falls over two lines.
09:51Again, I'm very nitpicky when it comes to design. Ideally, you want to try and keep all your nav items on one line. If things are gonna start bleeding over, then you need to think about, okay, how do I structure the nav?
10:03Can I make a mega menu? Can I make a drop down? What can I do to clean it up?
10:08So I do like a secondary nav that sits above the nav. If you have, let's say, uh, your opening hours, your email, your phone number in there for people to get in touch ASAP, I think that's great. But if it's just the icons, it's probably not working as hard as it can.
10:24So a restructure here definitely needed. Video, I think it can probably drop lower down the page which we did. And then I think the widgets are a bit overwhelming with that video.
10:34I would also, uh, love to clean up the font and hierarchy. For instance, we've got caps here, we've got caps here, but we don't have caps here. But there's too many weights for me here.
10:45We go down, there's a lot of text, there's a lot of info for someone to pass through here. And again, we've got this sort of layout which it can work, but don't think this is the best way to display a ton of info. A bit further down here, again, this is more so design as opposed to the conversion rate optimization.
11:04But if we look at this, we don't have a gap at the top of this section what we do here. So the actual alignment is off in parts. We go down a little bit more and you can see we've got the icons here, but they're not auto playing.
11:18They're huge logos, but they're not prominent. They they should realistically be higher up.
11:24And then the foot is okay. Like, there's not much that we change here. Although this to me does stand out.
11:31It shouldn't really be larger than the the contact header. So with that in mind, here's what we did to optimize for London AV. You can see we've cleaned up the nav items here.
11:43We've got a really strong CTA because they were missing a contact us CTA top right. So we've added that in here. Now, obviously, I've just said on, uh, prover, I don't really like contact us.
11:54But of course, if a client wants it, then we will put it in. What we have done however is bottom right down here, we've got inquire now and we've got a call to action for their number as well. And then we've got a much nicer hero font.
12:06The pairings between the hero, the sort of eyebrow here, and the body copy are much more cohesive.
12:13And when you land on this, it's a lot calmer. You get a real sense of their service. You can see all these really, really cool LED screens here.
12:20We've got a nice custom asset here. We we've done a lot of custom assets for London AV to really elevate the site. If you were a business that's working with really high level companies, then bespoke assets are just gonna push the site up that bit more.
12:36So we implemented all of this. We've moved the logos right up because that again, it's social proof. It gives the halo effect for the site.
12:45So these are the partners. This is what we offer. You can see there's a lot less info immediately visible.
12:52But when you start to click, then you can explore more here. And we're linking people out to sales pages that they want people to land on. We go down a bit further and then we can scroll through this carousel.
13:04We can drag. We can click. It just gives the user options.
13:08We've also done these bespoke icons just to bring everything in to that brand, making it really cohesive. Then we go down a bit further.
13:15You can see we've got these ticking up stats. It's more social proof. The more targeted you can get with statistics, so, you know, x amount of uplift, x amount of years experience, x amount of venues partnered with, the better.
13:31The more you can get someone to trust you through case studies, testimonial, social proof, big important numbers that move the needle in someone's business, the better. Then we go down a really strong form at the bottom.
13:44I've said it before, but when someone gets to the bottom of a page, you want them to do something. So whether it's a form, whether it's following you, signing up for a newsletter, going to another page, you want to make it really clear what to do next. So if someone's made it all the way down here, you can give us a call or you can submit a form.
14:02What I like to do is give people an option. I don't want overwhelm them but some people prefer booking a call. Some people prefer just ringing.
14:12Some people will prefer submitting a form before doing anything else. So just giving someone an option without overwhelming them is gonna be really important. Then we go down a bit more and you can see all of their custom solutions in here which puts real imagery in each card.
14:31So we're not using stock imagery here. We're using real imagery from real campaigns. Then we go down a bit further and then you can see the video here.
14:39So if we click on the video, you can actually watch what was in the hero section in a nice pop up module here. So it's not taking over and it's not distracting users.
14:50It's just if someone's interested then they can view it. And then we go down here we've got even more social proof. So you can see big names, great ratings, great testimonials, and obviously the client can add as many of these as they want.
15:04So the users can scroll through there and then they are greeted with the footer which also acts as a call to action again. So two options, you can mail us or you can book a call. Here's our socials.
15:16Here's all of our solutions. Here's how you browse the site. Here's our policies.
15:20Here's our address. So so much clearer when you compare and contrast between both the new London AV site and the Prova Health site versus the old ones.
15:31There's so many small things that go into a redesign of a site that people probably don't even notice. And this is why a lot of my videos go on about the strategy.
15:41So before we even design anything, before we even wireframe anything out, We wanna talk to the client about what are your goals and what you want the site to do. Then we can strategize around it, then we can design, then we can develop.
15:56The gap between a site that's fine and a site that actually performs isn't about spending more money or necessarily using fancier tools, it's just about understanding the principles behind why certain sites make you feel something the second that you land on them.
16:13That's what the rest of this video is going to be about. You know that feeling when you land on a website and something just feels off? You can't quite name it but you just don't trust it.
16:23You're not sure quite where to look, nothing feels important so nothing really feels worth your time. That feeling has a name and it's called broken hierarchy. Most people think a confusing website is a content problem, know, too much text, too many pages, whatever, but nine times out of 10 it's actually just a hierarchy problem.
16:45The content might be perfectly fine, it's just that nothing is telling your eye what matters. When everything on the page is the same size, the same weight, the same color, your brain treats it as all equally important and thus equally unimportant.
17:00And that's worse than having bad content because at least bad content makes you feel something. And the fix is deceptively simple. You've got three levers, size, contrast, and spacing.
17:12Make the most important thing the biggest, make it stand out from its surroundings, and just give it room. That's how you tell a visitor's eye exactly where to go without them ever thinking about it. The best websites they feel effortless to read because someone made that very deliberate decision about what gets seen first then second and then third.
17:33Okay. Now we've got Home Builder AI. So this is another one of our clients, and I think this is a really good case study on visual hierarchy and layout.
17:43So the first thing that you'll notice that your eye is hopefully immediately drawn to is the h one, the main headline. It's the largest text element, and therefore, it should immediately draw your eye to it.
17:57So if we look at it, it's really clear. AI for real estate agents, rewriting rules of home sales. And then here's the promise, build intelligent sales ecosystems that activate buyers and future proof your business.
18:09If someone wants to learn more, then they can download a free lead magnet which captures emails. Now we're speaking to people who are quite specialized within real estate so they will understand what this is.
18:22They may not understand exactly how they're gonna implement AI, but they know enough that they'll be interested in downloading the free lead magnet. Something that really helps here as well is having high contrast.
18:33So you don't want elements that blend into each other. You don't wanna sit dark or darkish text on a dark background and then vice versa for light.
18:43You can see we have really clear legible text, legible buttons, legible assets in here.
18:50There's nothing that blends into the background.
18:54So for instance here, even though this is yellow on a lighter background, it's a shade of yellow that still stands out, and it's a shade of yellow that still works on a dark background as well. So it's very multifunctional and allows us to keep cohesion between the color palette.
19:10And when we look at the spacing, you can see every element has just enough room to breathe without flowing sort of below the fold here. Everything in this hero section has a space and it has space around it.
19:25If we break it down, we have two clear columns and then we have four rows within the left column and obviously just the one on the right. And if we look at this from an f pattern or a zed pattern layout, on the zed pattern, would go, okay. This is HomeBuilder AI.
19:38We start on the left. We can see our call to action on the right. We can see our content back to the left so that I would go left to right, left to right.
19:47Now with a a zed pattern, it's often common practice to then put the call to action here, but we didn't use it in this instance. We adhered more to, uh, an f pattern.
19:58So an f pattern would be, uh, left to right, down, left to right, and then down into the next section here. If you skip back to the London audio example, you'll see a zed pattern in action.
20:10So you would see logo, call to action, main text, and then the call to action in the hero would be bottom right. So you can use both of these patterns to guide user behavior and prioritize where users actually look when they land on the site. And then if we scroll down a bit, you'll see we have a clear hierarchy.
20:27So we've got our h one up here, so our heading one. Then we go down, we've got a h two, and then we have each column here really clear. We've got iconography bespoke for each column, and then we've got, again, really clear headings for each.
20:41You can see we haven't broken the background up on this particular site because we wanted the user to flow down. So as we flow, you can see we've got really subtle animation that brings things in as you scroll. It's not crazy.
20:54It's just enough to keep the user scrolling. And then we've got these nice sort of bespoke assets to show Myers. We've got these smaller assets here that just give a lot of info all at once without overwhelming the visitor and guiding them to flow down and down and down until we get down to the bottom, which is where our main call to action is.
21:16So register for a master class of AI execution. This is our client's main offer. So if we go down here, we can get role, and then they can choose whether they want one on one AI mentoring or a VIP early registration down here.
21:31And if we go back up, you can see it's littered with social proof. So tons of testimonials. You can join the list.
21:37We've got strong calls to action all the way down. Begin the journey. Join the list.
21:42It's all essentially the same where we go down to our main conversion section. And just to contrast this here, we've got renew, which is a client of ours.
21:51We didn't design this one. But if you don't have hierarchy and if you don't have contrast and legibility, you are going to be perceived as less premium than you potentially are, and you're gonna lose conversions.
22:04So if we look at this, it's not particularly legible, the text on certain backgrounds, and then each heading has the same weight. And I've said this before, but if everything has the same weight, it's all screaming for attention at the same volume, then nothing gets attention.
22:20And so people end up being confused and then they bounce. So this is the difference between a site with strong hierarchy all the way down that guides flow versus something which lacks hierarchy, therefore lacks structure, therefore will not get you as many leads as you could be getting.
22:38Layout is the skeleton. If the bones are wrong, then no amount of decoration is gonna fix it. So nail the hierarchy and you've already solved half the problems that most websites have.
22:48I can take a website change absolutely nothing except the fonts and it will feel like a completely different business and I swear that's not an exaggeration. I've done it in client meetings just to prove a point.
23:01So the same layout, same colors, same images, swap the fonts and then the site goes from feeling like a local dentist's office to feeling like a tech startup worth millions or vice versa. That's the power of typography.
23:14It's exactly where most businesses will blow it. The biggest mistake isn't picking an ugly font. It's picking fonts that send the wrong signal.
23:24Every typeface will carry some form of emotional weight. A thin elegant serif say something very different from a chunky rounded sans serif and when the font doesn't match the brand's positioning, visitors feel the disconnect even if they can't really explain it.
23:42Two rules that I never break. First is three fonts maximum. One for the headings, one for the body, and then one for accents at a push.
23:52Usually, I'll just try to keep it to the two font pairing because every extra font, it just adds visual noise. Second, readability beats personality every single time.
24:03Your heading font is where you express character and then your body font almost needs to disappear. The moment someone notices how hard they're working to read your site, they'll just leave.
24:16We've got an example here from Astra and this is a client of ours like everything you're gonna be seeing in this video. But you can see the the finished product here.
24:27This is what we went for with the typography. Now if we go back to their initial site, I'll show you the difference. These guys, they acquire exceptional businesses.
24:35Great. But when you come on to this hero section in particular, are you experiencing the halo effect?
24:43When I look at this, I don't. I see, obviously, this document in the back and I see a lack of real hierarchy between headers.
24:52So even this, which should realistically be a body copy is the same font and the same weight, albeit not the same size as the header, uh, h one, h two.
25:04This looks like it's coming in at h four. But then realistically, you don't know where to look because the typography has the same weight here as it does here.
25:13In fact, I actually think this is bigger than the h one. So it kind of draws the eye down. And just the overall style of the typography here just does not work.
25:23The space between the letters so that the kerning is is too much. It looks amateurish. And then the font family itself, it's it's just not working.
25:32And then the jagged section break here, it's just not quite working. So as well as a redesign, central to that has to be a good font pairing.
25:40So typography is gonna be crucial when you come to redesign your business's site. So what I'm gonna do is flip back to our redesign, show you the hierarchy, show you the font, show you the canning, the letting, the weighting, all that good stuff, and you can feel for yourself why this has been so effective.
25:58Okay. So you can see immediately, we acquire exceptional businesses.
26:02That is front and center. The eye is immediately drawn to this because we're using a clearly sized h one. And then we go down to the body copy, and then we go over to the call to action here.
26:14So you can see all the way down, we've got different weight, different weight. Everything has the correct weight, so you can clearly see what's h two.
26:24You can clearly see what's an eyebrow, and then you can clearly see the hierarchy of everything underneath here. We're also using a highlight color just to hammer home important points.
26:35So we're not overusing it. People have a tendency to really lean into this and highlight, like, every single header.
26:42We're just using it sparingly in order to bring attention to where it's needed. And then you can see we've tidied up the body copy as well. It's far more professional.
26:51And what's funny is this isn't like a a very bespoke font pairing. It's actually the same font. So if I hover over the header, you can see it's Montreal and then the body copy is Montreal.
27:04The call to action is Montreal. So what we're doing is we're just using different sizes, different weights, different leading, different kerning to get that visual distinction between what's a header and what is body. The actual pairing is the same font but in this instance it works perfectly.
27:20So as we go down you can see literally everything is the same font. Now some brands they won't do this, some brands do.
27:26It's completely up to you. If you like a font and you can differentiate with sizing, weights, etcetera, then go ahead and use that font.
27:35Now let's jump back to the studio. Fonts are gonna be the voice of your website. And just like a person's voice, they create an impression before anyone processes a single word.
27:46So choose fonts that match who your brand actually is as opposed to who you wish it was. Color is making decisions for your visitors before they read a single word on your site and that's not actually a metaphor. The human brain processes color before it processes language.
28:04By the time someone reads your headline, they've already decided whether your site feels trustworthy or it feels exciting, calming, or cheap and you choose that for them whether you mean to or not.
28:18The biggest mistake isn't picking bad colors, it's picking colors that have no intention behind them.
28:24Someone decides let's say they like teal, so the whole website's teal, but teal communicates something very specific so does navy, so does burnt orange as does black with white accents. Each of those palettes tells a different story about the business behind it.
28:41And when the color story doesn't match the brand's actual positioning, visitors get a subconscious signal that something's off. So this is what works, three to five colors max.
28:52You've got one primary brand color, one or two neutrals for background and text, and then one accent color which is reserved specifically for the calls to action and then the little elements that you want people to notice. That accent color is actually doing more work than almost any other design decision on your site because it's literally pointing to where the money gets made.
29:14So we're gonna start here with focus. Now this is a client who they had this sort of style of website and they felt it was really really flat.
29:26And one of the main reasons for it being so flat was that the color scheme itself was in their words boring.
29:35Now a sort of monochromatic black, white, and grey website can look cool for the right type of client, but that client has their own personality that they want to inject or their own sort of messaging that they want to convey to their customers, then this isn't gonna do the trick.
29:53Now I always make a point in my videos of talking about restraint and how a restrained color palette create a premium feel.
30:02Now in this case, I mean, even though it it doesn't look very good, it kind of feels premium with the brand and it does have a lot of restraint around colors.
30:12It's very, very similar. However, if you have a personality and you wanna get through that human made, that human centric feeling to a customer, then you kind of have to go in the opposite direction.
30:25So what we did was we injected a lot more color and a lot more playfulness into the site.
30:32It was a complete rebrand and I'll show you what that looks like in practice and how just changing the color and changing that branding ever so slightly gives a complete different feel to a website. Okay. So as you can see, there's a lot less restraint here.
30:48Now the client wanted bold. The client also wanted, uh, to target SEO keywords, hence why there's a little bit more, uh, text in here than I would usually like.
30:58But as we go down, you can see we have some sort of micro interactions. We've got real people in a real office. This one's probably a little bit too stocky for my liking.
31:09We will get that changed eventually. But you can see this deep green, this lime green, we've got bespoke illustrations. Uh, the client really loved this style, so we actually did bespoke illustrations in house in that style for them in their color palette.
31:25But if we look, there's so much more color. Obviously, we've got the white because we need, uh, the color to contrast off something. But then we've got blue, we've got neon, we've got, uh, orange, we've this deep green, and we're cycling through these as we go down.
31:39So even though there's a lot more color, there's a level of restraint where none of the colors are competing with each other.
31:48They're only sort of supporting the information that's there. So for instance, here, none of these colors are kind of overlapping each other.
31:57They're all just supporting the stats that live here. So number of fortune 500 companies we worked with, the amount of countries we've worked in, and number of dogs on staff. It's all serving a purpose.
32:08It's integrated with the new brand. It's integrated with some imagery in here as well. And then this sort of neon, I guess, neon green, neon yellow, it's used now as an accent for call to action buttons.
32:20So you can see it stands out immediately when someone comes on to here. You can trust that with what we had here and you can see even though you would argue this looks a bit more premium, bit more restrained, there's no obvious sort of guidance as to where to go next.
32:36I don't even know if there is a button to click other than when you get right down here. And there's no accent color.
32:44It's literally just white. So suddenly, we've gone from somewhere that looks a little bit more restrained to something that's a bit more in your face, but you know exactly what to do, how to do it.
32:56This is exactly what they do. Here's a bit more info. There you go.
33:00You click a call to action. Book a twenty minute discovery call. It's really simple.
33:05You can do everything there. The colors are adding a little bit of personality where before it was lacking.
33:12You can see here we've used these fun colors to mix and match through the testimonials. We bring it down here even more. You can see how we bring all the different colors in for this list section here.
33:26So really just adding a bit of playfulness to the site for a client who wanted to be playful. Now what I'm gonna do is contrast this with another client that we have who wanted a ton more color but in a more restrained palette. And it was a very specific request that has been one of my favorite sites to do.
33:42So I'll show you that one now. Alright. So this one is multifamily.
33:47Now these guys had sort of your standard property real estate portfolio sort of color palette, grays, blacks, and then a blue accent.
33:56Now blue accent is absolutely fine. We've done this for for clients in the past. But multifamily came to us, and there's a artist, I think called Mondrian and it was, hey, we want a Mondrian inspired, uh, website palette.
34:12So if you've ever seen like the Mondrian aesthetic, I'll bring it up on screen now so you can see it, You'll know what I mean and what the client meant when they came to us with the brief. So we go down here, really, really standard.
34:24Obviously, none of the images are pulling in because I'm using at the way back machine. Oh, there we go. One is pulling in, but very, very plain, doesn't really stand out against anyone else in the space.
34:37Now what we're gonna do is contrast it with what we gave them. So you can see here, we've got, uh, the logo up top in that Mondrian aesthetic, and then we've used color sparingly, but we have lent into this being a colorful site with restraint.
34:54So immediately, can see two calls to action on the page. You've got your call to action right up in the top and then bottom right if we're following that sort of zed pattern.
35:05So we would go logo button and then we get our information here and then we get our call to action there. So you can see how all of these principles apply to making a great site.
35:16So you've got this beautiful shot of Vancouver here that guides the user to come down. And you can see because we've used a bit of restraint here, and this is, you know, in complete opposition to the previous example, you can see black and white images that really take center stage, and then the calls to action and the highlights are gonna be in color.
35:37It's a really restrained palette. It's black and white for the most part, and then it's yellow, red, and blue. And you can see how that works beautifully together here.
35:48So the colors are calling attention to different parts. You've got the red here, which is calling attention to the navigation and yellow here, comes up on hover, which is calling attention to actually click the property.
35:59As we go down, you can see how we're not using too much color at all. We're just keeping it really, really restrained, subtle use of borders in a, you know, very light gray here.
36:11And then we get down to one of my favorite parts of the site. And this is something that gives you so much information in such a small part of the screen. So lots and lots of big stats here.
36:22750,000,000, uh, Canadian dollars in sales experience, fifteen years in real estate, all that good stuff.
36:28Now how do we make that not look boring? Well, we take this Mondrian aesthetic and we apply it into a grid system. So we've got the blue, we've got the yellow, we've got the red, we've got a beautiful image in the background, and then we've got a bit of white here just to break things up and make sure none of the colors are kind of shouting over each other.
36:49There's enough space, enough room to breathe for everything. As we go down, you can see, again, really sparing use the cause to action coming in in that yellow here, even down to the small sort of details with the arrows telling people, hey.
37:04You wanna go and look at the featured opportunities? Small yellow arrow guiding them to there. And if we go through, you'll see that this applies the sixty thirty ten rule, which is essentially 60% of the page should be your sort of background neutral color.
37:2030% should be your secondary color, and then 10% should be accent color. So if we go through here, this is pretty much almost textbook. In that yellow is our sort of predominant secondary color, and then our accent colors are gonna be the red and the blue, which I use really sparingly, but just bring the site to life enough that it's not repetitive.
37:40It just has enough visual interest throughout the page that keeps the user engaged and shows them where to go in a really subtle manner. One thing just to note when choosing your colors as well is contrast. So you need enough contrast between colors for accessibility, readability.
37:57Your site shouldn't have, let's say, you know, this white background here with a a really, really light gray text or it shouldn't have, let's say, this yellow button with a green green text within it.
38:13There should be enough legibility between those or enough contrast between your colors that screen readers can pick it up and it can tell people who are using screen readers for instance. Okay.
38:23This is what this content is. And, obviously, your color palette is part of a wider accessibility push that should be implemented on your site. Both contrast ratios, um, color selection is very, very important and is one of the cornerstones of accessibility on your site.
38:38So make sure when you're picking colors that they pair well and they contrast well. So using the sixty thirty ten rule is actually gonna be a really good way to ensure that you don't trip up and you don't make your site inaccessible inadvertently. Your color palette is making a promise about your brand before anyone scrolls.
38:55If the palette feels random, then the brand will feel random as well. So nail three or five intentional colors and stay disciplined with them across every single page. There's a very specific moment where a website crosses the line from, hey, this looks fine to, oh, this looks expensive, and almost every time it's the visuals that will push it across the line.
39:17Not the layout, not the fonts, the actual images and the graphics on the page. Think about two sites selling the exact same service, same price, same quality, same offer.
39:28One has real photography, custom illustrations, branded graphics that clearly belong to the business and no one else.
39:36Then on the other hand, you've got the other business and they have the same free stock images you've seen on 15 other websites this week. Which one do you trust more? Which one feels like they've invested in what they do?
39:49That visual gap is worth thousands if not millions of dollars in perceived value and it's the one thing I see businesses consistently under invest in.
39:59Custom assets don't have to mean hiring an expensive illustrator for every single icon. They just mean being intentional.
40:08Using photography that actually shows your product, your team, your space, creating graphics that match your brand's specific color palette and visual language, building a visual identity that someone couldn't just download and slap on a competitor site.
40:23So we're gonna start here with Scents now. These guys, they absolutely pivoted the company, but you can see they're not really big on imagery and the imagery that they do have is completely stock.
40:37So what we needed to do when they pivoted and when we redesigned the site was develop something around stock imagery. But these guys were working with Amazon and so we were obviously gonna use stock Amazon, uh, photography.
40:50So how do we design around this? How do we create custom assets that bring the site to life without just looking sort of plonked on the page? So the first thing is we headed into Figma and we took two stock images of Amazon vans.
41:05This is like a, you know, a new sort of mock up and this is actual actual vans being used in the field. Now these guys are selling like a Netradine AI coaching agent for Amazon drivers.
41:18You can see here that we're giving a message within an image. So you know the saying picture speaks a thousand words or whatever it is.
41:26This is what we're trying to do here. So we're showing off, okay, these are Amazon vans and kind of how the agent would work in a really quick, easily digestible way. Then as we go down the site, you'll see that we're doing the same thing.
41:41So we're actually showing with an image the progress of how this works.
41:47So, okay, a netradine infringement comes through. Infraction identified in real time. Agent comes on.
41:53Agent calls the driver, speaks to the driver. Coaching session is recorded, it coaches them through it. At a glance, you understand that this process goes this way.
42:02This is what happens here. And then the text almost becomes secondary. It's just a quick scan.
42:08As I've said in a lot of videos, people will scan pages. Almost everyone scans. They look for headers.
42:14They look for things that stand out on the page as they go down. And so this is really clear. Step one.
42:20Step two. Okay. This is how this goes through.
42:22Step three. And then it's really obvious you can see. Okay.
42:26At a glance, these are all the integrations that we have. Brilliant. Now I know this is for the AI dispatch.
42:33If I wanna go automated incentive, we have the same thing. So we can toggle between both of these depending on who's looking at the site.
42:40Here we have a basic mock up. Again, here we don't wanna give away any customer data, so we've sort of anonymized this.
42:47But we go down. Really simple effective ways of using bespoke assets to guide the user down and tell a story without using so many words.
42:57If you look at how many words we're using to support the assets, there's not many at all. If we go down here again, barely any words needed because it's a quick scan.
43:08You see the visual, and then you can go and do the next thing, which in this case is gonna be booking a call with the team. Now an example of a client who didn't use stock imagery but could really benefit from, like, working bespoke asset into imagery is the Dane Kelly Holmes Trust.
43:25So these guys have really nice images of happy people of the trust in action doing its thing. But when I look at this, I'm thinking this could be better. We could be showing this in a far bigger, better way.
43:40So we took the brand colors, we took the brand assets, the brand imagery, and then we added it to a new site with that bespoke treatment. And this was the outcome.
43:51So you can see here we've started to develop these bespoke assets throughout the site which is this sort of hand sketched element in here. Now I can't take full credit for this.
44:01We were actually worked with a amazing, uh, design studio who come up with, uh, the bespoke assets. This was, I think, maybe four or five years ago, but they came to us with the assets, and then we built everything out, uh, within Squarespace in this instance.
44:16But you can see the difference already between what we have before and what we have here.
44:22So we're actually still showing real people off but in this style. So like if we zoom in and just come off here, you can see that we've got this sort of really subtle pattern gradient over each which brings a brand identity to the site that wasn't really there before.
44:37It was just colors images. Now we've got, you know, the moving banners. We've got these elements around the titles.
44:45We've got the hand drawn elements that really speak to the type of people who are coming onto this site. Now in terms of like a a practical next step, if you wanna have bespoke assets on your site, you can now sort of just generate your ideas using Claude, using Figma make, using, uh, Chachi Pit, Any AI tool just to get some proof of concept, you can spin up some brand assets.
45:09So if you go to it and you're like, hey, I want, um, hand drawn. Let's just use this as an example.
45:17Hand drawn aesthetic for arrows and crosses and lines, and I want you to apply it to this image. Or like on the other example, on sense, you could say, hey. These are all the steps of my AI agent.
45:32I want you to design a step by step restrained guide that shows more than tells in a style, let's say, like, zoom blue, for instance, with a light blue background and some nice iconography.
45:47It's probably not gonna get you all the way there. But if you can then bring that to a graphic design specialist and say, hey. I want you to bring this to life.
45:56I still don't think AI is anywhere near being able to create graphics of of this depth and of this quality that are able to show more than tell.
46:06But if you have ideas about concepts that you wanna bring out and put on your site, then the next best thing just to start completely for free is just use an AI tool. If you have the budget, go ahead and use a graphic designer in almost all instances.
46:21It's gonna get you something like this, which is always gonna be better. All that to say, wherever you can get custom graphics into your site, you should definitely, definitely do so.
46:30It makes a night and day difference between a sort of good site and a world class site. Bespoke assets are the difference between a site that feels like it was built from a template and a site that actually feels like it belongs to one specific business.
46:45That specificity is what makes someone stop scrolling and actually start reading. Ever land on a website and just immediately feel calm like you trust it before you've even read anything?
46:55Then you land on another site and you're like oh this this feels sketchy even though the content is basically the same. That difference almost always comes down to one thing, how much room the design gives your brain to actually think.
47:11Cramming more onto a page doesn't communicate more value, It communicates desperation. When every single pixel is filled, when you've got sections bleeding into each other, when there's no breathing room between a headline and the paragraph below it, your brain has to work overtime just to figure out what it's looking at and that effort has a cost.
47:33Visitors don't think oh this site has a lot of content, they just think this feels cheap or I don't trust this and then they bounce. The most premium sites in the world think sites like Apple, like Stripe, the brands everyone points to are almost aggressively minimal in how much space that they use.
47:52They give every element room to just exist. Every section has one job because each thing gets its own space, each thing feels important when you reach it.
48:05That's design doing its job properly. I can't stress this enough, white space is not empty space.
48:12Okay. So with white space, it doesn't necessarily have to just be literally white, but I'm gonna show you some examples here where we've got a really poor use of white space and then white space used effectively whether it's white or whether it's actually a color.
48:30So you can see here we've got the Yale School of Art. Now I don't know whether this is a serious website maybe it's just you know like a quirky joke But you can see here like everything is grouped up really close and actually it's it's over on one side so technically there is white space on on the right but the elements themselves have barely got any breathing room whatsoever and it's like that all the way down everything's cluttered there's things sort of artifacts I guess that are just randomly placed And, it's legible and you can read it, but it's a really poor user experience.
49:13Now you contrast that with what I'll show you now, which is a client of ours called Farley House, and you'll see the difference of when you give elements room to breathe, the difference in perception that this causes. So this is Farley House.
49:28You can see here immediately everything has its place.
49:32Nothing is smooshed together. We have the hero section which displays the beautiful logo. We're on the events page here so you can see on the events.
49:41Everything has spacing around it. Everything is also spaced correctly so there's no visual misalignment.
49:50We go down and you can see whether it be weddings, private parties, corporate events, photo or film shoots, each has a very specific amount of space around it.
50:01And as you can see, there is a lot of space, but there is a solid hierarchy to the site whether that's through a heading or whether that's through the use of color to designate.
50:14Okay. These are things that we do that you can click on. As we go down here, it's a bit of an asymmetric layout, but you can see how everything has room around it.
50:26So up here, the eye is immediately drawn down to classic, contemporary, and bold.
50:34We want to discover more. We can hover over this. Everything is spaced correctly.
50:38There's a subtle sort of difference in padding between the header and the body text versus the body text and the call to Actium because we're trying to group those. Then we go over here, and we can see all this use of space that then guides the user down to view this content in a cluster with a small sort of brand artifact overlaid, not shouting too loudly.
51:04It's got a lower level of opacity so that you can see the images through it. But then as we go down, again, there's enough breathing room.
51:12We're immediately drawn to weddings, then our eyes drawn over to this wedding photography. And then it goes all the way down the page. Whilst it may look asymmetric the way that we've placed the images, obviously, it is.
51:25There is clear structure and clear space and usage of white space between every element. So you can see that we go down from here to here, straight into weddings, then back across, then straight down to events, then back across, straight back down into our people, and then across here.
51:43Now we could try and cram everything together. So we could have moved all the images up to here to sit right next to the text, but we wanted to make use of the site margin.
51:55We wanted to make use of the space between sections to make people feel like they're in a luxury experience because what Farley House sell is a luxury experience. They are in the experience business.
52:07They want people to feel special on the special day, whatever it may be. And so we need to communicate this. You know, they have light and airy grounds, and so those we want the actual site itself to feel light and airy.
52:20Give that person the experience as they go down, and then as they fall into, get in touch, arrange a time, come and speak to us, come and book our venue. So that's white space in action. You can see versus the cluttered layout of the Yale School of Art versus Farley House.
52:37Now we have so many examples of this on our site, but I realized the video was gonna get really, really long if I keep pulling these up. So we'll head on to the next point, and I'll bring up some more examples there. Space is a signal.
52:49Generous space will signal confidence. Cramped space signals that you're not quite sure what matters. So give every element on your site room to breathe and the whole thing instantly feels more premium.
53:02Here's what I've learned about the top of a website. The thing that makes someone stay isn't what most people think. It's not a beautiful image, it's not a clever tagline, It's just clarity.
53:13In the first few seconds, a visitor is just asking one question. Is this for me? If your hero section answers that question instantly, then they'll scroll.
53:23If it doesn't, then they're gonna bounce. And the number of sites I see that fail this test is just staggering. Vague headlines like innovative solutions for modern businesses, pretty hero images that have nothing to do with what the company actually does, no call to action anywhere above the fold.
53:41The visitor has to work to figure out what the business even does, and nobody's gonna do the work for you. Your hero section needs to nail three things. A headline that tells a stranger exactly what you do and why it matters to them.
53:56Not cute, not clever, just clear. A call to action that tells them what to do next, and a visual that reinforces the message instead of distracting from it.
54:07Those three elements working in tandem are worth more than every other section on the page combined. Now we're gonna take a look at markups. So to give you a bit of context around what these guys do is they do basically AI contract reviews, and the USP is that it's just via email.
54:26There's no actual platform. So it's it's a really, really cool idea. And I found this to be an excellent example of how a good hero section should work.
54:37So this is, uh, markups v one. Now you look here, and immediately, you just lose trust.
54:45Now the logo doesn't look fantastic. We have stayed pretty true to this in the reworked version, but we've added some subtle changes. Then contact us, it's not the strongest of calls to action, and it's also not in a button.
54:59Schedule the call. Okay. Great.
55:01You know, you have your call to action in there, but this hero section needs to be working so much harder.
55:09We have h one custom contract revisions in your inbox in fifteen minutes. Okay. That's cool, but where's the context?
55:16Precise secure rapid. That, if anything, should be an eyebrow up here. You need enough info to make a decision to book a call.
55:24So if you're building your site for your business and you're just expecting someone to land and book a call, that's not how this works. Someone needs to be convinced in this section here.
55:36So this hero section needs to be doing the most amount of sales possible for your business. If you're not explaining what the product really does beyond this, then you're not gonna be getting as many calls as you should.
55:50Then we take a look at the background. I don't know whether it was a style choice or what, but this is taking so much of the focus away from what this is.
55:59Right now, when I'm looking at this hero section, to me, it has no trust. It has no particular brand, and thus, I would never ever book a call.
56:08This is how visitors on Markup's old website were obviously thinking. So we came in, we redesigned it, and I'll show you the difference now. Okay.
56:16So I touched on the the logo. You can see we reworked this ever so slightly. Then what we did is we kind of matched the logo font to the header font.
56:25It's a lot stronger. It's a really nice trustworthy serif font.
56:30You can also see we've added the eyebrow, all work, no platform. And it's so much stronger as a h one. Message agent Marco to negotiate any contract.
56:40Okay. That's really clear. That's telling the user exactly what to expect.
56:45No new platform required. That is their USP. That's in there, and that is in a different color to draw attention to it.
56:53Now what was I saying before? Okay. We need to be giving people more context.
56:57Agent Marco is trained by markups, AI, legal engineers on your historical contracts to apply hundreds of micro instructions for each negotiation. Okay.
57:08I know what it is or I know what to do. I know what the USP is, and I know exactly what this company does. Now can I book a demo?
57:17It's not schedule a call. That's quite vague. It's book a demo.
57:21Now schedule a call is fine if it's obvious what your business does and what the context of the call is. So for instance, on the By Crawford site, we have schedule a call because when you land on an agency site, well, you obviously know what a call entails.
57:36If you are on a SaaS product, what does book a call mean? Are you giving feedback?
57:41Are you trying to be sold? Is it a demo? It's not clear.
57:45This is super clear. So you can see we've got book a demo here, book a demo here, and markups also have a mascot.
57:53So we've added that in just a bit of fun, and you can see it just kinda moving about here. That's a custom illustration and just brings the section to life a little bit more. So even if you didn't scroll down here, even if you didn't see the testimonials, even if you didn't see, you know, the callout stats or the really cool icons or any of this, you would still be able to make a decision on the hero section.
58:19And that's what really good hero sections do. They call out what the business is, who it's for, you know, ideally what its USP is, gives a bit more context, and then gives a call to action, a real strong call to action.
58:32Easiest way to test this, if you just land on a hero section like this, take a mental note of where your eye is is cast first. So when I land on this, I go, okay. This is right in the center.
58:44It's really obvious. Then I probably look at the eyebrow, and maybe I notice the mascot.
58:51But then it's really clear the big sort of callouts are gonna be this and this. And then right under, trusted by the world's most innovative companies, it's just a little sliver of social proof before, obviously, you get to the the logos of the clients that they work with.
59:07And this is something I always come back to is the halo effect. So if we go back to the old site for a second, you'll see that this does not create a good halo effect.
59:18If you land on this, everything else down here is gonna be tinged with I don't know what this company does.
59:25It's very bare bones. It's very basic. I don't particularly trust them.
59:29I don't wanna schedule a call. Now back on here, it's a positive halo effect. You are able to see, okay.
59:35This looks like a very professional business. I understand what they do. And then if you wanna scroll further down, you see all the people that they work with.
59:43You see all the social proof, and then you can learn more and more about the business. As you go down. You can meet the founders, the team.
59:50You can see the security. You can learn a whole lot more about them as you go down. But without this hero section, none of that underneath matters.
59:59It's all All about nailing that first impression. So don't save your best till last.
1:00:05Put your full value proposition at the top. Shout it loudly. Shout it proudly, and make sure that this hero section is doing all the heavy lifting for you.
1:00:14If you take nothing else from this video, just nail that hero section and you can't go far wrong. The hero section isn't a place to be creative. It's a place to be useful.
1:00:25Answer the visitors question before they have to ask it and you've already beaten 90% of websites. Nobody believes you when you say, oh, I'm great. That's not cynicism, it's just how the brain works.
1:00:37Humans are wired to look for evidence from the group before they make a decision. It's the same instinct that makes you go and check reviews before you go to a new restaurant even if the menu looks perfect.
1:00:48Your website visitors are doing the exact same thing and yet most businesses treat social proof like a checkbox. Throw a couple of quotes on the page, stick some logos in a row, then move on. That's barely scratching the surface.
1:01:01The formats that actually shift behavior are the ones that tell a complete story. Before and after transformations, specific numbers attached to specific outcomes, video where the real person talks about the change that they experienced.
1:01:15These formats work because they let the visitor see themselves in someone else's result. Placement matters just as much as format. Proof that sits at the bottom of the page below the fold after someone's already decided to leave is proof that never gets seen.
1:01:29The most effective websites will weave this in throughout. Logo bars near the top, a transformation story right after you explain the offer, specific results next to the call to action.
1:01:42Every time someone hesitates, the proof is right there answering that hesitation. So to show you a quick example, here is Liverpool podcast studios.
1:01:52Now this is where I do all of my recordings for for YouTube. They asked us to to redesign their site. So I'm on the way back machine now, and you can see, obviously, it's not loading images or the videos.
1:02:05But if we look at its base components, this was, uh, let's say, a video with Liverpool podcast studios over the top. Um, this would have images in the background, has a form.
1:02:16Great. But there's no social proof at all. So when someone lands on this, their trust isn't built immediately.
1:02:24They'll probably see, you know, some nice work in the background, but other than that, there's not much going on. And so if we think about the halo effect, when someone doesn't see any social proof anywhere near the top or anywhere on the page, then everything else is tinged with that negative ish first impression.
1:02:43And so if we compare that with what we done with the redesign, you'll see the difference. So we basically done a full CRO audit of the site.
1:02:52We did a rebrand and then obviously a redesign of the page itself. Now you can see immediately right up top, we've got a lovely video here, but then we've got social proof baked in from the off. And what's great about this is this is tied to an outcome.
1:03:07So the best testimonials are the ones that show an outcome. So a customer in the visitors position who wants to use this service or this product who has achieved outcome that they want and then has tied it to a specific outcome.
1:03:21So Gabby here has said, since moving to the studio, we've been nominated for a British podcast award, which is a solid, well, phenomenal outcome, and that's front and center on the hero section.
1:03:35Now we go down. We've got a different type of social proof, is client logos. So we've got the likes of Coca Cola.
1:03:42We've got Netflix. Huge, huge names that offer another type of social proof.
1:03:48So this is validation that this company can work at this level. So when a decision maker with a budget comes onto a site, they need to make sure that you are sort of worthy of their budget level.
1:04:00Now if we look at the likes of, let's say, Netflix, let's say Coca Cola, someone who wants top class video production will look at this and go, okay.
1:04:10In my mind, that's vetted these, uh, these guys on the quality of their production or the the level that they work at. They can see the work.
1:04:18They can see it's tied to an outcome, and then they can make its decision pretty much there and then. The book now call to action is gonna be always visible. So as soon as someone's convinced, they can just go straight through to the booking flow.
1:04:30We go down here. Now social proof is always best when it's someone else saying that about your business, but it doesn't mean that you can't put stats in from your perspective. So sixteen thousand hours recorded annually, ninety eight percent client satisfaction rate.
1:04:47These are phenomenal headline figures, and so they obviously have been highlighted and draw the eye within that section. Again, then that's backed up with the call to action.
1:04:57If you can get social proof in and around a call to action, then you're gonna see an uplift in conversions. Then we've got a fully dedicated review section which says, okay, you know, five stars, thousand reviews, lots and lots of social proof, and it's verifiable via Google.
1:05:15So someone who's not quite convinced can just scroll this wall of social proof if they want, and then there's more as you go down. So as someone is, you know, trying to pick between what studio and setup they want, they've got another testimonial here. A great selection of sets to choose from and loads of flexibility with regards to set theme.
1:05:34So we're backing off the section with someone else's words, offers more social proof. Then again, each section is backed up with a testimonial and with social proof and then a call to action baked in there as well.
1:05:47Now we've got another type of social proof, which is the product or the service in action. So you can scroll through all these different types of content that these guys do. So podcasts, seminars, social media content, and then you can actually see it in action.
1:06:02So this is essentially UGC, user generated content.
1:06:06They're showing examples, and these act as sort of mini case studies as well. And then, again, this is kind of more UGC showing off how people use the service. And I think we have one more as we get down to pricing.
1:06:20So pricing is backed by more social proof. You can see we've got a testimonial right as someone's here making a decision on price.
1:06:29So anywhere that you can get some form of social proof in to support a section, you should. And then what's really important is if you can have a specific outcome with specific numbers within your social proof, it's gonna do wonders for your conversion rate.
1:06:46So let's imagine right up at the top, Gabby was replaced with someone else who said, we experienced a 40% uplift in revenue within two weeks after working at the podcast studio.
1:06:59That is gonna be an even more effective testimonial than this. Not to say this isn't great, it is. But if you can get specific numerical outcomes listed in a testimonial, it's gonna do so much better than someone that just says, hey.
1:07:15Great service. So this is something to bear in mind when you're asking your customers for reviews.
1:07:22You can sort of guide them to give better testimonials, EG, what was the transformation you experienced with our service or our product?
1:07:30Were there any specific outcomes that you had? If so, list them, add that in.
1:07:36So when it comes to getting testimonials, you can be proactive in guiding people towards giving better ones. That's not to say incentivize five stars with, like, you give us five stars, we give you coffee or whatever.
1:07:47It's just if someone's gonna give you that good review, you can guide them and you can sort of templatize them into giving something more effective. And one last thing I'll leave this section on is the higher that you can get your social proof, the better. So you can see within sort of half a scroll, we've got a great testimonial tied to an outcome, and we've got our logos here.
1:08:09All of this builds immediate trust because if we look here, I say this so many times, but no one or very little people are gonna be scrolling past your hero section. So it needs to do all the selling all at once.
1:08:25It needs to say who we are, what we do, bit more context, scannable bullets for people, ideally some social proof, and then a call to action. If you land on this, you see the product or the service in action.
1:08:37You know exactly what they do. You know exactly who it's for. You can see that it's worked for other people, and then you can book now.
1:08:44So we have two calls to action with slightly different verbiage, but they take the user to the same booking flow. All that to say, social proof is incredibly important on your site. So make sure that you're trying to collect testimonials, build out case studies, and as you build a sort of portfolio of of logos, make sure that you're using them as high up as you can.
1:09:05Think of social proof as the evidence layer of your website. Every claim that you make about your business should have proof within scrolling distance. When someone can see the result before they have to commit, then the decision gets dramatically easier.
1:09:20Just a quick one, if you're finding this useful do me a favor and hit the like button. It genuinely helps this video reach more people. Alright, let's keep going.
1:09:29Most websites are structured like brochures. Here's who I am, here's what I do, here's some proof, now contact me. And that structure, it makes logical sense if you think of a website as a document that someone's gonna read from the top straight through to the bottom.
1:09:44But nobody uses a website that way. People scan, they jump, they scroll past three sections and then go back up. They might spend forty seconds on your site or they might spend four minutes and your conversion architecture needs to work the same for all of them.
1:10:00What I mean by that is every major section on your page should be doing a job. It's either addressing a specific fear, answering a specific objection, or building enough confidence that taking the next step just feels obvious.
1:10:14When you structure a page like that, the calls to action, they're not interruptions, they're essentially just natural conclusions. Someone reads about the result that you deliver, they see the proof, and then the button's just right there when they're ready.
1:10:28The design of the CTA itself matters more than you realize. Your primary action button should be the single most visually prominent element on the page.
1:10:38You remember that accent color that we talked about earlier? This is where it earns its keep. Size, color, contrast, placement.
1:10:46If someone has to search for how to take the next step, then you've already failed. Calls to action is something that a lot of people will sometimes overthink and sometimes pay no attention to.
1:10:59It's a really funny scale. And I wanted to show you something that sits sort of right in the middle because it's quite a complex case. Now this is Flowcorp, and this is a a client that we're currently redesigning.
1:11:12So what I'll do is I'll show you the the current site, and I'll explain a little bit about what they do. So this is their current site here.
1:11:20You can see Flowcorp, you know, you can see their products and their services and their industries, etcetera, and then request a quote. In the hero section, it's just text.
1:11:30Now it's hard to believe that these guys are in ecommerce because there is no sort of optimization here for conversion.
1:11:42You can request a quote, and it will take you to a form page, which is great, but there's not much else that you can do on this home page. If I'm looking at this as a consumer, I'm not visually engaged with, like, an image or any call to action here, and I'm almost kind of missing this because my eye is actually drawn to this h one.
1:12:06But it feels like something I need to read as opposed to something I need to take action on. And it's not until I get here that I see a sort of small example of their products, and then I see the global brands down here, which then makes me go, oh, wow.
1:12:20These guys are big. They are a big company. They work with BP, Nike, Pepsi, Shell, Walmart, Chevron, all of these people.
1:12:28But when I look at this, it could just be a blog. Now what's important to note here is that Flowcorp have sort of three ways that they wanna acquire clients. They wanted ecommerce so people to be able to check out on the site, but then they also, because of the scale that they operate, need people to be able to get in touch and request a quote so people can ring them and request a quote.
1:12:52So what we tried to do here was bring together all of these different calls to action in a way that wasn't overwhelming for the visitor.
1:13:00So you'll see that we've done this. Even though you can see four calls to action, they are quite visually distinct.
1:13:08So open the header, we're gonna have this on all of our pages. Call us and request a quote. If people wanna see the products, they can click in, and they'll be able to see list of products.
1:13:19We're currently building this out right now, but you can click in. I can scroll through all my images here, and I can add to cart or request a quote. This is something that can be difficult to achieve for a lot of businesses because you'll either just have straight up ecommerce, so add to cart, or you'll have a request a quote.
1:13:36We've had to create a visual distinction between these. And the way that we do this, you can see it here. You can see it here.
1:13:42If we go back to the home page, you'll be able to see it here is we just use different colors. So you could do, uh, one of the buttons as an outline, could put an icon in them. Whatever it is, just make the buttons visually distinct.
1:13:56Ideally, you keep them the same width and same height. But if both of these, for instance, were red, it would confuse the visitor. What we always want is if you're gonna have two calls to action, especially in the hero section, you want the one on the left to be the primary, and thus that will be sort of the brightest accent.
1:14:13And the secondary should be a secondary color, something that falls secondary in terms of contrast to the primary button. So when you come on here, you see, okay, your drawn logo, h one.
1:14:27This is what they do. This is a bit more context. And then the eyes immediately drawn down to shop product, which is where we want most of the traffic to go.
1:14:35So we click on this and then, okay, we can start to shop around. Someone who comes on and they are a bulk buyer will know, okay, I need to request a quote. So they will simply just click get a quote.
1:14:45It's there. It's ready for them to use immediately. But for the majority of people, we're trying to direct them to one call to action, which is gonna be shop product.
1:14:54And just going back to the social proof, you can see now immediately in the hero section, you can see everything. So you have all of this social proof.
1:15:02We have this moving logo banner. We have a product example, and we have a call to action, which is the focal point of that hero section. So I always think of it as when you go down the page, your calls to action become more supportive of that section.
1:15:18So instead of always just buy, buy, buy, you're trying to support the information that's there. So these are all the industries that these guys serve.
1:15:26So if someone wants to learn more about the industry, we will go through to a specific industry page. As we go down here, this is about the company. And so if you wanna learn more about the company, you click on more about us.
1:15:39But in these sort of top sections, we wanna be getting people to exactly where we want them to go, which ideally is gonna be to take action on either getting in touch or adding products to the basket and checking out. So that's the main point of this hero section.
1:15:56And then we go down here and we're looking at some featured products. Each will filter through to the corresponding product. If someone wants to view all products, they can see that.
1:16:05What you'll see is that none of these shout over each other. It's only once you hover that you get the view product call to action, and none of that is taking away from view all products.
1:16:17All of the calls to action work in unison with one another. And just to show you another example with one sort of clear call to action, this is the hybrid way. We've done this site a while ago.
1:16:28And you can see that we have an accent color, again, for the main call to action, which is tell me more. Tell me more will then go through to what we do.
1:16:37And if someone wants to get in touch, then they can get in touch, contact us here. So what we were trying to optimize for on the homepage is being able to tell people more about what they do because they wanted people to be educated before they get in touch.
1:16:51So even though the white is visually distinct from the background, it's the pink that draws the eye. And so someone clicks on that, they learn more, they self select, and then they get in touch. And you can also see here the call to action is backed up by social proof.
1:17:06Look at who we're trusted by. You can trust us. So you can see the way everything we've spoken about so far, it all comes together when you're designing your site.
1:17:15So a call to action just on its own without any form of social proof or any form of hierarchy or a well set up hero section isn't gonna work on its own.
1:17:26Everything has to work cohesively in order to improve your conversion rate and obviously get more customers. So that's why it's just really important to not just do one of these steps.
1:17:36You have to try and bring it all together in one package on your site. A great page doesn't push people towards a decision.
1:17:44It just removes every reason not to make one. Structure your sections so by the time that someone reaches the button, clicking it just feels like the most natural thing in the world.
1:17:54There's quite a fine line in animation that separates or this site feels alive from this site just feels performative and most people will cross that line without even realizing.
1:18:06The difference is whether the animation serves the visitors experience or whether the animation itself is the experience. One makes your site feel polished whereas the other just makes it feel like a tech demo.
1:18:18When animation works you barely even notice it. Think of a button that shifts color as you hover, content that eases in as you scroll instead of just popping up abruptly.
1:18:29A form that gives you you know a subtle confirmation when you complete a field. It's these micro interactions that create a feeling of quality The same way you know a car door that has a solid thunk feels more premium than a car door that just rattles.
1:18:46People remember that feeling even if they can't name what actually caused it. When animation doesn't work, it's usually because someone prioritize showing off over actually serving the visitor.
1:18:57Elements you know flying in from every direction, parallax effects that make you feel dizzy, page transitions that are so long that visitors are sat there waiting for permission to use your site.
1:19:09Every unnecessary animation is a speed tax on your site and it's a patience tax on your visitor. Don't get me wrong I think animation can look really cool But if your goal is very specific towards just getting people to click on something, then I feel like micro interactions are the way to go.
1:19:30One example is one nine Rockwell. Now I think this is a really nice website, but if we start to go down, things start to sort of fly in at you like this.
1:19:43I don't like it. So I'm I'm literally scrolling here, and because I haven't scrolled far enough, the page won't move.
1:19:51And if I scroll sort of midway, it has this this strange opacity effect over here. And I I have to scroll a few times until something comes in. Same here.
1:20:01When does this sort of stop in motion to let the site do its animation?
1:20:07I feel like that detracts from what we really want the site to do in this instance, which is book a tour or scroll down and find out more. Now not to say that this isn't a lovely site.
1:20:18It is. But I think if we just had a standard scroll, then they would probably have more conversions.
1:20:26Now I wanna show you a few, uh, examples of micro interactions on on sites that we've done. So one here is Dick's media. So this was for Dick's Sporting Goods.
1:20:35If we just refresh the page, super subtle, but you can see the logo comes here. It doesn't jam the scroll or anything like that. When I talk about micro interactions, it it really is micro.
1:20:45So for instance, when I hover over a nav item, it's got this really just nice subtle line that comes in like here. And then if we go over the folder, it does the same thing.
1:20:55It's just consistency throughout. If we go down, can see that we have a number ticker that just comes up subtly. It's not like in your face growing or anything like that and then that leads us to go down the site and it's just those really really small things that make a site feel a bit more.
1:21:13I hate saying elevated but it does it just makes it feel a little bit more premium. As you can see, it's nothing huge.
1:21:20Anyone can do this. It's not necessarily because we're some huge amazing web design agency.
1:21:25Of course, are. But anyone can do this. This is just a really small snippet of CSS.
1:21:31This was a GIF that loops once. So if you wanna add micro interactions onto your site, you can do it with the smallest of things.
1:21:39Now something a tad more advanced, I guess, was a motion graphic that we put in here for proper health. And then on the buttons, there's just this nice effect to make the user aware that they're hovering over the button to get in touch. We go down and we've got a hover effect here.
1:21:55So it's a small micro interaction where we hover and then we can see that we're actually on the logos and can stop that scroll. We go down here and there's a subtle changing of the background color, which is really nice.
1:22:10And then you can see again, we've got that button animation here. We go down. It's much the same here.
1:22:16Just a small hover effect. Nothing crazy. And this way, it's a lot less jarring to a visitor to look at and actually interact with.
1:22:23And when you strip the huge animations out of a site, it makes it feel a lot more approachable for a user. Now animations, I've said before and I'll say it again, I feel like are really great when you're trying to show off your design and your development prowess to your peers.
1:22:42So things that win on awards, for instance, are super animated. Like, they look amazing, but I can guarantee they're not getting as many conversions as they should be.
1:22:54And that's the key differences. Animations should serve the visitor. They should invite them to interact with things, and they should invite them to scroll and take action.
1:23:04They shouldn't alienate the visitor, and they shouldn't be there solely to show off your skills. It should all be geared towards what is best for the visitor and what is gonna get you the outcome that you want, which is someone to do the thing, e g click on whatever call to action you have on the site. The test is really simple.
1:23:22Does this animation help someone use the site, or does it help you show off that you know how to animate? If it's the second one, just cut it.
1:23:30The best animation is the kind that nobody consciously notices but everyone subconsciously feels it.
1:23:37Here's what changes when you're designing for a phone and it's not just making things smaller, the entire context of your site shifts. Someone on a desktop is probably sat at a desk, probably has time, probably has a second tab open to compare.
1:23:53Someone on a phone might be in line at a coffee shop, they might be on a bus, they might have fifteen seconds before their attention goes elsewhere. The design decisions need to reflect that difference. On mobile, the hierarchy becomes even more critical.
1:24:08You can't rely on side by side layouts. You can't rely on hover effects because there's no cursor. Your navigation needs to collapse into something that works with a thumb, not a mouse, and your touch targets needs to be large enough that someone with average sized fingers isn't accidentally tapping the wrong thing three times in a row.
1:24:29The mistake that most people make is designing the desktop first and then just hoping that it translates. It almost never does.
1:24:37The mobile experience should feel like it was built for the device from the start. That means content gets prioritized differently. That means some desktop elements get removed entirely.
1:24:49So everything can look good on desktop. I just mocked up something with Claude to show you how this can look. So this is like your basic sort of property website, but you can see like an old school website that is built predominantly for people on desktop.
1:25:06But what happens when we go into Google Chrome developer tools? So this is how we would test whether something works on mobile or iPad. So or tablet, should I say.
1:25:15So you can get, you know, your phone or you can test on Chrome developer tools. So we go into here, and we can scale this up, uh, first of all, to responsive, and then we can eventually scale this down like so.
1:25:30So, obviously, you can preselect your dimensions. So let's say we wanna test on iPhone. Now imagine that you came across this site on your phone.
1:25:39How on earth are you meant to use this? And this is what I mean, it's a bit of a funny example, but this is what a lot of people are essentially doing is they are designing for desktop only and they are completely ignoring the mobile version.
1:25:58Whereas we need to be building for mobile first. I think it's over 50 of visitors that are now on mobile. And so if you have something like this, which is essentially just your desktop website on mobile, no one's gonna be able to use it, and your conversions are gonna plummet.
1:26:14This is probably a better example than some others because I've seen websites that have huge overflow issues. The text will come off to the side. The spacing will just be completely, uh, messed up across, like, the whole site.
1:26:30At least in this one, you can see everything. But if you try and make out, like, none of this is legible. So what we have to do is we need to essentially build a separate desktop and mobile experience, ideally using the same content, but just restructured for the different viewport sizes.
1:26:49So as an example, this is Tanager. This is one of our clients, like everything I've shown.
1:26:54But you can see, you know, they have a really nice desktop site here. Lots of usage of usage of the full width of the sections.
1:27:04So when it comes to mobile, we think, okay. How are we gonna best utilize the space, and how are we gonna restructure things?
1:27:11So we go into the dev tools. You can see that first off, the nav needs to break into a burger menu.
1:27:20If you have anything more than, like, one nav item, then it's gonna start to bleed over the logo, and it's just gonna look awful. So make sure that you put your navigation into a burger menu. Then you can have, you know, all of your links in here.
1:27:32You can have your button at the bottom where the user would expect it for the touch point. Then what we've done is we've just essentially stacked the elements. So designing for mobile actually isn't that difficult.
1:27:44It's just making sure everything is stacked correctly. There's no overflow issues. There's no spacing issues.
1:27:50Everything is of a legible size and of a legible contrast. So if we go here, you can see that we've got this, which was to the right.
1:28:00We just sit this under because it's most important to have the h one and the calls to action in here before the text. It would look strange if we had the image here because there would be no context for the user who's just come onto the website. We go down here.
1:28:17You can see we've got the text stacked in here. We've got the full width section. We've broke the two sections that were next to each other to simply be underneath each other.
1:28:26And you can see that we've made sure that we're using a a legible text size here, which is consistent across the whole site. One thing I always try and say to clients, you know, you can see us scrolling through here. But when you have really important information, so let's say beyond testimonials, try not to carousel everything.
1:28:48What I mean is we have really important stats here. If we had all these stats in a, um, horizontal carousel, so let's say we just showed one stat with arrows, Most people aren't gonna scroll through.
1:29:01So if if you have something important that everyone needs to see, then try and get it all in one section so that people can actually see it. Testimonials is okay because people don't need to read reams and reams of text of of testimonials.
1:29:14If it's clear that there's one and it's swipeable, that's okay. But then you can see how we've structured everything here.
1:29:22So we got the team. We go down into the footer. Everything has the same alignment.
1:29:26You don't want things to be weirdly aligned, like some over to the right, some over to the left, some center. Try and keep a consistent alignment across all your elements.
1:29:37So you can see everything on mobile here is sat to the left except for the arrows where we would, again, expect someone's touch point to be. You could put the arrows anywhere, to be honest.
1:29:47You could put them in the middle. You could put one to the right here and one to the left here. It's personal preference.
1:29:52This is just what we landed on. But everything else is left aligned. All the text is left aligned.
1:29:57Even when we've broken this out into four quadrants, you can see the text itself is left aligned. Button text, icons, everything sits to the left.
1:30:05So the user knows exactly what they're getting and where everything is gonna be. Everything follows the expected pattern for the user. And, of course, it goes without saying that your site should be accessible too.
1:30:16So making sure everything is where people expect it to be, making sure there is sufficient contrast between, um, text and backgrounds, making sure elements are actually legible.
1:30:26All of this is super important because if a website isn't accessible to everyone, then I've said it before, but it is failing at its most basic function.
1:30:35So just make sure that your website is responsive. It follows a cohesive pattern all the way down across all screen sizes, and just make sure that it's accessible as much as you can for everyone. Accessibility isn't just the right thing to do.
1:30:48It's actually the smart thing to do. High contrast colors, readable fonts, and proper heading structures help every single visitor, not just those with disabilities.
1:30:58And as a bonus search engines reward it too. Everything I've shown you so far, the layout, the typography, the color, the space in the animation, all of this is a set of tools and tools are only as valuable as the thinking behind how you use them.
1:31:13And that's what I want to leave you with because this is the thing that took me the longest to learn and change my career the most. There are two types of people who build sites. One type asks, what do you want it to look like?
1:31:24The other asks, what do you need it to do? That question, what do you need it to do? Changes everything because suddenly you're not just picking colors based on preference.
1:31:35You're picking them based on what emotion helps this specific audience take this specific action. You're not choosing a layout because it looks clean, you're choosing it because it addresses the three objections that this market has before they buy.
1:31:49The websites that generate real results are built backwards from an actual business goal, not forwards from a mood board. A client comes to me and says, I want a modern minimalist website.
1:32:02That tells me nothing useful, but when I dig into the business, I find out the biggest problem is that prospects don't understand what makes them different from five different competitors.
1:32:13Now I have a design problem worth solving and the solution might be minimalist or it might not. The strategy will decide.
1:32:21And here's the thing about AI and templates and every tool that promises to build your website in ten minutes. They can assemble pages, they can make things look decent, what they cannot do is understand why a specific visitor on a specific page needs to see a specific piece of info at a specific moment.
1:32:41That is strategic thinking. That's what turns a collection of pretty sections into a machine that actually grows a business.
1:32:49Your website is working twenty four hours a day. It's having conversations with potential customers while you sleep, while you're in meetings, while you're on vacation. The question is whether those conversations are saying what you'd actually want them to say because most sites are just out there mumbling.
1:33:05They're presenting info without any purpose. They're showing features instead of outcomes. They're talking about themselves instead of talking about the person reading and their problems.
1:33:17If you take one thing from this entire video, let it be this. Every design decision should start with the question, does this help the right person take the right action?
1:33:28Not does this look good? Not would a designer approve this, does it work because the best websites I've ever built weren't even the prettiest.
1:33:36They were the ones where every single element had a job and every single element did that job well and that's the full framework. Now if you want to go even deeper into what actually makes someone look at a website and feel like they need to buy, I broke down the psychology behind premium websites in this video. It's everything that's happening beneath the surface of the sites that make people pull out the credit card.
1:34:00So click here and I'll see you
The Hook

The bait, then the rug-pull.

Sam Crawford opens not with design theory but with an uncomfortable moment of professional honesty: a client showing him their website, proud of it, while he's calculating how much revenue it's costing them. That framing — the gap between a site that exists and a site that performs — drives every case study in the next 94 minutes.

Frameworks

Named ideas worth stealing.

16:16list

The Three Hierarchy Levers

  1. Size
  2. Contrast
  3. Spacing

The only three tools you need to direct a visitor's eye without them thinking about it. Make the most important thing biggest, highest contrast, and most spacious.

Steal forany landing page audit or redesign brief
23:42list

The Two Typography Rules

  1. Maximum three fonts (ideally two)
  2. Readability beats personality — always

Heading font expresses character; body font should disappear. The moment someone notices they're working to read, they leave.

Steal forclient typography briefs and font pairing decisions
37:53model

The 60-30-10 Color Rule

  1. 60% background/neutral
  2. 30% secondary color
  3. 10% accent (CTAs and highlights)

Distributing color this way ensures the accent color is rare enough to stand out while keeping the palette coherent. Also functions as an accessibility check.

Steal forbrand color system documentation and design reviews
56:16list

Hero Section Formula

  1. Headline: what you do and why it matters (not clever — clear)
  2. CTA: what to do next (specific label, not generic)
  3. Visual: reinforces the message, doesn't distract from it

Three elements working together are worth more than every other section combined. If the hero doesn't answer 'is this for me?' in 5 seconds, the visitor bounces.

Steal forany landing page or homepage redesign
1:01:33model

Social Proof Placement Map

  1. Logo bar near the top (validation)
  2. Outcome-tied testimonial in or near hero
  3. Specific numbers next to the CTA
  4. Full review wall before pricing
  5. Testimonial adjacent to every major section

Proof at the bottom is proof that never gets seen. Weave it at every point of hesitation.

Steal forhomepage and sales page architecture
18:16model

F-Pattern and Z-Pattern Layout

F-pattern: two horizontal scans then a vertical drop — common for content-heavy pages. Z-pattern: diagonal from logo to CTA, then content to bottom CTA — common for hero sections. CTA placement should intercept the path the eye is already taking.

Steal forwireframe reviews and hero section design
CTA Breakdown

How they asked for the click.

VERBAL ASK
57:28link
“If you're finding this useful do me a favor and hit the like button. It genuinely helps this video reach more people.”

Soft mid-video ask, non-intrusive; the main CTAs are to the agency (byCrawford.com), the community waitlist (buildyourmargin.com), and a Premium Website Checklist in the description.

MENTIONED ON CAMERA
00:45productProva Health ↗
09:18productLondon AV ↗
45:00toolFigma ↗
45:00toolClaude (Anthropic) ↗
45:00toolChatGPT ↗
50:53linkYale School of Art (cautionary example) ↗
56:16productMarkups.ai ↗
00:45linkbyCrawford (agency) ↗
00:45linkBuild Your Margin (community waitlist) ↗
00:45productPremium Website Checklist ↗
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Storyboard

Visual structure at a glance.

open — the business owner who thinks their site is fine
hookopen — the business owner who thinks their site is fine00:00
Prova Health before — weak hero, misaligned elements
valueProva Health before — weak hero, misaligned elements02:54
London AV before — too many CTAs, two-line nav
valueLondon AV before — too many CTAs, two-line nav09:18
hierarchy theory intro card
valuehierarchy theory intro card16:16
HomebuilderAI — clear hierarchy example
valueHomebuilderAI — clear hierarchy example18:16
FoKUS color rebrand
valueFoKUS color rebrand29:14
bespoke assets and custom imagery
valuebespoke assets and custom imagery49:13
Markups.ai redesigned hero — the ideal example
valueMarkups.ai redesigned hero — the ideal example56:16
Liverpool Podcast Studios — social proof architecture
valueLiverpool Podcast Studios — social proof architecture1:01:33
closing principle — every decision starts with a question
ctaclosing principle — every decision starts with a question1:33:21
Frame Gallery

Visual moments.

open — the business owner who thinks their site is fine00:00Frame at 00:33 from The Only Web Design Video You Will Ever Need00:33Frame at 01:01 from The Only Web Design Video You Will Ever Need01:01Frame at 01:29 from The Only Web Design Video You Will Ever Need01:29Frame at 01:57 from The Only Web Design Video You Will Ever Need01:57Frame at 02:21 from The Only Web Design Video You Will Ever Need02:21
open — the business owner who thinks their site is fine00:00Frame at 00:33 from The Only Web Design Video You Will Ever Need00:33Frame at 01:01 from The Only Web Design Video You Will Ever Need01:01Frame at 01:29 from The Only Web Design Video You Will Ever Need01:29Frame at 01:57 from The Only Web Design Video You Will Ever Need01:57Frame at 02:21 from The Only Web Design Video You Will Ever Need02:21Prova Health before — weak hero, misaligned elements02:54Frame at 04:21 from The Only Web Design Video You Will Ever Need04:21Frame at 04:57 from The Only Web Design Video You Will Ever Need04:57Frame at 05:55 from The Only Web Design Video You Will Ever Need05:55Frame at 07:14 from The Only Web Design Video You Will Ever Need07:14Frame at 08:10 from The Only Web Design Video You Will Ever Need08:10London AV before — too many CTAs, two-line nav09:18Frame at 10:25 from The Only Web Design Video You Will Ever Need10:25Frame at 10:49 from The Only Web Design Video You Will Ever Need10:49Frame at 11:39 from The Only Web Design Video You Will Ever Need11:39Frame at 12:37 from The Only Web Design Video You Will Ever Need12:37Frame at 13:14 from The Only Web Design Video You Will Ever Need13:14Frame at 13:40 from The Only Web Design Video You Will Ever Need13:40Frame at 14:35 from The Only Web Design Video You Will Ever Need14:35Frame at 15:21 from The Only Web Design Video You Will Ever Need15:21hierarchy theory intro card16:15Frame at 16:45 from The Only Web Design Video You Will Ever Need16:45Frame at 17:23 from The Only Web Design Video You Will Ever Need17:23HomebuilderAI — clear hierarchy example18:16Frame at 20:03 from The Only Web Design Video You Will Ever Need20:03Frame at 20:30 from The Only Web Design Video You Will Ever Need20:30Frame at 21:49 from The Only Web Design Video You Will Ever Need21:49Frame at 22:06 from The Only Web Design Video You Will Ever Need22:06Frame at 22:20 from The Only Web Design Video You Will Ever Need22:20Frame at 22:38 from The Only Web Design Video You Will Ever Need22:38Frame at 22:56 from The Only Web Design Video You Will Ever Need22:56Frame at 23:17 from The Only Web Design Video You Will Ever Need23:17Frame at 23:42 from The Only Web Design Video You Will Ever Need23:42Frame at 23:54 from The Only Web Design Video You Will Ever Need23:54Frame at 24:10 from The Only Web Design Video You Will Ever Need24:10Frame at 24:15 from The Only Web Design Video You Will Ever Need24:15Frame at 25:57 from The Only Web Design Video You Will Ever Need25:57Frame at 27:20 from The Only Web Design Video You Will Ever Need27:20FoKUS color rebrand29:14Frame at 30:06 from The Only Web Design Video You Will Ever Need30:06Frame at 31:38 from The Only Web Design Video You Will Ever Need31:38Frame at 33:06 from The Only Web Design Video You Will Ever Need33:06Frame at 34:13 from The Only Web Design Video You Will Ever Need34:13Frame at 35:59 from The Only Web Design Video You Will Ever Need35:59Frame at 37:53 from The Only Web Design Video You Will Ever Need37:53Frame at 39:22 from The Only Web Design Video You Will Ever Need39:22Frame at 42:03 from The Only Web Design Video You Will Ever Need42:03Frame at 43:14 from The Only Web Design Video You Will Ever Need43:14Frame at 45:00 from The Only Web Design Video You Will Ever Need45:00Frame at 46:55 from The Only Web Design Video You Will Ever Need46:55bespoke assets and custom imagery49:13Frame at 51:26 from The Only Web Design Video You Will Ever Need51:26Frame at 52:36 from The Only Web Design Video You Will Ever Need52:36Markups.ai redesigned hero — the ideal example56:16Frame at 57:28 from The Only Web Design Video You Will Ever Need57:28Frame at 58:06 from The Only Web Design Video You Will Ever Need58:06Frame at 59:53 from The Only Web Design Video You Will Ever Need59:53Liverpool Podcast Studios — social proof architecture61:33Frame at 63:17 from The Only Web Design Video You Will Ever Need63:17Frame at 66:01 from The Only Web Design Video You Will Ever Need66:01Frame at 68:24 from The Only Web Design Video You Will Ever Need68:24Frame at 68:49 from The Only Web Design Video You Will Ever Need68:49Frame at 70:50 from The Only Web Design Video You Will Ever Need70:50Frame at 73:31 from The Only Web Design Video You Will Ever Need73:31Frame at 74:38 from The Only Web Design Video You Will Ever Need74:38Frame at 76:34 from The Only Web Design Video You Will Ever Need76:34Frame at 78:30 from The Only Web Design Video You Will Ever Need78:30Frame at 80:26 from The Only Web Design Video You Will Ever Need80:26Frame at 82:56 from The Only Web Design Video You Will Ever Need82:56Frame at 84:05 from The Only Web Design Video You Will Ever Need84:05Frame at 86:00 from The Only Web Design Video You Will Ever Need86:00Frame at 87:05 from The Only Web Design Video You Will Ever Need87:05Frame at 88:36 from The Only Web Design Video You Will Ever Need88:36Frame at 89:32 from The Only Web Design Video You Will Ever Need89:32Frame at 90:18 from The Only Web Design Video You Will Ever Need90:18Frame at 90:45 from The Only Web Design Video You Will Ever Need90:45Frame at 91:49 from The Only Web Design Video You Will Ever Need91:49Frame at 92:21 from The Only Web Design Video You Will Ever Need92:21closing principle — every decision starts with a question93:21
Watch next

More from this channel + related breakdowns.

Chat about this