Page type hierarchy

Creating an enjoyable and intuitive user experience

Visual signifiers and patterns help guide users and create an enjoyable and intuitive user experience.

Creating visual signifiers or ‘templates’ for different page levels - 1st, 2nd, 3rd and 4th level pages, lets users know where they are on the site based on the page design.

Levels can differ depending on how many pages you have and if it’s a big or small site.

The last page in a structure should always be an article page for the users to know they are on the deepest level of the site. The section and sub-section pages primarily work as entries for the other pages down the hierarchy.

 

Smaller sites

 

On smaller sites without a 3rd and/or 4th levels it´s section and sub section pages can be built as article pages. If you have a 4th level page, you must remember to make the 3rd level page as a section page, with teasers linking to your 4th level pages.


Front page


Front pages are the 1st level and should always be designed like this. It helps users navigate to the most relevant and interesting content and pages, and represents Ørsted’s core business.

The content is ‘snackable’ and serves as teasers and entry points to more detailed content on the site. This content should be short, enticing and to the point.

Together, these modules create an expansive, vibrant and playful brand expression.

 

Section or sub section pages


The primary focus is easily readable and short content. This level page should allow users to be able to quickly skim related and relevant content, and  provide a next step to sub pages or associated content.

As a rule, the modules should link to the most relevant article pages in that section.

On section and sub section pages you should always have either a top hero image or a horizontal teaser to introduce the section.


Article pages


These pages are the deepest dive users can take. Article pages have more text. Users intuitively know they’re as deep as the site gets. Fact boxes, quotes and images help break up the more detailed text.