Editorial
page-types
Introduction
Editorial pages are more informative than promotional in nature. In some cases, it is necessary to explain something in more detail without the user needing to take an immediate action.
Purpose
- To reassure the user with well organised details.
- Anticipate frequently asked questions and provide the answers.
- Help the user find everything they need to make informed decisions.
- Provide access to other subsequent and related information.
Example
Content guidance
Editorial pages can contain lock-ups, images, links, lists and CTAs for a rich experience. Consider the hierarchy of information you want to show and group it under relative headings. Use images that help tell the story or help explain a complex concept.
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. | |
Next is <ns-landmark> (hillside) showing a clear, concise and descriptive headline, paired with a line of text that elaborates on the title. | |
Then there is content in the form of <ns-editorial> which can accommodate multiple sub headings, lists and paragraphs. The content should be concise and use sub headings to introduce each piece. Divide content into short paragraphs as it’s easier to consume and aids effective page scanning. It also contains a supporting <ns-image> that should have an aspect ratio of 4:3. Don’t use imagery with white backgrounds. | |
Folllowing that is another <ns-editorial> component that has a reversed orientation. | |
Next is an <ns-lockup> with decoration, highlighting some key information such as a related product or service combined with an image and a CTA. | |
Next are 2 more ns-editorial components that show bullet point lists to help summarise important points such as benefits. These are useful to a user who may be scanning through the page for the details they want to know. | |
Following that is another <ns-lockup> but without decoration, so of less importance than the lockup above. | |
Folllowing that, 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 images and text CTAs, and a decoration that is sympathetic to the end of the page caveat or footer section. | |
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. |
Last updated: