How we went from individual styles to a consistent look-and-feel in the NZZ Graphics Team
What a style guide can bring to the visual harmony of a publication. And how implementing it in a daily newspaper is complicated.
At NZZ Visuals, our main mission is to drive the creation and publication of data- and visual-driven stories at the Neue Zürcher Zeitung. We’ve built a toolbox for the newsroom to produce simple graphics and developed a matrix to help us determine how and where to use our resources. And now, we’ve created a style guide that establishes principles and visual consistency in all the work we publish. 🎉
There’s just a couple things we need to clear up to put the next few paragraphs in perspective:
- The Graphics Team is a small group of information designers within the Visuals Department. We take care of all of the custom graphics published on the online platform and in the print editions of the paper. This also includes versioning of graphics optimized for social media as well as teaser images that function harmoniously with imagery on the homepage.
- In our Q Toolbox, we already had some basic fixed styles that helped bring visual unity to all of the graphics spit out of the tool. Unfortunately those graphics are only a fraction of what we produce which increases the mish-mash of visual styles across our publication.
- The Neue Zürcher Zeitung, at least at the time of this post, has no Art Director focused on the online platform and therefore no central point of direction or decision for online visual language.
Brand recognition is a well known feature in the graphic design world and a necessity in the marketing world. The challenges facing the journalism industry are at this point undeniable: Without paying customers, there is no publication. Recognizability in our graphics and visual storytelling (“oh that looks like an NZZ story!”) would only help solidify our edge within the German-speaking media world. After I joined in early 2018, we finally had the time and resources we need to push an initiative in this direction forward. We decided that we would develop a style guide to help us in the day-to-day work.
Hurdles and challenges presented (and continue to present) themselves along the way. There’s dozens of learnings from our process but the following are some of the major things we had to accomplish in order to arrive where we are now:
Change our mindset
Daily publication is a grind. Like many news organizations, the product was first a physical paper before it ever lived online. This means the paper usually has one life and after it has been read it’s used for something else, like drying out hiking shoes or wrapping a fish.
Once the internet came along we all learned that things published online live forever. Or at least a very long time. Writing sustainable code, using sustainable methodology and designing in a sustainable language just makes sense in this world. But the idea of a sustainable visual language can be a little scary to designers because, well, we’re artists! A library of predefined style elements theoretically constricts our creativity and spontaneity.
But having each of us designing with the same language doesn’t mean that what makes us individuals is lost. It means that we’re a team with a set of principles and definitions that we believe help us communicate the story to our reader – together. Having a systematic set of rules also allows us to produce smaller, more basic graphics quickly without too much thought or effort. This frees up our creative brain space for the time when we’re working on larger, more impactful stories.
Define honestly and strategically
We all him and haw and being micro-managed. Deciding what exactly what should go into a style guide needs a preliminary discussion so that every little detail of designing doesn’t turn robotic. For us it was necessary that we left space for the occasional story to have its own voice. There will always be topics that play outside the bounds of daily business and those deserve special attention when told with strong visual elements.
We chose to solidify the following:
- fundamental rules that span across all of the data-based graphics we create, like: We don’t trace other people’s work
- loose design principles that lay the groundwork of all graphics
- qualitative, sequential, diverging and thematic color palettes
- typography
- a few basic charts that land outside of the chart toolbox
- and a few more complicated charts, like scatterplots, as well as data-based maps with the focus on how we make sure the reader understands what’s being shown
In this way, the style guide really became a set of guidelines. This helps us move fast in daily business and stay consistent in all of the basics visual elements that help communicate both the information and our brand.
Think “living” – not “final”
Another terrifying thing, at least to some of us, is the finality of putting something down with pen and paper (erm…with markdown code and pushing to the master branch). Style guides created for digital products are typically in designer-circles preceded with the word living to signify that things will most likely change and be updated. Additionally living style guides can adapt to audience, to platform, to device, or to anything else that affects the object it is applied to.
At first it feels wild to publish something with placeholders — omg we would never do that in a story. But it’s also extremely freeing as it allows you to actually finish something and give a nod to the inevitability that things will look different in a year.
We’ve not yet received any feedback about our style guide from other journalists or editors but wouldn’t it be cool to get them making pull requests?
Take on the continual challenges
There are so many struggles that come with creating a style guide within a media organization, which is probably why a lot of them don’t have one or at least make them public facing. We didn’t overcome all of those struggles, there are still a few that trip us up every now and then:
We use something built by someone else. This means the style guide doesn’t look as perfect or function as perfectly as we’d like.
Next to us sits the Editorial Tech team at NZZ, who were once an integrated part of our team. This awesome group of developers have all the skills we would need to make a living style guide tailored exactly to our needs. This would also take quite some time. After much discussion, we decided to use an open source tool built by another great agency in Zürich, so that the developers here can keep their focus on building other tools and stories for the wider editorial staff.
We have freelancers and others on the team who work part-time. This means sometimes graphics get published without the most recent definition being applied to them.
We update the style guide anytime there is a change we’ve agreed on. Keeping everyone on the same page when things change is difficult but for the same challenge there’s also the advantage of having a central source of truth and a place where all the most recent design assets hang out.
We have people outside of the Graphics Team that have ideas or experience which lead to definitions that change our work. This means there’s more than one cook in the kitchen.
Using a system based on markdown and simple React elements, our style guide is easy to update for anyone who wants to contribute. Adding methodology or political party colors doesn’t require much else than a Slack message to let us know you updated it.
We have no central ownership of the style guide. This means keeping it updated isn’t always the first priority.
This initiative had humble beginnings when I opened up a Basecamp project and scheduled it to last only 3 months. Back then, it was as much about achieving a “tangible” result as it was about garnering acceptance within the Graphics and wider Visuals Teams. Though I care for its preservation, it is no one person’s responsibility to update “that one section that still has placeholders.” This is a risk, but together we’ve decided to design with one, big voice. We should also together hold the responsibility to care for it.
Anyway, here’s the dang link to our style guide. Don’t forget, it’s a WIP.
Feedback, tips or questions about developing a living style guide within a media organization? I would love to hear from you: @wiederkehra
