5 Awesome Home Page Design Layouts You Can Copy Today

Last updated on November 1, 2016

Home Page Design LayoutsLet me guess – you’re not a skilled website designer, and you’re building a website and you want to make it awesome.

You’ve come to the right place, my friend!

Building a website that looks great doesn’t have to be super complicated. It can be systematic and logical (not as much “fluff” as you’d imagine) – anyone can do it!

In this guide, we’ll show you the anatomy to awesome, well-designed home pages.  I’ll lay them out in simple diagrams and show you live examples so that even non-designers can understand – and copy!

 

Why Should I Focus On My Home Page?

Awesome Home Page Design Layouts You Can Copy TodayYour home page is arguably the most important page on your website.

Why? —  Because it’s most likely to be the first page that your website visitors will see when they land on your website.

I think we can all agree that the first impression matters a lot – right?

Your home page sets the tone for your business like a first impression – so makes a lot of sense to ensure your home page works effectively.

Imagine this:

You go into a shop or an office, and you are immediately greeted by a customer service representative.

The customer service rep acted as a guide by helping you navigate the store/office and direct you to the person or product that can solve your problem.

The customer service rep did the leg work for you by showing you where you should be looking to find what you need.

The process and experience were enjoyable for you — you didn’t need to waste time and struggle to find what you’re looking for.

When a customer visits your website, he/she is “walking” into your store or office.

Wouldn’t you want to give them the same level of experience as they would receive if they walked into your physical store or office?

Don’t you just hate it if you had to struggle to look for where a product or information is located?

BUT — there is ONE problem — there is no live person to greet your visitors when they land on your website!

So the question is: “How can I direct my visitors to the information they need without physically guiding them?”

The answer, my friend, is an effective home page layout design.

Your home page layout acts as your customer service rep who diligently guides your visitors around your website.

How does it do that? – Simple:

A well thought out home page design creates a visual trail of breadcrumbs that can effectively guide your visitors to discovering your services/products effortlessly.  The page layout will also direct your visitors to know where to take action and follow through to the next step.

Before we get into what you should include on your home page and show you diagrams of the anatomy of 5 different home page layouts with real examples below, let’s properly define what is an effective home page design.

 

What is an Effective Home Page Layout Design?

Effective Home Page Designs

Page layout planning helps you figure out what content to place on your page, where to place it and which content should go first.

Building an awesome home page is not just randomly placing any information you can think of onto the page. It’s also not based on abstract concepts, or how you feel that particular morning.

It’s actually very methodical and logical – so everybody can replicate a good layout.

There needs to be a flow so you can guide your visitors to discover your website the way you want them to.

This enables you to craft a very targeted website experience that works best for the specific customers you want to attract.

When done correctly (I’ll show you how below), you can help visitors who land on your website:

  1. Easily identify what your website is about, what you do and how you can provide your visitors with solutions to their problems; and
  2. Engage with your business by figuring out where to take the next step. If your visitors don’t know what the next step is, they’ll probably leave without taking any actions. Next steps could be to visit a product / service offering page, download a guide, watch an informational video, sign up to a newsletter series, submit contact details, etc.

Effective home page layout is all about making your website easy to use and navigate. It allows you to steer your visitors’ focus to things you want them to pay extra attention to.

Let’s get started on what to include in an effective home page, and we’ll dive into some specific examples and layouts!

 

What Content Should I Include on My Home Page Design?

Let’s be honest — How many times have you landed on a website, and ended up clicking the “back” button because you couldn’t find what you’re looking for in a few seconds?

The fact is that most of us are conditioned to expect to find what we’re looking for in a few seconds. People are becoming more and more demanding (and impatient) nowadays.

Your visitors will make a very simple, split second choice when they arrive on your home page – stay or leave.

How you choose to lay out your home page will affect that decision — and will impact the fate of your business.

Simplistically, the layout of your home page is divided into two parts:

1. Above-The-Fold – content you can see WITHOUT scrolling down when your home page is first loaded.

2. Below-The-Fold – content you only see when you scroll down.

100% of your visitors will see the content Above-The-Fold, as it is the displayed on their computer screen right away.

Statistically speaking, as you scroll down the page, the number of people who will continue to pay attention to your content will drop dramatically.

This is why it’s so important to plan what content your place Above-The-Fold and Below-The-Fold.

 

1. TYPE OF Content TO INSERT Above-the-Fold

This is where you want to display all your Primary Content – your most important content that you need all of your visitors to see.

The #1 goal of your primary content is to convince your visitors to stay longer to further investigate what you have to offer.  Your primary content must be clear, concise and specific.

Home Page Design Layouts - above the fold

Primary Content Breakdown:

1. Headline:

In one single sentence (two at the most), you must answer the question that all your visitors will be asking – “What does your company do?

A good headline will answer this burning question — so it needs to short, clear and describe what you do perfectly.

You want your visitors to read your headline and think – “Hey, that’s me! I need this!

Here is a great example of a simple, effective headline that says a lot:

home page design headline exampleIf you are working on a project with other people and are having the same problem, this headline will get your attention.

It’s nothing fancy, but it gets the message across perfectly.

Pro Tip: If you don’t know what to write, try asking your customers or audience why they visit your website, use your services or products. You can take literally take the words right out of their mouths and use them as your headline.

2. Sub-Headline:

You have an opportunity to define your service/product in a bit more details with your sub-headline.

The brief description should answer – What problems do you solve for me?”

Here is good example of an effective sub-headline:

home page design subheadline example

In one short phrase, it tells you how their product can help you.

In this example, their users can use their product to create pages to generate more customers!

3. Primary Call-To-Action:

A Call-To-Action provides directions and asks / tells your visitors to do something – to take the next step.

This can be “call us now” or “click for a free quote”.

home page design call to action

Also, pay attention to Shopify’s headline and sub-headline. Very effective!

Think of a call-to-action as a direction indicator. We all know how to take direction because we do this every day in the real world.

road-sign

This sign lets you know you are heading eastbound, and you can get to Redlands by turning right on Exit 40A.

We find these signs and arrows very helpful in our daily life, so why not use it on your website to guide your audience on what to do or where to go?

This is especially true if they want to make a commitment because they resonate with what you have to offer (your headline and sub-headline).

Don’t expect your visitors to know what to do next — they don’t.

You want your visitors to visually see that there is a next step that they can take, so never be shy about telling them what to do in a helpful way.

Imagine this: You find a random restaurant and see a menu by the door. You step inside and you see the host standing there, but he doesn’t say anything.  He doesn’t proactively ask you how many people you have in your party, nor does he attempt to lead you to the seating area.

You end up just standing there, wondering – “what’s next?”

Does that make you feel good and confident about the business?

Does it make the business feel personable and likable?

The key is to actively engage with your visitors — tell them what to do, and guide them to taking action so you can start building a relationship with them.

This can significantly increase your chances of winning new customers.

4. Use Images or a Video to Illustrate Your Message:

People are naturally drawn to visuals like images and videos, so it is a great way to create a mood or show your audience what you are all about.

It is important to remember to use images and videos that are relevant to your website. If they don’t serve any purpose or don’t do a good job in enhancing your overall branding or messages, don’t use them.

It is better to keep your website clean rather than including things that are not useful.

Where to Find Professional Images – see our guide on how to pick the right pictures, and where to find professional images without paying through your nose (a lot of professional quality images are actually free!)

How to Use a Video Background – have you considered using a video background to “wow” your visitors, make your website look more professional and improve your branding? See this guide on how to use a video background the right way, and the do’s and don’ts.

5. Logo:

Your logo needs to do a good job of subtly communicating what your company is about. It hints at the DNA of your business — whether you are professional, creative, aggressive, or laid back.

Logo Creation Guide – If you’re not sure how to create a good looking logo, here is our guide and some tools that can help you (even if you’re not a designer).

6. Navigation Bar:

This is the roadmap you use to show your visitors what’s important and where they can go to get the specific information they need.

Rule-of-thumb:

  • Only include necessary pages and don’t confuse users with too many unnecessary options.  Your visitors will not be interested (initially) in pages about copyright, privacy, and terms of services. So insert them elsewhere — like in your footer.
  • Create logical groups of related links, with the most important links organized from left to right.
  • Keep page titles short and descriptive.
  • Place your navigation bar in a prominent location so it is easy to find.

Put yourself in the shoes of your visitors and ask yourself this:

What is the least number of steps I need to take before I can make an informed decision to buy your service or product?

 

2. TYPE OF Content TO INSERT Below-the-Fold

As mentioned above, not everyone will scroll down your home page to view more of the page.

Your visitors who will actually scroll down your home page to see more are those who are interested in what you have to offer after reading your headline and sub-headline (your Above-The-Fold content).  

Otherwise, they would have left your site already.

So, the type of content you want to insert Below-The-Fold is to support your Above-The-Fold content (what you offer and how you can solve your customers’ problems).

Here are the 2 types of content you should display Below-The-Fold:

1. Secondary Content: Content that is not important enough to make it Above-The-Fold, but is still crucial to convincing your visitors to become customers or loyal followers.

2. Additional Content: These are the “nice-to-have” information, but are not critical in making your website effective for making a strong first impression.

Let’s dig into more specific details about these Below-The-Fold content.  Afterward, we’ll show you 5 effective home page layouts that you can imitate.

#1) Secondary Content Breakdown

Secondary content reinforces your Primary Content (Above-The-Fold).

The goal is to convince and educate your visitors on what exactly they’ll get out of using your service or buying your products.

1. Benefits List:

Here’s a common mistake – most websites are focused on listing out a lot of features and don’t focus enough on describing the benefits to potential customers/readers.

There is an insightful saying in marketing – “Features tell, benefits sell.”

The main question your visitors will ask is, “so what’s in it for me?” — “Why should I eat at your restaurant?” — “Why should I hire you as my photographer?”

If you landed on a website and all you see is a big list of features, like “we have 20 sandwiches, 15 salads & 5 kinds of soups….“, or “we provide you with 100 pictures on a DVD & a physical album….

You’ll end up just being another restaurant or photography business website. Nothing makes your website visitor want to find out more about you.

Focus on how your visitors will benefit from you – For instance, “organic, farm to table ingredients so you feel healthier and live longer”, or “kids grow up way too fast – we’ll help you capture those precious moments and memories with your first child.”

Notice that benefits tap into the emotional side of people – because it works.

Here is a good example of describing benefits from Basecamp’s home page (Basecamp is a project management software that helps teams manage a lot of back & forth communications):

home page design benefits list

They first list out all the headaches and pain points that their potential customer might have (to relate on an emotional level). Then they make the promise (benefits) that with their software can make all those problems go away.

Outlining benefits don’t always have to be solving a specific problem. It can also be inspirational like how great it will be to take a road trip with your family in a brand new car!

The key here is to show your audience how their life will change for the better with what you are providing them.

Pro Tip: Listing out features are only helpful after you convince your visitors that you can benefit them tremendously. Don’t unload a boring list of features on your visitors. Focus on communicating how your visitors can truly benefit from you.

2. Trust Indicators:

Trust indicators can be customer success stories, customer testimonials or quotes, professional accreditation (industry association affiliations, Better Business Bureau score), media quotes, the number of social network shares, and display personalized blurbs about your team members to create trust.

People buy from people or businesses they like and trust.

So by showing other people like you and your brand, you can boost your credibility and trustworthiness.

The key is here is to positively associate your business with external parties and show that your business is operated by people, not robots.

Trust indicators are very powerful to help bring your visitors one step closer to becoming customers — especially when they are close to crossing that line, but they just need a gentle nudge.

Remember – people like to follow other people. So when they see others (just like them) do business with you, they are more likely to follow.  Why do you think we constantly look up reviews on different services or products?

3. Features List:

Features list helps your potential customers know what EXACTLY they are getting when they make a purchase.

List out your most compelling features that your visitors will want to have.

One of the biggest mistakes I see people make is that they list out a long laundry list of features that don’t relate to me as a customer.

Even when the features may sound interesting, I could care less if the features don’t solve my problem or answer my needs.

For example: When I go on to Volkswagen’s website to research for a new car, I don’t get a mind-numbing list of features like electro-mechanical power steering with variable assistance. While this is an important feature, it is not something most car buyers cares about.

Instead, you get sold on features like infinity moonroof and 10-speakers surround sound audio system. These are the features that people care about and are what will eventually sell the car.

home page design features list

Think about what features will resonate with your audience and remove the extra features that won’t make a major impact on your home page.

Pro Tip: If you have a lot of features to list, instead of listing them all, pick the top 10 to insert into your home page.  For the other features, create a separate, dedicated features page where your visitors can view the entire list of features there.

 

#2) Additional Content Breakdown:

These are the “nice-to-have” information but are not critical in making your website effective for making a strong first impression.

For example, blog articles, company announcements, event schedules, industry updates, location map (if you are not in the restaurant business).

Such content does have a place on your website, and if placed in the appropriate location, can help complete the overall picture what your business is about. But if they are used incorrectly, they can create clutter and confusion.

Now that you know what you should include in your homepage, let’s see how you can position your content to create an awesome experience for your visitors!

 

Anatomy of 5 Effective Home Page Layouts &
Example Templates You Can Use Today

I’m going to share 5 very effective home page layouts with you below. The diagrams break down each Above-The-Fold and Below-The-Fold component.

You can follow these layouts to optimize your home page. If you are using a drag & drop website builder, you will be able to easily drag your content around to imitate the layouts as shown in the diagrams below.

I’ve also listed out some example templates below, where the home pages are already effectively configured.  You can click through to take a look at the actual templates and you can sign up and start using one right away.

In a way, using one of these templates is a short cut, as it allows you to get a head start since the templates already embody some of the best practices I’ve discussed above!

Layout #1

This layout is pretty universal so it can be applied to pretty much most industries.

home page design layout

Click to enlarge image

 

Template Examples: Here are some templates that have this type of home page layout design. You can click through to see them, sign up and start using them right away.

good homepage design wix example
good homepage design shopify example
good homepage design squarespace example
good homepage design wix example
good homepage design wix example
good homepage design wix example
good homepage design wix example
good homepage design wix example

Layout #2

This layout is also quite universal and so it can be applied to most industries.

home page design layout

Click to enlarge image

 

Template Examples: Here are some templates that have this type of home page layout design. You can click through to see them, sign up and start using them right away.

good homepage design wix example
good homepage design wix example
good homepage design wix example
good homepage design wix example

Layout #3

This layout is also quite universal and so it can be applied to most industries.

home page design layout

Click to enlarge image

 

Template Examples: Here are some templates that have this type of home page layout design. You can click through to see them, sign up and start using them right away.

Layout #4 – Portfolio & Photography Websites

This layout is suitable for creative businesses

(photographers, designers, artists, musicians and illustrators)

home page design layout for photography portfolio websites

Click to enlarge image

 

Template Examples: Here are some templates that have this type of home page layout design. You can click through to see them, sign up and start using them right away.

good homepage design wix example
good homepage design squarespace example
good homepage design wix example
good homepage design wix example

Layout #5 – Food, Health & Beauty Websites

This layout works well for businesses that benefit more from visual communications (less so from written content)

(Restaurants, spas, salons and cafes)

home page design layout for food health beauty websites

Click to enlarge image

 

Template Examples: Here are some templates that have this type of home page layout design. You can click through to see them, sign up and start using them right away.

good homepage design wix example
good homepage design wix example
good homepage design wix example
good homepage design wix example

choosing website template designsStill Having Struggling to Choose the Right Template For Your Website?

Choosing a template to design your website can either be a lot of fun, completely overwhelming or for most people – somewhere in between.

We have a set of criteria we use when making template design suggestions, to help you sift through all the design options.

View Post

 

Conclusion & Take Away

Awesome Home Page Design Layouts You Can Copy TodayEffective home page design is not just about looking “pretty” — it’s about how easy it is for your visitors to understand what you do, what problems you solve, and how they can benefit from your services or products.

NEVER leave it up to your visitors to guess or figure out what to do next. Instead, create a very clear Call-To-Action on your home page that directs your visitors to take the next step (such as to go to your product / service page, sign up to your newsletter, download a guide, contact you, etc).

Constantly ask yourself if your visitors fully understand what you do and what benefits you bring to the table.  Focus on outlining benefits of how you can help your visitors – avoid dumping a list of features that can’t quite connect to your visitors on an emotional level.

Don’t use complicated vocabulary or vague descriptions — be concise, be straight forward.

Keep in mind that you won’t get the “perfect” home page design on your first attempt.  It’s okay to keep working on improving upon it.  Collect feedback from people to see how you can improve.

Lastly, take a look at the template examples I shared above — instead of designing your own home page, those template examples can give you a head start to crafting a great looking and effective layout!

Your visitors may not always find your services / products helpful, but they should never misunderstand what your business offers.

Found This Guide Helpful?

Question – Did this guide benefit you? Leave a comment below. 

Do you know anyone who can benefit from this guide? Send them this page or click on the share buttons on the left.

You’ll be helping us out by spreading the word about our website, and you’ll be helping them out!

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

Subscribe

Connie Wong

About Connie Wong

Designing and creating your website (especially your first one) is not a simple task. If you're a designer like me, then you're already way ahead of the game. But what if you're one of the 99% of business owners who are not technical or creative? I want to share my website design expertise with you to help you build a professional looking website to grow your business.

,

Leave a Reply

14 Responses to 5 Awesome Home Page Design Layouts You Can Copy Today

  1. #

    Connie, your whole explanation. The intro the sections and summary super clear! In a few seconds, one must know what your site is about.

  2. #

    I would suggest that the majority of visitors will arrive at an article inside the website, rather than landing on the homepage first. I recently reformatted my articles slightly. I’ve broken down long paragraphs into slightly shorter ones. I have put subheadings on paragraphs to make sure people know exactly what they are reading without having to read the small text first. Not sure how much more you can do on an article within the website, like a page within a book.

    • Jeremy Wong
      #

      Hello Penn,

      You’re right. In a lot of cases, a lot of people will find your website through an “inner” page rather than the home page.

      However, if your visitor enjoyed reading your webpage, he/she just might go to your home page to find out more about your website and/or to find other interesting discussions on your website. So from that perspective, it’s also important to design a good home page layout so you can guide your visitors to other parts of your website!

      Further, if people find your website helpful, they’ll generally pass along the home page website address to others. Sure, if they email / share your webpages, they’ll share the exact webpage. But when I (personally) talk about certain websites with my friends, I generally pass on the home page webpage address.

      As for optimizing your webpages, you’re doing the right thing! Breaking down your text into smaller paragraphs is a very effective way to make your webpages more readable. Also, using titles and sub-titles breaks up the content neatly so it’s easier for your visitors to consume.

      I’d suggest no more than 5 lines per short paragraph, if possible. You can also use images to break up your text a bit more, so it’s easier for your visitors’ eyes. Also, consider bolding certain phrases to highlight key ideas. A lot of your visitors will be scanners instead of readers. So having good title / sub-title structure, shorter paragraphs and bolded content to highlight important ideas will be very helpful!

      You’re on the right track!

      Jeremy

  3. #

    Thanks Connie, I was wondering if cloning a SquareSpace template for he homepage would be possible using Wix. A sleeker homepage design is a plus but Wix covers many other areas than just aesthetics for me. Loving this site, you and Jeremy make a perfect team! I will implement these ideas on my non-home pages.

    • Jeremy Wong
      #

      Hey Daniel,

      I suppose you can try to craft a design that’s inspired by some Squarespace designs. Wix is a pure drag and drop builder that has a lot of tools to help you do that, though the final product won’t be exact.

      At the end of the day, you’ll have to decide whether the design from Squarespace is more important than the other aspects of Wix (which you enjoy using).

      Jeremy

      • #

        Thanks Jeremy, I’m on day 4 of the trial on SS and I’m getting used to the UI. Seems pretty straight-forward and I’m loving the style. However, I am uncertain about the SEO optimization tools. What is your overview on the difference between the two? Also, what would you suggest I do to boost my SEO ratings. This will be a portfolio of previous construction renovation jobs.

        • Jeremy Wong
          #

          Hey Daniel,

          Good to hear that you’re getting used to Squarespace’s user interface.

          Regarding SEO, have a look at our website builder comparison chart (have a look at the footnote in that discusses SEO) and also our guide to website builder SEO.

          Hope you’ll find those discussions helpful.

          Jeremy

  4. #

    Great article!

  5. #

    I found your website just yesterday and I have found so much useful content that I’m blown away! This article and many others have given me the information I need to actually build my website, finally! Your website is a invaluable resource and I’m sure I will continue to use it after I make my first million! Haha! Seriously though, your website is amazing and I thank you for all the great articles full of information!

    • Jeremy Wong
      #

      Thanks, Danette!

      Please do share our guides with people you think that will find our discussions helpful. You can also click on the social sharing buttons on the left side to get the word out! I’d really appreciate it!

      Jeremy

  6. #

    Manna from heaven, Thank you for the amazing content.

    • Jeremy Wong
      #

      Thanks! Glad you found our discussion helpful!

      Jeremy

  7. #

    OMG, fantastic stuff! There’s a lot there (a lot of components to each layout), so still a *bit* overwhelming … but you have finally demystified the morass that is the thousands of templates to choose from! Bless you, Connie – this is *so* helpful!

    • Jeremy Wong
      #

      Thanks Wendy!

      It was extremely challenging for us when we first started out. Information overload – for sure. Should we place content here? There? What are other websites doing?

      This is just a guide that we “wished” we found when we started out 6 years ago. These diagrams would have helped us outline layouts while removing all the noise (images, text, etc).

      It would have saved us a lot of time. So we thought it would be helpful to compile our experiences to share them with all our readers!

      Glad you liked it!

      Connie and Jeremy