Float: right, width 60%

Border top, bottom

Text shadow

Border bottom, width 100%

Float left, width:38%

Border left, padding, negative margin

British Vogue Gets Top Marks for UX & Branding

By SHELLY WILSON for TYPECAST

It’s funny. When it comes to design, typography and layout, often we look to the world of print and traditional publishers for examples of ‘getting it right’. 

After all, for many of the challenges we face in the web design world, they’ve already been there and done that. But while so many of these brands excel in print, a recent study suggests that many are struggling, even failing, to provide their readers with quality experiences online.

The research was commissioned by Monotype’s Brand Perfect initiative earlier this year and looked at the top 100 online consumer publications in the US, UK and Germany. Researchers observed that publishers have been slow to provide rich and contextually appropriate cross-platform experiences. 

2 of 100 

Only two out of the 100 titles in the study were responsive sites: British Vogue (UK) and Quartz (US). A modest 25% were optimized for tablet displays, with the majority defaulting to automatically scaled-down versions of their desktop sites (despite the fact that mobile smart devices like tablets and phones are predicted to outsell desktop computers two-to-one this year). And although many of the titles offered a mobile app version of their site, many of these were a replica of their print publication.


Winning by designing for the reader

Clarity and brand personality

But it wasn’t bad news for everyone. A panel of experts assembled by Brand Perfect selected British Vogue as the title offering the best cross-platform experience to readers.

“This feels like the most modern of the sites we’ve looked at today, in terms of understanding browser technology and its layout,” said Alex Ossman, panel member, Digital Creative & User Experience Consultant, and the creative lead on the BBC iPlayer. “Nice big font sizes; good amount of white space; good design grid.”

The panelists also admired Vogue’s design clarity, use of web fonts and HTML5, its adaptive design approach and its strong brand personality.

“It’s definitely the winner for me. And it’s also refreshing to see British Vogue have enough confidence in its brand to keep advertising clear of the homepage, which is perhaps analogous with a magazine’s front cover.”

The team at British Vogue attributes their site’s success to a number of factors: making typography and content the top priority throughout the process, questioning norms, finding new and better ways to work together, and frequent testing and iteration.

“[Before this redesign], our article templates were like countless other sites’,” says Gareth Williams, Lead Information Architect at Condé Nast Digital UK. We [had] site navigation on top, assuming if someone selected this article, the first thing they would want is full access to the whole site. The usual right column held advertising, boxes for most popular, what’s being shared on Facebook, photo section highlights, etc. We figured that people were most attracted to the words ‘most popular’ and ‘most shared’, and, therefore, the content underneath these. Our research showed that these long held industry truths were not true today.”


A new design process

The importance of type to brand

By adopting a content-first approach and getting rid of the distracting elements many publishing sites still hold on to, they were able to improve the way readers explore content.

“We threw away the idea that an article page, list page, gallery and homepage are all separate entities and aimed to build an experience that focuses on the user’s overall journey.”

Careful consideration of the typography and heaps of experimentation allowed them to establish and convey a strong visual brand identity not just on desktop, but across

Sign in

Typecast app screenshot

Quickly style type in the browser and check for readability, rendering and beauty as you work.

Try It Now or See what you can do