I have been designing dashboards with Xcelsius and Custom Code (HTML5) the past couple of years and I wanted to share how you can design dashboards like a pro. Personally, I am an advocate for designing dashboards with Adobe Illustrator. I found it the easiest to learn. You can choose your own design solution of course, we all have our favorites. I tried using Adobe Photoshop, which slapped me around a bit. This resulted in me quickly returning to my trusty Adobe Illustrator design tool.
A side note: If your dashboard solution has the capability of uploading an image, you can use this method.
Using Adobe Illustrator or another design tool can improve the look of Webi dashboards, Squirrel (coming soon!), Tableau, and beyond.
Now let’s get to the point – why am I recommending dashboard designers to use tools such as Photoshop or Illustrator? First, it relieves the severe dashboard design limitations – we no longer are beholden to the capabilities of the specific components on the dashboards. Other advantages include:
- Creating a solid dashboard design template
- Reduces the load on the dashboard since it is one image verses multiple components
- Dynamic design, colors schemes and textures for branding
- Simplifies the overall dashboard development process as the charts and value can be built post dashboard design
- The design theme is easy to carry across multiple dashboards
Here is the journey of one dashboard from design bleh to modern and clean. I first started with a brainstorm on how I wanted the design of this dashboard to look. This inspiration came from other dashboards online or online images. Once an idea was generated on how I wanted the design of this dashboard to look, it was all just a matter of playing with colors and getting the shapes to look exactly how I wanted in Adobe Illustrator.
Keep in mind the design (middle picture) was entirely built from scratch in Adobe Illustrator. This way I could completely sculpt the design to cater to the layout/story of the dashboard. The easy part and fine tuning came when I saved this design as an image file, uploaded it to the dashboard and just laid all my data/infographics on top of the template to create a solid modern looking dashboard.