dashboard-design

# 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 | """