Your brain HATES these websites

Summary

Highlights

• The overuse of AI in design can destroy sales rather than help them! 🤖⚠️
• Hero sections should convince 90% of your customers to click! 💪
• Type Framing improves the readability of your website's content! 📚
• Human imagery can lead to better emotional connections and conversions! 🧑↔️
• A well-placed CTA and matching color schemes can be game-changers! 🎨✨

Key Takeaways

• Modern designs might hinder sales instead of boosting them! 😱
• The hero section is crucial for conversion success! 🌟
• Type Framing can enhance your website's effectiveness! 📋
• Avoid using AI images that don't relate to your product for better results! 🚫
• Make people the heroes, not your app design! 🦸‍♂️

Overview

Chapters

• 00:00 - 00:30: Introduction and Future of Web Design This chapter discusses the potential pitfalls of modern web design, emphasizing that many current designs may actually decrease sales rather than enhance them. The speaker has analyzed over 500 hours of recordings and hundreds of community designs to support their viewpoint. They express concern that web design has deviated from its core principles, making the future seem daunting. The chapter promises to provide insights on how to improve conversion rates in landing page hero sections.
• 00:30 - 01:30: Boosting Conversions with Type Framing Chapter Title: Boosting Conversions with Type Framing The chapter covers techniques such as framing to increase conversion rates step by step. It warns about the overuse of AI in modern design, which can harm sales, and highlights the potential downsides of featuring app designs in the hero section of websites. The importance of the hero section is emphasized as it plays a critical role in convincing visitors to engage with the site by clicking desired buttons.
• 01:30 - 03:00: Importance of Hero Section The chapter discusses the significance of the 'hero section' on a website, emphasizing that if this section is not convincing, it can lead to losing potential clients. The hero section is crucial as it captures 90% of the attention needed to engage users. The remaining 10% is addressed through sections that clear doubts, which can include social proof, usage examples, and other relevant information. The combination of a strong hero section and effective doubt-clearing strategies leads to better engagement with the audience.
• 03:00 - 04:30: Dividing Header into Key Sections This chapter discusses the various methods to layout a hero section on a webpage. It identifies three primary layouts: one with centered content at the top incorporating an overlapping visual, another with the main key visual on the right side, and a third with the visual placed clearly below the element. The focus is on understanding and applying these layouts effectively in design.
• 04:30 - 06:00: Improving Product with Button Strategy The chapter focuses on improving a product through strategic use of buttons. It starts with the importance of the app's appearance, even though it may not look ideal at the moment. The emphasis is on the layout of the header, which should be divided into two main sections: the key visual section and the text content with CTA (Call to Action) buttons. Furthermore, the text content itself can be subdivided into a 'kicker' (a small text under the main headline) and the main headline itself.
• 06:00 - 08:30: Type Framing Technique The chapter titled 'Type Framing Technique' discusses the strategic use of kickers and headlines in communication. Kickers serve as a form of social proof, often presented as a brief introductory statement or button, that grounds the message in reality and aids the audience in decision-making. The headline itself is a concise summary that clearly states the problem being addressed and why it matters to the audience. Though a strong headline might stand alone, it is generally beneficial to add supplementary text below the headline to enhance the message.
• 08:30 - 11:30: AI and Modern Design Pitfalls The chapter discusses strategies for improving product engagement and design, particularly when it comes to using buttons in user interfaces. For simpler tools, a single button suffices, but for more complex or costly installations, additional buttons are recommended. These may include one that directs users to case studies of previous users to establish credibility and another offering a demo to showcase the product's utility directly. This dual approach helps in addressing user hesitations and improving conversion rates.
• 11:30 - 14:30: Gaze Principle and CTA Color Matching This chapter discusses the importance of minimizing friction on landing pages, especially concerning call-to-action (CTA) buttons. The speaker emphasizes starting with effective copywriting before focusing on the visual elements. The example given suggests that a direct CTA like 'buy it now' could introduce friction if not appropriately aligned with the user's journey, such as subscribing or liking a video first. The key takeaway is to refine the copy to near perfection before considering the design aspects.
• 14:30 - 17:30: Hero Sections with App Images The technique of 'Type Framing,' invented by the speaker while working with large marketing teams, involves starting with real copy in proper sizes and hierarchy for designing hero sections with app images. This approach, unlike low fidelity wireframes, is more comprehensible for big corporations' teams. It facilitates effective solution development based on realistic-appearing copy and benefits designers by providing a clearer starting point.
• 17:30 - 18:30: Conclusion and Call to Action The chapter titled 'Conclusion and Call to Action' emphasizes the importance of aligning visual elements with textual content, rather than the reverse. The speaker reflects on their 25 years of experience as a designer, expressing concern about the misuse of AI tools. They argue that AI should enhance our capabilities rather than diminish them. A criticism is directed towards current design practices where designers often use AI-generated images that do not relate to the product or are nonsensical, which the speaker refers to as a widespread issue or 'plague'.

Your brain HATES these websites Transcription

• 00:00 - 00:30 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
• 00:30 - 01:00 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
• 01:00 - 01:30 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
• 01:30 - 02:00 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
• 02:00 - 02:30 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
• 02:30 - 03:00 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
• 03:00 - 03:30 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
• 03:30 - 04:00 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
• 04:00 - 04:30 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
• 04:30 - 05:00 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
• 05:00 - 05:30 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
• 05:30 - 06:00 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
• 06:00 - 06:30 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
• 06:30 - 07:00 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
• 07:00 - 07:30 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
• 07:30 - 08:00 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
• 08:00 - 08:30 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
• 08:30 - 09:00 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
• 09:00 - 09:30 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
• 09:30 - 10:00 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
• 10:00 - 10:30 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
• 10:30 - 11:00 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
• 11:00 - 11:30 we really need to look at some of the design Trends don't you think