Dashboards That Pop: Icons
Dashboards That Pop: Color
Good dashboard design starts in your map. Your map should feel like an integral part of your dashboard, and not a separate thing just thrown in there.
Here we have a relatively simple dashboard showing California fires using the Living Atlas’s USA Current Wildfires layer.
Dashboard with a map
Here’s the same dashboard with a bit of map magic applied.
Dashboard with coordinating map
Let’s explore how we can spiff up dashboards by spending some time in the map.
Basemap
The original basemap is colorful and bright. It looks a bit out of place within our dark dashboard. I used the Grayscale map effect to tone down the color so only a touch of color is visible. For this map I set it to 78, but feel free to experiment with different values.
Grayscale map effect
Map Blending Tricks
My dashboard only shows fires in California, so I used Allen Carroll’s Little World effect to focus on California.
I started by adding John Nelson’s Global Background layer and changed the fill color to #000000. I added a layer transparency of 32%.
Next, I added Esri’s USA Census States layer and changed the fill color to #FFFFFF with no outline.
I applied a filter to the States layer so only California is visible.
I grouped the two layers together so that the States layer is on top.
For the States layer, I applied the Destination Out blending mode.
Feel free to experiment with different values and colors to get the effect you want in your map.
Pop-Ups
Default pop-ups are definitely a pet peeve of mine. There are always unneeded fields included in them, the order doesn’t always make sense, and they are kind of boring. Spend a few minutes cleaning up your pop-ups, even if it’s just removing fields, reordering them, and ensuring your field names are cleaned up.
Dashboard Theme
Here’s our new fancy map in the default dark dashboard.
Default dark theme dashboard with coordinating map
While my map certainly fits better than the original one, I took it one step further by using a color picker to pull colors from my map and into my dashboard theme.
Basemap colors used in the dashboard theme
A) Element background
Dashboard background
C) Element border
D) Text Color
Here’s the final dashboard one more time to compare.
Custom dark theme with coordinating map
Bonus Blending Trick
The blending modes available in the Map Viewer are a super easy way to completely transform your basemaps. Don’t be afraid to just play with them and see what you can create. The Light Gray Canvas Basemap is completely unrecognizable in this Zombie themed Experience Builder app.
Spooky zombified map
It only took two copies of the Global Background layer and some blending to create it.
The top global background layer:
- #6f8a79 Fill
- Darken Blending Mode
- 30% Transparency
The bottom global background layer:
- #422833 Fill
- Color Burn Blending Mode
- 49% Transparency
Happy dashboarding!
