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 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 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 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 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 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 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 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 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 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 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 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 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 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 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
