(480) 624-2500


How To Build A Homepage

by | Jul 23, 2018 | Design, Starting A Website | 0 comments

How to build a Homepage.

A websites homepage is the simply most viewed page on a website. Its often visitors first exposure to a website and sometimes if poorly made could be visitors last exposure to a website. There are 7 major parts to a homepage; the header, the hero, the self-selection or qualification module, social proof module, product and services breakdown, a call to action and the footer. We will break down these sections below.



The Header.

The header is the same on every webpage. The header should include the website name/logo and the navigation bar at a minimum. The navigation bar should include keywords from your website to let people know what the website is about, for instance if you look at the headers for this website you see “starting a website”, “Design”, and “Marketing”. At least those were the headers when this article was written. If you visit apple.com you can see their headers are a list of their most popular products, since selling those products is their main business this makes sense. You can also include many other pieces in you header such as a search bar and a trending articles bar like we have on this website or a login button, a shopping cart or anything else specific to your website.


The Hero Module.

This is possibly the most important section; the hero is normally the large image you see on the front of a homepage (I’ll get into exceptions later). This hero module needs to have 2 major characteristics.

  1. This is the attention grabber – often you will see bold text, bright colors or other attention-grabbing techniques (the possibilities are limited only by your imagination). Nothing is silly here just try it and see if it works, later you will use google analytics to measure the effectiveness of your homepage.
  2. Needs to apply to the self interest of the visitor – A quick slogan on the front is normal but it needs to be a value proposition (why do business with you), it needs to be short and concise, and it needs to be catchy. A couple good examples are from neilpatel.com who is a famous internet marketer “Do you want more traffic” is on his hero, this explains what he does and applies to the visitors self-interest. A bad hero in my opinion is one that simply states what the company does, like this one I ran across that says “A digital design and branding firm”. Technically both work but who are you really more likely to do business with the guy who says he can get you more traffic or the guy that says he deals with traffic?

The exceptions to this are many. Take apple.com again, they do not have a hero image and they do not explain what they do – they assume that you already know who they are and what they sell. If you have a set client base that consistently uses your services make your website easier for them to conduct business with you. The reason why I am not describing how to make a website for a business that already has a set client base is simple… if you did you probably wouldn’t be here looking at how to make a homepage. If for some reason I am wrong – comment below and I will make an entirely new post on how to build a homepage for your type of business.



The Self-Selection / Qualification Module.

Now that you have the visitor’s attention you need to convince them that this is the place for them. This is called self-selection or lead qualifying. If you are a home renovation person and your slogan for the hero was “Bringing your home back to life” but you only deal with older homes this would be the time to ask your clients “Do you have an old home that needs renovation?” or if you only renovate new homes “Does your new home need a special touch?” It is very important to be specific here. We can get more specific by working on two important background subjects called demographics and user stories.

  1. Demographics refer to the key customers and who they are. For example: if you are an upscale restaurant your demographic is most likely people around the area with above average income and I would be willing to bet at an older age. While Arby’s demographic is low-mid income males between 20-30. It is important to know who your customers are.
  2. After you have demographics defined ask yourself who the perfect customer is, get creative and come up with that customers life story. Age, sex, race, what neighborhood do they live in, what car they drive, how much money they make… everything. Sometimes this can come from a past client who was amazing to work with and will buy from you again and again. Now ask yourself, why does this person use your service/product or website. Do they do it to save time? To grow their business? Is it easier then everywhere else? Do you offer something nobody else does?

Most of the time when I complete this I use 4 different user stories or 4 perfect customer stories. This makes sure you are looking at more then just one type of person you website will attract. There are often many types of people that will visit but if you have 4 perfect customer types and are prepared to present to all 4 of them you will succeed.

Once you have answered those questions you now know why people use your service and can take those questions and use them to help people self-select. If your customer uses you to save time maybe a self-selection would be “Do you want to save time?” If your customer uses you to grow their business then a self-selection could be “Do you want to grow your business?”



Social Proof Module.

The social proof module is essentially answering the question “Does this work?”. At this point you have told people who you are, why they should use you and they have decided that you’re the company who can solve their problems, but they have doubts. Does this company actually deliver on their promises? Two sections can exist here, the testimonials and the quantitative proofing. I have seen both on a website at once or sometimes just one. It is the creators preference and I haven’t seen proof either way showing what is best.

The testimonials are past customer reviews, often presented in quotes with a picture.

The quantitative proofing are number driven facts about the companies operations. You have most likely seen this as “15,000 satisfied customers” or “16 years in service”. This shows people that you have been working and can deliver on your promise.




Product and Services Breakdown.

This is the easy part. Your customer has visited your website, they know why they are there and believe you are the business to help them! Now you just have to show them a list of your products or services. Breakdown the benefits of each and what makes them stand out above the rest.





Call to Action.

This is where you ask your website visitor to complete an action. This can be signing up for a newsletter, a contact form for additional information, or to complete a purchase. This can be combined with the section above with the product and services breakdown.






Like the header the footer is static, it is the same on every web page. Footers normally contain links to pages not found in the header. Some of these links normally include a privacy policy, terms and conditions, site map, as well as contact information such as phone, email, or address. This section is by far the least important but should still look good.




Wrapping it up.

All together this is a good, common, effective layout. As you will surely learn in the web design world, nothing is set in stone and nothing is perfect. This layout is designed to get you started. Once you have the basics you can start testing different versions of your homepage. This is called “A/B” testing – some website themes or web builders offer this service with easy use. The idea behind it is you present 1,000 visitors with page A (say this layout) and 1,000 visitors with page B (your idea) then you see which one had more people complete a purchase, fill out a form or whatever you call to action is. The one with the most completed actions is more effective. Then you change your idea (page B) to something different and test again. You can test slogans, images, placement, or layouts as a whole. This allows people to tune their homepage to be as effective as possible.


Share below – How do you design your homepage? Anything different?