The Art of

Dashboard Design
Seven Fundamentals
to Master

Aa
Aa

Table of Contents
Introduction 2
Seven Fundamentals of Design

Design Resources

Key Takeaways

About Logi Analytics

Introduction
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.

BAD DESIGN IS SMOKE

WHILE GOOD DESIGN
IS A MIRROR.

Because dashboards are heavily dependent on visuals, its 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.

DE S IG N ER & A RCH I TEC T,

JUAN CARLOS FERNANDEZ STUDIO

400%

Its 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.

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

1. Color
Choosing 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.

Seven Fundamentals
of Design

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. Lets also look at red and blue. You could
associate red with hot, and blue with cold.

Dont 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.

DID YOU KNOW?

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

Aa

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.

Serif

2. Fonts
80 90% of the fonts used today either
belong to serif or sans-serif.
Whats the difference between the two?
Serif fonts have the tail at the end of each letter
and thats because its 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. Thats 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.

Aa

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.

If everythings bold, nothing is bold

Lorem ipsum dolor

Mixing regular and bold for visual interest

Lorem ipsum dolor

DID YOU KNOW?

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.

3. Typography
Its 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 wouldnt

have dark text on a dark
background).

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

4. Shapes

6. Images & Iconography

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.

Imagery 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.

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.

7. Interactivity

Sizes
Sizes
Sizes

5. Sizes
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 wouldnt want your article
and headline to be the same size, youd want the
headline to be bigger than the article itself.

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?

Design Resources
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.

Color Brewer

Adobe Kuler Color Wheel

http://colorbrewer2.org

https://color.adobe.com/create/color-wheel/

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.

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 doesnt mean you need to
rely solely on them.

Google Fonts
https://www.google.com/fonts

TIP

We would recommend using a maximum number of six colors in visualizations.

Any more and it becomes very difficult for users to see differences.

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 fonts
right into your CSS.

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 dont necessarily need expensive software
to step-up your design game

before

after

About Logi Analytics

Logi 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.com
1-888-564-4965

READY TO CREATE YOUR OWN

DASHBOARD?
T RY I T F R E E W I T H YO UR OWN DATA.

10
9