Dashboard Page Design Guide

Key Components of a Dashboard Page

1. Logo

   
   

   • Preferred Placement: Bottom-right corner

   • Alternative Placement: Top-left corner

     
     

2. Top KPIs

   
   

   • Preferred Chart Type - Card or Multi-Cards

   • Represent aggregate metrics such as Total Revenue, Total Invoices, etc.

   • Placement: Top section of the dashboard

     
     

3. Secondary KPIs

   
   

   • Main body section showcasing key charts and visualizations

     
     

4. Filters

   
   

   • Preferred Placement: Right-side pane (dedicated section)

   • Alternative Placement: Top section

     
     

5. Page Navigators

   
   

   • Preferred Placement: Bottom section

   • Alternative Placement: Creative bookmarks and icons

     
     

6. Last Refresh Time

   
   

   • Placement: Below the logo

     
     

7. Separation Line

   
   

   • A visual line separating charts (secondary KPIs) from slicers (filters)

     
     

8. Primary Color

   
   

   • Should align with the client's brand kit.

   • Preferred colors: Navy Blue (#435267) with Golden/Brown contrast (#B68D2F).

     
     

9. Background Color

   
   

   • Preferred: Off-white (#F5F5F5), Light-grey (#F5F5F5), or White.

   • First choice should always align with the client's brand kit.

     
     

10. Chart Color

    
    

    • If the background is white, use light grey for charts (#F5F5F5).

    • First priority: Client's brand colors.

    • Safe priority: Light grey.

      
      

11. Theme Flexibility

    
    

    • The entire design can adopt a Dark Theme if preferred.

    • Always prioritize alignment with the client's brand kit.

    • Feel free to go creative where appropriate.

    
    
    
    

Design 1: Classic Layout

• Top Section: Card KPIs displaying key metrics

• Right Section: Filters and slicers, with a prominent reset bar for clearing all filters

• Bottom-right: Logo with the last refresh time displayed below

• Bottom Section: Page navigators (text-based or icons using bookmarks)

• Main Body: Secondary KPIs occupy the remaining space

• Separation Line: Clear demarcation between slicers and charts

  
  
  
  

Unique Feature: The reset bar at the extreme right acts as a filter reset button, offering a tactile user experience.

Red Theme

Please note- Here red theme is being used, this doesn't mean that this is the preferred choice of theme color.

Design 2: Icon-Based Navigation

• Similar to Design 1, with a slight difference:

  • Page Navigators: Icons created using bookmarks

  
  

Unique Feature: Page navigation via bookmarks requires meticulous effort but creates an engaging user experience.

Ultimate Sales Dashboard Theme

Additional Design Ideas:

1. Dark Theme: Sleek visuals with one or two primary colors and their shades, maintaining high contrast.

2. Simple & Minimalistic: Clean layout with fewer distractions, focusing on core insights.

   
   
   
   

Each design approach can be adapted based on the specific requirements of the business use case, but the fundamental components remain consistent.

Best Practice Tip: Always test the dashboard layout on multiple devices and resolutions to ensure optimal usability and accessibility.

Color Guidance: Avoid excessive use of bright or overpowering colors. Instead, select a neutral base with one or two accent colors aligned with the client's branding guidelines.

Single Chart Matrix with Conditional Formatting Design

Yellow Orange Grey Theme

Navy Blue Winter with Red Contrast TheTme

Yellow Dashboard with icons on left for page-navigation and only one filter

Turqoise Green Gradient Theme

Safe Navy Blue Preferred Theme

Safe Navy Blue Preferred Theme 1

Light Blue Green Turqoise Theme

Dark Blue with Golden Contrast Theme

KPI Cards with Positive Negative Conditional Formatting Design

One Pager Dashboard with Filters on Top