The brief

Without a doubt the most important page for NRC is the article page. Early on in the process I switched from an article templates system to a component based system. Allowing to mix and match every element and option for any article a journalist would like to write. This would open up enormous amount of options.

Article concept

I started with a base article design with defining all the base elements that would go with all articles, leading to the base article. From there I designed and added new headers, components and defined the foundations for this project.

nrc article layout total on both desktop and mobile

Foundations

Since typography was an essential part of the experience and a major element in the NRC branding, I created an extensive typography scale set, consisting of headings, body text and meta text.

For the article I setup a new series of foundations that will in time replace the old foundations for the entire platform. I introduced a responsive type scale and set up new color variables, cleaning up the entire code base.

typescale example for NRC article

Article Header

Article headers play an important role in the identity of an NRC article. Since NRC produces a lot of different types of content, a wide variety of headers were introduced. All for specific use cases and customizable options.

Liveblog components

Liveblogging is an important type of content. And a very flexible form of content, very much dictated by the urgency of the news. I designed a new site of liveblog elements that could be combined with other article components for optimal flexibility.

Podcast header

I introduced a new podcast player for the entire platform with multiple appearances, the header being one of them. The header had to both look good and be very accessible.

Article elements

All elements come with styling options. Editors can style the elements in Gutenberg in a WYSIWYG way so it's easy to style the article they're working on. All elements have been designed as part of the NRC design system.

Listicle cards
Listicle cards
Article components
Article components