The Design of Articles

Condé Nast UK

I led the design team in creating an article and gallery framework for all the Condé Nast Digital titles.

The goal was to create a system for the editors to create a range of different styles of long-form and short bitesize articles, but it to feel like a beautiful and immersive reading experience each time for the users.

We wanted to create a framework so that the editors could be empowered to create these reading experiences themselves, whilst creating boundaries to protect the reading experience and clarity of the page. I worked closely with all the editorial teams at Vogue, Wired, Glamour, GQ, and Traveller, analysing their editorial styles for both regular content and long-form features in order to, with them, create guidelines and style guides for their different types of content.

Several years ago, when the need grew for our sites to be responsive, we broke out of the traditional approach to presenting content with the copy on the left with a right column for advertising and additional content and links. Not only did this not work on smaller screens, research showed the right column was being completely ignored by users, effectively all it was doing was creating clutter and the advertising was being completely ignored.

This heat-map of the old article template, produced by our IA team, showed mouse tracking, which is proven to have an extremely high correlation with where the reader is looking.  The right column is being largely ignored, serving only to clutter up the page and make for a distracting reading experience.

From these findings, we stripped everything out of the article apart from the content so the reader could be immersed in the reading experience.  Advertising was placed in-content, and encouraged to be less annoying, so that it has the opportunity to get more engagement, without affecting the user's reading experience.

Typography

I always have felt that typography is one of, if not the most important, tool a designer can use on the web. Working with magazine brands this was just as true as ever, but also a completely different challenge from designing a print magazine. As we were creating templates for editors to write so many articles per day, we didn't have the luxury of designing the articles around the content of each story, we had to establish a style system that would work for all different types of content and image. 

I led the design team in branding, typography and styling to make the articles for each brand unique and true to the brand principles. The design had to enhance the content, not take away from it. To achieve a clean design and make the content and imagery stand out, we embraced flat design principles, getting rid of pixelated graphics and using icon fonts for vector graphics where possible

I then led the design team in implementing this framework in CSS and SASS helping guide and teach the designers that were new to CSS, empowering them to have the control of designing in the browser. This meant us designers could iterate and review quickly, mostly independent from the development team who were at the same time working on the complex CMS and behaviour logic

Other content

Another nice challenge was coming up with toolkit of options for placement of advertising, images, gallery thumbnails, quotes, related articles, and videos - everything to enable to writers to tell the stories they wanted to tell.  Each one of these was designed to work in 3 different display options: full-width of the copy, pull-to-side, or inline with the content. These display options allow for the editor to choose the importance of the content, like a magazine - essential to break up elements of the story, related to a specific paragraph, or peripherally related. On smaller screens almost everything would be single column with subtle design changes for those display options,  but larger screens enabled more layout options for the words and images to work together. 

Galleries

Just as important as articles for telling stories are the galleries. One of the big challenges of designing galleries was creating a template that worked for all types of gallery content created by our editorial teams. The two main types were 1. galleries that told a story where the text was essential to understanding the image and 2. galleries where the image was the most important and a caption was secondary.

 As well as the editorial requirements, there were the commercial ones, the galleries had to be able to accommodate different types of advertising without taking away from the impact of the image and text.

We had a lot of trial and error with different methods of galleries, going from traditional left and right arrows to up and down to keep consistency from mobile through to larger screens. 

As an ever increasing amount of users were viewing these sites on mobile, mastering how they worked on small screens was essential. We changed our template, which previously required users to tap or swipe for a caption, to a simple scroll down through images and captions, which enabled all the text and images to be read with just one movement of the thumb. This also enabled advertising to be inserted between images without creating too much annoyance for users.