GUIDES8 min read

How to Wireframe a Dashboard in 5 Steps (Before You Build)

Five steps from a vague stakeholder request to a layout you can hand a developer, for Power BI, Tableau, or Looker Studio. No design skills needed.

Gabriel ThieryGabriel Thiery
··Updated July 22, 2026

A dashboard wireframe is a low-fidelity sketch of the layout: grey boxes where the KPI cards and charts will go, drawn before you open Power BI, Tableau, or Looker Studio.

It is supposed to look unfinished, and that is the part people try to fix. Something that looks finished stops getting criticised, and a layout nobody argues with at the sketch stage gets built as drawn. Grey boxes keep the argument on the structure, which is the part worth arguing about.

Six steps, blank page to something you can send.


Why Wireframe a Dashboard?

In most dead dashboards the data was correct and the tool was capable. The person who asked and the person who built were solving different problems, and nothing forced a comparison until two weeks of development had gone in.

A wireframe gives them something to compare. I won't claim it is the only way to close that gap. A five-minute call where you read back the decision the dashboard is meant to support does the same work. What a sketch adds is that your stakeholder can see the thing and point at the part that is wrong.

Four things come out of it, and none of them need the drawing to be good.

  • A wireframe takes a minute to change. The built version takes an afternoon.
  • Your stakeholder looks at a layout and says they wanted a bar chart rather than a table. That is a drag in the sketch and a rebuild in the BI tool.
  • You settle the chart types and the hierarchy while moving a box still costs nothing.
  • Corrections land before the first DAX measure exists, so a revision costs you a redraw instead of a remodel.

What Makes a Good Dashboard Wireframe?

A dashboard wireframe does not need to be pixel-perfect. It needs to communicate intent, which takes four things:

  1. Correct layout. Where does each section go? Top KPIs, charts in the middle, filters on the side?
  2. Right chart types. Bar against line against a KPI card. Deciding that on a sketch costs a minute; deciding it in Power BI costs the measure you already wrote.
  3. Named placeholders. Label every element ("Monthly Revenue KPI", "Sales by Region Bar Chart") so a reviewer knows what they are looking at.
  4. Realistic proportions. Use the real grid and spacing. Six cards that fit in a requirements doc do not always fit across a canvas.

You do not need colours, icons, or real data. Grey boxes and placeholder labels carry the whole conversation. A finished dashboard wireframe looks like this, with a KPI row for the headline numbers, charts below for context, and a table for the detail:

REVENUEPROFITCUSTOMERSGROWTHTREND OVER TIMEBREAKDOWN BY CATEGORYDETAIL TABLE

That is the fidelity to aim for. It carries the layout and the chart types without one decision about colour or font, and layout is the part that decides whether a reader finds the number within about three seconds of the page loading. Colour work does not move that number. For 11 more starting points, see the dashboard layout patterns guide.


Step-by-Step: How to Wireframe a Dashboard

Step 1: Clarify the audience and purpose

Before you open any tool, answer these three questions:

  • Who will use this dashboard? (Executive, sales rep, operations manager, customer?)
  • What will they do differently after seeing it? ("Call a rep whose pipeline coverage drops under 3x.")
  • How often will they check it? (Daily is operational. Monthly is strategic.)

The second question decides the other two. If nobody can answer it in a sentence, what they have asked for is a report, which justifies a delivery rather than a decision and gets specified by a different document entirely.

The answers also set the layout. An executive dashboard runs 3-5 big KPIs and a trend. An operational dashboard might carry 15 or more metrics with filters and drill-downs. Plan the filters for the operational view and argue about every one you put on the executive view.

Step 2: List your metrics

Write down every metric, chart, and filter the dashboard needs. Layout comes later. For now it is a list, and it should come straight out of a dashboard requirements conversation. There is a free template for that, with no email form in front of it.

Example for a sales dashboard:

  • Revenue MTD (KPI card)
  • Revenue vs. Target (progress bar or gauge)
  • Revenue by Region (map or bar chart)
  • Top 10 Deals in Pipeline (table)
  • Monthly Revenue Trend (line chart)
  • Filters: Date range, Region, Rep

Step 3: Prioritize (the F-pattern rule)

Readers scan a dashboard the way they read a page, top-left to bottom-right, with most of the attention spent in the upper-left corner. Nielsen Norman Group's eye-tracking research (opens in a new tab) calls this the F-pattern. Put the metric you most want read where the eye lands first.

A simple priority framework:

  1. Hero area (top-left): the single most important number or chart
  2. Top row: 3-5 KPI cards for at-a-glance status
  3. Main body: the two or three charts that carry the explanation
  4. Secondary area: supporting charts, tables, details
  5. Sidebar or top: filters

Step 4: Sketch the layout

Now open datawirefra.me (opens in a new tab) and start placing components. There are 18+ chart types to draw from: KPI cards, bar charts, line charts, tables, maps, funnels and the rest.

Start with the grid:

  • Drag a KPI card to the top row and duplicate it three to five times
  • Add a line chart below it for the trend
  • Add a bar chart or a table for the breakdown
  • Add filter placeholders

Label each element with the metric name rather than "Chart 1". Your stakeholders read the labels as closely as they read the boxes.

Sketch at the width you will build at. Power BI's 1280×720 is a default rather than a measurement of anyone's screen, and six cards that sit comfortably on your laptop can wrap on the one your audience uses. Steps 1 to 4 take 15 to 30 minutes.

Step 5: Share and collect feedback

Once your wireframe is done:

  • Use Live URL sharing to send a link, with no account required for viewers
  • Or export to PNG or PDF for email and Slack

Then ask narrow questions:

  • "Does the layout match what you expected?"
  • "Is anything missing or in the wrong place?"
  • "Is the main KPI the right one to prioritize?"

"What do you think?" comes back as vague approval you cannot build from. And where you can, ask out loud. Requirements collected over an email thread arrive contradictory and half-specified, and twenty minutes on a call settles what two weeks of replies will not.

Step 6: Iterate, then build

After one or two rounds of revisions, freeze the wireframe and start building in your BI tool. Treat the frozen version as the spec.

Two rounds usually land it. Past that you are polishing a drawing you are about to throw away, and the rework you were trying to avoid is waiting in the BI tool either way.


Common Wireframing Mistakes

Mistake 1: Using the wireframe as the final design Wireframes are disposable. Every hour spent making one look good buys agreement it has not earned, because a page that looks finished stops attracting criticism. Save the polish for the dashboard.

Mistake 2: Skipping stakeholder review A wireframe you reviewed yourself tells you what you already believed. The conversation is the thing you came for, and the drawing is what makes it possible.

Mistake 3: Starting with too many charts Twelve charts is a report holding a dashboard's job title. Five well-chosen ones support a decision. Use the sketch stage to cut rather than to add.

Mistake 4: Ignoring mobile Executives do open these on a phone. If any of your reviewers will, check that the wireframe still reads at mobile widths before you build it.


What Tool Should You Use?

ToolGood forDrawbacks
datawirefra.meDashboard-specific wireframes, BI teams, non-designersDashboard use cases only
FigmaFull product designSteep learning curve, overkill for data teams
Miro / FigJamCollaborative whiteboardingNot purpose-built for dashboards, no chart components
BalsamiqGeneral UI wireframingNo BI-specific components
Paper sketchesQuick ideasHard to share digitally, no real proportions

Neither Figma nor Miro is a bad tool. I think they are built for a different job, and the mismatch costs you twice. They hand you rectangles, when dashboard wireframing wants KPI cards, charts and slicers as objects you place instead of shapes you rebuild every time. And the person who needs this is an analyst with a stakeholder meeting on Thursday, not a designer, so asking them to learn Figma first is asking them not to sketch at all.

For a BI team working in Power BI, Tableau, or Looker Studio, a tool with real chart components skips the rebuilding.


A Quick Template to Start

Instead of starting from blank, open one of the pre-built templates:

Each one lays out a grid with the common components for that use case, and every element is editable. None of them sit behind an email form.


Summary

Six steps, and the first two do most of the work:

  1. Name who will use it and what they will do differently after seeing it
  2. List every metric, chart and filter
  3. Prioritize with the F-pattern, most important at top-left
  4. Sketch the layout at the width you will build at
  5. Share it and ask narrow questions
  6. Freeze it after two rounds and build from it

What you are buying is the argument about structure while it still costs a redraw. Draw badly, on purpose, and send it before you are comfortable with how it looks.

Sketch your next dashboard → (opens in a new tab)

Frequently asked questions

What is a dashboard wireframe?

A dashboard wireframe is a low-fidelity sketch of a dashboard's layout — where the KPI cards, charts, tables, and filters go — created before building it in a BI tool like Power BI, Tableau, or Looker Studio. It uses gray-box placeholders and labels instead of real colors, data, or styling, so the focus stays on layout and chart choice rather than visual polish.

How do you wireframe a dashboard?

In six steps: 1) clarify who will use it and what decision it supports; 2) list every metric, chart, and filter needed; 3) prioritize using the F-pattern, putting the most important metric top-left; 4) sketch the layout by placing labeled components on a canvas; 5) share it and ask directed questions; 6) make one or two rounds of revisions, then freeze it and build against it as your spec.

How long should it take to wireframe a dashboard?

About 15–30 minutes to produce a first wireframe, plus one or two short feedback rounds. The goal is alignment, not a perfect artifact — two rounds of stakeholder review is usually enough. Wireframing is meant to save rework in the BI tool, so don't spend hours polishing the wireframe itself.

Gabriel Thiery

Gabriel Thiery

Builder of datawirefra.me. I help BI teams plan dashboards people actually use — before they write a single DAX formula.

Connect on LinkedIn

Keep reading