Key Elements:
- Header + navigation
- Hero Image + elevator pitch + CTA
- Teasers with CTA into various website areas
- About teaser
- Footer
The Header
This is really an element of all the pages across your entire website, but good header design is paramount to intuitive navigation and user experience.
The header should not distract from the content and if it starts of large and remains on the screen as you scroll, it should shrink to a smaller height, so it minimizes out of the way and does not distract from the content and browsing experience.
The header should have your logo (or an icon version of your logo) in the top left or centre. These are the two places that are standard for everyone to find your logo. It should always link back to the homepage too.
Then have your main pages (with subpages as needed). Try to think through you content and if you can make everything work with main and subpages. Do not nest content more than two levels deep, unless you have a very complex product catalogue.
There should always be a Contact option to the far right of your navigation (last in the list).
And the main/overall CTA should be a button in the far right. e.g. This could be Contact or Book Now.
Layout the Welcome Mat
While it used to be customary to literally welcome visitors to your website, content marketing has shifted to be more customer-focused. People want to know immediately, “What does this business or organization do? And what’s in it for me?” In short, they want to know your brand promise in one sentence.
So begin your homepage with your value proposition. Answer the 5 W’s but with a twist:
- who you serve, not who you are (*)
- what you offer
- where if your market is location based; e.g tourism or offline service)
- when if your offer is time-based; e.g. how quickly you can deliver
- why it’s important to your ideal customer
You can answer all these in one sentence including the promise your brand delivers. [examples]
Pair your elevator pitch with a feature (also called hero) image (photo or illustration) that demonstrates or supports your message visually.
The Teasers
Follow this up with teasers into the various pages or sections of your website. Focus on visual aids paired with one-sentence descriptions that include the keywords you want to be found by.
Lower down the page, you can do things like: feature brands you carry, shop categories or specific products.
End the page with an About section teaser with “learn more about us” button.