Transcript
Use with ChatGPT / Claude Auto-scroll A
The speaker explains how websites often cost businesses money by being invisible, not clear, and not conversion-focused. He introduces the video as a complete breakdown of the principles behind websites that work.
There'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 generally 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.Not 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.It's not theory.It's not like best practices from a blog post.I've literally sat there and watched sessions.I'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 it'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 going to be the complete education.Layout, typography, color, imagery, user experience, conversion, architecture, mobile, animation and the strategic thinking that ties it all together.Whether 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 organizedfrom the ground up.And I'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.The 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.
And 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.Most 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.The 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 waiting 2 weeks.Or they built it themselves, probably on a weekend, no strategy, no structure, no understanding of what a visitor actually needs to see and then in what order.Both 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 going to do is show you why some sites fail.
And to show this off, what I'm going to show is two of our clients.We've got Pro Builder Health and London AV.I'm going to bring up the before and explain what's lacking in these.And then I'm going to bring up the after.So, what we've actually done to make these improvements.What you're seeing on screen here is Pro Builder Health's website.I think this was in about 2022, 23, something like that.But immediately, what you'll see is this hero section.It doesn't really look like a hero section.If 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.So, 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.So, nothing drastic, but you'll see the difference when I bring it up on screen in a minute.Now, they do have a a 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.So, everything is competing for the same real estate and 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.So, Pro over 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.For me, that's not doing much.And I'll come on to it a little bit later in the video, but the hero section is what does basically all the heavy lifting on a website.
So, this needed to be improved a lot.And just a final note up here in the nav, more shouldn't really be in there.More 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.I'm going to talk a little bit about F-pattern and Z-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.So, there's custom graphics, yes, but it doesn't really make sense.And if we zoom in, this is very nitpicky of me, but these don't align.So, if you're going to do full bleed elements, make sure they align.
And then, obviously, also make sure that things don't cut off.So, for me, even though I like these graphics, and we did reintegrate these graphics, they're not doing anything right now.So, I'll show you in a minute how we improve this.And as we scroll through, you can see, even though they operate at very high level, all the small mistakes kind of ruin the halo effect.So, someone's going to come in, they're going to 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?"Now, 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 H1.So, you'll notice, you know, if I flick between the sites, there's not that much of a difference in the font, but we've changed some of the kerning and the leading just to make it look a little bit morepremium.So, sometimes a full website redesign, it doesn't necessarily require to rip everything up and start again.It 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.So, 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 the subsite, and they can get in touch.So, 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.Now, as we scroll down, you can see we've added a bit more movement.So, Prover work with huge businesses and they weren't really shouting about this on the site.So, we've just put in a nice moving carousel to display all of their clients, or at least a 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.We 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.So, 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 in, worked with.All of these things build social proof on your site.It makes users trust you more.And then we go down and we're just explaining the difference that Prova actually offers.So, you can see now we've built a lot more info into the homepage.It'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.It doesn't quite align, you 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.So, really strong case studies for Prova.We go down here.And again, we've got another call to action to get in touch.Once someone gets to the bottom of the page, you want them to do something.If it's not clear where someone can go, so for instance, you know, they can scroll through your site map, they can get in touch, they can do something.If that's not clear, then they're going to bounce and obviously that's going to hurt your bounce rate and it's going to hurt your conversions as well.So, that's Prova and that is why some websites fail and some websites succeed.
Two client examples, Pro Builder Health and London AV, are used to show how small design and structure changes improve clarity and trust. The speaker compares the before and after versions to highlight stronger navigation, hierarchy, and calls to action.
Now, just to drive this point home, I'm going to show you the London AV example now.So, this is London AV, really great client, they do amazing work with huge, huge clients.Now, 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.But 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, then they've got the inquire now in a 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.Again, 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 going to start bleeding over, then you need to think about, "Okay, how do I structure the nav?
Can I make a mega menu?Can I make a drop down?What can I do to clean it up?"So, I do like a secondary nav that sits above the nav.If you have, let's say, 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.So, 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.I would also 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.We 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 I 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.But, if we look at this, we don't have a gap at the top of this section, but 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, they're huge logos, but they're not prominent.They they should realistically be higher up.And then the footer's okay.Like, there's not much that we change here.Although, this to me does stand out.It shouldn't really be larger than the the contact header.So, with that in mind, here's what we did to optimize for London EV.
You can see we've cleaned up the nav items here.We've got a really strong CTA cuz they were missing a contact us CTA top right.So, we've added that in here.Now, obviously I've just said on uh Prova, I don't really like contact us, but 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.The pairings between the hero, the sort of eyebrow here, and the body copy are much more cohesive.And when you land on this, it's a lot calmer.You get a real sense of their service.You can see all the really, really cool LED screens here.We've got a nice custom asset here.We We've done a lot of custom assets for London EV to really elevate the site.
If you're a business that's working with really high-level companies, then bespoke assets are just going to push the site up that bit more.So, 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.So, these are the partners.This is what we offer.You can see there's a lot less info immediately visible, but 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.We can drag, we can click.It just gives the user options.We've also done these bespoke icons just to bring everything into that brand, making it really cohesive.Then we go down a bit further, you 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.The more you can get someone to trust you through case studies, testimonials, 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.I'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.What I like to do
is give people an option.I don't want to overwhelm them, but some people prefer booking a call, some people prefer just ringing, some people will prefer submitting a form before doing anything else.So, just giving someone an option without overwhelming them is going to 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.So, 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.So, 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, it'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.So, that 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, here's all of our solutions, here's how you browse the site, here's our policies, here's our address.So, so much clearer when you compare and contrast between both the new London EV site and the Probe Health site versus the old ones.
The speaker explains broken hierarchy and how size, contrast, and spacing guide attention. He uses Home Builder AI and another comparison site to show how strong hierarchy improves readability and conversions.
There'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.So, before we even design anything, before we even wireframe anything out, we want to 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.The 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.That'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.You'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.You know, too much text, too many pages, whatever.But nine times out of 10, it's actually just a hierarchy problem.The 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.And 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.Make 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.Okay, 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.So, the first thing that you'll notice that your eye is hopefully immediately drawn to is the H1, the main headline.It's the largest text element and therefore it should immediately draw your eye to it.So, if we look at it, it's really clear.AI for real estate agents, rewriting the rules of home sales.And then here's the promise, build intelligent sales ecosystems that activate buyers and future-proof your business.If 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.They may not understand exactly how they're going to 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.So, you don't want elements that blend into each other.You don't want to sit dark or darkish text on a dark background and then vice versa for light.You can see we have really clear, legible text, legible buttons, legible assets in here.There's nothing that blends into the background.So, 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 it allows us to keep cohesion between the color palette.
And 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.If 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 Z pattern layout, on the Z pattern you would go, "Okay, this is Home Builder AI."We start on the left.We can see our call to action on the right.We can see our content back to the left.So, the eye would go left to right, left to right.Now, with a a Z 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 an F pattern.So, an F pattern would be 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 Z pattern in action.And so, 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.So, we've got our H1 up here, so our heading one.Then we go down, we've got a H2, 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.
You 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.It's just enough to keep the user scrolling.And then we've got these nice sort of bespoke assets to show My ears.We've got these smaller assets here that just give a a 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 whereour main call to action is.So, register for a masterclass of AI execution.This is our client's main offer.So, if we go down here, we can get roll and then they can choose whether they want one-on-one AI mentoring or a VIP early registration down here.
And if we go back up, you can see it's littered with social proof.So, tons of testimonials, you can join the list.We've got strong calls to action all the way down.Begin the journey, join the list.It'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.Obviously, we 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 going to lose conversions.So, 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.
And 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.
This section covers how fonts communicate brand personality and why readability matters more than style. The speaker compares weak and strong typography choices and shows how font weight, spacing, and sizing create a more premium feel.
Layout is the skeleton.If the bones are wrong, then no amount of decoration's going to fix it.So, nail the hierarchy and you've already solved half the problems that most websites have.I 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.So, 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 with millions or vice versa.That's the power of typography.It's exactly where most businesses will blow it.The biggest mistake is in picking an ugly font.It's picking fonts that send the wrong signal.Every 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.Two 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.Usually, I'll just try to keep it at the two font pairing because every extra font it just adds visual noise.Second, readability beats personality every single time.Your 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.We've got an example here from Astra, and this is a clients bars like everything you're going to be seeing in this video, but you can see the the finished product here.This 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.Great.But, when you come on to this hero section in particular, are you experiencing the halo effect?When I look at this, I don't.I see obviously the stock image in the back, and I see a lack of real hierarchy between headers.So, even this, which should realistically be a body copy, is the same font and the same weight will be not the same size as the header H1 H2.This looks like it's coming in at H4, but then realistically you don't know where to look because the typography has the same weight here as it does here.In fact, I actually think this is bigger than the H1.So, it kind of draws the eye down.And just the overall style of the typography here just does not work.The 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.And 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.So, typography is going to be crucial when you come to redesign your business's site.So, what I'm going to do is flip back to our redesign, show you the hierarchy, show you the font, show you the kerning, the letting, the weighting, all that good stuff.And you can feel for yourself why this is being so effective.Okay, so you can see immediately we acquire exceptional businesses.That is front and center.The eye is immediately drawn to this because we're using a clearly sized H1.And then we go down to the body copy.And then we go over to the call to action here.
So, you can see all the way down we've got different weight, different weight.Everything has the correct weight.So, you can just clearly see what's a H2.You 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.So, we're not overusing it.People have a tendency to really lean into this and highlight like every single header.We'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.And 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.The call to action is Montreal.
So, what we're doing is we're just using different sizes, different weights, different letting, different kerning to get that visual distinction between what's a header and what's body.The actual pairing is the same font.But in this instance, it works perfectly.So, as we go down, you can see literally everything is the same font.Now, some brands, they won't do this.Some brands do.It's completely up to you.If you like a font and you can differentiate with sizings, weights, etc., then go ahead and use that font.Now, let's jump back to the studio.
The speaker explains how color influences trust, emotion, and user behavior before any text is read. He contrasts restrained and playful palettes, then shows how intentional color systems and contrast rules support branding and accessibility.
Fonts are going to be the voice of your website.And just like a person's voice, they create an impression before anyone processes a single word.So, 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.By the time someone read 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.The biggest mistake isn't picking bad colors.It's picking colors that have no intention behind them.Someone decide, 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.And when the color story doesn't match the brand's actual positioning, visitors going to signal that something's off.So, this is what works.Three to five colors max.You've got one primary brand color, one or two neutrals or backgrounds 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.So, we're going to 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.And one of the main reasons for being so flat was that the color scheme itself was in their words, boring.
Now, a sort of monochromatic black, white, and gray 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 wantto convey to their customers, then this isn't going to do the trick.Now, I always make a point in my videos of talking about restraint and how a restrained color palette creates a premium feel.Now, 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.It's very, very similar.However, if you have a personality and you want to get through that human made, that human centric feeling to a customer, then you kind of have to go in the opposite direction.So, what we did was we injected a lot more color and a lot more playfulness into the site.
It 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 a gives it complete different feel to a website.Okay, so as you can see there's a lot less restraint here.Now, the client wanted bold.The client also wanted to target SEO keyword, hence why there's a little bit more text in here than I would usually like.But 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.We will get that changed eventually.Um 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 that color palette.
But 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 orange, we've got this deep green.And we're cycling through these as we go down, so even though there's a lot more color, there's a level of restraint where none of the colors competing with each other.They're only sort of supporting the information that's there.So for instance, here none of these colors are kind of overlapping each other.They'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.It'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.
So you can see it stands out immediately when someone comes onto here.You contrast that with what we had here, and you can see even though you would argue this looks a bit more premium, a bit more restrained, there's no obvious sort of guidance as to where to go next.I 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.It'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.This is exactly what they do.Here's a bit more info.There you go.You click a call to action.Book a 20-minute discovery call.It's really simple.You can do everything there.The colors are adding a little bit of personality where before it was lacking.You 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.So, really just adding a bit of playfulness to the site for the client who wanted to be playful.Now, what I'm going to do is contrast this with another client that we have who wanted the tone 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.
So, I'll show you that one now.All right.So, this one is multifamily.Now, these guys had sort of your standard property real estate portfolio sort of color palette.Grays, blacks, and then a blue accent.Now, 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 website palette."So, 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.Obviously, none of the images are pulling in because I'm using at the Wayback Machine.Oh, there we go.One is pulling in.But, very, very plain.Doesn't really stand out against anyone else in the space.
Now, what we're going to 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.So, immediately, you 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 Z pattern.So, we would go logo, button, and then we get uh 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.So, we'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 going to be in color.It'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.So, the colors are calling attention to different parts.You've got the red here, which is calling attention to the navigation, and yellow here, which comes up on hover, which is calling attention to actually click the property.As 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.And 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.
750 million uh Canadian dollars in sales experience, 15 years in real estate, all that good stuff.Now, 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 ofthe colors are kind of shouting over each other.There's enough space, enough room to breathe for everything.As we go down, you can see again, really sparingly use the call to action coming in in that yellow here.Even down to the small sort of details with the arrows telling people, "Hey, you want to 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 60-30-10 rule, which is essentially 60% of the page should be your sort of background neutral color, 30% should be your secondary color, and then 10% should be accentcolor.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 going to be the red and the blue, which are used reallysparingly, but just bring the site to life.Enough that it's not repetitive.It 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.Your site shouldn't have, let's say, you know, this white background here with a really, really light gray text.
Or it shouldn't have, let's say, this yellow button with a green um green text within it.There should be enough legibility between those, so 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, this is what this content is.And obviously, your color palette is part of a wider accessibility push that should be implemented on your site.But, contrast ratios um color selection is very, very important and is one of the cornerstones of accessibility on your site.So, make sure when you're picking colors that they pair well and they contrast well.So, using the 60-30-10 rule is actually going to 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.
If 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.
The speaker argues that custom imagery and branded graphics make a site feel expensive and specific to the business. He shows examples where bespoke assets, diagrams, and illustrations help explain services more clearly than stock imagery.
There's a very specific moment where the 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.Not the layout, not the fonts, actual images and the graphics on the page.Think about two sites selling the exact same service, same price, same quality, same offer.One has real photography, custom illustrations, branded graphics that clearly belong to the business and no one else.Then on the other hand, you've got the other business and they have the same free stock images you've seen on 50 other websites this week.Which one do you trust more?Which one feels like they've invested in what they do?That 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.
Custom assets don't have to mean hiring an expensive illustrator for every single icon.They just mean being intentional, using 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 ona competitor's site.So, we're going to start here with Sent.Now, these guys, they actually pivoted the company.But, you can see they're not really big on imagery, and the imagery that they do have is completely stock.So, 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 obviously we were going to use stock Amazon photography.So, 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.This 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 Netradyne AI coaching agent for Amazon drivers.You 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.This 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.So, we're actually showing within image the progress of how this works.So, okay, a Netradyne infringement comes through.Infraction identified in real time.
Agent comes on.Agent calls the driver.Speaks to the driver.Coaching session is recorded, so it coaches them through it.At a glance, you understand that this process goes this way.This is what happens here.And then, the text almost becomes secondary.It's just a quick scan.As I've said in a lot of videos, people will scan pages.Almost everyone scans.They look for headers, they look for things that stand out on the page as they go down.And so this is really clear.Step one, step two, okay, this is how this goes through.Step three, and then it's really obvious, you can see, okay, at a glance, these are all the integrations that we have.Brilliant.Now, I know this is for the AI dispatch.If I want to go automated incentive, we have the same thing.So we can toggle between both of these, depending on who's looking at the site.
Here we have a basic mock-up.Again, here we don't want to give away any customer data, so we've sort of anonymized this.But we go down, really simple, effective ways of using bespoke assets to guide you as you go down and tell a story without using so many words.If 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, you see the visual, and then you can go into the next thing, which in this case is going to be booking a call withthe 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 Dame Kelly Holmes Trust.So 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.So 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.So you can see here, we've started to develop these bespoke assets throughout the site, which is this sort of hand-sketched elements in here.Now, I can't take full credit for this, we were actually worked with a amazing uh design studio who come up with uh the bespoke assets.This was I think maybe 4 or 5 years ago, but they came to us with the assets and then we built everything out within Squarespace in this instance.But, you can see the difference already between what we had before and what we have here.
So, 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.It was just colors, images.Now, we've got, you know, the moving banners.We've got these elements around the titles.We'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 want to have bespoke assets on your site, you can now sort of just generate your ideas using Claude, using Figma Make, using uh ChatGPT, any AI tooljust to get some proof of concept.You can spin up some brand assets.So, if you go to and you're like, "Hey, I want um a hand-drawn, let's just use this as an example, hand-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.I 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.It's probably not going to 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."I 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.But, if you have ideas about concepts that you want to 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, it's going to get you something like this, which is always going to be better.All that to say, wherever you can get custom graphics into your site, you should definitely definitely do so.It makes a night and day difference between uh 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.
This chapter explains how generous spacing creates calm, premium-feeling websites while cramped layouts feel cheap and desperate. The speaker contrasts a cluttered art site with a spacious luxury venue site to show the effect of breathing room.
That 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?Then you land on another site and you're like, "Ooh, 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.Cramming 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 lookingat.And that effort has a cost.Visitors don't think, "Ooh, 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, things sites like Apple, like Stripe, the brands everyone points to, are almost aggressively minimal in how much space that they use.They give every element room to just exist.Every section has one job, and because each thing gets its own space, each thing feels important when you reach it.That's design doing its job properly.I can't stress this enough.White space is not empty space.Okay, so with white space, it doesn't necessarily have to just be literally white, but I'm going to 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.So, 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.Um 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 yes, it's legible, and you can read it, but it's a really poor user experience.Now, 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.You can see here immediately everything has its place.
Nothing is smushed together.We have the hero section, which displays their beautiful logo.Uh we're on their events page here, so you can see on the events.Everything has spacing around it.Everything is also spaced correctly.So, there's no visual misalignment.We 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.And 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, okay, 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.So, up here, the eye is immediately drawn down to classic, contemporary, and bold.
We want to discover more, we can hover over this.Everything is spaced correctly.There's a subtle sort of difference in padding between the header and the body text
versus the body text and the call to action, because we're trying to group those.Then we go over here and you can see all of 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.It'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.We'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, there 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.
Now, 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 side margin.We wanted to make use of the space between sections to make people feel like they're in a luxury experience because what Folly House sell is luxury experience.They are in the experience business.They want people to feel special on their 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.Give 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 Folly House.Now, we have so many examples of this on our site, but I realized the video was going to get really, really long if I keep pulling these up.So, we'll have done to the next point, and I'll bring up some more examples there.Space is a signal.Generous 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.
The speaker says the top of the page must instantly answer who the site is for, what it does, and what to do next. He uses Markups to show how a strong hero section, clear USP, and visible CTA create trust and a positive first impression.
Here'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.In 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.If it doesn't, then they're going to 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.The visitor has to work to figure out what the business even does.And nobody's going to 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.
Not 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.Those three elements working in tandem are worth more than every other section on the page combined.Now, we're going to 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 their USP is that it's just by email.There'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.So, this is uh Markups V1.They look here and immediately you just lose trust.Now, 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.Not the strongest of call to action and it's also not in a button.Schedule a call.Okay, great.You know, you have your call to action in there.But, this hero section needs to be working so much harder.We have an H1, "Custom contract in your inbox in 15 minutes."Okay, that's cool, but where's the context?Precise, secure, rapid.That, if anything, should be an eyebrow up here.You need enough info to make a decision to book a call.So, 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.So, 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 going to be getting as many calls as you should.
Then 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.Right 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.This is how visitors on Mark Up's old website were obviously thinking.So, we came in, we redesigned it, and I'll show you the difference now.Okay, so 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.It's a lot stronger.It's a really nice, trustworthy serif font.You can also see we've added the eyebrow, all work, no platform, and it's so much stronger as a H1.
Message Agent Marco to negotiate any contract.Okay, that's really clear.That's telling the user exactly what to expect.No new platform required.That is the USP.That's in there, and that is in a different color to draw attention to it.Now, what was I saying before?Okay, we need to be giving people more context.Agent Marco is trained by Mark Up's AI legal engineers on your historical contracts to apply hundreds of micro instructions for each negotiation.Okay, I 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?It's not schedule a call, that's quite vague.It's book a demo.Now, 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 Bycroft site, we have schedule a call because when you land on an agency site, well, you obviously know what a call entails.
If you are on a SaaS product, what does book a call mean?Are you giving feedback?Are you trying to be sold?Is it a demo?It's not clear.This is super clear.So, you can see we've got book a demo here, book a demo here.And Markop also have a mascot.So, we've added that in just a bit of fun.And you can see it's just kind of 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 tomake a decision on the hero section.And 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.
Easiest 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.It's really obvious."Then I probably look at the eyebrow and maybe I notice the mascot.But then it's really clear the big sort of callouts are going to be this and this.And then right under trusted by the world's most innovative companies, it's just a little slither of social proof before obviously you get to the the logos of the clients that they work with.And 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.If you land on this, everything else down here is going to be tinged with I don't know what this company does.
It's very bare-bones.It's very basic.I don't particularly trust them and I don't want to schedule the call.Now, back on here, it's a positive halo effect.You are able to say, "Okay, this looks like a very professional business.I understand what they do."And then, if you want to scroll further down, you see all the people that they work with, you 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, you 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.It's all about nailing that first impression.So, don't save your best till last.Put 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.
If you take nothing else from this video, just nail that hero section, and you can't go far wrong.
The speaker explains that testimonials, logos, outcomes, and proof should be woven through the site rather than left at the bottom. Liverpool Podcast Studios is used to show how social proof near the top and alongside CTAs increases trust and conversions.
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.Nobody believes you when you say, "Oh, I'm great."That's not cynicism, it's just how the brain works.Humans 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.Your 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, and then move on.That's barely scratching the surface.The 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 a real person talks about the change that they experienced.
These 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 has already decided to leave is proof that never gets seen.The 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.Every time someone hesitates, the proof is right there answering that hesitation.So, to show you a quick example, here is Liverpool Podcast Studios.Now, this is where I do all of my recordings for for YouTube.They asked us to to redesign this site.So, I'm on the Wayback Machine now, and you can see obviously it's not loading the images or the videos, but if we look at its base components, this was let's say a video with Liverpool Podcast Studios over the
top.Um this would have images in the background, has a form, great, but there's no social proof at all.So, when someone lands on this, the trust isn't built immediately.They'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 in the page, then everything else is tinged with that negative-ish first impression.And so, if we compare that with what we've done with the redesign, you'll see the difference.So, we've basically done a full CRO audit of the site.We did a rebrand and then obviously 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.So, the best testimonials are the ones that show an outcome.So, a customer in the visitor's 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.So, Gabby here has said, "Since moving to the studio, we've been nominated for a British Podcast Award."Which is a solid uh well, phenomenal outcome, and that's front and center on the hero section.Now, we go down.We've got a different type of social proof, which is client logos.So, we've got the likes of Coca-Cola, we've got Netflix.Huge huge names that offer another type of social proof.So, 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.
Now, 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."In 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, they can see it's tied to an outcome, and then they can make a decision pretty much there and then.The book now call to action is going to be always visible.So, as soon as someone's convinced, they can just go straight through to the booking flow.We go down here.Now, social proof is always best when it's someone else saying it about your business.But, it doesn't mean that you can't put stats in from your perspective.So, 16,000 hours recorded annually.90% client satisfaction rate.These 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.If you can get social proof in and around a call to action, then you're going to 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.So, someone who's not quite convinced can just scroll this wall of social proof if they want.And then there's more of this 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.So, we're backing up the section with someone else's words, which 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.
Now, 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.So, this is essentially UGC, user-generated content.They'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.So, 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.So, 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 going to do wonders for your conversion rate.
So, let's imagine right up at the top, Gabby was replaced with someone else who said, "We experienced a 40% uplift in revenue within 2 weeks after working at the podcast studio."That is going to 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 going to do so much better than someone that just says, "Hey, great service."So, this is something to bear in mind when you're asking your customers for reviews, you can sort of guide them to give better testimonials.E.g., what was the transformation you experienced with our service or our product?Were there any specific outcomes that you had?If so, list them.Add that in.So, 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.It's just if someone's going to 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.All of this builds immediate trust because if we look here, I said this so many times, but no one or very little people are going to be scrolling past the hero section.So, it needs to do all the selling all at once.It needs to say who we are, what we do, a 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, you 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 booknow.So, we have two calls to action with slightly different verbage, 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.Think 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.
The speaker describes how pages should be structured around objections, confidence, and natural next steps rather than brochure-style reading. He shows how Flowcorp and another hybrid site use distinct calls to action to guide different visitor intents without overwhelming them.
Just 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.All right, let's keep going.Most 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 going to read from the top straight through to the bottom.But nobody uses a website that way.People scan, they jump, they scroll past three sections and then go back up.They might spend 40 seconds on your site, or they might spend 4 minutes.And your conversion architecture needs to work the same for all of them.And what 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.
When 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.The 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.You remember that accent color that we talked about earlier?This is where it earns its keep.Size, color, contrast, placement.If 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 it'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.
So, what I'll do is I'll show you the the current site and then I'll explain a little bit about what they do.So, this is the current site here.You can see Flowcorp, you know, you can see the products and the services and the industries etc.And then request a quote.In the hero section, it's just text.Now, it's hard to believe that these guys are in e-commerce because there is no sort of optimization here for conversion.You 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 calls to action here and I'm almost kind of missing this cuz my eye is actually drawn to this H1.But, 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, these guys are big.They are a big company.They work with BP, Nike, Pepsi, Shell, Walmart, Chevron, all of these people."But, 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 want to acquire clients.They wanted e-commerce, 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.So, 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.
So, you'll see that we've done this, even though you can see four calls to action, they are quite uh visually distinct.So, up in the header, we're going to have this on all of our pages, call us and request a quote.If people want to see the products, they can click in and they'll be able to see uh list of products we'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 e-commerce, so add to cart, or you'll have a request a quote.We'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.
If we go back to the homepage, you'll be able to see it here, is we just use different colors.So, you could do one of the buttons as an outline, you could put an icon in it.Whatever it is, just make the buttons visually distinct.Ideally, 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 going to have two calls to action, especially in the hero section, you want the one on the left to be the primary.And those that will be sort of the brightest accent.And the secondary should be a secondary color, something that falls secondary in terms of contrast to our primary button.So, when you come on here, you see, okay, you're drawn.Logo, H1, this is what they do, this is a bit more context.
And then the eyes are immediately drawn down to shop product, which is where we want most of the traffic to go.So, 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 would simply just click get a quote.It'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 going to be shop product.And 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.We 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.So, 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.So, 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 want to learn more about the company, you click on more about us.But, in these sort of top sections, we want to be getting people to exactly where we want them to go, which ideally is going to be to take action on either getting in touch or adding products to thebasket and checking out.So, that's the main point of this hero section.And then we go down here, and we're looking at some feature product.
Each will filter through to the corresponding product.If someone wants to view all products, they can see that.What 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.All 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 done this site a while ago.And 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.And 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.
So, 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.Look 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.So, 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 going to work on its own.Everything 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.You have to try and bring it all together in one package on your site.
A great page doesn't push people towards a decision.It 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.
This section distinguishes useful microinteractions from distracting animation that slows users down or feels performative. The speaker shows subtle motion examples that improve polish without harming usability or conversions.
There'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.The difference is whether the animation serves the visitor's 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.When 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, a form that gives you, you know, a 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 a solid thunk feels more premium than a car door that just rattles.People remember that feeling even if they can't name what actually caused it.
When animation doesn't work, it's usually because someone prioritized showing off over actually serving the visitor.Elements, 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.Every 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 microinteractions are the way to go.One example is 19 Rockwell.Now, I think this is a a really nice website, but if we start to go down, things start to sort of fly in at you like this.I 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.
And if I scroll sort of midway, it has this this strange opacity effect over here.Now, I I have to scroll a few times
until something comes in.Same here.When there's this sort of stop in motion to let the site do its animation, I feel like that detracts from what we really want the site to do in this instance, which is book a tour or scroll downand find out more.Now, not to say that this isn't a lovely site.It is, but I think if we just had a standard scroll, then they would probably have more conversions.Now, I want to show you a few examples of microinteractions on on sites that we've done.So, one here is Dick's Media, so this was for Dick's If 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.So, 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.It's just consistency throughout.If we go down, you can see that we have a number ticker that just subtly comes up.like in your face growing or anything like that.And then that leads us to go down the side, and it's just those really really small things that make a site feel a bit more I hate saying elevated, but it does.It just makes it feel a little bit more premium.As you can see, it's nothing huge.Anyone can do this.It's not necessarily because we're some huge amazing web design agency.Of course we are, but anyone can do this.This is just a really small snippet of CSS.This was a GIF that loops once.So, if you want to add micro interactions onto your site, you can do it with the smallest of things.
Now, 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.So, it's a small micro interaction where we hover, and then we can see that we're actually on uh the logos, and we can stop that scroll.We go down here, and there's a subtle changing of um of the background color, which is really nice.And then you can see again we've got that button animation here.We go down.It's much the same here, just 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.And when you strip the huge animations out of a site, it makes it feel a lot more approachable for 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.So, things that win on awards, for instance, uh super animated, like they look amazing, but I can guarantee they're not getting as many conversions as they should be.And 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.They 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 going to 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.
Does 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.The best animation is the kind that nobody consciously notices, but everyone subconsciously feels it.
The speaker explains how mobile design requires different priorities, stacked layouts, and touch-friendly navigation. He also emphasizes accessibility, contrast, and responsive structure as essential for both users and search engines.
Here'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.Someone on a phone might be in line at a coffee shop.They might be on a bus.They might have 15 seconds before their attention goes elsewhere.The design decisions need to reflect that difference.On mobile, the hierarchy becomes even more critical.You 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 size fingers isn't accidentally tapping the wrong thing three times in a row.The mistake that most people make is design of a desktop first and then just hoping that it translates.
It almost never does.The 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.So 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 and that is built predominantly for people on desktop.But 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.So 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 it's responsive and then we can eventually scale this down like so.So you obviously can preselect your dimensions.So let's say we want to test on iPhone.Now imagine that you came across this site on your phone.How on earth are you meant to use this?
And this is what I mean, it's a bit of a uh 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.Whereas 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 going to be able to use it and your conversions are going to plummet.This is probably a better example than some others because I'm seeing websites that have huge overflow issues.The text will come off to the side.The spacing will just be completely messed up across like the whole site.At 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.So, as an example, this is Tanager.This is one of our clients like everything I've shown.But, 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.So, when it comes to mobile we think, "Okay, how are we going to best utilize the space and how are we going to restructure things?"So, we go into the dev tools, you can see that first off the nav needs to break into a burger menu.If you have anything more than like one nav item, then it's going to start to bleed over the logo and it's just going to 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.You 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.It's just making sure everything is stacked correctly.There's no overflow issues, there's no spacing issues.Everything 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.We just sit this under because it's most important to have the H1 and the call 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, you 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.And you can see that we've made sure that we're using a legible text size here, which is consistent across the whole site.One thing I always try and say to clients, so 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.What 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 going to scroll through.So 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 cuz people don't need to read reams and reams of text of of testimonials.
If 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.So we've got the team, we go down into the footer, everything has the same alignment.You 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.So you can see everything on mobile here is sat to the left except for the um arrows where we would again expect someone's touch point to be.You could put the arrows anywhere to be honest, you could put them in the middle, you could put one to the right here and one to the left here.It's personal preference, this is just what we landed on.But everything else is left aligned, all the text is left aligned.Even 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.So the user knows exactly what they're getting and where everything is going to be.Everything follows the expected pattern for the user.And of course it goes without saying that your site should be accessible too.So making sure everything is where people expect it to be, making sure there is sufficient contrast between text and backgrounds, making sure elements are actually legible.All 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.So 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.It'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.And as a bonus, search engines reward it, too.
The closing section ties all the principles together and argues that websites should be built from business goals, not aesthetics alone. The speaker ends by stressing that every design decision should help the right person take the right action.
Everything I've shown you so far, the layout, the typography, the color, the space, and the animation, all of this is a set of tools.And tools are only as valuable as the thinking behind how you use them.And that's what I want to leave you with because this is the thing that took me the longest to learn and changed my career the most.There are two types of people who build sites.One type asks, "What do you want it to look like?"The 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.You'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.
The 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."That 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.Now I have a design problem worth solving, and the solution might be minimalist, or it might not.The strategy will decide.And here's the thing about AI and templates and every tool that promises to build your website in 10 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.That is strategic thinking.That's what turns a collection of pretty sections into a machine that actually grows a business.
Your website is working 24 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.They'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.If 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?"Not, "Does this look good?"Not, "Would the designer approve this?""Does it work?"Because the best websites I've ever built weren't even the prettiest.They 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.So, click here and I'll see you there.