SuperAPI AI Directory

dashboard-design

Design & creation

View repository

Updated 10-16 05:06

About this skill

Dashboard Design

Dashboard Types

Type Purpose Density
Operational Monitor real-time status High, live data
Analytical Explore trends and patterns Medium, interactive
Strategic Track KPIs and goals Low, focused metrics

Layout Patterns

  • KPI bar at top: 3-5 key metrics with trend indicators.
  • Primary chart below: the most important visualization, large.
  • Supporting widgets in grid: secondary data in smaller containers.
  • Activity feed in sidebar or bottom: recent events, logs.

Widget Design

  • Title + value + trend indicator (up/down + percentage).
  • Consistent sizing: widgets should snap to a grid (2-col, 3-col, 4-col).
  • Hover/click for drill-down. Don't try to show all detail at once.
  • Loading state per widget (skeleton), not a full-page loader.

Information Density

  • Offer density toggle: Compact / Comfortable / Spacious.
  • Default to comfortable. Power users will switch to compact.
  • Time range selector: global (affects all widgets) + per-widget override.

Anti-Patterns

  • Dashboards that show everything with no hierarchy (wall of charts).
  • Pie charts for more than 5 categories (use bar charts).
  • 3D charts (never, ever).
  • Auto-refreshing charts that cause layout shifts.