In the next few minutes I'm going to Walk you through the perfect homepage Layout we're going to go Section by Section breaking down every single Element plus along the way I'm going to Share a couple tips that are going to Completely change the way that you Design home pages so let's dive into it Alright so here we have our home page Layout and I'm going to go through this Section by section and break down every Individual element I'm going to talk About a couple important points that you Might not know about how you can make These things work better for your Designs and overall they're just going To help conversions they're going to Help your websites feel more custom and More engaging and so as we go through This make sure that you're keeping note Of the things that you might not have Known before that you can start Implementing right away in yours so of Course the first thing that we want to Go over is our navigation here at the Top and the navigation does not have to Be super complex typically speaking You're gonna have your logo to the top Left and your links and call to action To the top right there are times where You can pull things to the middle but This does slightly go against stand Standard web design conventions meaning That it's not what people are used to
And so you want to make sure that you Have the navigation as familiar as Possible to people and that people know Exactly what they're looking for and They know where to find it now a quick Note is we of course want to make sure That our call to action stands out from The other links and my little note card Here says that you want to make sure That you don't have more than three to Four links now there are times Especially with larger websites where There's just no way around this and so This is not a hard and fast rule but you Want to make sure that your navigation Is not overwhelming links like these are What we call Bleed points and the more Bleed points you have the more different Options that people have to choose from It's just going to cause overwhelm and They're going to end up not taking the Action that you want them to take so try To limit these as best you can if there Are other links that are important but Not essential you can always put those Further down on the page or at the very Least you can put them down in the Footer now moving on to our hero section This this is without a doubt the most Important part of any website mainly Because this is the only part of the Website that every single visitor is Going to see and it's pretty Discouraging to think that oftentimes
The vast majority of people that visit Your website are never going to make it Past the hero section meaning that They're not going to scroll down any Further so we need to make sure that we Tell them what we do why we do it why They should choose us we need to have Some sort of value proposition that Encourages them to reach out to us and Then we need to have a powerful call to Action so there's a lot to accomplish in This hero section and so we need to make Sure that we are very precise with every Individual element that we use so first Off we are going to have your main Header this is your main value Proposition you want to keep this short And Punchy but also you want it to be Really engaging and so there are a lot Of great examples you can look at any Big company website that performs well And you're going to see that oftentimes They have a headline here that is Extremely dialed in oftentimes they're Doing a b tests to see which ones Convert better so make sure that this Again is short it's to the point and It's really really powerful and if Nothing else gets read on your entire Website this headline should describe What you do and why people need you to Do it for them and then underneath you Have kind of your supporting subtext so This is where you can add a little bit
Additional information about what you do And why you do it and why they should Hire you again you want to keep this Brief and you want to make sure that You're not just reiterating what you Said in your headline people don't want To read the same thing twice so use this Real estate to add additional Information that can encourage them to Convert all right so then down below we Of course have our call to action you Want to try your best to have this be Some color that stands out so there's High contrast and so people see it it Draws their attention and then of course To the side here we can use some sort of Social proof now further down in your Home page you're going to have a spot to Add more social proof more testimonials Reviews but right here we want to do our Best just to add that little additional Push to say hey a lot of people trust This product or the service you can too Now the one other part that I want to Mention is up here I have this very tiny Header one and here on my card it says Use this small real estate to Incorporate your H1 keyword as necessary This is not always necessary because Oftentimes you can incorporate the Keyword for your website here in your Main header your large text but if cases Arise where you can't put in your Keyword and it just doesn't make sense
To do so you can always have kind of Like a Sub sub header up above that has Your keyword to help you optimize and Rank for specific keyword searches now Over here on the right we also have an Image this goes without saying you want To make sure that you have an engaging Image you don't want to use just basic Stock photos those don't really do a Whole lot and most people can recognize Those and spot those from a mile away so Try to have some sort of custom graphic Whether it is showcasing your product or Your service or even more importantly it Can be a picture of you actually Performing the service this is something That can build a lot of trust now this Is the same for every individual place Where you can put a photo or image on Your website a video is always better Now this can be a clickable video like An embedded Vimeo or YouTube video but Even better would be some sort of Animation some sort of animated image or Video that can show more than just a Static graphing so keep that in mind This is often a bigger time and money Investment to have these types of custom Moving Graphics but it's definitely Going to be worth it now you can see Here that outside of our hero section I Have this Orange Box now typically this Would not be here of course but I wanted To put this here to illustrate where the
Viewport would be or in other words like What is above the fold this is what's Going to appear in people's screens most Of the time and so we want to do our Best to capitalize on the real estate That we have here now I've got an Example just to the right of how this is Done poorly where we utilize the entire Viewport just for our hero section and The reason that this is bad is because First off people don't know that there's More content down below and even if they Do they don't know that it's going to be Worth it to scroll and so it's going to Make it so people either click the call To action or they leave and those are The only two options and so what I would Encourage you to do is push things up And utilize more of this space within The fold so you can showcase just a Little sliver or a sneak peek of what's Going to be down below so you can see Here that I have this second which would Be an H2 and this header I have it Saying hook them for the scroll so say Something that makes them say oh like I Want to see more about what they're Talking about there and so again that's Going to encourage them to scroll now in Terms of design there are also a lot of Things that you can do to get people to Scroll you can have some sort of Arrow Maybe a Lottie animation that's pointing Down to encourage them to scroll
Oftentimes you're going to see law the Animations of a mouse showing them to Scroll now what I like to do is some Sort of design choice where it makes it Feel like it flows into the next section So you can see here on the bad example This is just a straight bottom to this Hero section but what I like to do is Add some sort of curve or flow where it Feels like one section is flowing into The other and these are all things that Can just make people feel like they're Naturally being carried down your home Page now if you want to find some other Creative ways to lay out your homepage Rather than just this left right two Column alignment I've got a video that Walks you through 18 different hero Section designs and this video is going To break down all the different layouts And then also give you really awesome Examples and so I'd really encourage you To go click on this video watch it and Then incorporate some of those hero Design layouts into your own design so If you want to watch that video you can Click here up in the corner alright so Going back to our main home page so the Next part we have is where it says hook For the scroll this is going to be our Three bullet section now this is a Really common thing to see in websites And the reason that this is done so much Is you're able to convey a lot of
Information by utilizing this three Column layout oftentimes this has an Icon a header and then some subtext now It doesn't always have to be three Sometimes it can be two sometimes it can Be four but I would definitely be Conscious to not overdo it here because People just aren't going to read through That much content the other thing that I Would recommend and you can see here on My note card it says don't be basic with The way you lay out your icon sections As you can see here I've added a little Bit of a variation where the icon is on The left of the header and then we have The subtext below oftentimes you're Going to find just a Center align layout Where it's got the icon of the image in The middle Center aligned and then You've got your header just below it and Then your subtext just below that and And that's not bad but it is very very Common probably the most common layout Used in websites and so if you can do Anything just to shake it up it really Is going to take your designs to the Next level alright so now let's scroll Down to the meat and potatoes of your Homepage this is where you're going to Convey a lot more information about your Product or Services where you're going To be able to show more images videos Break down the different features and Benefits and so there is going to be a
Lot more content here and with that Comes a lot of responsibility on your Part to find ways to break up that Content so it doesn't just feel like big Fat blocks of text and tons of Paragraphs because nobody's going to Read that we live in the day and age of Tick tock where if something doesn't Catch your attention in the first two Seconds you move on and so we need to Keep that in mind when we are writing or Laying out content for our users so here I have a very basic just left right two Column layout and again there are other Ways to do this but you can see in the First example how I have laid this out Where I've got my header which would be Like an H2 or an H3 and then we've got The text down below now our note cart Here says break up content with Paragraph breaks bullets colors and even Emojis emojis are a really awesome tool That we've been given it makes people Feel more comfortable they're familiar And it brings in a little bit of color And breaks up text that's the way that We use these in our text messages Because they're fun and they bring the Text to life so you can be afraid to use These types of things inside your web Design so if you look at this I've Broken up the text really well using an Emoji I've bolded out some of the text And then I have my bullets here where I
Have also added some green check marks And this is much more engaging and much Easier to read now a bad example of this Is the one down below where I just have My header and then a huge block of text Just a big paragraph and I guarantee That almost nobody is going to read that And even if they do it's just going to Feel dry and it's really not going to Get people any closer to taking action On your website so make sure that you're Doing your best to break up that content And if you're looking for additional Ways to lay out your sections so you Don't just have to do this very basic Left right right left type of layout you Can check out this video here I'm going To link it up in the corner where you Can find 11 unique section layouts that You can incorporate into your designs to Make your websites feel more custom Alright so diving back into our home Page design I want to scroll down here Now to our social proof section this is Where we're displaying reviews Testimonials we're showing them our Reputation and our review portfolio and There are a ton of different ways that We can do this sometimes it makes sense Just to throw as many on the page as you Can other times we want to utilize Things like scrollers where people can Scroll through and see more if they want But we're not utilizing too much real
Estate to where people have to scroll Several times to get past the Testimonials regardless of how you do it There are a few things that you need to Keep in mind so I have written here on Our note card build trust with Noteworthy review logos this is a really Great way to bring in more trust by Utilizing logos that people recognize This is an example here where you can Have different platform logos underneath Them you can have the five stars which Is a huge symbol of trust and then down Below you can write the total number of Reviews that you have on those different Sites now of course this is more Difficult if you don't have a lot of Reviews or testimonials and so if you Don't have them start asking for them From your clients or your users and if You're working or building the site for A client this is something that you can Ask them to do to build more of a Reputation that you can display on the Website now I really love this example This is from ahrefs which is a website That I visit often I use their tools but This is something that they've done in a Really unique way and again in this very Small all section they are able to Convey a ton of trust and so if you want To utilize an example like this I Definitely recommend it so then down Below what we're going to do is we're
Going to display some of the Testimonials slash reviews whatever you Want to call them and again you could Add this as a slider where you have a Clickable Arrow where it goes through These or you could have it on a timer Where it automatically filters through Them or you can just simply select your Three favorite reviews and then down Below you could put you know we have 200 More if you want to read more click here And it can take them to a different Review page where they can read a big Long list of all of them but regardless Of how you decide to lay it out make Sure that is short sweet Punchy to the Point and that it elicits as much trust As possible for the user alright Continuing on we have our main call to Action now oftentimes people will put This even further down at the bottom but I think at this point we've done enough To ask them again to take some sort sort Of action if you look at from the top we Have given them our mean value Proposition we've showed a little bit of Social proof we've given them more Reasons to buy we've broken down our Product all the features the benefits We've showed them social proof and the Other people are using it and so they Can trust us and at this point there's No reason that they shouldn't be ready To take action and so have your main
Call to action here again it shouldn't Be dry or vanilla or boring it should be Something that makes them want to click The button and if they don't they can Continue down to answer some of their Unanswered questions so we've got an FAQ Section here again you can utilize a Drop down feature so you don't use up Too much real estate so they can simply Click on the specific question they have And it'll open up and answer oftentimes This FAQ section is a great way to kind Of answer any remaining doubts or Concerns it's going to resolve them and Then of course right above they still Have their call to action And then finishing up at the bottom we Have our footer and there are really no Bad ways to lay out your footer at the End of the day your footer isn't Necessarily supposed to have the Functionality of conversion more so just Navigation and so regardless of how you Lay it out just make sure that it's Organized you can see here that I've got A header that can kind of categorize the Different links so it's easier to Navigate you have your logo which should Take them back to the home page and then Of course you have all of your socials And then any additional text copyright Information things that you have down at The bottom but this homepage layout is Going to give you everything you need to
Build a beautiful custom website to Convert users and anything outside of This definitely can add to your design But at the end of the day this truly is All that you need to be a successful Designer and build successful websites So if you enjoyed this video or if you Learned anything new please be sure to Hit that like button down below and if You're not yet please consider Subscribing as I've got new videos like This coming out every single week so Thanks so much for watching and we'll Catch you in the next video
