Data Visualization Style Guide: How I Learned to Design One
What’s a data visualization style guide? Why and when is it needed? How do we create one? I initiated a project to better understand them by designing one for Slack.
Jane Zhang - May 10, 2020
Table of contents
What’s a data visualization style guide? Why and when is it needed? How do we create one? Ever since Amy Cesal wrote about them on Nightingale, I have deeply admired them. In the design world, brands typically have branding guidelines that help create a cohesive brand voice. Branding = identity, and it’s no different from a person’s personality. As people, we have personalities that are relatively stable and predictable. Your family and friends know what will make you happy, or what will make you upset. And this is because you have a consistent personality. When it comes to brands that represent organizations, it is harder to have consistency since so many people have access to it. This is why branding guidelines are necessary to create that consistency.
Sadly, branding guidelines generally do not account for best practices visualizing data. This is where data visualization style guides come in handy. They are integrated with the overall branding guidelines and provide direction on best ways to show data.
Learning how to develop a data visualization style guide
I’ve always wanted to design a data visualization style guide and decided to try it out for the first time as a project. The first task was to select a brand to make this guide for. This was surprisingly very, very hard.
I looked up many, many brands on findguidelin.es and I had to develop a criteria for what would be a good fit for me to try. What I came up with was that the brand had to meet the following requirements:
- The brand respects and values design
- Detailed branding guidelines exist publicly
- There are existing applications of data visualization, like a report or a presentation
Of course, the most important consideration is if they even need a data visualization style guide in the first place. Truth be told, it’s not something many companies need. But for my purposes, I didn’t consider this as I am just looking to learn and not actually solve a real client problem.
Before designing anything, I always consider if it’s needed in the first place. Does it solve a problem not yet solved?
The following brands is part of a condensed list I looked through. They all met the first criteria and respected the value of design.
Slack as a case study
Slack was the only brand that met all three requirements. I like how simple their branding guidelines is. It’s straight to the point and is in PDF format. They dedicate about 1-2 pages per concept. You can see Slack’s branding guidelines. Below is an excerpt from their full branding guidelines document.
Next, I did some digging around on how Slack shows their data to the public and to their users. I found three ways:
- Online dashboard
- Blog post
- Presentation report
Slack’s External Dashboard
Here’s a dashboard I accessed to see member activity of a Slack channel I am part of. There’s good enough contrast in the lines to be accessible to those with colour deficiencies. All the colours used conform to Slack’s core colours. The colour contrast is good as well. This means it’s generally accessible by those with colour-blindness. I tested this out with Photoshop’s function Proof Setup (read more here on Adobe’s site). You can also use a colour blindness simulator at Coblis which is free to use.
Slack’s Blog Posts
This is pulled from Slack’s blog post on their website. The graphs here look choppy and hastily put together. It still has consistency to the brand colours, but could use improvement in the dataviz side, especially the number of colours used.
In total, 6 colours were used throughout all charts. Going back and forth to reference the 6-colour legend is bad UX. This is categorical data, it’s not good practice to assign one colour per category. The user can understand these are all different regions with white space and axis label. Instead, we should group colours by time period. Here, we use 2 colours instead of 6.
Slack’s Financial Presentation Deck
Slack’s financial reports that is available to the public. This deck looks different from both the dashboard and blog post. It’s almost as if they might need a data visualization style guide to make everything more consistent… 😉
Studying Existing Examples of Data Visualization Style Guides
I studied several dataviz style guides. Here’s a list that’s being compiled, if you have one you’ve come across not yet on the list, please send them to Amy using this form.
As I studied these style guides, I noticed that they generally followed this format:
Shopify starts with a very high-level introduction to data visualization followed by general guidelines. They outline five key traits to guide their data visualizations.
Then, they zoom into the details, detailing specific instructions on how to show axes, visualize with colour, and even going into interactivity. They use a “Do”, and “Don’t” approach when outlining the granular details. Shopify didn’t go in-depth into data principles, such as defining what a mean is or going into what ordinal data is.
Adobe has a similar structure as Shopify. It starts off with very high-level information about data visualization. It then dives into data principles, explaining the different types of data one can encounter.
Finally, the style guide explores colour. Similar to Shopify, it has this “Do” and “Don’t” approach.
Designing Slack’s data visualization style guide
Keep in mind that this is a personal project. I wasn’t commissioned to make this for them. I wanted to integrate the style guide into the branding guidelines document, which was a PDF file. I decided to design the style guide with only two pages. The first page was dedicated to general guidelines, while the second page was more specific.
I had a hard time deciding what to include in the guideline with such limited real estate. If I was working with Slack, I would try to figure out their priorities in how they apply their data visualization. Where do they need help most?
From looking at their applications, I gathered that they could use some help with very basic data visualization guidelines:
For the second page, I provided guidelines that would be helpful for their blog posts and presentations. My guess is that Slack probably creates more blog posts and presentations than they do dashboards in a year.
I spent less than a week making this. It was SO hard to decide what to show in these two pages. I didn’t even get to go into types of data like categorical versus ordinal or things like chart types (pie charts, scatter plots, line charts, etc.). Again, if this was a real client project, I would try to figure out the biggest need and get very specific in how to address them. Overall, a fun challenge. Might do more of these in the future.
My name is Jane, I am an independent data visualization designer based in Toronto. I create print products that solve specific user problems. I write on my blog to help me reflect on lessons I learn as I walk on the dataviz path. If you learned something new or useful, then please consider supporting my work.