The stories we create live in many forms beyond just our websites. Audiences experience our brands at various touch points, and we strive to meet them where they are. Because of this, designing a story is more than laying out a responsive web page. It’s building a cohesive design system that can scale and evolve between platforms.
Yesterday we launched Curbed’s 10 streets that define America. The project had many collaborators, including reporters, editors, designers, engagement editors, engineers, videographers, and photographers. With so many people creating assets for this story, it was important they all felt cohesive no matter the platform they appeared on.
Collaborate on definition
Because so many people were working on this project, we decided to create and distribute a style guide for the story. We knew we had to collaborate in order to define what would be included in the style guide if we wanted everyone to use the correct design system.
Historically, we’ve created style guides in a design program like Illustrator or InDesign, and distributed a static PDF to any teams working on a story. For this project, we wanted to iterate on that part of our process and experiment with other forms of documenting a style guide.
Living style guides are better than PDFs
When you house style guides in static PDFs, they quickly become irrelevant throughout a projects lifespan. We are always evolving design and iterating on our work, so it’s important that our style guide stay up to date.
For this Curbed project, we decided to test what a style guide living in Google Docs would look like. Instead of passing around static PDFs, we shared one Google Doc link that was the canonical reference for all design throughout the life of the project. When we updated the colors or added an additional font, we also updated the style guide. This way, we could communicate that the style guide had been updated without distributing an additional file to keep track of.
Because we used Google Docs, we were also able to have all collaborators ask questions or leave comments. The barrier to entry for participation was low, meaning the guide was more collaborative and included more contributions from teammates beyond just designers.
A design system in practice
Creating a style guide that is living empowers people beyond designers to contribute visually to a story, distributing the work and creating shared ownership. By creating a flexible and extendable design language, we were able to have a cohesive visual story told across many platforms, with assets made by many team members.
On Instagram
Mercedes Kraus, Curbed’s Engagement Editor, used the style guide to create an Instagram Story teasing the publish of the feature.
On Twitter
Different templates were created so the engagement team could create a variety of share images to promote the story across many of Curbed’s social accounts.
What’s shaping American cities in 2016? Find out tomorrow at 9:00 am. (You’ll want to clear your morning.) pic.twitter.com/8I7HLbLbME
— Curbed (@Curbed) October 24, 2016
10 Streets that define America - Key West made it!https://t.co/LIYNw3T70w pic.twitter.com/V86yAIgj0R
— Curbed Miami (@CurbedMiami) October 25, 2016
On Facebook
The style guide included designs for video application, and were used for videos throughout the story and on Facebook.
Main Street, Louisville, KY | 10 streets that define AmericaThe 21c Museum Hotels, an art museum and hotel, is reversing suburban flight by combining art and tourism in Louisville, Kentucky. Read more about it, here: http://bit.ly/2eOyDop
Posted by Curbed on Tuesday, October 25, 2016
In your inbox
On the morning the story published, Curbed sent out a story-specific newsletter that included photography and typography that fit with the overall design language of the story.
In this distributed media landscape, it’s harder and harder to keep up with all the platforms we’re hitting. The more our tools encourage collaboration, the easier it will be to distribute our work and publish everywhere.