Brief Summary
This video discusses how to improve landing page hero sections to boost conversion rates. The video covers key elements like typeframing, the eye gaze principle, and CTA color matching. It also highlights common mistakes in modern web design, such as using AI-generated images and showcasing apps in the hero section.
- Key Takeaways:
- Focus on the hero section as it's crucial for convincing visitors to click the CTA.
- Use typeframing to create a strong copy foundation before adding visuals.
- Employ the eye gaze principle to guide visitors' attention towards the CTA.
- Utilize CTA color matching to create a cohesive and consistent design.
- Avoid using app images in the hero section as they don't effectively communicate the value proposition.
The video starts by highlighting the issue of modern web designs negatively impacting conversion rates. The speaker analyzed over 500 hours of hotjar recordings and hundreds of designs, concluding that many designs are losing their way. The video aims to provide guidance on boosting landing page hero section conversions using typeframing and other methods. It also addresses red flags in modern design, such as the overuse of AI and the detrimental effect of app designs in the hero section.
The hero section is the most important part of a website as it needs to convince visitors to click the CTA. The speaker emphasizes that the hero section should be 90% effective in persuading visitors, while the remaining 10% can be addressed through clearing doubts sections or other supporting content. A weak hero section can lead to lost clients, highlighting its crucial role in conversion.
Clearing doubts sections can be used to provide social proof, examples of use, or other relevant information to address potential concerns. These sections complement the hero section, working together to secure a confirmed sale. The video emphasizes the importance of a strong hero section as the foundation for a successful conversion funnel.
The video outlines three main types of hero sections:
- Centered Content: This type features centered content at the top with an overlapping visual that incorporates the content.
- Right-Side Key Visual: This type places the main key visual on the right side of the hero section.
- Key Visual Below: This type positions the main key visual clearly below the content elements.
The speaker acknowledges the common misconception that the third type is simply a large app image placed below the copy, which is often ineffective.
When designing a hero section, it's essential to divide it into two main sections: the key visual section and the text content section. The text content can be further divided into a kicker, the main headline, a description, and CTA buttons. The kicker serves as social proof, grounding the main headline and making it more persuasive. The headline should concisely communicate the problem being solved and why visitors should care. The description provides additional details about the solution.
The video recommends using a single CTA button for most landing pages. However, for products with higher stakes, a secondary button can be added to provide additional information, such as case studies or a demo. The primary button focuses on usefulness proof, while the secondary button aims to reduce friction by offering a less committing option.
Typeframing is a technique that involves starting with the copy and perfecting it before adding visuals. This approach ensures that the copy is strong and well-structured, providing a solid foundation for the design. The speaker emphasizes that typeframing is more effective than low-fidelity wireframes for large marketing teams, as it allows them to visualize the copy and understand the hierarchy more easily.
The video criticizes the trend of using AI-generated images in web design. The speaker argues that these images often lack relevance to the product and are used solely for aesthetic purposes. This approach prioritizes visual appeal over effective communication, resulting in non-converting websites.
The video emphasizes the importance of using key visuals that resonate with the target audience. The speaker suggests using images of people to create an emotional connection and encourage identification. The choice of person should be carefully considered to match the target audience.
The eye gaze principle is a primal instinct that compels us to follow the gaze of others. When using images of people in hero sections, it's crucial to consider the direction of their gaze. If the person is looking directly at the viewer, attention will be drawn to their eyes. However, if the person is looking towards the CTA, it naturally guides the viewer's attention towards the copy and the call to action.
On mobile devices, the eye gaze principle can be further enhanced by using an image of a person looking up from below at the CTA. This creates a direct visual connection between the person and the call to action, encouraging the viewer to engage with the copy.
The video highlights the importance of using an optical guide to further direct the viewer's attention towards the CTA. This can be achieved by creating a natural diagonal line with the text, guiding the eye down towards the copy.
CTA color matching is a technique that involves recoloring a piece of clothing in the hero section image to a color similar to the main CTA. This creates a cohesive and consistent design, visually connecting the image to the call to action. The speaker emphasizes the importance of maintaining a consistent color palette throughout the design, avoiding random color choices.
The video summarizes the key elements of a high-converting hero section:
- Emotional Connection: The visual should create an emotional connection with the viewer.
- Eye Gaze Principle: The person in the image should be looking towards the CTA.
- Optical Guide: The text should create a natural diagonal line guiding the eye towards the copy.
- CTA Color Matching: A piece of clothing should be recolored to match the CTA color.
- Clear Copy: The copy should be clear and concise, starting with a social proof kicker and a strong headline.
- Problem Definition: The headline should clearly state the problem being solved, and the description should provide further details.
- Usefulness Proof: The CTA button should provide evidence of the product's usefulness, such as case studies or a demo.
- Friction Reduction: A secondary button can be used to offer a less committing option, reducing friction for the user.
The video argues that using app images in the hero section is often a bad idea for conversions. Most visitors are unfamiliar with the app and don't care about its appearance. They are primarily interested in how the app solves their problems. Instead of showcasing the app itself, the video recommends focusing on showing a person using the app to solve a specific problem.
The video concludes by encouraging viewers to learn more about web design through landing page challenges and web design courses offered by the speaker. The speaker emphasizes the importance of staying informed about design trends and continuously improving website design skills.
Summarize any YouTube video in seconds
Get summaries like this one for any video, in your language, with the free Summ app.
Transcript
Full transcript of “Your brain LOVES Websites designed THIS way”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:00 most modern designs will cause your sales to fall not increase lot don't watch I don't I analyzed over 500 hours of hotjo recordings and went through a couple hundred different designs from the community I think that the future of web design is kind of scary because it has lost its way today I'll show you how to boost conversions of your landing page hero sections B time we'll use type Framing and other methods to step by step go from low to high conversion then I'll show you some red flags in modern design the overuse of AI destroying sales and at the end I'll show you why having an app design in the hero section
0:46 is often a very very bad idea the most important part of your website is the hero section because it has to be 90% there in convincing people to actually click that button and by then you solve the following 10% by having a clearing doubt section or a group of sections underneath but if your hero section is not that convincing then you probably already lost the client depending on the product clearing doubts can be social proof examples of use or anything else that comes to mind for the particular project when you merge the 90% with the extra 10% from clearing doubts you have have a confirmed sale this is the loop that you
1:33 should be aiming for there are three main ways of doing the hero section one is with a centered content on the top and an overlapping visual that contains the content inside it one with the main key visual on the right side and one with the main key visual clearly below the element and I know what you're thinking the last one is likely just a huge sass app of some kind shown right under the copy because this is going to sell super great right the app looks nice well no but we'll get to that at the end of the video when looking at a header you need to start by dividing it into the two main sections one is the key visual section and the other one is the text content and the
2:20 CTA buttons the text content then can be divided into a kicker which is that little small text under the main headline the main headline a little bit of a description and a button or two the kicker is usually used as some kind of a social proof before people read your main headline so it grounds it more in reality and makes it easier to make a decision then the headline is all about quickly and efficiently communicating what problem are you solving and why should they care and if the headline is convincing it sometimes doesn't even need that extra text but in most cases that extra little text below the headline is really good to to add more detail to how you're solving that problem if you want to improve your product and work directly with me reach
3:07 out to asset square.com when it comes to buttons you're usually just going to need one in this case when the stakes are higher and it's harder to install a tool or it's more expensive you can add a secondary button that leads to case studies of the previous users using it and a button to try a demo in this case the first button is basically usefulness proof by others and the second button is there to remove friction because obviously if the second button just said pay us or buy it now then it would be pretty big friction right if you haven't subscribed yet or liked the video I suggest you do that now and this is the part that you should always start your landing pages with don't think about the visual at this point at all just start
3:54 with the copy and make it perfect or as close to perfect as possible and then when you feel like you nailed it you can start adding the graphics this technique of starting with the copy but with proper sizes and hierarchy is called type Framing and I invented it a couple years ago when working with large marketing teams of big corporations it has proven that they don't really understand low Fidelity wireframes as much but if the copy seems like it's a real thing it's a lot easier for them to based on that hierarchy come up with some better Solutions and it's also better for you because that way you can pick the visual to match the copy not the other way around I've been a designer for the last 25 years and I was thinking that with AI tools we get
4:41 augmented and not made even dumber than we are what many designers do right now and it is a plague is that they take an AI generated image and it's either some pretty weird scene that doesn't have anything to do with the product or some random blob and then they add the same kind of copy with the same kind of boring useless nonsense words on it and the copy is there just to make it look good yeah let me repeat that the text is there just to make it look good it's optically good because it has the right number of letters and it just kind of flows well with the visual if you take this approach to landing pages you might have a nice painting to hang on your wall but
5:27 you won't have a converting website because these websites are not going to convert 99% of businesses resonate with people in the hero section the trends are saying that nah let's not add people let's just add some gradient shapes or liting effects this has nothing to do with amplifying the message of what you're trying to sell or deliver and it's just a distraction when seeing a face of a person you can naturally feel like you're in their shoes already you can identify with them them a little bit more but it obviously depends what kind of a person you pick it can't be a random image it has to match the target audience so this lady here is using that tool that automatically forwards her
6:12 call and we can think of ourselves being in that situation as well and when picking people for the header you need to remember about the Gaze principle which is a primal Instinct that we have that we naturally want to follow the Gaze of other people so if a person in the photo is looking directly at you most of our attention is going to focus on the person's eyes and if the person is looking towards the CTA then we naturally follow the Gaze and we focus a lot more on the copy and on the action and on mobile change the photo to the same person but looking up from below at the CTA in this case the Gaze principle is fully in effect the person
6:59 is looking at the copy and it's directly influencing us to look at the copy as well but there's also something else notice how the right edge of the text forms a natural diagonal line going down towards the copy it's an optical guide and if the text was a more jugged Edge it won't have that same effect this is like a natural funnel that guides our eyes down towards the copy from The Gaze of the person and then there is also something that's been our secret for a while now CTA color matching let's say you found the right person or the right photo and you paste it in what we do is we recolor one piece of clothing of that person to a color similar in Hue to the main CTA it's called CTA color matching
7:47 and it's a technique that allows us for a more cohesive and consistent approach to the whole design there are many designs in which people just pick a random photo and have a complete completely out there different color palette for the person no it needs to all match and blend in and work together well we usually recolor by just adding a vector mask on top that way we can modify that color easily inside our design tool if something changes with the main CTA colors on the website when doing this keep all the other clothing elements muted colors so if they are white like the skirt in this case let's keep that white because if we now color the entire clothing blue it's going to
8:34 look more like a uniform and that's not the look that we want we want just one element usually it's the top our visual uses an emotional connection and then subconsciously connects to the CTA via color matching we use the Gaze principle to guide the eyes of the people towards the text and the ctas and an optical guide to guide the eyes further down towards the main button the copy is clear and starts with a social proof kicker and then a very very clear headline that tells people what exactly the problem that is going to be solved by the tool that problem is then thoroughly defined and explained in the smaller text because this is an expensive product and it's difficult to install it we prefer to show case
9:20 studies of people that are using it already to prove the usefulness and then remove the friction by trying an online demo first before for a full expensive install on other cases you can use just a single button that goes directly to the payments it's about making the user the hero of the journey and providing them with all the tools for them to be as heroic as possible now let's talk hero sections with a big app image as the hero and why they are potentially a very bad thing for conversions this can work in some limited scenarios but for most people coming to your website they don't know your app yet and they don't really care how it looks like that's the truth I know it can be harsh I know that you love your app design and you want to
10:06 showcas it front and center but really most people don't care most people want to know how it's going to solve their problem and they're not going to decipher it from the app itself even if you add those little overlays showing that something happened in the app nobody has time to decipher complex images like that instead focus on showing a person and how your app is solving a problem you can cut out one little window or panel or model from your app and show it next to that person and then obviously in the sections below you can show the entire app to show that it's a robust interface with a lot of features but not here not in the hero and if you want to learn and practice how to design the best possible websites
10:52 you can check out our landing page challenges at square one and my bestselling web design courses that are also available there next week I think we really need to look at some of the design Trends don't you think
