In our first week at The Data School, we learned to use Excalidraw to wireframe dashboards. Sketching is a great way to align on a vision with the team and stakeholders early on, long before we start building anything in Tableau.
However, sketching a dashboard with the standard chart libraries wasn't easy. While there are plenty of exotic charts, foundational elements like a simple bar chart only come in a few variations, usually as unsorted, rainbow-colored shapes. Turning those into a professional 'Top 5 Ranking with a Last Year Benchmark' requires many adjustments.
Doing this manually is time-consuming. It almost felt easier to draw the charts from scratch, but that’s not a sustainable way to work on every project.
So, are we stuck in an unsolvable dilemma? 🤔
Luckily, the answer is no, because Excalidraw allows us to create and save custom libraries. I decided to build my own, and here is how I did it:
Step-by-Step Workflow
STEP 1 - Find Inspiration
I had an idea of what I wanted, but it’s always good to look at inspiration from those we look up to. I picked three dashboards from Tableau Public that feature standard charts and essential BI components:
- Dynamic Zone Zooming - 2022.3 by Samuel Parsons
- Superstore Dashboard by Priya Padham
- Tableau Bootcamp - Build an Effective Dashboard by Chimdi Nwosu
STEP 2 - Sketching
I dropped screenshots of those dashboards into Excalidraw and sketched out the charts I wanted. At this early stage, I found it’s easiest to use the cleanest line setting (Architect) to get the alignment right. Later, I converted them to a more messy look, it's as easy as two clicks in Excalidraw.
Why should it be messy when it can be clean? My assumption is that a "finished" look can be intimidating at this stage, whereas a sketched look encourages more honest feedback from stakeholders.
STEP 3 - The Secret Sauce (Grouping)
This is the key to an efficient library. Standard libraries often group everything into one flat group, which can make alterations very time-consuming. My approach was to think ahead: which elements will I likely want to alter together? Those will need to be grouped together.
- The Bars: I grouped bars of the same color together, so I could change their color with just one click.
- The Labels: I grouped the month labels (J, F, M...) to format them simultaneously.
- Gridlines: Where available I grouped them together, to delete them in one go if needed.
- The Axis: I kept this separate as it rarely needs to change.
STEP 4 - Hierarchy
Next, I checked the layers. I learned this the hard way with a dropdown menu where the "arrow" symbols disappeared as soon as I added a fill color to the box. Now, I always ensure my text and symbols are at the front of the groups so they don't get buried. Once all is in the right order, I group it all together into one big group holding the whole chart together.
STEP 5 - Testing
To find any flaws, I built a test dashboard to try and 'break' my library. I experimented with switching colors, changing text, and deleting benchmarks to make sure the components were flexible. This helped me make the final adjustments to ensure everything actually works the way I need it.
STEP 6 - Save and Share
Finally, I converted my sketches into a custom library and exported it as a .excalidrawlib file. This gives me a toolkit for future projects and makes it easy to share with others. Below is an overview of the full library and the components I’ve built so far:
Final Thoughts
The library is definitely a work in progress, but it feels good to have a resource on hand to improve my workflow.
What I like most is that it's a win-win: I save time on repetitive tasks, and the customer gets a wireframe that feels like a real dashboard. Instead of spending 10 minutes explaining why a chart isn't sorted or why the colors are distracting, we can focus on the business questions and the data logic behind it. I’m excited to see how this library will evolve over time as I get deeper into my training at The Data School!