Home / Products / Tech Tip: Dashboard Design Like a Pro Using Design Software
InfoSol Blog Tech Tip

Tech Tip: Dashboard Design Like a Pro Using Design Software

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

Need Inspiration?

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.

About John Zbyszinski

John is a Technical Consultant with Infosol. John started his journey with HTML5 dashboards and found himself wanting to learn more and experience the many applications of BI. With his drive to learn, he became an expert in SAP Dashboards and IB Apps. Using this knowledge and combining it with his practical thinking, he has developed a passion to create visually and dynamically appealing dashboards. John enjoys sharing his knowledge with others in hopes of sparking that next journey for someone else.

Check Also

InfoSol Blog Tech Tip

Tech Tip: Force Full Year with Time Dimension Features

Have you ever had the need to display a full year of data on a ...

One comment

  1. Great tip on building an image background to reduce the number of components in your dashboard. It’s a smart approach when you can guarantee the size and position of all the objects that will be overlayed onto it.

    It’s worth pointing out that there are a plethora of free design tools out there…. in fact, the box style background could have easily been done in something like PowerPoint 🙂

    I would put Figma and Adobe XD at the top of the list of tools to consider. Both have free plans and are built specifically with screen design in mind (similar to sketch). Canva is worth a look too. And, as you mentioned, Squirrel is on its way. It has design at its heart and incorporates many of the features you would find in a dedicated design tool removing the specific limitations of other dashboarding products, that you are having to work around in the first place.