Introduction
Think of this page as the shop window. It is the primary display point of the brand. It needs to capture attention, and peak interest. It is also the starting point for many users to navigate into specific product journeys, or learn before they purchase. The homepage has to work hard and wear many hats without being an overwhelming barrage of information.
Purpose
- An introduction to the brand, leaving a lasting first impression.
- Promote specific products or services offered.
- Drive traffic to strategically important products and services.
- Provide a starting point for customers to easily find what they need.
- Promote the latest offers.
Principles to follow
| Creative | Tone of voice | Keywords |
|---|
| Warm and friendly | Be active, Be natural | Promotional, Navigational, Informative, Memorable |
Example
Content guidance
| Page composition | Description |
|---|
 | This page will always start with nsx-header providing the primary navigation for the website, whilst also being our main brand presence with the logo. |
 | Positioned directly beneath the global navigation and above any content, ns-skyline displays high level messages to the user. The purpose of ns-skyline is to notify the user of important site-wide, or non-page specific events, that may affect their experience of using the website. |
 | This ns-landmark consists of a heading, an introductory paragraph and a CTA. Landmarks are used to introduce the page, informing users of their current location and its primary purpose. They contain the most compelling and important message, emphasising the key points in bold text, accompanied with a relevant ‘hero’ image. |
 | Next, this ns-panel consists of a heading, an introductory paragraph and 3 ns-card components (section type), with CTAs for the most common reasons a user would be visiting the website. |
 | Next is a ns-lockup describing some information such as latest news or a promotion combined with an image and a CTA. |
 | Following on, are 3 more ns-card components with text CTAs, combined with a heading. These offer links to other services that may also be of interest, but are of less importance than the 3 cards above. |
 | Next is an ns-lockup with decoration which is used to grab attention to another product or service lower down in the order. |
 | Following is an ns-lockup but without decoration, so of less importance than the lockup above. |
 | Then there is an ns-lockup with decoration… |
 | …and then, if it’s really necessary another ns-lockup variant can be used. Be mindful of putting too many lockups on one page. |
 | Now towards the end of the page we can ‘mop-up’ any users that have scrolled this far. Ask, ‘What else might they be looking for that’s not already been mentioned above?’ It consists of 3 more ns-card components with text CTAs, and with a decoration that is sympathetic to the end of the page caveat or footer section. |
 | If required, include ns-caveat to provide additional information and legal details to the content. |
 | Finally, there is nsx-footer which holds all required links and copyright information for the website. It is also an important SEO tool as it includes links to social channels and our mobile apps. |
