The Perfect Landing Page Structure (With Examples)

today we're going to go over the perfect landing page structure from top to bottom every element above the fold and every element below the fold we're going over everything so let's jump right into it [Music] hey guys i'm izzy from flux and the other day i came across a really well more like the other month came across a really really cool article um from a marketing newsletter that i'm subscribed to called marketing examples and the articles titled my step-by-step guide to landing pages that convert and so you may be thinking you know first you may be thinking marketing and design two totally different things i actually think there's a lot of crossover i think they're both trying to accomplish the same thing which is make a product as attractive as possible to the user but on top of that as i was reading this article in particular i thought every web designer on earth needs to read and be aware of this article and as you can see it's quite comprehensive and so actually you're not even going to read this article because i've extracted all the important pieces of information and going to deliver them to you in this video so let's jump right into it so we're not going to spend too much time on each one because there's there's literally 10 10 different elements that we're going to go over and the first one one of the most important especially when it comes to first impressions is your title slash headline and and this is where you you're basically going to explain the value that you provide and so a good example here is to just uh basically explain what you do and mut the muzzle app does just that so muzzle a simple mac app to silence embarrassing notifications while screen sharing and if you want a good laugh then definitely visit this website and look at the hilarious fake notifications that appear on the side here but so this is a great example of a solid headline i'd make it of course more prominent if we're talking visually but the actual message is good so after you've got the headline you need the subtitle or sub head and this is where you're going to elaborate on how you're going to deliver that value and a good example of that would be dormio so their headline reads restful nights are a sip away and so how do you how do we accomplish these restful nights well a calming and sleep inducing tea to help you unwind and drift to sleep so restful nights are the value and how you accomplish that is via the t and its effects are it's calming and induces sleep so subtitle elaborate on how you deliver that initial that value that you that you communicate in the headline after the uh the subhead or the subtitle you have the call to action and the whole point you know the main purpose of the the call to action is to basically guide the user to tell them okay this is this is what comes next this is what you should be this is the easiest next step in my opinion there's two really good routes that you can take in terms of in terms of call to action calls to action i'll show you two examples here first example is a what they call marketing a call to value an exam an example of a call to value is on the actual flux website it was the first one that came to mind is so our cta reads start learning um so there's value there instead of you know a regular call to action like sign up or you know learn more or something like um and then the other one is sort of called to value and have objection handling um and these are these are usually a little longer and zencaster is a great example here or is a great example of this kind of button and this is where you literally handle objections within the button copy so drop try zencaster for free there's literally no risk um and the four free part is the um the objection handling so next i think we're on number four could be number three number four but anyways we have social proof and a lot of people forget to include this above the fold i think it can be very impactful to include above the fold because you're building immediate credibility you're immediately leveraging what's called the cognitive bias called the bandwagon effect a great example of this is on the privy website privy.com and if you look right under the the subtitle shopify five stars 18 000 plus reviews so immediate credibility right um and so when we talk social proof it doesn't have to be a long testimonial or a bunch of icons or something like that it could it could be something super brief in um like a rating and the amount of the amount of reviews um so social this is social proof above the fold work we'll jump to social proof a different kind of social proof below the fold in a bit the fifth element is the visual this is another one that people don't put much thought into i find and maybe actually i should reword that they do put much a lot of thought into it so they'll have like the super beautiful fancy illustrations or or 3d objects and something super fancy whereas users actually prefer to just see your product in action they just want to see your product working and so a great example of this is on the smiledirectclub.ca website i guess this is some sort of uh teeth straightening product and so you can see people using it you can see the product in action and the the results and you can see just the actual physical product so very important i would highly recommend if you have a mobile app or um you know any kind of sas show the actual product being used users want to see that they prefer that to beautiful illustrations or you know like i said 3d objects patterns etc you can include those but at the forefront should be your product in action so we've gone over everything above the fold now let's jump into the elements that appear below the fold and by the way i didn't define the fold but that's you know anything above the fold is what you immediately see when the page loads it's everything that you see without having to scroll and so now we're going to go over everything below the fold and the first thing is the features and objections and this is where you basically justify all that value everything that you've said in the headline and the the subtitle you're basically justifying you're explaining how things work you're handling objections and you're showing more of how the product you're showing more of the product in action and a great example of this is the zencaster website which we've already gone over but i really enjoy the website they just updated it and so if you if we move below the fold um so you see the product in action but then under there under that you see okay so their claim in the headline is high fidelity podcasting record your podcast podcast in studio quality and so basically what they're doing here's the features and the benefits everything that facilitates that value so studio quality sound zencaster records in lossless 16-bit no idea what any of that stuff means but i'm assuming um i'm assuming it's all very impressive and you know hd video recording built-in voip chat and footnotes no idea what that is either but again sound board for live editing it's um it's building on that headline and that subtitle and prov elaborating and providing more details on the actual product itself so after your features and objections and benefits and stuff this is where you come in with a little bit more social proof and here you can actually this is where your testimonials come in your success stories that kind of thing and somebody who i think for a website i think does this very well is bite toothpaste beautiful website by the way go check it out by toothpastebits.com and so you know you've got all your bells and whistles above the fold and if you go below the fold you've got two sections with social proof first you've got this one credible media right quit your tube of toothpaste drives waste free tablets anyway so let's let's scroll down to the actual customer testimonials so this is where you're basically allowing your your customers to sell on your behalf so here's here's a great example of a testimonial love these i'm always looking for the full package eco-friendly sustainable vegan cruelty-free all the good things wrapped into one thank you et cetera et cetera you they're basically is you know this is where you like i said allow your customers to do the pitching for you and um and sell the product on your behalf so um your testimonials all that kind of stuff save it for below the fold and uh yeah that's not for social proof so after you're below the full social proof you have um your fact your frequently asked questions your your fact is where you're going to include you're going to include any objection handling that you weren't able to include in the features and benefits and objections part so whatever was enabled whatever you weren't able to fit there you will you will include in a in a dedicated frequently asked questions section and so a great um a good example of this is the we are nudes.com website this is a webflow site by the way beautiful interactions um but if you scroll down here you've got the faq and you know keep it simple use your accordions every single objection that you weren't able to address earlier right under the fold you will dedicate or you will add to a frequently asked question section the next one is the second call to action most websites get this one right so you have your call to action above the fold in the hero section and usually uh you'll have after delivering on your uh social proof features and benefits you know et cetera et cetera you make it convenient for the user to take action and and take them you know take the next step and include another call to action um you know close to the footer and finally i think this one's actually really impactful and uncommon i don't see this one used as much is the founder's note and this is where the people behind the website people behind the product can tell their story explain how the product came about what kind of problems they're trying to solve with this product and so a great example of this is on the neuro i think it's neuro website is get neuro.com i think it's basically just healthy gum functional gum and means to energize and come come and focus you in the moment so if you scroll down they've got a little bit of a founders note at the bottom our mission yeah this is this would be it our mission so they don't have it right here on the page which in my opinion is preferable but let's pretend they do have it on the page and we'll click through our story and it's really cool i've got this cool video of the founders i believe these are the founders and here they kind of explained that they were both athletes and but they were also in school and they needed a something to relax them but that was also i guess eco-friendly and healthy and so that's how this healthy sort of performance gum came about so a founder's note at the bottom where you tell a story i think can be very impactful and very powerful so um do include a founder's note and that's it i think that's number 10 yeah so 10 elements in total how about we do a little bit of a recap so throw it up on the screen right now we have the title where you basically state the value that you're gonna that you're that you're providing subtitle where you sort of elaborate on that value how is it delivered call to action make it easy to take the next step social proof build credibility leverage that bandwagon effect and then your visual where you preferably show people how your product works you show how you show your product in action so those are the elements above the fold now if you go below the fold that's where you first include your features and objections and benefits of course so how this basically justifies everything that you've said in the headline and the subhead so you're going over features you're handling objections and um overall just elaborating on how you deliver that value with your product and then you include more social proof and so here is where you include things like testimonials and success stories so more social proof and then you have your frequently asked questions and what you will include is in the frequently asked questions is anything you weren't able to neatly fit in your features slash benefits slash objection section so any objections that you weren't able to or potential questions that you weren't able to fit there you will add to this frequently asked questions section then you have your second cta um you know just to make it convenient to click through and finally your founders note where you tell your story you explain how your product came about the problems that you're solving and just humanize the whole thing show that there's actual actual people behind this product and so that's it that's the that's the perfect landing page structure so i hope this was super helpful i know that um you know i've i've referred to this article i mean i mean i read it about a month or two ago and i've referred to it a dozen times since so it'll be linked of course in the description shout out to marketingexamples.com shout out to harry who's behind or harry frye i think his last name is anyways marketing harry from marketingexamples.com shout out to him um for the incredible value the article will be linked make sure to like the video subscribe if you haven't already and i'll see you guys in the next video peace

Channel: Flux

Views: 71,175

Rating: 4.9570379 out of 5

Keywords: become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy

Id: fGCtS6D6tr0

Length: 16min 9sec (969 seconds)

Published: Wed Mar 24 2021