The Anatomy of a Website

The Homepage

Every website has a homepage, but not every website uses it in the most effective way…let’s make sure you do!

Although content found on homepages around the internet may be different, there are similarities in both structure and organization. In this short write-up, I’ll go over the different parts that most websites have, why they’re important, and how to best utilize them.

Website Homepage Sections

Main Navigation: Your main navigation section typically includes your logo on the far left (sometimes center) followed by links to your primary pages. These primary pages sometimes includes drop downs to subsequent pages within their parent categories. This section, in most cases, will remain the same throughout your site.

Hero Section: This is the very first section that will be seen when someone visits your website. So it’s a great way to make a good first impression. With the hero section you’re able to immediately qualify the visitors to your website. Qualifying your visitors allows those who don’t need your services to leave and only those who are within your target demographic will remain. This can be done fairly easily by using a portion of your “brand story” which I’ll cover in the next entry.

Introduction & Unique Value Proposition: When someone visits a website, they most likely have a goal. Their goal could be many different things from finding out more about your business, purchasing one of your products, read your blog, find your contact / location information, and much more. This really depends on the business and the website visitor themselves.

Since we know that your visitor has a goal, we want to try to lead them in the right direction as well as build trust in your service. A brand story helps to do just that. It’s a short, three sentence “story” that tells your visitor three things:

  1. That you recognize and understand the problem that they’re facing.
  2. That you’re able to help them with their problem, as you have for many others in their situation.
  3. How they’ll feel once they’ve used your service or purchased your product. (A happy ending)

An example of a brand story for a pre-made dinner business might look something like this:

Understanding their problem: Parents are often busy in the evenings with homework and activities and don’t have time to cook a healthy dinner. Instead a processed frozen dinner is pulled from the freezer.
How the problem is solved: We deliver pre-made wholesome frozen dinners at an affordable price – not just a box of ingredients and a recipe that you still need to prepare.
How they’ll feel / The outcome: With dinner handled, you can stop stressing, relax, and enjoy time with your family.

Doorways: The following sections are what I like to call “doorways”. These doorways will lead your visitor to the most viewed or most relevant sections of your website. Again, depending on your business these may be quite different from website to website but the purpose remains the same; enable visitors to find what they’re looking for as quickly and easily as possible.

Each of these sections, regardless of how they’re laid out, should use some mix of an icon or image representing the subject, a title, a short paragraph or two explaining what the visitor will find when they click to go to said page, and a call to action button that links to the interior page in question.

The copy found in these sections has two benefits. First, it lets your visitor know if what they’re looking for might be on the page it’s describing and secondly, it’s additional copy that’s beneficial to your Search Engine Optimization (or SEO).

Footer: Your footer, like your main navigation, is in most cases exactly the same site-wide. Your footer contains your logo, an abridged version of you sitemap, social media links, your location information, and/or an email list signup. Of course, depending on the website and your goals, these elements may shift, however these are the most common things you’ll find in a website’s footer. Your footer should also include your website’s copyright and links to your legal pages. In most cases Privacy Policies and Terms of Service/Use pages are legally required and should be readily available to your visitors and this is where people expect to be able to find them.

Closing Notes

These are the base elements that a homepage should have, but many other elements can be added depending on your website’s purpose and goals. These additional elements can include a news and updates slider, additional doorways for other services, testimonials to use a social proof, and more.

The goal, with any homepage is to draw your visitor further into your website and find the information or products they’re looking for as efficiently as possible. Creating a sitemap prior to building your website will help to visualize your website’s structure and plan for these sections before any code is written.

website homepage mockup