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

Fig. 3.1 Elements of a chart