The Art of Dashboard Design

by Alexander 'Sandy' Chiang

1.0 INTRODUCTION

This article is for developers who want to attempt the layout and stylizing of dashboards. In addition, graphic artists who are just starting out in designing dashboards may find some of these points informative. This is not a definitive guide, but a consolidation of common practices I've come across while exploring my own creative side in dashboard design. A lot of the material here is based on simple color theory and discussions with graphic artists who stylize dashboards. I will cover individual data visualization styling (charts, gauges and maps) such as fonts and colors, as well as overall dashboard layout and styling considerations. In addition, it is important to mention that when creating dashboards, function should always follow form; i.e. how the dashboard works and how the user should interact with the dashboard should take precedence to how the dashboard is going to look and feel. However, you find that there is a balance between the two.

2.0 GENERAL STYLING Before starting any styling, you should look for a starting color palette. Often, there are corporate colors to work with or, at worst, you can create a simple palette from a logo you may be using. If there are no brand colors or logos, then I would generally go with a simple palette of white, a primary color like a cool blue, and a light gray. You generally can't make a horrible-looking dashboard with this approach, but anything is possible when you're an artistically challenged developer like me. From this base color palette, you can use a palette generator to create a more diverse range of colors for use. When you have multiple data visualization components and various legends, you will need all these extra matching colors. I like to have at least eight colors on hand. Data visualization backgrounds and the dashboard background generally use neutral colors such as light pastel colors and light tones of gray; if possible, use a very light version of a color from the base color palette. This allows for data visualization elements like bars and pointers to stand out more.

Attention to detail is important in general, but fonts should get extra attention. Use consistent font types and sizes throughout the entire dashboard. In a web environment, you can use Trebuchet MS or Verdana and, for desktop dashboards, you can use Myriad, Calibri, or Arial for titles and Verdana or Tahoma for content. General font sizes for objects like axis titles, axis scales and legend descriptions are around 10pt. Use 12pt to 14pt and possibly bolded text to distinguish main titles from the other titles.

3.0 Chart Styling

3.1 Chart Taxonomy

3.2 Tips and Tricks

• Be careful with using colors that are similar; this may make it hard for some users to distinguish between the series.

• Pick a base color as a starting point for one series and find complementing colors for the other series.
• If you need more than three series, you should rethink your chart. For example, will the end user be able to distinguish between four or more lines? This could make it hard to read.

 

• Even with three series, consider using either three-column charts or a combination of area, column and line charts.

 

• If comparing two trends, consider showing one as an area chart with a neutral color (as a base comparison point) and the other as a line with a bold color. This will help the end user in comparing the two.

 

• Generally, for trend charts, make it wider than it is tall - and make sure to show the legend at the bottom. This is the most space-efficient layout.

• You should generally use bar graphs for showing category series, simply because bar graphs are easier to read in this context.

 

• Giving the chart a meaningful title can eliminate the need for axis titles and give you back some valuable screen real estate.