Ørsted’s websites are built using a modular component library that provides the building blocks of our digital presence.
User-centric and on-brand
Our websites are designed in a way that is visually consistent with our brand, while also providing a good user experience.
This means relying more heavily on neutral colours for backgrounds, grouping items on the page, highlighting calls to action, and guiding the users’ attention with thoughtful use of the bolder colours in the palette.
To make sure all our websites are legible and visually consistent – from our local market sites to the global corporate website, along with specific campaign sites – font sizes and colour themes are handled by one global style sheet.
Layouts with flexibility and consistency
We work with a 12-column grid and a set of page templates that help create a consistent visual hierarchy between different page levels. It also ensures consistency and responsiveness across different screen types.
Higher level pages like homepages and section pages provide an overview of a site or section. They are dominated by full-width components that guide the user on to article pages with more detailed information. These article pages tend to contain more text, which is balanced with the use of white space to maintain a sense of visual calm.
Read more about page templates and building pages as an editor in our internal editor guide. The guide is available to anyone with an Ørsted IT account. If you think you should be able to access it but can’t, please contact Global Branding & Marketing.
When designing for Ørsted’s websites, keep the following in mind:
- What is the most wanted response (MWR) for each page? This should guide the hierarchy of content and calls to action.
- When using images, think about their relevance to the content and purpose of the page, and also how they relate visually to the background colours and other visual elements.
- Make the pages skimmable, use white space to graphically guide the user and make sure that calls to actions and texts are web optimised.
- Make it clear how the elements on the page relate to each other by grouping them together or spacing them apart as appropriate.