If an application doesn’t look great, it won’t get used. This is true for any application—and especially true when it comes to the embedded dashboards, reports, and analytics in your software.
“The look and feel of embedded analytics can directly impact the impression of the overall enterprise application and customer experience,” writes Gartner in their report, 5 Best Practices for Choosing an Embedded Analytics Platform Provider.
So where do you begin? Whether you’re just getting started or you think you’re due for a facelift, follow these five easy dashboard design best practices to create visually appealing embedded analytics.
#1: Start with your brand
Dashboard colors not only need to match the look and feel of your existing application, but also match your overall branding. Start your dashboard color scheme research with your company’s existing brand. Find your company colors defined in a standard profile: CMYK (cyan, magenta, yellow, black); RGB (red, green, blue); or HEX (hexadecimal). Profiles provide color values in percentages, so a specific palette can be recreated in various applications. For example, the primary green color of the Logi Analytics logo has Hex color code #89BB40 and an RGB value of 137, 187, and 64.
Identify your brand’s dominant color (usually the one that pops out in your logo). Use that as your accent color to focus attention on the most important information in your embedded dashboards. Then choose secondary dashboard colors that complement the accent color. Just take care to not stray too far from your brand palette.
#2: Embrace the space
Negative space (also called white space) is a crucial element of dashboard design. But it may seem paradoxical: How can you afford to leave space blank when you’re trying to convey lots of important information on one analytics report?
White space is important for every embedded dashboard. It increases readability and breaks up blocks of information. Adding padding between objects also makes the application easier to use on small screens as your dashboard is sized down for mobile devices. CSS properties such as margins and padding can even accentuate an element’s importance. In a dashboard, for instance, surrounding a particular metric or chart with more negative space makes it stand out to the user. When looking at data visualization dashboard examples for inspiration, notice the placement of white space.
#3: Focus your fonts
As with nearly everything in dashboard design, less is more when it comes to fonts. To ensure your dashboard looks clean and organized, limit the font typefaces, styles, and sizes you’re using.
- Typefaces: For digital fonts, the word “typeface” is often used interchangeably with terms like “font,” “font family,” and “font type,” although historically they refer to different things. Typeface refers to a certain design created by a typographer. For example, Times New Roman, Arial, and Caslon are all different typefaces.
- Sizes: Font size refers to the weight, height, and width of a particular typeface.
- Styles: The style of a font refers to whether it is bold, italicized, underlined, or even in a particular color.
#4: Consider text and background colors
It’s important to choose text and background colors that complement each other. Color adds another dimension to your text, whether for good or bad. For example, using dark text on a dark background will make your application’s dashboard illegible. By the same token, using bright green text on an orange background will look jarring and strain the eye. Use light-colored fonts on darker backgrounds, and darker fonts on light backgrounds. The goal here is less about adding visual interest and more about improving legibility.
#5: Get help from free tools
Choosing fonts and color choices can be a daunting task if you don’t know where to begin. There are a number of online tools that can help as you select your dashboard color scheme and fonts. Below are some free resources to get you started or help you narrow down your options.
- Adobe Color Wheel is a free library that lets you browse thousands of color combinations and create your own color schemes. With coordinated color palettes, the color wheel will help you create a complete color scheme. You can also play around with different color algorithms, so you’re not tied to one palette.
- Paletton features a live colorizer you can use to try out your color choices within your own projects.
- Toptal Subtle Patterns gives you a sampling of free color patterns.
- Font Awesome is a library of dozens of different types of fonts and scalable vector graphic (SVG) icons.
- Google Fonts is an interactive directory of free and hosted app programming interfaces for web fonts. It enables you to customize weights, styles, etc. and then integrate the fonts right into your CSS.
- Fontpair.co will help you pair Google Fonts together if you decide to go with more than one typeface.
Dashboard design quick fixes can really up the “wow factor” of your dashboards. You may end up refreshing some colors or swapping out some fonts, but for the most part your data visualizations will stay intact. Start by making a few small changes to your application’s dashboards and reports. You’ll see how subtle adjustments can add up to a more modern analytics experience.