Anatomy of a Well Designed Home Page: Part 1 - Splat, Inc.

Anatomy of a Well Designed Home Page: Part 1


Your website’s home page is the most important page on your business’ site. Much like a headline in a print advertisement, its success will largely determine whether visitors surf to deeper content or take a quick glance and call it a day. Nail the essentials of good home page design and you’ve radically increased your brand’s conversion goals, from mailing list signups, to purchasing products or buying a SaaS subscription product.

If the home page is so darn important, then, why are there so many lousy ones, even on some well-known brands? In this post, we’ll take a look at why so many home pages fail and what the fewer, successful pages share in common.

First off, it’s worth mentioning the unique and many faceted roles a home page plays within the context of your brand’s website. Unlike, say, a landing page or a product page, the home page tends to serve multiple purposes. For a single-location bricks and mortar business the page will need to include location and contact information. This requirement might not exist for an ecommerce site but, rather, other critical information might need to appear front and center, such as payment types, or brand differentiators such as ‘free shipping’ policies. So, then, let’s start by putting together an essentials list of what many different types of home pages need to accomplish:

  • Coherent navigation. Designing a main navigation menu area which simplifies decision making is critical to get your users to find the deeper content they’re looking for on your site. The advent of responsive design has brought new types of menus to both mobile and desktop users. From full screen overlay menus to the too-popular hamburger to the old-reliable mega menu, good menu design relies less on trends and more on how well the particular solution accomplishes the UX needs of the site. Often in our experience, the greatest hindrance we find to creating clean navigation structures is the insistence on some clients of too many top level menu elements. Ideally, we’ve found that 4 – 7 top level choices create a manageable number of decisions for users to make. Of course, beneath some of those major choices, it’s perfectly fine to use some sort of dropdown system to illustrate even deeper content. Alternatively, this content could exist on its own, in deeper menu systems which appear on the main pages of each one of the 4 – 7 top level choices.
  • Contact and location. As mentioned above, the types of contact information which are necessary to include vary, depending on business type. A rule of thumb though is that, if your business receives its customers at a physical location (this would include restaurants, lawyers, architects, auto repair and retail stores, etc) then both location, telephone numbers and a form should be prominent on the page, usually in the header area. Finally, don’t forget social media profile links. Whether those links are prominently displayed at the top of the page or somewhere lower depends on a number of factors, including how important social is to your brand’s marketing strategy, how many profiles are currently maintained, etc.
  • Positioning statement. The single most important task a home page must accomplish is to tell the visitor what your business does and what problems or solutions your services or products solve. And, of course, why your product or service is better than anyone else’s. Successful websites do this quickly. Of course, the type of product or service you’re selling will determine how succinct your positioning statement can be. Positioning statements are usually communicated through a combination of headlines, sub headlines and succinct copywriting. Great examples include the following, ranging from super simple to more complex:

    • Jetpack is a Photoshop extension designed for a very particular type of user, namely illustrators designing web icons. The page is simple and features an elegant (but not distracting) opening animation. The positioning statement is simple, “A Photoshop workflow tool, built for icon designers.” Note the absence of any “we do this better than our competitors” copy. That absence is easy to explain. How many other Photoshop extensions are out there designed to do what JetPack does? You can count the number on one finger. The creators of JetPack saw an opportunity to build a new tool for Photoshop which was clearly needed.
    • SI Digital Don’t get fooled by the nifty animation on this site. Despite a lot of visual wizardry, SI Digital still adheres tightly to the rules of good home page design. The first thing you see beneath the header is their positioning statement, which tells you who they are, what they do and why they do it better.
    • Kano is a ‘make it yourself computer’ for kids that teaches them both how computers are made and allows them to write code for their new device. The home page features a simple, three-tiered headline explanation of what the product is, with a background demo video of the product and a call to action in the form of a “Learn More” button. The execution couldn’t be simpler.
  • Call to action.This one should be a no-brainer. After you’ve explained what your brand’s services or products are, and why they’re so great, it’s time ask your visitors to take the next step towards becoming your customer. This can take the form of getting them on your mailing list, taking them to a product page or filling out a form for a call back. Whatever the action is, it should be asked for prominently. For some clever, direct examples of Calls to Action, check out the following:

    • Crazy Egg is a monthly subscription heat mapping product which allows its users to generate heat maps illustrating where their website visitors click the most and other sorts of analytics.
    • Evernote is an organizational app for note keeping and calendar management.
    • Netflix is well, Netflix…
  • Benefits and features description. Often it makes sense to elaborate on your product or service’s benefits and features in greater detail on the home page. This item is the one ‘situationally optional’ item. Sometimes, especially for products/services which require greater explanation beyond the positioning statement, it makes sense to create a region on the page for a deeper delve into both features and benefits.
  • All the boring, but essential stuff in the footer of your site. Privacy policies, legal disclaimers/terms and conditions, and site maps are all non-exciting but essential elements which typically occur in the footer of all pages, including the home page, of your business web site. Privacy policies make it clear what you will and will not do with any information supplied by visitors to your site. ‘Terms and Conditions’ or ‘Terms of Use’ pages serve a variety of purposes, including satisfying legal disclosure obligations, (granting) users rights to use website materials, (imposing) acceptable use obligations,” etc.
  • That wraps up our ‘essentials’ discussion. In part two of this post, we’ll talk about more ‘situationally appropriate’ elements to consider having on the home page, as well take a deeper dive into some of the elements just discussed.

Post Navigation