clock menu more-arrow no yes mobile

Filed under:

Creating a design system for collaboration

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.

Screenshot of style guide in a google doc, showing the table of contents and the color section of the style guide.
Part of our living Style Guide for Curbed’s 10 streets that define America

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.

Each frame has a portrait or city photo in the background, highlighting different locations from Curbed's story. First frame: "People make cities," Second frame: "They open small businesses," Third frame: "Preserve historic buildings,"
Each frame has a background image of a city or portrait. First frame (continued from previous image) "And on the streets of these cities," Second frame "They show us what matters." Third frame "Tuesday, Oct. 25, 9AM"

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.

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 America

The 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:

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.

Screenshots of the newsletter on desktop and mobile.

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.