Aa

Aa

The Art of Dashboard DesignSeven Fundamentals to Master

The Art of Dashboard DesignSeven Fundamentals to Master

Introduction 2

Seven Fundamentals of Design 3

Design Resources 7

Key Takeaways 8

About Logi Analytics 9

Table of Contents

400%

24

“ BAD DESIGN IS SMOKE WHILE GOOD DESIGN IS A MIRROR.”

DESIGNER & ARCHITECT,

JUAN CARLOS FERNANDEZ STUDIO

This eBook, will help you apply the most fundamental design concepts to your visuals to help them become more effective to the human eye.

Why is Designing for Dashboards So Important?A dashboard serves as a visual display of the most important information needed to achieve an objective. This information is consolidated and arranged on a single screen so information can be viewed at a glance.

Because dashboards are heavily dependent on visuals, it’s important to recognize the weight it bears on the human brain. Emphasizing your message with a visual has been proven to increase retention rates from 1 in 5 people to 4 in 5 people.

It’s simple. Well designed dashboards help make information more palatable, and easier to use - key components for helping to increase customer adoption and enhance the user experience.

Introduction

1. ColorChoosing the right colors is the first mistake most people make. Colors tend to have different meanings depending on the context. Good use of colors starts with leveraging contrast because it makes the message clear.

You start by choosing two colors that go together very well like complimentary colors

Using the color wheel (a popular resource for designers), if you choose one color, expect its complimentary color to be the one directly opposite

Be cognizant of the colors you choose and the associations they incite. Take for example red and green. When we look at those colors, we are already making a comparison in some way by linking red with “bad” and green with “good.” Another association could be green means go, and red means stop. Let’s also look at red and blue. You could associate red with hot, and blue with cold.

DID YOU KNOW?

The color of your text also matters as well. As a basic tenant of user experience, you don’t want it to have green on top of red because it looks jarring and strains the human eye.

3

Don’t be afraid to incorporate black and white colors into your dashboards. Many times, utilizing these colors work extremely well together,especially in situations where you need to accentuate certain dashboard design elements and you are tired of using the same color palette.

Seven Fundamentals of Design

4

Contrast also plays a key role here, not only in color but in fonts as well. If you bold the entire text for a sentence, nothing stands out – its use is meant to highlight certain words. Adding a little bit of visual interest to that helps.

DID YOU KNOW?

Serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget libero nunc. Duis dignissim lorem nec metus ultricies porttitor. Nulla finibus volutpat ultricies. Mauris eget neque felis. Sed luctus metus erat, ac lacinia neque porta sed. Praesent tincidunt fermentum diam, vitae dignissim eros feugiat vitae.

Sans-serif

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget libero nunc. Duis dignissim lorem nec metus ultricies porttitor. Nulla finibus volutpat ultricies. Mauris eget neque felis. Sed luctus metus erat, ac lacinia neque porta sed. Praesent tincidunt fermentum diam, vitae dignissim eros feugiat vitae.

Serif fonts however work better for text blocks — these can be articles, blog entries, book text, etc. Serif helps your eye make out the letters a bit more. Plus, it takes up less space and is more legible.

If everything’s bold, nothing is bold

Lorem ipsum dolorMixing regular and bold for visual interest

Lorem ipsum dolor

Aa Aa

2. Fonts

4

80 — 90% of the fonts used today either belong to serif or sans-serif.

What’s the difference between the two?

Serif fonts have the tail at the end of each letter and that’s because it’s easier for the human eye to read. Pick up any book in your library and look at the text— 9 times out of 10— it will be set in a serif font.

Sans-serif does not have the tail. That’s the main difference. The most widely known example of this is Helvetica. Both fonts have their uses.

Sans-serif works best for headlines. Every road sign is typically set in Helvetica and since Sans-serif fonts are designed for very short blocks of text, readers pay close attention to them.

3. TypographyIt’s important to point out that fonts and typography are two different concepts. Fonts is how you set your text. Typography is how those fonts look when you are done. So it accounts for both the color of the font as well as the color of the background.

So how do colors and fonts best go together? If you have text sitting on a background, you need to think about what the background color is going to be. Color adds another dimension to your text (I.e. you wouldn’t have dark text on a dark background).

5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget

✓

✓

7. Interactivity

5. Sizes

This is a design element that designers work with all the time. Interactivity can mean a lot of things and it adds another significant dimension to the overall design.

Interactivity could mean changing the color or size when someone hovers over it or performs a user action. It can mean having an image or text grow, change color, or change speed — for instance do you want a gauge needle to respond slow or fast when clicked on?

SizesSizesSizes

4. Shapes

6

This fundamental comes up more frequently with shapes and fonts – especially fonts used in headlines. Naturally, the human eye will go towards what is biggest. You wouldn’t want your article and headline to be the same size, you’d want the headline to be bigger than the article itself.

Shapes are not as common as the earlier fundamentals of design but worth considering. Shapes are important specifically for data visualizations because just like how the human brain is comparing colors, it also compares shapes.

You may associate particular patterns like the one on the left for for something being on sale. If it was a circle, you would maybe associate it with Google plus. Bear in mind even out of context, your brain is constantly making those associations.

6. Images & IconographyImagery and iconography comes up most of the time with data visualizations and photography interestingly enough. These particular icons (FYI Font Awesome) associate with the user actions of close, delete, eject and hide. These four actions from a user perspective are similar but having an icon can help people discern which specific action they should take.

Animated Visualisations

If you are interesting in honing your design skills, the following free resources are available to help you enhance your data visualizations without actually having to purchase graphic design software.

Design Resources

Using the Adobe color wheel, you can create your own color schemes or browse thousands of other color combinations from the Adobe community. If you are stuck with choosing colors, you can use sample colors from an image usually done through Adobe Photoshop or Adobe Illustrator but it doesn’t mean you need to rely solely on them.

Google Fontshttps://www.google.com/fonts

Adobe Kuler Color Wheel https://color.adobe.com/create/color-wheel/

Way back in web design, designers were restricted to only Arial and Georgia fonts for typography. Google Fonts, previously called Google Web Fonts is an interactive directory of free hosted app programming interfaces for web fonts. You can customize weights, styles, etc. then integrate the font’s right into your CSS.

7

Color Brewer is an online tool designed to help you select color schemes for visuals and other graphics. It contains pre-selected and/or pre-tested color sets that you can leverage. The sets have also been tested for color blindness and for contrast.

Color Brewer http://colorbrewer2.org

We would recommend using a maximum number of six colors in visualizations. Any more and it becomes very difficult for users to see differences.

TIP

8

Key Takeaways+ Good design has a valuable return on investment as

businesses without deep skills in data comprehension will ultimately be replaced by those that do

+ Focusing on colors and fonts can go a long way in making your dashboard visuals more compelling

+ You don’t necessarily need expensive software to step-up your design game

before after

109

About Logi AnalyticsLogi Analytics is the leader in self-service analytics, delivering tools designed to meet the needs of users, IT and product managers. At Logi, we are re-imagining how software can empower individuals, and the organizations and products that serve them, with analytics that can be embedded directly into the business applications people use every day. From interactive dashboards to ad hoc queries and visual analysis, Logi enables users to explore and discover insights, and make data-driven decisions.

More than 1,600 customers worldwide rely on Logi. The company is headquartered in McLean, Virginia, with offices in the U.K. and Europe. Logi Analytics is a privately held, venture-backed firm. For more information, visit LogiAnalytics.com.

Contact us: salesteam@logianalytics.com1-888-564-4965

READY TO CREATE YOUR OWN DASHBOARD?TRY IT FREE WITH YOUR OWN DATA.