Valiant Chicken Digital’s Grand Unified Theory of HomePage Design

If there is one thing I have learned in my years of building websites, it’s that laying out a website’s homepage is the single most difficult part of designing a site. It doesn’t matter whether the site is new or years old, choosing what to feature on the homepage is a confusing and complex topic that can intimidate the inexperienced into giving up.

That’s what happened to me in 2014 when I was rebuilding my blog, The Digital Reader. I needed to give the blog a new homepage so that it would have a more professional appearance and thus would be taken more seriously as a news site, but I couldn’t figure out how to do it and I couldn’t find anyone to hire who could demonstrate they knew how to do it.

That incomplete redesign may have harmed my blog over the years, but a badly designed homepage could be even worse for your business. An unappealing homepage means lost sales as leads disappear before they even reach your inbox, which is why this issue is unbelievably important.

And what’s even worse is that it is easier to get the design wrong than you would think. There’s almost no useful info available online that explains how to lay out a homepage; what little I have found is far more theoretical than practical, so much so that I had to figure out a process for designing a homepage all on my own.

Fortunately for you, I have figured out a method to designing a home page, and I have even distilled what I know down to a process that will help you design a homepage for your site, or your client’s site. While I can’t tell you exactly what should go on your homepage (different sites have different priorities), my process will help you understand what is most important for each website you work on.

The first thing I need you to do is identify the most important Content on your site, and identify the Actions you want visitors to take.

Content

  1. List all of the sections of your site that you might want a visitor to see (don’t forget the contact page, your shop, etc). Then add all of the things you would say in a pitch.
  2. Using the first list, make a second list where you rank the items from most important to least important.

Actions

  1. List all of the actions you want a visitor to take on your site.
  2. Using the first list, rank those actions from most important to least important.

Synthesis

What I want you to do next is take the two ranked lists, and put them side by side. These lists are your guides to laying out your homepage from top to bottom. The higher ranked actions and content should be placed towards the top of your homepage, while the lower ranked items should be down near the bottom of the page (or left off entirely).

Let me give you an example.

Over at my other business, The Digital Reader, I work with authors. I have built a lot of author websites, so I know that (in terms of content) most author sites include:

  • mailing list sign up form
  • pages for the author’s books
  • the “about the author” page
  • services related to an author’s books (for non-fiction authors)

In terms of Actions, I know that authors want visitors to:

  • buy the author’s books
  • sign up for a mailing list
  • connect with the author on social media

Now, different authors will place different value on the various actions, so I won’t rank them here. But when I work with authors, I do use this list as the starting point to ask them which actions are the most important, and I use the author’s responses to lay out the homepage.

I also plan to use this process to redesign my own homepages when I get a chance. (The VCD homepage is okay, but I think it could be better.)

Finishing Touches

It goes without saying that you shouldn’t stop at just using the ranked lists; they are a starting point, but the actual layout of your homepage needs to take far more into account than just ranking. Here are a few things you should keep in mind.

  • Your goal is to get visitors interested enough in your company that they will contact you and give you a chance start a conversation with them. Help them out by making a CTA (call to action) every second or third item on your homepage. (The first item on the page should also be a CTA.)
  • I have found that it helps to think of the layout as a narrative where each section is something I am saying to the visitor. This helps the design flow from A to B to C, etc. I had you include your elevator pitch because it will help fill in the gaps.
  • Try to intersperse smaller items on your homepage with larger items. (CTAs are good for this.)
  • If you make the lists as recommended, and then decide that you only want one or two things on your homepage, that is okay. I really don’t think it’s a good idea for most websites, but sometimes you can benefit from focusing all of a visitor’s attention on a single item.
  • When writing the content for the homepage, be sure to focus on how a visitor will benefit rather than on the services you perform. This is the best way to sell them on your services.

Postscript

Web design is one of those fields where you are always learning something new. That’s why I know that I will improve on the grand unified theory as time goes on, and why I would expect that many of those who are reading this post will think of improvements that will make this process more effective.

If you have a suggestion, or even just a question, please leave a comment below.

Posted in tips & tricks.

Leave a Reply

Your email address will not be published. Required fields are marked *