Data Visualization Design Tip: Using a Style Guide

Everybody Needs Style. Why You Need a Style Guide for Your Data Visualization.

We are big fans of efficiency at Inciter. We like to make our lives easier, and we LOVE to make your lives easier. If you are doing any kind of data visualization, this post will save you time and a lot of annoyance. And who doesn’t love to improve their data visualization design?

What is a Style Guide?

A style guide is a document that describes, defines and presents examples of how you should use style elements when communicating. For the Accountable Health Communities Model evaluation we did with RTI, we developed a style guide that would essentially create a brand for the project throughout its life, as well as allow us to have clear standards for design related to the data visualization elements we created throughout the project.

Every time you create a graphic, chart, or report, you have to make millions of decisions. Like Steve Jobs putting on his black turtle neck every day, you can not only make things uniform (haha) but save yourself tons of emails, AND have a consistent brand.

Style guides are a common expectation for design and communications work. As data analysts use more data visualization, and particularly where data visualization and design are part of a larger, multi-year project, a style guide can be a valuable tool. The guide allows team members to make decisions up front about font, color, language, target audience, types of visualizations, and tone up front. Those decisions can then cascade throughout reports, presentations, and social media communications to create a clear brand for the project, as well as clear data visualization standards for presenting findings. Here are some tips on what to consider, and a few examples from ours.

What Kind of Things Do You Include in a DataViz Style Guide?

• Typography. Its not just for design nerds. No decision is still a decision, even if you are just using Times New Roman. Think about which fonts to use, and when. Will your paragraph text have the same font as your headlines? What about annotations? Consider the fonts available to the team. If everyone is working with Microsoft the fonts will be different than for a team designing in Google Workplace. Is it ok to bold, italicize and outline? (Hopefully not all at the same time, but thats another blog post.) Your graphs and visuals will have text. It has to be some kind of font as well. Decision here will play out in your Excel graphics, Tableau charts, Word documents and web pages. In others words decisions here will play out across all the tools you use to create the visualizations and the final layouts.
• **Color Scheme. **You will have to choose a color palette, so your DataViz doesnt look like a box of magic markers threw up on it. Will you use the colors for your organization? Your clients? Does the project have a color scheme of its own? How will you incorporate that into your visualizations? You will want to develop color palettes of shades for bars and pie charts, and think about things such as how to have color in the same spectrum, but that are different enough to distinguish between sections or slices, for example.
• **Style specific to data visualizations. **How will you handle annotations? Where will titles be? You want to make these things consistent across different types of graphics made in different programs. Specify the line weights for different uses and in general. How much clutter is allowed? (How about none.) Where do you put legends? What about axis labels?

Who Is Going to Use This Thing?

• Graphic Designers. While they may not create the dataviz, designers need clear guidance on how to make sure the design of reports, slide decks, and websites align with the design and style of the data visualizations youve created.
• Editors/Writers. Why not have the text of the report match the text in the bar charts? How about that?
• Data Visualization Specialists. We may have one person creating Excel charts, someone else making a map in Tableau, and a third person doing an illustration (for real, its happened to us) so make sure they are all on the same style page from the beginning.
• Developers and Web Designers. They need to create a CSS stylesheet thats consistent with the Style Guide for the project (for example).

Additional Considerations

• 508 Compliance. If your piece has to (or would ideally) be understandable to people who are color blind or have low or no vision, you will need to take special steps to make your visualizations compliant, and you can lay out some of these decisions in the style guide. For example, when you identify which colors to use, you will need to be specific about when black or white text can be used on top of that color, and address other concerns with contrast. Keep in mind that alt-text and text descriptions can also help support your visuals.
• Best Practices with respect to the data. You may decide to lay out general practices for visualizing data, especially if you have different people creating graphics with different tools. The Urban Institute style guide is a good example of how to do this.

So What Did Our Style Guide Look Like?

Our project was for a large research study, with no less than 50 people involved between the RTI staff and the client on the AHC side. We are tasked with providing the visuals and communicating the findings for the project. So its the perfect example of when you have many people, some designers, some editors, some researchers, and graphics that were created in everything from STATA to Illustrator. The guide was essential to making every report and slide deck look coherent.

Typography

We chose Word fonts because of all the many editors that it would go through after us would be using Word and we wanted to make sure everyone had the fonts that we recommended.

Color

We had free reign! While RTI has its own style guide, they were on the same page with us that the AHC project should have its own look and feel. We chose a color palette for the project and then also identified the shades we wanted to use for charts.

508 Compliance

This was the most complex part of the style guide, and the place where we had the most conversations. 508 is kind of like HIPAA. No one agrees on exactly how to implement it. And each federal agency has slightly different ideas of how they want partners to make things compliant. Contrast ended up being the place where we adjusted the style guide the most, shifting the original colors to ones that were more 508 compliant. In some cases we have complex illustrations that just cant be made 508 compliant so in those cases we used Alt-text, tables, and an appendix.

Hopefully Ive convinced you that your DataViz needs a style guide! Who doesnt want more style, right?

For more examples of great DataViz Style Guides check out these:

• Urban Institute Data Visualization Style Guide
• Sunlight Foundation Style Guide
• And of course check out Amy Cesals great post here!

You can also can also checkout another article we wrote about visual reports.