How to Create a Dashboard Design Look Book (#2 in a Series)

by | Jan 4, 2017 | General BI

Reading Time: 4 minutes

In my last blog post, I talked about how create a specific dashboard that would help you save time on design. Now in this post, I will take a look at a very different type of dashboard that you can add to your Dashboard Design Look Book.

Tweet: How to create a dashboard design look book (#2 in a series)

With these instructions, you should be able to create the same look and feel in your own interface. So, without further ado, let’s take a look at how to create this month’s dashboard.

In my last blog post on creating a Dashboard Design Look Book, I showed you how to create this light and airy looking dashboard look in DivePort:

Figure 1

Today, I’m going to show you how to create something dark and vibrant – almost the exact opposite look from a color point of view:

Figure 2

Before we get started, I just want to say that one of the things I really LOVE about DivePort is its flexibility. With Diver Platform 7.0, you can choose to use a locked down look and feel with the Simplified User Interface (SUI). Or, if you prefer, you can still choose a manual interface as in the 6.4 version, allowing the customization of just about every detail on the dashboard. But did you know you can also customize fonts and colors in ProDiver? In this exercise, that is exactly what we will be doing.

Step 1 – Customize colors of markers in ProDiver

First, I created markers in ProDiver with custom colors. Each chart or graph has a specific treatment that must be customized within ProDiver.

There are 5 types of markers on this page:

  1. Area fill
  2. Pie doughnut with default number of wedges
  3. Pie doughnut with 1 wedge
  4. Line chart
  5. Report marker

The type on these markers is set to the color 255,255,255 (white) — right in ProDiver. Figures 3-7 show how to change the type to white in ProDiver for the charts on my dark dashboard.

Figure 3

 

Figure 4

 

Figure 5

 

Figure 6

 

Figure 7

By making type white, these charts are now visible on the dark background of my new dashboard design.

Step 2: Use previously determined dashboard screen size

In my previous post, you used my directions to determine your users’ ideal screen dimensions. I am using 1024 x 768. You should use your own ideal screen dimensions in this exercise. If you did not yet determine your ideal screen size, you can read either one of these 2 earlier articles to help you now:

– “How to Determine the Ideal Screen Dimensions for Dashboards

“How to Create a Dashboard Design Look Book (#1 in a series)

Step 3 – Use a “Manual” layout

Next, I made sure my page was based on a “Manual” layout in DivePort.

Step 4 – Add the background rectangle

Then, I added a “Background” portlet at the desired size and made it a rectangle. Here are the rectangle specifications that I customized:

Portlet Instance Settings

Position: 0 0

Size: 1280 768

Edit Background Portlet

Rectangle Color: transparent

Thickness: 0

Fill Color: 48,51,58

Step 5 – Add chart portlets for customized markers

Now you can use the colors determined in the marker.

Figure 8

If you see a dashboard look and feel that you would like me to use in this dashboard design look book series, please send it to me at: [email protected].

Many thanks to Senior Trainer Louise Masailo for her technical assistance with this month’s Dashboard Design article.

Rose Curtis

You may also like