• Votes for this article 31 people voted for this
  • Dashboard Insight Newsletter Sign Up

The Art Of Dashboarding

by Alexander Chiang, www.dundas.comThursday, April 16, 2009

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.

Color

Hex Value (RGB)

 

Cool Blue

#6b97bf (107,151,191)

 

Light Gray

#bdbdbd (189,189,189)

 

Fig. 2.1 Neutral colors used as base color palette

Color

Hex Value (RGB)

 

Blue

#1a3b69 (26,59,105)

 

Orange

#fcb441 (252,180,65)

 

Red

#e0400a (224,64,10)

 

Fig. 2.2 Dundas corporate color palette

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.

Hex Value (RGB)

 

#69BF92 (105,191,146)

 

#E3D0BF (227,208,191)

 

#BFBD69 (191,189,105)

 

#BF6995 (191,105,149)

 

#696ABF (105,106,191)

 

#9FD5D6 (159,213,214)

 

#AF7F4B (175,127,75)

 

#B9D69F (185,214,159)

 

Fig. 2.3 Color palette using a free open source tool

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.

Color

Hex Value (RGB)

 

Light Gray 1

#EDEDED (237,237,237)

 

Light Gray 2

#F0F0FF (240,240,255)

 

Pastel 1

#F7FFF0 (247,255,240)

 

Pastel 2

#FFFFB3 (255,255,235)

 

Fig. 2.4 Some neutral background colors

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

Dundas Data Visualization Cunsulting Bar Chart
Fig. 3.1 Elements of a chart

Tweet article    Stumble article    Digg article    Buzz article    Delicious bookmark      Dashboard Insight RSS Feed
 
 Next Page
1 2 3 4 5
Other articles by this author

Discussion:

masoud OhstadHussain said:

Why use gauges in stead of choosing for bullet graphs? And in fig. 6.1 the branding is placed on top, isn't this the most valuable 'real-estate' on your dashboard? Why dont you place the branding on the bottom and use the top for the most important informatian that the end user wants?

Further, good article i'm doing a research on this subject and used some of the information in you're article.

- Djimmy

Alexander Chiang said:

Hi Djimmy,

To be clear, I only use gauges as examples because that is what most people are familiar with and people like gauges. I personally prefer bullet graphs; they provide a succinct visualization of a single value that has context. However, as I mention in my article, layout will play a factor. If you have a sparse amount of metrics on your dashboard and need to fill out space, a circular gauge is great for that. That's the only reason why circular gauges are useful - space filler. Imagine if you tried to use a bullet graph in a square space. It's going to look weird. Of course, the other option is to just redesign your layout.

As for the branding point, I use a webpage design because it is a familiar interface to people (note that the majority of the dashboards I design are for the web). You could put the branding at the bottom, but you should be able to fit the logo beside the title of the dashboard quite easily without distracting the user. As for real-estate, putting it beside the title of the dashboard negates that problem because you need the height for the title anyways.

Thank you for your questions and I'm glad this article could help.

AC

Site Map | Contribute | Privacy Policy | Contact Us | Dashboard Insight © 2017