Design a SaaS Dashboard Layout with Data Hierarchy

Generate a complete SaaS dashboard layout spec with widget inventory, grid system, filters, and responsive breakpoints.

📝 The Prompt

Act as a product designer specializing in B2B SaaS interfaces. Design a detailed dashboard layout for a [SAAS_PRODUCT_TYPE] platform used by [USER_ROLE] professionals. The dashboard should display [KEY_METRICS] as the primary data points. Provide the following: 1. **Information Architecture**: Organize the dashboard into logical sections. Define a clear visual hierarchy with primary metrics (at-a-glance KPIs), secondary data (trends and charts), and tertiary information (detailed tables or logs). Explain the rationale behind the grouping. 2. **Layout Grid Specification**: Recommend a grid system (e.g., 12-column, 8-column) with specific card sizes for each widget. Describe the responsive behavior across desktop (1440px), laptop (1024px), and tablet (768px) breakpoints. 3. **Widget Inventory**: List 8-10 dashboard widgets with their: - Widget name - Data visualization type (line chart, bar chart, donut, sparkline, data table, heatmap, etc.) - Dimensions (grid columns x rows) - Interaction behavior (hover tooltips, drill-down, filter, export) 4. **Filter & Control Bar**: Design a global filter system including [FILTER_OPTIONS] with date range picker, segment selector, and search functionality. 5. **Empty States & Loading**: Describe the UI for zero-data states, loading skeletons, and error states for each widget type. 6. **Color Coding System**: Define a semantic color system for status indicators (success, warning, critical, neutral) and data visualization palettes that remain distinguishable for colorblind users. 7. **Sidebar Navigation**: Outline the left-side navigation menu with [NUMBER_OF_SECTIONS] sections, icon suggestions, and collapsible behavior. Format the output as a design specification document ready for implementation in [FRAMEWORK].

💡 Tips for Better Results

Prioritize the 3-5 most critical metrics your users check daily and place them in the top-left quadrant for maximum visibility. Always design empty states first—they're the first thing new users see. Test your data visualization color palette with a colorblind simulator before finalizing.

🎯 Use Cases

Product designers and frontend developers use this when building or redesigning a SaaS analytics dashboard that needs clear data hierarchy and responsive layout specs.

🔗 Related Prompts

🎨 Design intermediate

UI/UX Design Review Checklist

Get a comprehensive UI/UX review covering hierarchy, accessibility, and responsiveness.

👁️ 1 📋 0
🎨 Design intermediate

Generate a Custom Color Palette for Any Brand or Project

Generate a complete, accessible color palette with HEX values, usage guidelines, and dark mode variants for any brand or project.

👁️ 1 📋 0
🎨 Design intermediate

Find the Perfect Typography Pairing for Your Design Project

Get expert typography pairing recommendations with type scales, spacing guidelines, and CSS fallback stacks for any design project.

👁️ 1 📋 0
🎨 Design advanced

Create a Detailed Wireframe Description for UI/UX Design

Generate a detailed, section-by-section wireframe description with layout specs, interaction flows, and responsive behavior for any page.

👁️ 1 📋 0
🎨 Design advanced

Build Comprehensive Design System Documentation

Create complete design system documentation with tokens, component specs, accessibility standards, and contribution guidelines.

👁️ 1 📋 0
🎨 Design advanced

Create a Detailed Component Library Specification Document

Build a comprehensive component library spec with variants, props, accessibility rules, and code examples for your design system.

👁️ 1 📋 0