dashboard-design

name	dashboard-design
description	Dashboard UI patterns. Layout, widgets, KPIs, data density, navigation for admin panels and analytics.

Dashboard Design

Dashboards communicate the state of a system at a glance.

---

1. Dashboard Types

Type	Purpose	Examples
Operational	Monitor real-time metrics	DevOps, support queues
Analytical	Explore historical data	Business intelligence
Strategic	High-level KPIs for decisions	Executive dashboards
Tactical	Day-to-day task management	Project trackers

---

2. Layout Grid

┌──────────────────────────────────────────────┐
│ Sidebar │  Top bar (breadcrumb + actions)     │
│         ├──────┬──────┬──────┬───────────────┤
│  Nav    │ KPI  │ KPI  │ KPI  │  KPI          │
│         ├──────┴──────┴──────┴───────────────┤
│         │  Chart (large)    │  Secondary     │
│         │                   │  widget        │
│         ├───────────────────┴────────────────┤
│         │  Data Table                        │
└─────────┴────────────────────────────────────┘

Grid Rules

• Use 12-column grid
• KPI cards: 3 or 4 per row
• Primary chart: 8 cols; secondary: 4 cols
• Tables: full width

---

3. KPI Card Anatomy

┌─────────────────────────┐
│ Label          [icon]   │
│ $124,500                │
│ ↑ 12.4% vs last month   │
└─────────────────────────┘

Element	Purpose
Label	Metric name (short)
Value	Current number (large, prominent)
Delta	Change vs period (color-coded)
Icon	Visual cue for quick scanning
Sparkline	Mini trend (optional)

---

4. Chart Selection

Data Type	Best Chart
Trend over time	Line chart
Category comparison	Bar chart
Part of whole (< 5 items)	Donut chart
Distribution	Histogram
Correlation	Scatter plot
Geographical	Choropleth map
Funnel / conversion	Funnel chart
Single metric progress	Gauge / progress bar

---

5. Data Table Patterns

Feature	Implementation
Sorting	Clickable column headers with indicator
Filtering	Inline filter row or filter panel
Pagination	Show page X of Y, rows per page
Row actions	Hover-reveal or always-visible icons
Bulk actions	Checkbox column + action bar
Empty state	Illustration + CTA, not blank
Loading	Skeleton rows, not spinner

---

6. Navigation Patterns

Pattern	Use When
Left sidebar	5-15 nav items, complex app
Top nav	3-7 items, content-first
Collapsible sidebar	Dense data, need max width
Tabs	Same-level sections within a page
Breadcrumbs	Deep hierarchy navigation

---

7. Color Usage

Status colors (use consistently):
├── Green   → Success, positive trend, active
├── Red     → Error, negative trend, critical
├── Yellow  → Warning, pending, at risk
├── Blue    → Info, neutral, primary actions
└── Gray    → Disabled, empty, secondary

Chart palette:
├── Use 4-6 colors max
├── Colorblind-safe: avoid red+green alone
└── Ensure 3:1 contrast ratio on backgrounds

---

8. Density Modes

Mode	Row Height	Font Size	Padding
Compact	32px	12px	4px
Default	44px	14px	8px
Comfortable	56px	16px	16px

Let users choose or auto-detect based on device.

---

9. Anti-Patterns

❌ Don't	✅ Do
3D pie charts	Flat bar charts
Too many KPIs on one screen	Max 6 KPIs above fold
No loading states	Skeleton placeholders
Truncated numbers (1.2M no context)	Tooltips with full value
Auto-refresh without warning	Indicate live refresh rate
Mixed date formats	Consistent ISO or locale
"""