Mark Boulton

Vogue

Rebuilding a global Vogue design system, starting with the basics

The iconic Vogue magazine is like no other. A powerhouse of trend-setting design and editorial, it was, like many before it, striving to position itself to new digital audiences. And it needed to do it quickly.

I was asked to join a small, multi-disciplinary team in London for four weeks to work on a rapid pilot to redesign Vogue.de. The resultant system would drive the redevelop of Vogue properties throughout the portfolio.

Role

  • Design Director

Services

  • Design sprint
  • Web design
  • Design system
  • Strategy and consultation
The project was developed mobile-first with a focus on imagery and supportive typography.

The priority for this pilot was not to reinvent, or to be innovative, just to produce really solid, consistent, scalable foundations. To make decisions on the basics like colour, typography, iconography. To get real-world feedback with sometimes daily user research. We didn't have the time to reinvent the wheel, but we had just the right amount of time to make sure what we did was appropriate and scalable. Pragmatism was the order of the day.

The image gallery was a key piece of functionality for users.

For a typographic designer the challenge with this system was the priority was images, not words. The interface was all about imagery and ensuring they are legible, inspiring and navigable. The words played a supporting role, in the same way the typography plays a supporting role to the content. The typography considerations were undertaken with an empathy to the strategic goals of the interface whilst being mindful of the visually mature stakeholder audience within Condé Nast. We really sweated the details.

Typography specification using Bressay and Lato

The components from the system were painstakingly produced in Sketch and available for the developers in the team. The UX designers also took these components to produce high fidelity mockups and wireframes for testing purposes.

Component library in Sketch.

Elsewhere