Designing websites inside-outWhen starting out on a new web project it is tempting to begin the wireframing process at the homepage, which is surely the most important page on your website.

But I’ve found that this approach doesn’t work for me. And for that matter I don’t believe that the homepage is the single most important page either!

Starting with the homepage is a little bit like drawing the cover of your novel, before you start writing the first chapter. It’s the story that counts, and until you know more about the story – the content – then how can you decide what to draw? You know what they say about judging books by their covers, perhaps because illustrators don’t read them before they get to work.

It’s the same with websites… isn’t it better to consider what’s contained within before working out how the homepage might look?

The homepage is essentially an aggregator page. And until you’ve figured out what can / should be aggregated then there’s no point trying to design it. I think it is best to start at a much deeper level, rather than starting at the homepage.

For example, a retailer could start at product page level, before working back to a category page, and then back to the homepage. I’d argue that the product page is far more vital to the success of a business than the homepage. It’s where the critical purchase decisions take place.

If your product pages suck then you’re relying on brand, product exclusivity or scarcity, and the tolerance of consumers to win sales. But if they’re brilliant then you can trump your competitors and help persuade customers to purchase more often. So from a business perspective, it is wise to focus your design efforts on these key pages. 

This is an inside-out approach. You start at a deeper page and work your way back to the ‘start’. It’s an information issue, from a design perspective, but the fact remains that the most important pages live deep within your website.

It makes sense from a search / user perspective too. Many visitors totally bypass the homepage when entering your website, entering instead at an individual page level (product and category pages, like blog posts, tend to rank better on the search engines for niche terms). The long tail – which can be very long indeed – is certainly more targeted: these searches are highly specific, and from a retailer’s perspective, they show a lot of conversion intent.

So get those product pages right, and then work back to a category / channel page. Get the category pages right and work back to the homepage, and not before understanding the needs of the business, the target market, and so on.

Consider too that the homepage must not replace your core navigation! A visitor does not need to visit the homepage to find their way around… surely that’s the job of the navigation? Here’s the distinction, from my perspective:

  • The homepage is a signpost to point visitors in the direction that you want to take them in. It can be accessed via every page, normally by clicking the logo. 
  • The navigation is a signpost to point visitors in the direction that they want to go in. It is available on every page (apart from perhaps the checkout). 

When I say that the homepage is about you pushing people into certain actions, I mean that it is a place for merchandising, promotion and persuasion. It’s a signpost for sure, but on your terms. It acts as navigation but it’s not necessary to go to the homepage to reach other pages. Visitors that use homepages to navigate are suggestible, and as far as I’m concerned you should be suggesting all kinds of things…

So this inside-out approach is something that works for me. It’s about figuring out the key content and functionality that lives on deeper pages in your website, and bringing some of it to the fore on your homepage.

The 37 Signals team takes this to an even more nano level. They employ a process called ‘Epicenter Design’, where the focus is on the key element of any given webpage (the one thing that is the ‘pure purpose’ of that page, which would lose most of its meaning were it removed). 

In the words of Jason Fried:

Epicenter Design involves focusing in on the true essence of the page (the “epicenter”) and then building outwards. This means not starting with the navigation/tabs, or the footer, or the colors, or the sidebar, or the logo, etc. It means starting with the part of the page that, if changed or removed, would change the entire purpose of the page. That’s the epicenter.”

So not only should we be designing our interfaces from the inside out at website level, but at page level too.

What approaches do you use, when building out a new website for yourself or a client?

[Image by rubberglovelover on Flickr, various rights reserved]