Good dashboard UI design puts the one number a user checks first in the largest type, places actions next to the data they change, and labels every status with text as well as color. The eight annotated examples below show those decisions in real dashboard designs, each with what to copy and what to check before you ship.
Every example comes from the HorizonX catalog and is linked so you can open the full design. This page is for inspiration and pattern spotting. If you are choosing a template to buy and want a scored comparison, read our dashboard UI kit teardown, which covers five different templates against a fixed rubric. The full set lives in the dashboard templates collection.
What makes a dashboard example worth copying
A dashboard is a screen people return to many times. Nielsen Norman Group describes dashboards as showing regularly updated information that users must monitor often, and recommends encoding quantities with length and 2D position, such as bar and line charts, so they can be read quickly (NN/g). With that in mind, each example below is read against five questions:
- Is there one clear first read? One number or card should win the visual hierarchy.
- Does the chart type match the question? Comparisons suit bars; trends suit lines.
- Is status readable without color? WCAG 1.4.1 requires another cue, such as text or an icon.
- Are actions next to their data? The button that changes a number should sit near that number.
- Does it say how fresh the data is? A timestamp or "updated" label prevents decisions on stale numbers.
8 annotated dashboard examples
Seven of these are editable Figma files and one is a coded HTML, CSS and JavaScript template. All data shown in them is sample data.
1. Financial Dashboard: the highlighted month
Financial Dashboard is a dark analytics screen with warm orange accents. A "Performance" header shows three KPIs: net income with its change, a monthly average, and the best month written as a word. Below, a bar chart highlights a single month and its tooltip compares it with the previous one.
- Copy: highlight one bar and attach the comparison to it. The reader gets "how did this month do" without decoding a legend.
- Check: the highlighted bar is distinguished by color, so add a text label or value. Orange text on a dark surface needs at least 4.5:1 contrast at normal sizes under WCAG 1.4.3.
2. Trading Dashboard: one saturated card
Trading Dashboard is a dark crypto portfolio screen with electric-blue accents. Net worth is the largest number on the page, with a weekly change beside it. The cash balance card is the only fully saturated card, holdings sit in three equal tiles, and a price chart has 24H and weekly range controls. Swap, deposit and buy actions sit in the same view.
- Copy: reserve your strongest fill for a single card. When everything is bright, nothing leads.
- Check: show gains and losses with a plus or minus sign, not only green and red, and make the selected range visible by more than color.
3. Vaultly Dashboard: summary band, detail band
Vaultly Dashboard is a personal finance screen with neon yellow accents. Its upper band is dark and holds the summary: total balance chart, a savings goal, income and spending with their changes, and budget bars. The lower band switches to a light surface for detail: recent transactions and a card manager. Text on the yellow fills is dark.
- Copy: split summary and detail into two surfaces so the eye knows where the overview ends.
- Check: pale accents on a light band can fail the 3:1 ratio for graphical objects in WCAG 1.4.11. Stacked budget bars need labels, not color alone.
4. EduTrack Dashboard: counts before lists
EduTrack Dashboard is a light e-learning screen with purple and lime accents. A welcome card shows overall progress with a segmented bar, then three counts (in progress, upcoming, completed) before the course cards. Assignments carry text status pills, and an AI assistant prompt sits alongside a calendar.
- Copy: give a count trio before the detailed lists. People decide where to look next from the counts.
- Check: this is a dense screen. Decide the order of widgets for small screens before you build, because a desktop grid rarely collapses into a sensible single column on its own.
5. FluxPay Dashboard: the dashboard as onboarding
FluxPay Dashboard is a light payments screen with yellow accents. A total balance card offers Send and Request, a transactions table shows statuses, and widgets can be added or managed. A profile completion card asks the user to verify their identity.
- Copy: put the next setup step inside the dashboard rather than in a separate onboarding flow. It stays visible until done.
- Check: the search field shows a keyboard shortcut hint. If you implement shortcuts, avoid overriding the browser's own find command.
6. NexusFlow Dashboard: one record, all context
NexusFlow Dashboard is a CRM screen in light gray with lime and black accents. A customer header leads with key figures, followed by a task schedule calendar, a stage funnel and an interaction history of deals, with a contact panel to the side.
- Copy: for record-centric products, open with the figures about this one customer, then the timeline.
- Check: funnel stages should carry their names and values as text so they survive screen readers and grayscale printing.
7. Invoicing Center Dashboard: freshness and counts
Invoicing Center Dashboard is a dark billing screen with mint accents. An "updated" label states how recent the numbers are. Overdue and upcoming totals sit in cards, and the unpaid invoices list has filter tabs with counts, a "showing x of y" indicator and text status pills.
- Copy: freshness labels and counts inside filters. Both answer questions users would otherwise ask support.
- Check: if the filters are real tabs, follow the APG tabs pattern; if they only filter a list, toggle buttons with a pressed state are simpler.
8. Aurora Dashboard: a prompt instead of a chart wall
Aurora Dashboard is a coded, dark home screen for AI assistant products: a slim icon rail, a greeting, a frosted glass prompt composer and four suggested prompts. The glass effect runs in WebGL and falls back to a frosted CSS panel when WebGL, transparency or motion are reduced. It ships as one HTML file with no backend.
- Copy: for AI products, the dashboard home can be a starting prompt with suggestions instead of metrics nobody asked for.
- Check: keep the fallback path. Heavy visual effects need a plain version for reduced motion and low-power devices.
Patterns across the examples
| Pattern | Seen in | Why it helps |
|---|---|---|
| One dominant number | Trading, Financial | Makes the first read obvious |
| Single saturated card | Trading | Draws focus without extra size |
| Summary and detail bands | Vaultly | Separates overview from records |
| Count trio before lists | EduTrack, Invoicing Center | Lets users choose where to look |
| Setup task inside the dashboard | FluxPay | Keeps onboarding visible |
| Freshness label | Invoicing Center | Prevents decisions on stale data |
| Text status pills | EduTrack, Invoicing Center | Works without color perception |
Turning an example into your own dashboard
- Write the three questions your users open the dashboard to answer. Each one becomes a card, a chart or a list, in that order of importance.
- Pick the example that answers similar questions, not the one with the nicest palette. A CRM needs NexusFlow's record header more than Trading's bright card.
- Assemble from parts. Dashboard Components splits KPI cards, a task list, a calendar and a day agenda into separate Figma pieces, and Studio Kit adds metric cards, charts, gauges and pagination controls in three surface styles.
- Design the empty, loading and error states before the happy path. NN/g's article on skeleton screens covers when a placeholder layout is the right loading pattern.
For the strategy side of SaaS dashboards, including layout zones and the mistakes that hurt activation, see SaaS dashboard design that converts.
FAQ
What are the four types of dashboards?
There is no official standard, but a common split is operational (live monitoring for team leads), tactical (weekly or monthly progress for department heads), analytical (on-demand exploration for analysts) and executive or strategic (high-level KPIs for leadership). ThoughtSpot's guide uses this split. Design follows the type: operational screens need freshness and alerts, analytical ones need filters.
What is the 5 second rule for dashboards?
It is a rule of thumb, not a standard: someone should understand the main message of a dashboard within about five seconds of looking at it. Treat it as a design prompt. If the first read is not obvious, reduce the number of competing cards and enlarge the one that matters.
Can ChatGPT make dashboards?
AI assistants can write dashboard code and chart configuration from a prompt, and they are useful for a first layout. The output still needs a review of data accuracy, states, contrast and keyboard access. Our production readiness checklist for vibe-coded UI lists what to check.
How to design a good dashboard?
Start from the questions users bring, give one answer the strongest visual weight, choose bars for comparisons and lines for trends, label statuses with text, keep actions beside their data, and show when the data was last updated. Then test it with real numbers, including empty and extreme values.
Find more examples
Every design above, plus the coded templates reviewed in the teardown, is in the dashboard templates collection.