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.
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:
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:
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:
- Area fill
- Pie doughnut with default number of wedges
- Pie doughnut with 1 wedge
- Line chart
- 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.
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:
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
Fill Color: 48,51,58
Step 5 – Add chart portlets for customized markers
Now you can use the colors determined in the marker.
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: firstname.lastname@example.org.
Many thanks to Senior Trainer Louise Masailo for her technical assistance with this month’s Dashboard Design article.
- The role of a salesperson is challenging, but whose job isn’t. Right? - February 14, 2019
- How You Can Better Visualize Your Data - June 7, 2018
- A Day in the Life of Rosalie: How a Customer Uses DiveTab - May 15, 2018