12 Dashboard Layout Patterns, Each Shown as a Wireframe

A dashboard with the right numbers in the wrong places gets opened once. The data is fine, the chart types are fine, and the person who asked for it still cannot find the number they came for, so they export to Excel and work it out there.

Twelve dashboard layouts are below, each drawn as a wireframe. They are the arrangements that keep turning up in BI work, and for each one the useful half is the case where it stops working.

---

Why Layout Matters More Than You Think

You don't read a dashboard. You scan it. Nielsen Norman Group's eye-tracking research (opens in a new tab) found that readers follow an F-pattern on screen: across the top, then down the left edge, with less attention for everything further in. Put the most important metric in the bottom-right corner and most of your readers never reach it.

The academic reference here is the Dashboard Design Patterns (opens in a new tab) catalog (Bach et al., IEEE VIS 2022), which formalized the recurring page-layout and component patterns below. The twelve in this guide are the ones that keep showing up in real BI work.

Layout beats aesthetics. A dashboard should answer its primary question within about three seconds of loading, and the work that moves that number is arrangement: what sits at the top, what sits next to what, and what you left off the page. Colour palettes and rounded corners do not move it.

---

Pattern 1: The KPI Row + Chart Grid

Three to six KPI cards across the top, then a grid of two to four charts underneath. It suits executive dashboards and the weekly management review, which between them cover most of what a BI team gets asked for. This is the most common dashboard layout on the list and the one I reach for by default.

Structure:

• Row 1: KPI cards (revenue, profit, customers, growth rate)
• Row 2: two charts side by side, a trend line and a category breakdown
• Row 3: supporting detail, a table or secondary charts

The top row answers "are we on track?" before anyone scrolls. The charts under it explain the answer, and the people who want the detail go looking for it while everyone else stops at row one.

It breaks past six KPIs, where the cards narrow until the labels start wrapping. That limit belongs to your canvas, so decide the canvas instead of inheriting it. 1280×720 is Power BI's default, not a measurement of anyone's screen, and almost nobody checks what resolution their audience runs before wondering why people scroll.

A card that carries a value and no direction gives the row nothing to be scanned for, which is a layout problem before it is a metric one. How many KPIs belong on a dashboard covers the counts and the test.

Lay this one out in the app (opens in a new tab).

---

Pattern 2: The KPI Grid (2×4)

Two rows of four cards, for the seven to nine metrics an operational dashboard carries. Splitting them over two rows keeps every card wide enough for a sparkline or a trend arrow, which a single row of eight cannot do.

Structure:

• Row 1: four KPI cards, primary metrics
• Row 2: four KPI cards, secondary metrics
• Row 3: one or two charts for context

It extends Pattern 1 without shrinking anything below the size you can scan.

The second row is where it goes wrong. If two or three of those cards only matter once a month, they hold permanent screen space for an occasional question. Move them to a detail page and let the grid drop back to a single row.

---

Pattern 3: The Left Sidebar + Main Canvas

A vertical column down the left, 15 to 20% of the width, holding navigation and global filters. Charts and KPIs take the rest.

Structure:

• Left sidebar: logo, navigation tabs, global filters (date range, region, product)
• Main area: KPI row, then charts

Multi-page Tableau and Power BI reports mostly look like this, and the reason is that the filters stay on screen while someone works the charts beside them. Nobody loses their selection by scrolling.

With one date slicer and nothing else, though, you have given a fifth of the canvas to a dropdown. Take the width back and put the filter above the charts.

---

Pattern 4: The Top Filter Bar

Filters run across the top under the title: dropdowns, a date picker, a search field. Everything below them redraws on selection. It fits self-service dashboards where people change the view several times a session.

Structure:

• Row 1: dashboard title and filter controls (date range, region, category)
• Row 2: KPI cards
• Row 3 and 4: charts and tables

The bar states the context before anyone reads a number. "Sales, North America, last 30 days" sits at the top of the page, which is the difference between a chart someone trusts and a chart someone queries in Slack an hour later.

It stops working when the filters need a second row, at roughly eight controls. Move them into a sidebar or a dedicated filter page at that point.

Check who the dashboard is for before you build the bar at all. On an executive view every filter is a small failure, because the page is supposed to answer before anyone touches it. Executive dashboard design is the other end of that decision.

---

Pattern 5: The Inverted Pyramid

One number at the top, large and centred, then more detail with each row beneath it. Board presentations and quarterly reviews live here.

Structure:

• Row 1: one hero KPI, large font, centred, with a trend arrow
• Row 2: trend chart showing that KPI over time
• Row 3: breakdown by category, bar or stacked bar
• Row 4: detailed table with drill-down

Reading down the page walks through four questions in order: what happened, how did it happen, where did it happen, and show me the rows. The order carries the argument, which is why this pattern survives a room with a presenter in it.

The sequence is also the limit. A page read in order serves a presentation, and an operations team checking six unrelated metrics needs all six visible at once instead.

---

Pattern 6: The Quadrant Layout

Four equal panels, one per dimension. Financial, customer, operations and people for a balanced scorecard, or four regions, four products, four periods.

Structure:

• Top-left: financial metrics and chart
• Top-right: customer metrics and chart
• Bottom-left: operational metrics and chart
• Bottom-right: people and growth metrics and chart

Equal space is the entire point. No panel dominates, so nobody reads the page as a ranking, and that is what you want when the four carry equal weight.

They usually don't. When one dimension drives the meeting, a quadrant layout spends three quarters of the canvas arguing otherwise, and Pattern 1 or Pattern 5 gives the important one the room it earns.

Draw the four boxes in the app (opens in a new tab) and label them before anyone argues about what belongs in each one.

---

Pattern 7: The Tabbed Dashboard

One tab per audience, instead of one page carrying all of them. A tab bar at the top or a nav list in the sidebar does the switching.

Structure:

• Tab 1: executive summary (KPI row and trend)
• Tab 2: sales detail (pipeline, deals, rep performance)
• Tab 3: product detail (usage, retention, feature adoption)
• Tab 4: finance detail (P&L, cash flow, budget vs. actual)

Each tab stays small enough to scan in seconds, and readers pick the one that matches their role rather than filtering a crowded page down to it.

Tabs break comparison. The moment someone needs a sales number alongside a finance number, they are clicking back and forth holding a value in their head, which is the work the layout was meant to remove. Put those two metrics on one page.

In Power BI, tabs are the honest version of this and bookmarks are usually the dishonest one. A bookmark that swaps a page's contents is a second page wearing the first page's clothes. It reads fine to whoever built it and leaves the next maintainer reverse-engineering which state they are looking at.

---

Pattern 8: The Monitoring Wall

A dense grid of small status cards, each one a metric and a colour. It exists to make the broken thing visible from across a room.

Structure:

• A grid of 12 to 20 small status cards, arranged 4×5 or 3×4
• Each card shows a metric name, its current value and a status indicator
• Optional: one trend chart at the bottom for the selected metric

Use it for NOC screens and production monitoring, where someone watches 15 or more systems and the only question they have is which one went red.

It answers what and never why. Send anyone who needs a cause to a drill-through page, because a wall that starts explaining itself turns into 20 charts nobody can read from across the room.

In Power BI every visual on the page fires its own DAX query, so the 8 to 10 visual guidance is a query budget, and a 20-card wall spends it twice over. Calling it a clutter rule hides the reason and makes it easy to ignore. How many visuals belong on a Power BI dashboard has the arithmetic.

---

Pattern 9: The Headline + Detail Split

Half the canvas for one number and its trend, half for the breakdown behind it: by team, by product, by week.

Structure:

• Left 50%: hero KPI, a large number with a sparkline trend
• Right 50%: table or bar chart splitting that KPI by one dimension

The whole page asks one question and then answers who contributed what, which is the shape of a daily standup. A team lead opens it, reads the number, and knows in a second whether anyone needs a conversation today.

Give it two unrelated metrics and it collapses. There is no second half left to put them in.

---

Pattern 10: The Comparison Layout

Two or three parallel columns carrying the same metrics for different segments. You read across rather than down. A/B tests, period-over-period analysis and regional comparison all fit.

Structure:

• Column 1: this period (KPIs and charts)
• Column 2: last period (same KPIs and charts)
• Column 3, optional: variance or percentage change

Reading two numbers next to each other is faster than reading one and carrying it, so the comparison becomes a glance instead of arithmetic.

The layout also makes a claim you may not intend. Equal columns say these things are equivalent, so a new division sitting beside the core business invites a comparison that is unfair to both. Add the variance column or use a different pattern.

---

Pattern 11: The Scrolling Report

One tall column, sections stacked in reading order. Monthly reporting and investor updates use it.

Structure:

• Section 1: executive summary, KPIs and a headline
• Section 2: financial charts and tables
• Section 3: operational metrics
• Section 4: appendix and data tables
• A subheading and a divider between each section

It matches how people read a report, top to bottom, and it holds a lot without any single screen feeling crowded.

Scrolling and interactivity fight each other. Filter something at the top and the result lands below the fold. Drill into a chart in section three and you lose your place on the way back. When people are meant to explore, give them tabs.

A scrolling report is also a signal worth reading. If the page runs four sections deep and nobody does anything differently after looking at it, you have built a report, and a report gets specified by a different document: what arrives, when, to whom, and what happens the morning it fails. Reporting requirements covers that one.

---

Pattern 12: The Mobile-First Card Stack

A single column of full-width cards, one KPI or one chart per card, scrolled on a phone.

Structure:

• Card 1: primary KPI, large number and trend
• Card 2: secondary KPI
• Card 3: chart, simplified and touch-friendly
• Card 4: mini table, top five rows only

Nobody compares side by side on a phone, so the stack forces an order, and the order forces cuts. Four to six items make it onto the screen. Choosing which four survive is the same decision a desktop dashboard needs and rarely gets, because a wide canvas lets you avoid making it.

On a 27-inch monitor the same stack is a ribbon of cards down the middle with most of the screen empty.

Draw this one narrow in the app (opens in a new tab). The cuts become obvious once the column is phone-width.

---

How to Choose the Right Pattern

Five questions, in this order. The first one settles most dashboards on its own.

1. How many KPIs? 3-6 goes to Pattern 1. 7-9 goes to Pattern 2. More than 9 belongs on Pattern 8, or split across the tabs of Pattern 7.
2. How many audiences? One, take Patterns 1 through 6. More than one, take Pattern 7.
3. What is the primary action? Monitor, Pattern 8. Decide, Pattern 1 or 5. Explore, Pattern 3 or 4. Compare, Pattern 10.
4. Which device? Desktop, any of them. Phone, Pattern 12. Both, a responsive Pattern 1 or 7.
5. How often is it opened? Daily, Patterns 1, 8 and 9. Weekly, Patterns 1, 5 and 7. Monthly, Pattern 11.

---

Testing a Pattern Before You Commit

The cheapest way to find out whether a pattern fits is to lay it out before you build it. Open datawirefra.me (opens in a new tab), drop in the boxes, and put the result in front of the person who asked for the dashboard with one question: does this structure match what you need?

Keep it ugly while you do that. You want the argument to be about where the number sits, and polish moves it to the colour of the box instead.

A no at that stage costs five minutes. A no after the build costs the build, and by then people are attached to what exists.