Web Design: The Anatomy of a Homepage

There is a lot of pressure on the homepage of a website to impress and convince visitors right away. So it’s important to maximize the impact of the “above the fold” space by laying things out clearly and answering questions at a glance.

Of course, there are infinite ways to build out this design, brand it and make it visually appealing, but this content layout guide provides the key details most new visitors want to see without having to search around.

What makes good home page web design?

A consistent “header”

The header of a website is valuable space that should contain branding, site navigation, a phone number and a “contact us” form or live chat link. It’s best if your header content stays consistent throughout all of the pages of your website.

From a design perspective, it’s sometimes tempting to get creative and do things differently but we recommend sticking with what your visitors expect from a website in your particular industry. Web and app developers call it “intuitive” design – which is essentially a techy term for being predictable. Remember, your visitors want to be surprised by your content and your offer, not your layouts.

1 Your Logo
The human eye scans a web page in a predictable left to right, L-shaped pattern. Having an easily identifiable logo occupying the upper left corner of your design is a good place for the “story” to begin.

The color scheme and tone of your logo will influence the choice of supporting colors for headlines, lists, icons, links and borders. It’s easier to read dark text on a light colored background than white text on a dark background but some industries prefer dark layouts.

2 Navigation
Depending on how many pages your website has, your primary navigation bar may co-exist in the same horizontal space as your logo, it may need to drop down a level and take up the full width of the page, or it may make sense to have secondary navigation links above or below.

We recommend keeping your primary navigation options simple and, of course, predictable. Group your products or services together in logical drop down sub menus. Allow your visitors to get wherever they need to in one click regardless of what page they are on.

3 Phone Number
Visitors will expect to find your phone number or a contact form link in your header. This information can also be placed in your footer and inline with your content. We recommend using html numbers rather than linking to an image file.

4 A Compelling Headline
All of the copy on your website should be written with a buyer in mind. It all starts here with a short, powerful headline that tells the visitor they have landed in the right place, or not.

5 A Secondary Headline or Catch Phrase
The secondary headline, slogan or catch phrase that picks up where the main headline left off.

6 Your Elevator Pitch
This is a short compelling paragraph that sums up your offer and it’s value proposition.

7 The Benefits That Your Product or Service Will Provide
Four or five benefits (not features) that makes choosing your offer a no brainer.

8 Your Call To Action
This might be a sign-up form, a quote request form or a free consultation form. Whatever it is that you want your visitor to do, tell them to do it here.

9 The Button
The text on the button should fit the call to action and prepare the visitor for the next step. For example, if clicking the button will lead the visitor to a quote form – the button text might read “Get a Quote”.

10 Testimonials
People like recommendations, even if it’s from someone they’ve never met. If you have customer testimonials, have worked with businesses in your community or other recognizable brands – it’s time to name drop.

2 Main Navigation | Link 1 | Link 2 | Link 3 | Link 4 | 3 (250) 555-1212

4 Your compelling headline goes here.

Sample Web Design

5 Tell your visitors what you do here

6 This is your “elevator pitch” – a short and irresistible summation of your offer and it’s value proposition. One juicy paragraph is good.

  • 7 Here is one awesome benefit
  • Here is another awesome benefit
  • And yet another awesome benefit
  • Wait, there’s another benefit
  • 8 Your call to action 9 CONTACT US

10 Testimonials
Help visitors feel secure. Four to six rotating testimonials is perfect.

11 Service Info
Be an authority. What problems do your visitors have? How can your solution help?

12 Service Info
What should people expect from your service? Guarantees? Lead times? etc.

13 Service Area
What area(s) do you serve? How can people find you? What are your hours?