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.
- 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.
|Creative||Tone of voice||Keywords|
|Modern and dynamic||Welcoming, Be helpful||Detailed, Informative|
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.
|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.|
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.