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 also provide relevant information and instructions for action to make everyday work easier for the observer and thus optimize processes. To do this, 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 in a meaningful structure, but also make it easier to design the dashboard. In design education, you usually work with a 12-column grid and additional horizontal guidelines. The various dashboard elements such as graphics, charts or text blocks can now be easily aligned with the grid. This also ensures a consistent look across multiple dashboards. Other well-known grids include the golden ratio or the Fibonacci sequence.

‍

This also ensures a consistent look across multiple dashboards. Other well-known grids include the golden ratio or the Fibonacci sequence.

This also ensures a consistent look across multiple dashboards. Other well-known grids include the golden ratio or the Fibonacci sequence.

This also ensures a consistent look across multiple dashboards. Other well-known grids include the golden ratio or 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, related, or particularly important. 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 be more concise in the visual hierarchy than the time or date. You create this hierarchy not only by varying the size of your dashboard elements, but also by using color and color contrasts as well as positioning and direction (as with diagonals). Particularly large or centrally placed elements are the first to be noticed, but even a small element can be brought into focus through targeted use of color.

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

‍The characteristics of fonts

Different fonts are said to have different character traits. While fine, delicate fonts look elegant, fonts with an inclination are considered dynamic and bold fonts are considered loud. Think ahead of time about where your dashboard will be used later. Is it hanging high up in a production hall or right next to a machine for interactive operation? So do you have to recognize the font from a long distance or from close range? It is true that the farther away your dashboard will hang, the bigger and clearer the font should of course be. Digital texts — as you can see here in our blog or in Peakboard Designer — usually use fonts without serif. Serifs are the small design elements at the beginning and end of a letter. While these help the reader to connect individual letters together in print media and support the reading flow, the Times New Roman font, which is popular in newspapers, could pixelate or blur on screens with different resolutions, making reading difficult. In addition to choosing the right font, how you design the respective text elements also plays a role. While the main part of the information should always be easy to read, headlines can also be a bit more playful if necessary. And while annotations fade into the background and only provide additional information, highlights should attract the viewer's attention. To be absolutely sure, you should occasionally test your result and check whether the font is legible from the desired distance.

Tip: To design your dashboard in your company's corporate design, the Peakboard Designer offers you the option to upload your own fonts (fonts) in TTF format.

Think black and white

With the optimal color selection, you can now give your dashboard the finishing touch. Here, too, the following applies: Be aware in advance of what lighting conditions your dashboard will be in later and then select the colors that you will use. In a dark environment, for example, a dashboard with bright font on a dark background would be more pleasing to the eye. If you want your dashboard to include a warning message, red is the perfect signal color. Green, on the other hand, usually means that everything is okay.
Pay attention to common color associations, because while black stands for grief and loss in Europe, for example, this association is not known in Africa or China. Also make sure not to use too many different shades of color, but to use color primarily for highlighting.
It may be useful to first create shades of gray on the dashboard and then, in a second step, to check exactly which elements should be brought to the foreground with color accents.

Tip: Note that people with poor color vision may have trouble seeing low-contrast content on your dashboard. Information in red or green in particular can be problematic and difficult to recognize. Therefore, clarify in advance whether any of the users of your dashboard have such a weakness. If so, the icons from our icon library help you create a dashboard that is understandable to all viewers. Now it's your turn! We wish you every success in implementing your dashboard.

Checklist — five steps to the perfect dashboard

Well, were you able to remember everything? Don't worry, our checklist will help you remember the individual points and apply them directly when designing your dashboard.

• raster Bring the elements on your dashboard into a predefined structure and ensure order.
• white space Separate or associate dashboard items.
• Visual hierarchy means that important content is highlighted so that it is immediately recognizable.
• fonts differ in their readability. Preferably use clear sans-serif fonts.
• Color & contrast: Only use color subtly and pay attention to the correct meaning.

‍