1:05:35Sabri Suby · Tutorial
Landing Page Tutorial: The 2026 Free Course for Beginners
Sixty-five minutes, sixteen steps, and a 17-part page skeleton drawn from 2,000 funnels built across a thousand niches.
October 7thThe argument in one line.
A hero photo or illustration only helps conversion when its subject's gaze points toward the headline and CTA; anything that distracts, overcrowds, or reads as generic AI filler gets mentally filtered out like a banner ad.
Read if. Skip if.
READ IF YOU ARE…
- A designer or founder deciding whether to put a photo, illustration, or AI-generated person in a landing page hero section.
- Someone who already uses a face or illustration on a hero section and wants to know if it's hurting conversion.
- A marketer evaluating whether an AI-generated hero image is safe to ship.
SKIP IF…
- You're looking for headline or copywriting advice — this is purely about the visual next to the text.
- Your hero section has no visual at all and you're not planning to add one.
The full version, fast.
A hero image is never neutral: a real photo makes the brain skip your headline and tunnel-vision onto the person's eyes, judging trust and realness before it reads a word of copy. Illustrations switch off that judgment and read as a general idea instead, which is why simplified, slightly wonky art often connects better than a polished, realistic one. The deciding factor is the gaze principle: viewers follow where a pictured person looks, so a subject glancing at the headline or CTA pulls attention there, while one looking away pulls it off the page entirely. The brain also applies banner blindness to recycled stock photos, isometric illustrations, and uncanny AI faces, filtering them out as filler regardless of how polished they look.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:25
01 · Faces on websites improve conversion?
Cold open: a person in the hero section can help, but the next decision matters more. Promises a secret evaluation technique for people on websites.
00:25 – 01:01
02 · Key visuals hurt conversion?
For most products the headline and CTA do the persuading; a visual next to them either amplifies the message or distracts from it, because humans react to faces emotionally.
01:01 – 01:19
03 · Stock vs real photos?
A stock photo, a real photo, and an illustration each trigger a different process in the brain, not just a different look.
01:19 – 01:47
04 · What happens when a face is in the hero?
A real photo makes the brain skip the text and tunnel-vision onto the person's eyes, like meeting a stranger.
01:47 – 02:05
05 · Questions our brain asks
Locked onto the face, the brain judges trust, similarity, threat, and whether the person is even real; swapping to an illustration turns that judgment off.
02:05 – 03:28
06 · Illustrations of people?
Why tech companies (Notion included) converged on the same illustration style, and why exaggerated, simplified or wonky illustration can connect better than a detailed, realistic one.
03:28 – 04:46
07 · Gaze principle
Viewers focus on a pictured subject's eyes, then follow their gaze; aiming that gaze at the headline or CTA can redirect attention there. Teases one rule that sits above all of this.
04:46 – 10:09
08 · Example analysis
Teardown of real hero sections from the Pageformance catalog: overloaded isometric illustrations, a too-specific realistic family illustration, wonky multi-person art, an overcrowded hero, reMarkable's correct use of the gaze principle, a gaze that pulls attention off the page, an overlay-heavy photo that reads as too polished/stock, and a recycled stock-photo model diluting trust across unrelated brands.
10:09 – 12:12
09 · The thing everyone does wrong
Banner blindness extends past ad-shaped boxes: the brain auto-filters overused stock photos, isometric illustrations, and uncanny-valley AI images as filler, which can kill conversion no matter how polished the image looks.
12:12 – 12:42
10 · Using AI the right way?
The problem with AI hero images isn't beauty, it's a subconscious 'off' style viewers register even when a designer judges it good enough to ship; that stacks with general AI fatigue.
Lines worth screenshotting.
- A real photo in a hero section makes the brain skip the headline and CTA and tunnel-vision onto the person's eyes instead.
- Swapping a human photo for an illustration turns off the brain's trust-and-threat evaluation and replaces it with a general, less personal read.
- Exaggerated, simplified illustration often converts better than a polished one, because viewers project themselves onto a loose caricature more easily than onto a specific-looking person.
- The more realistic and detailed an illustrated character gets, the fewer viewers can see themselves in it.
- Viewers' eyes find a pictured person's eyes first, then automatically follow that person's gaze to see what they're looking at.
- Pointing a hero photo's gaze at the headline or CTA redirects attention there instead of letting it dead-end on the face.
- Reusing the same stock-photo model across unrelated industries dilutes trust in all of them, since repeat viewers recognize the face as generic filler.
- The brain applies banner blindness to more than ad-shaped boxes, auto-filtering stock photos, isometric illustrations, and uncanny AI faces as filler it stops processing.
- An AI-generated hero image can look polished and still fail, because viewers register a subconscious 'off' style the designer judged good enough to ship.
- AI fatigue stacks with any slightly-wrong visual detail, raising the cognitive load a visitor has to clear before they trust the page enough to buy.
Why most hero-section faces hurt conversion
HERO VISUAL RULES
A hero photo, illustration, or AI image either amplifies your headline or gets filtered out as cognitive filler, and gaze direction decides which one happens.
02Key visuals hurt conversion?
- For most landing pages the headline and CTA do the persuading, so a hero visual's only job is to amplify that message, not distract from it.
03Stock vs real photos?
- A real photo, a stock photo, and an illustration each trigger a different process in the brain, so the choice isn't cosmetic.
04What happens when a face is in the hero?
- A real human photo makes the brain skip the headline and CTA entirely and tunnel-vision onto the person's eyes instead, as if meeting a stranger.
- Once locked on the face, the brain starts unconsciously judging trust, similarity, threat, and whether the person is even real.
05Questions our brain asks
- Swapping a photo for an illustration turns off that emotional face-evaluation reflex, so the brain reads the general idea of a person instead of judging an individual, which is why so many tech companies converged on the same illustration style.
06Illustrations of people?
- Exaggerated illustration (tiny heads, oversized hands, long limbs) can outperform an accurate drawing because viewers project themselves onto a loose caricature more easily than onto a specific-looking person.
- The more realistic and detailed an illustrated character gets, the harder it is for any individual viewer to see themselves in it, so extra detail works against connection past a certain point.
07Gaze principle
- Viewers' eyes land on a pictured person's eyes first, then automatically follow that person's gaze to see what they're looking at.
- Pointing the subject's gaze at the headline or CTA redirects attention there instead of letting it dead-end on the face.
08Example analysis
- An isometric illustration packed with multiple scenes and labeled elements creates cognitive overload that no hero visual should add.
- reMarkable's hero works because the model's gaze points directly at the words 'made for thinking,' connecting the pose to the headline.
- Reusing the same stock-photo person across unrelated industries dilutes trust in all of them, since repeat viewers recognize the face as generic filler.
09The thing everyone does wrong
- The brain applies banner blindness to more than ad-shaped boxes: it also auto-filters stock photos, isometric illustrations, and uncanny-valley images as filler and stops processing them.
- An AI-generated hero image that falls into that filler category breaks a visitor's processing of the page and can cost the sale, regardless of how polished the image looks.
10Using AI the right way?
- The problem with AI hero images isn't beauty, it's a subconscious 'off' style viewers register even when a designer judges the image good enough to ship.
- That slightly-wrong feeling stacks with general AI fatigue, raising the cognitive load a visitor pays before they'll trust the page enough to buy.
Terms worth knowing.
- Gaze principle
- The tendency of viewers to first focus on a pictured person's eyes, then follow the direction that person is looking, which designers can use to redirect attention toward a headline or CTA.
- Banner blindness
- The brain's learned habit of automatically ignoring shapes and layouts that resemble ads; the video argues it also applies to overused stock photos, isometric illustrations, and AI-generated faces.
- Uncanny valley
- The unsettling feeling produced by an image of a person that is almost, but not quite, realistic, which makes AI-generated or overly polished faces feel subtly wrong.
- Hero section
- The large visual block at the top of a landing page, typically containing the headline, a call-to-action button, and a supporting image.
Things they pointed at.
Lines you could clip.
00:33
“the most important part is the headline and the CTA and how they frame a problem and provide a solution”
01:40
“it's like they're meeting a stranger”
03:00
“there is a very thin line between caricature and something that works”
10:15
“the brain categorizes things, it's like a classification engine”
11:27
“it's not about how beautiful it looks. It's about the style.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphor
It makes a huge difference if you put a person in your website's hero section. But the next decision after that can make or break the website. Today I'm gonna tell you a secret evaluation technique for people on websites.
We've already established that for most products you don't even need a visual. The most important part is the headline and the cta and how they frame a problem and provide a solution this is what convinces people to click then a visual next to that can either amplify the message or completely distract the user we as humans naturally react emotionally to faces of other people by looking at a face we can connect to it on that level But should it be a stock photo, a real photo or maybe an illustration?
You may think it doesn't matter, but there are three different things going on in the brain for each one of them. Let's say you put a photo of a person in the hero section. what the brain does in that scenario is that it completely skips the text so it doesn't care about your problem solution and your get started button anymore it cares about the person the whole focus goes to the eyes of that person the brain finds the face and basically so skips everything else and starts evaluating that face do i trust that person are they like me are they a threat or are they friendly and are they even real that last question actually kills a lot of websites and i'm gonna tell you about how it does that in a minute but when you swap the photo for an illustration something strange happens the brain still sees a face but it stops doing that emotional connection and it stops judging that illustration as a person instead it reads the general idea of it that's kind of why so many tech companies switch to illustrations in recent years notion being the prime example
and also why so many of them look exactly the same we'll get to that too but then there are the weird illustrations tiny heads giant hands distorted proportions or legs that are at least five times too long this is actually a trick and if done right it can work better than an accurate drawing but when it's done wrong it can completely mess up the website people will just leave and there is a very thin line between caricature and something that works the more realistic and detailed the illustration the less people can connect with it because they are trying to find themselves in the character and the more detail it has then it's more likely then it's just not them anymore but when the illustration is simplified or slightly wonky or weird it can still land and it can still have that connection no matter how the user looks when it comes to faces there is also the gaze principle so we naturally focus on the eyes of the person in the photo or the illustration but if we have that person looking to a side or
towards something we naturally want to follow their gaze and we want to know what they're looking at because it might be something rewarding or worth looking at or it might be some kind of danger this is important because we first focus on the eyes but if you use the gaze principle correctly you can refocus the user to look at the headline or the cta or both there is one rule that sits above all of that something that can completely break and mess up the design kill the conversion and most people fail at it miserably probably because of AI overuse too.
I'm saving it for the end of the video because it only makes sense once you've seen the examples that we're going to go through. So watch until the very end and you'll be in less than 1 % of designers and startup founders that get it right. Let's look at some examples of websites from the Pitchformance catalog and I'm going to go through every single one and explain what exactly is going on in the hero section.
I know we were supposed to be doing faces, but I want to stress something out very quickly first. This isometric illustration is a completely overwhelming and impossible to process cognitive overload. This doesn't provide anything useful or of value to the product.
And seeing how the copy on this website looks, it's not really helping either way. Here we have an almost realistic style because the proportions are mostly fine. But the problem with that is that it assumes a very specific kind of family, which might be the target demographic for this startup or this product.
But for anybody that doesn't look exactly like these people, it's actually going to be a lot harder to connect with this. Now, here we have this wonky off proportion illustrations of people. And this actually can work because there are different kinds of people.
So there is a big chance that you can identify with one of them. But at the same time, having that many people, that many faces is pretty overwhelming cognitively because you need to process all that. So they tried to solve it by adding.
pretty big white space on the side of the text so it's not too convoluted and complex and that might be a good idea. And this is an example of a completely unprocessable hero section. It has so many details and so many characters and so many elements all crammed into a very confined space that it's impossible to even understand what's going on here.
your focus jumps from one face to the other and you're not really sure what the company even does it's tiring now this says it's trusted by thousands of people just like you but then it shows a very specific person you might not be similar to that person and while the photo and the structure of this header is actually pleasing visually it's pretty nice looking It's not necessarily working, especially since she's looking somewhere into the distance, to the side.
So once you focus on that big smile and the eyes, you completely ignore the text on the left. See what Remarkable did there? You focus on the face first, obviously.
But then you follow the gaze of this person and you see that it says made for thinking exactly where he's looking. And then you make the connection that he has a pose that is thinking. Then there is some scribbles and some kind of connection to the pen right next to the image and only slightly visible device in the bottom left corner.
This photo doesn't look stock either.
possibly taken as a photo session directly for that brand and that shows it doesn't have that feel of being artificial or forced and this is a very good example of a website header that makes sense but obviously some things could have been improved like a blue cta on a lighter blue background is not that perfect but overall this is a very good use of the gaze principle and good quality photos Let's ignore the fact that there is no CTA here.
But the main problem is that the person is looking away from the text and you kind of instinctively try to follow the gaze and you bounce off the left side or left edge of the browser. So you're not looking at the text or the copy at all and it's very hard to actually pay attention to what it's saying. This style with little overlays and elements all over or around the character has been popular for a couple years but I believe this is now going away because this photo is too polished, too perfect and it looks very stock -like or AI generated which makes it a lot harder to trust the product.
And that's even more visible here. If you've been a designer for a while you probably know this guy.
better looking photo libraries on i stock photo or other stock photo sites and we've been using photos of him and other people a couple years ago quite a lot but this has now been oversaturated so if you use that same person that has been on an ad for a meat industry product and then for a car and then for a sus startup you're actually diluting your brand and it's hurting it.
And then on top of that, obviously the metric theater, which is like a lot of different shapes, sizes, graphs and charts and whatever, which also doesn't provide any kind of context. Plus the person is looking directly in the center. The chaos around them makes you not want to look at anything else but his eyes.
So in this case, the CTA and the headline almost get ignored. And they're not really connected to the image either way anyway. So in this case just removing the photo of the guy and removing all of the overlays would have been way better for the website.
if they improved the copy a little bit. Okay, here is the big reveal. Remember banner blindness?
That basically means that if a shape on a website like a button is big enough to resemble a banner ad, our brain is gonna naturally filter that out because it understands that some shapes and forms and proportions are ads and we don't want ads so we kind of ignore it. There is a version of that happening with visuals too.
and it's very important to know the brain categorizes things and some things get classified as filler or to filter out very quickly for example typical overused stock photos isometric illustrations and things that look uncanny valley like which means a lot of the AI generated hero visuals fall exactly into that category and they actually break the immersion and they break the processing of your website which can lead to people quitting the website not paying for what you're selling and completely destroying the business idea if you don't put thought into what AI generates for you you're destroying your business with it and it's not about how beautiful it looks It's about the style.
the things that you subconsciously understand about the image that are not quite right but as designers that are not used to this yet to be able to generate beautiful looking things very quickly we often purposefully ignore these we accept something because that looks good enough and then it goes live and it has the opposite effect on people because if there are things that are slightly off about an image or things that feel unreal for whatever reason even similarity to something else that they've seen already like a stock photo then it ups the cognitive load and people are not happy with what you're selling they're not happy with your website and they're not gonna buy from you and now the ai fatigue goes on top of that because there is still a certain style to ai images and it's very hard to get rid of it.
You can get rid of it and we'll be covering all that into a new chapter of the SquareBlank Blueprint that's coming in the next few weeks. So stay tuned and make sure your visuals are there to amplify the copy and not just to fill space and overload your users. Have a beautiful day.
The Hook
The bait, then the rug-pull.
Malewicz opens with a promise: putting a face in your hero section can help, but the real decision, the one that wrecks most websites, comes right after. He pulls real examples from a database of 4,500 landing pages to show exactly where that decision goes wrong.
Named ideas worth stealing.
03:28concept
Gaze Principle
Viewers' eyes land on a pictured subject's eyes first, then automatically follow the direction of that subject's gaze. Aiming the gaze at the headline or CTA pulls attention there instead of letting it dead-end on the face.
Steal forany landing page hero with a photographed or illustrated person
10:09concept
Visual Banner Blindness
- Overused stock photos
- Isometric illustrations
- Uncanny-valley AI faces
The brain classifies certain visual styles as ad-like filler, the same reflex that makes it ignore banner-shaped ads, and stops processing them, which can tank conversion no matter how polished the image is.
Steal forauditing a hero image before launch
How they asked for the click.
VERBAL ASK
12:12product
“we'll be covering all that into a new chapter of the SquareBlack Blueprint that's coming in the next few weeks, so stay tuned”
Soft, low-pressure mention of his own paid community at the very end, framed as 'more coming' rather than a hard sell; no explicit link or price given on-screen.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
