Dashboard design basics

Master your dashboard design: tips for clear insights and efficient work

A good dashboard should not only be nice to look at, but above all convey relevant information and give instructions for action — making everyday work easier for the viewer and optimising processes as a result. To achieve that, you should follow a few basic design rules when designing your dashboard. The following tricks and tips will help you put your key figures in the right light and create an understandable dashboard.

Just don't fall off the grid

There must be order, and that also applies to your dashboard! Grids not only put information into a meaningful structure, they also make the dashboard easier to design. In design teaching you usually work with a 12-column grid and additional horizontal guidelines. The various dashboard elements such as graphics, charts or text blocks can then be aligned to the grid easily. That also ensures a consistent look across several dashboards. Other well-known grids include the golden ratio and the Fibonacci sequence.

Why white space is important

A dashboard without white space would probably be like a newspaper article without spaces — confusing and difficult to read. White space helps you to perceive the various elements of your dashboard as separate, as belonging together, or as particularly important. And of course white space does not necessarily have to be white.

‍

Hierarchy? Please only on the dashboard

Not every element on your dashboard is equally important to the viewer. The actual value of your production, for example, should therefore stand out more prominently in the visual hierarchy than the time or the date. You create that hierarchy not only by varying the size of your dashboard elements, but also through colour and colour contrast as well as positioning and direction (as with diagonals). Particularly large or centrally placed elements catch the eye first, but even a small element can be brought into focus through the targeted use of colour.

Tip: In Europe we read from left to right, as is well known. Keep that in mind when arranging your dashboard content.

‍The characteristics of fonts

Different fonts are said to have different character traits. Fine, delicate fonts look elegant, italic fonts are considered dynamic and bold fonts are considered loud. Think ahead about where your dashboard will be used later. Will it hang high up in a production hall, or right next to a machine for interactive operation? So do you need to read the type from a distance or close up? The rule is: the further away your dashboard will hang, the larger and clearer the type should be. For digital text — as you can see here in our blog or in the Peakboard Designer — sans-serif fonts are usually used. Serifs are the small design elements at the start and end of a letter. In print they help the reader connect individual letters and support the reading flow, but Times New Roman, so popular in newspapers, may pixelate or blur on screens with differing resolutions and make reading harder. Besides choosing the right font, how you style the individual text elements matters too. The main body of information should always be easy to read, while headings can be a little more playful where needed. And while annotations recede into the background and merely add extra information, highlights should draw the viewer's eye. To be completely sure, test your result now and then and check whether the type is legible from the intended distance.

Tip: To design your dashboard in your company's corporate design, the Peakboard Designer lets you upload your own fonts in TTF format.

So much for thinking in black and white

The right choice of colour gives your dashboard the finishing touch. Here too: be clear in advance about the lighting conditions your dashboard will later sit in, and choose your colours accordingly. In a dark environment, for instance, light type on a dark background is easier on the eye. If your dashboard is to carry a warning, red is the perfect signal colour. Green, by contrast, usually means everything is fine.
Pay attention to common colour associations: while black stands for mourning and loss in Europe, that association is unknown in Africa or China. Also take care not to use too many different shades, but to use colour mainly for emphasis.
It can be worth laying the dashboard out in shades of grey first, then checking in a second step exactly which elements should be brought forward with accents of colour.

Tip: Bear in mind that people with a colour vision deficiency may struggle to make out low-contrast content on your dashboard. Information in red or green in particular can be problematic and hard to recognise. So clarify in advance whether any of your dashboard's users has such a deficiency. If so, the icons from our icon library will help you create a dashboard that every viewer can understand. Now it's your turn! We wish you every success in building your dashboard.

Checklist — five steps to the perfect dashboard

Well, could you remember it all? Don't worry, our checklist will help you keep the individual points in mind and apply them directly when designing your dashboard.

• Grids bring the elements on your dashboard into a defined structure and create order.
• White space separates dashboard elements from one another or groups them together.
• Visual hierarchy means that important content is emphasised so it is recognisable straight away.
• Fonts differ in their legibility. Prefer clear sans-serif typefaces.
• Colour & contrast: use colour sparingly and pay attention to the right meaning.

‍