How to design a dashboard layout

Decide the one number the dashboard exists to show

A dashboard without a headline number is a wall. Start by writing the single figure the screen exists to deliver: monthly recurring revenue, active users this week, tickets open past their target. Everything else on the page is either a component of that number, an explanation of it, or the action that changes it.

That sentence decides the rest of the layout. If the number is revenue, the chart below it should show revenue over time, and the table further down should break revenue down by customer. If the number is open tickets, the chart shows the trend and the table lists the oldest ones. The order of the page follows from the question, not from a template.

The admin dashboard design guide goes deeper on the hierarchy, and the rule stays the same: a reader should be able to say what the number is after five seconds of looking, without reading a single label.

• One headline figure, named in a sentence before you build
• Everything else explains it or changes it
• The chart below answers a question about the headline
• The table breaks the headline into parts

Note: If two numbers both feel like the headline, the screen is doing two jobs. Pick one and demote the other to a KPI card with a label.

Give the page a grid and stay on it

Start from a web frame. App Builder opens web frames at 1280×800, and the frame inspector offers Laptop 1280×800 and Desktop 1440×900, with a minimum frame size of 120×120. Use the size your users actually have, because a dashboard that only works on a wide monitor is a dashboard that breaks on a laptop.

Then fix the rhythm before the content. Pick one gutter and one page margin, and let auto-layout carry them: gap and padding both run from 0 to 96, and the same values on every container produce the alignment a grid is meant to give you. A page built on one spacing rule looks orderly even when the blocks are different sizes.

The 8 pixel placement grid keeps the edges honest when you move something by hand. Blocks that were dragged will sit wherever the drag ended, so use the grid, and use the nudge keys when a block needs to be a few pixels off: 4 pixels per press, or 16 with Shift.

• One page margin, one gutter, used everywhere
• Auto-layout gap and padding carry the rhythm
• The 8 pixel placement grid catches the edges
• Arrow keys nudge 4 pixels, or 16 with Shift

Note: The layout grid overlay in the toolbar draws column guides over mobile frames, so on a web frame the 8 pixel placement grid and your auto-layout values do the work instead.

Keep the KPI row to a single row

A row of small numbers at the top of a dashboard is the KPI row, and it works because the reader can compare them in one pass. Keep it to a single row of three to five figures, all measuring the same thing in the same unit, all covering the same period.

Build each one from the Stat component, or from the Stat card in the reusable component library, and give it the same internal order every time: the number, then the label that says what it is, then the change since the last period. A KPI without a label is a number that means nothing, and a KPI without a change is a number that means nothing yet.

A Sparkline inside a stat card shows the recent shape of the number without adding a second chart. That is a good use of the small space, and it is the reason a KPI card can carry more meaning than a bare figure.

• Three to five figures, one row, one unit, one period
• Same internal order in every card: value, label, change
• A Sparkline shows the recent shape inside the card
• Never mix a percentage with a currency in one row

Note: If a sixth figure arrives, it rarely belongs in the row. Move it next to the chart it explains, where it has context.

Place the chart that answers the next question

The headline number always raises a follow-up question: is it going up, is it normal, who caused it. The chart below the KPI row answers the first of those, and it should be the chart that answers it fastest.

The palette has Chart, Donut, Gauge and Sparkline, and each one suits a different question. A Chart shows a trend over time, a Donut shows a share of a whole, a Gauge shows a single value against a range, and a Sparkline is the small inline version that belongs inside a card. Pick the one that matches the question rather than the one that looks interesting.

Give the chart room and give it a label. A chart without a title is decoration, and a chart without a unit makes the reader guess whether the number is dollars, tickets or minutes. The mockup tutorial covers the general pattern for laying out a screen with a clear hierarchy.

• Chart for a trend, Donut for a share, Gauge for a value in a range
• Label the chart with the question it answers
• State the unit, the period and the source
• One large chart beats three small ones

Note: A chart in a mockup shows an example, not data. Put the sample in a way that does not imply precision the product does not have.

Use cards for scanning and tables for detail

Cards are for scanning. A list of a few records, each with an avatar, a name and one status, belongs in cards, because the reader is looking for one item rather than comparing columns. The List item component, or the List row from the reusable library, gives every card the same shape so the eye can move down the list.

Tables are for comparing. When the reader needs to sort, filter or scan across several attributes at once, the answer is a table. The Table component kind, with a Table header and Pagination for longer sets, keeps the column rhythm straight, and the data table guide covers that in more detail.

One warning on tables: they are the most common place a mockup ends up with twelve columns, because every field the product has feels like a candidate. A table with six columns a reader can hold in their head is worth more than a table with twelve they have to scroll.

• Cards for a handful of records the reader scans
• Tables when the reader compares across columns
• A header row and a fixed row height for any table
• Cut the columns before you cut the rows

Note: A row that needs a Badge for status and an Avatar for the person is a row that is doing two jobs. Split it into two lists if the reader cannot hold both.

Leave room for the data you do not have yet

A dashboard that only works with a full set of data is a dashboard that breaks on day one. Design the empty and near-empty cases as part of the layout, not as an afterthought, because the empty state is what a new user actually sees first.

The canvasola component library has an Empty state component for exactly this, and the palette has Skeleton, Spinner and Banner for the states in between. A skeleton block where a chart will be keeps the page from jumping when the data arrives, and an empty state that says what will appear and offers one action gives the reader a next step.

The same logic applies to numbers. A KPI card with a dash instead of a zero makes it obvious that there is no data yet, and a chart with a flat line and a note is honest in a way a chart with invented points never is.

• Design the empty case in the same frame as the full case
• Use the Empty state component and Skeleton for loading
• A dash for a missing number, not a zero
• Leave the block in place so the layout does not jump

Note: Fake data in a mockup reads as a promise. If a reviewer asks where a figure came from, a placeholder is a better answer than an invented number.

A checklist you can reuse

• The dashboard has one named headline number
• The web frame matches the screen your users have
• One margin and one gutter value are used everywhere
• The KPI row is a single row of three to five figures
• The chart matches the question the headline raises
• Cards are used for scanning and tables for comparison
• Empty, loading and missing-data states are drawn

Common mistakes to avoid

• Leading with a chart. A chart before the headline number leaves the reader hunting for the point. Put the number first and the chart under it.
• A KPI row of ten. Ten small numbers cannot be compared in one pass, so the row becomes a list. Keep three to five and move the rest.
• One number, two meanings. Mixing a percentage with a currency in the same row makes the comparison impossible. Give each row one unit.
• A table with every field. Twelve columns is a database view, not a table a person can read. Cut the columns the reader will not compare.
• Invented data everywhere. Filled charts and perfect numbers look like a real product and mislead a reviewer. Use a dash or a note where there is no data.

Frequently asked questions

What size should a dashboard mockup be?

Use the size your users work at. App Builder opens web frames at 1280×800, with a Laptop 1280×800 preset and a Desktop 1440×900 preset, and the frame inspector takes any size down to 120×120. Designing at 1280 and checking at 1440 catches the column that only fits on a big monitor.

Which chart should I use?

Match the chart to the question. The Chart component shows a trend over time, a Donut shows a share of a whole, a Gauge shows a value against a range, and a Sparkline is the small inline version for inside a KPI card. The <a href="/blog/design-a-data-table">data table guide</a> covers when a table beats a chart for detail.

How do I keep the columns aligned?

Use auto-layout rather than dragging. Direction, gap, padding and cross-alignment are set in the inspector, with gap and padding running from 0 to 96, so a column of cards keeps the same rhythm as a column of tables. The 8 pixel placement grid catches the edges of anything you move by hand.

Can I show real customer data in a mockup?

The mockup holds shapes and text, so what you put there is a decision rather than a capability. Use sample values that are clearly sample, and keep the real numbers in the tool that owns them. Canvasola stores the project in a .canv file on your machine, and cloud storage is an opt-in extra rather than the default.

This guide is part of the app builder guides collection. For the wider product tour, read the complete Canvasola guide, and keep the keyboard shortcut cheat sheet open while you work.