CHAPTER 18 Beginner

Dashboard Design Principles

Updated: May 18, 2026

5 min read

# CHAPTER 18

Dashboard Design Principles

1. Chapter Introduction

A dashboard is not a collection of charts — it's a decision-making tool. Great dashboards guide executives to insights in under 30 seconds. This chapter teaches the design principles that separate professional dashboards from data dumps.

2. Dashboard Layout Principles

text

123456789101112131415161718192021

DASHBOARD ANATOMY — Golden Layout:

┌─────────────────────────────────────────────────────────────────┐
│  HEADER: Title │ Date Range Filter │ Export Button              │
├──────────┬──────────┬──────────┬──────────┬──────────────────────┤
│ KPI Card  │ KPI Card │ KPI Card │ KPI Card │    Alert / Status   │
│ Revenue   │ Orders   │ Customers│ Margin   │    🔴 Sales Down    │
├──────────────────────────────┬──────────────────────────────────┤
│                              │                                   │
│   PRIMARY CHART              │   SECONDARY CHART                 │
│   (Trend - Full Width)       │   (Category Comparison)           │
│                              │                                   │
├──────────────────────────────┴──────────────────────────────────┤
│   DETAIL CHARTS (smaller, supporting information)               │
│   [Distribution] [Geographic] [Funnel] [Table]                  │
└─────────────────────────────────────────────────────────────────┘

Z-Pattern Reading: Users read Top-Left → Top-Right → Bottom-Left → Bottom-Right
F-Pattern Reading: Users scan down the left side first

Implication: Put KPIs top-left, primary chart top-center, filter top-right

3. KPI Card Design

python

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

import matplotlib.pyplot as plt
import matplotlib.patches as mpatches

def kpi_card(ax, title, value, delta, delta_label=&#039;vs last month', color='#1565C0'):
    """Create a professional KPI card."""
    ax.set_xlim(0, 1)
    ax.set_ylim(0, 1)
    ax.axis(&#039;off')

    # Background
    rect = mpatches.FancyBboxPatch((0.02, 0.02), 0.96, 0.96,
                                    boxstyle=&#039;round,pad=0.02',
                                    linewidth=1, edgecolor=&#039;#E0E0E0',
                                    facecolor=&#039;white')
    ax.add_patch(rect)

    # Top color bar
    bar = mpatches.FancyBboxPatch((0.02, 0.85), 0.96, 0.13,
                                   boxstyle=&#039;round,pad=0.0',
                                   linewidth=0, facecolor=color, alpha=0.15)
    ax.add_patch(bar)

    ax.text(0.5, 0.90, title, ha=&#039;center', va='center', fontsize=10,
             color=&#039;#666', transform=ax.transAxes)
    ax.text(0.5, 0.55, value, ha=&#039;center', va='center', fontsize=22,
             fontweight=&#039;bold', color=color, transform=ax.transAxes)
    delta_color = &#039;#4CAF50' if delta.startswith('+') else '#F44336'
    arrow = &#039;▲' if delta.startswith('+') else '▼'
    ax.text(0.5, 0.25, f&#039;{arrow} {delta}', ha='center', va='center',
             fontsize=13, color=delta_color, fontweight=&#039;bold', transform=ax.transAxes)
    ax.text(0.5, 0.1, delta_label, ha=&#039;center', va='center',
             fontsize=9, color=&#039;#999', transform=ax.transAxes)

# KPI Dashboard row
fig, axes = plt.subplots(1, 5, figsize=(18, 3))
kpis = [
    (&#039;Total Revenue', '$2.4M', '+12.3%', '#1565C0'),
    (&#039;Orders',        '8,421',  '+8.7%',  '#2E7D32'),
    (&#039;Customers',     '3,218',  '+15.2%', '#E65100'),
    (&#039;Avg Order',     '$285',   '-2.1%',  '#6A1B9A'),
    (&#039;Net Margin',    '28.5%',  '+1.8pp', '#B71C1C'),
]
for ax, (title, value, delta, color) in zip(axes, kpis):
    kpi_card(ax, title, value, delta, color=color)

plt.suptitle(&#039;Executive KPI Dashboard — Q4 2024', fontsize=14, fontweight='bold', y=1.05)
plt.tight_layout(pad=0.5)
plt.savefig(&#039;kpi_cards.png', dpi=150, bbox_inches='tight')
plt.show()

4. Visual Hierarchy Rules

text

12345678910111213141516171819202122232425262728

Visual Hierarchy for Dashboards:

1. SIZE HIERARCHY
   Large = Primary information (KPIs, main trend)
   Small = Supporting detail

2. COLOR HIERARCHY
   Vibrant color = Draw attention (alerts, targets)
   Muted/grey = Background context

3. POSITION HIERARCHY
   Top-left = First seen (most important KPIs)
   Bottom-right = Last seen (detail tables, footnotes)

4. WHITESPACE
   Generous whitespace > Dense data
   Rule: 15-20% of dashboard should be empty space

5. FONT HIERARCHY
   H1 (18-24px bold): Dashboard title
   H2 (14-16px bold): Section headers
   H3 (12px bold):    Chart titles
   Body (10-12px):    Axis labels, annotations
   Caption (9px):     Source, footnotes

6. ALIGNMENT
   Consistent grid alignment makes dashboards feel professional
   Misaligned charts look amateur — use gridspec with equal spacing

5. Common Mistakes

Too many charts: A dashboard with 20 charts is not useful — it's a data dump. Limit to 8-10 key metrics. If everything is highlighted, nothing is.

Inconsistent colors: Using red for both "bad" and "Product A" creates confusion. Define a color system: red=alert, green=positive, blue=primary data.

6. MCQs

Question 1

KPI cards at the top of a dashboard serve?

Question 2

Z-pattern in dashboard design means?

Question 3

Ideal whitespace percentage in dashboards?

Question 4

Using red color in dashboards typically signals?

Question 5

Maximum recommended charts per dashboard screen?

Question 6

`mpatches.FancyBboxPatch()` creates?

Question 7

Primary chart position in dashboard layout?

Question 8

Consistent color coding prevents?

Question 9

F-pattern reading means users?

Question 10

Delta arrow (▲▼) with color in KPI cards shows?

7. Interview Questions

Q: What are the key principles of good dashboard design?

Q: How do you create a visual hierarchy in a dashboard?

8. Summary

Dashboard design principles: Z-pattern layout (KPIs top, detail bottom), maximum 8-10 charts, 15-20% whitespace, consistent color semantics (red=alert, green=positive), clear typographic hierarchy. KPI cards provide 3-second summary for executives. Design for the decision-maker's question, not for all available data.

9. Next Chapter Recommendation

In Chapter 19: Building Dashboards with Plotly Dash, we implement these design principles in a fully interactive, deployable Python web dashboard.

Browse All 21+ Subject Areas

Quick Links

Visual Algorithm Labs

Frontend Dev

The Future of Web Architecture in 2026

Practice Quizzes

Dashboard Design Principles #

1. Chapter Introduction #

2. Dashboard Layout Principles #

3. KPI Card Design #

4. Visual Hierarchy Rules #

5. Common Mistakes #

6. MCQs #

KPI cards at the top of a dashboard serve?

Z-pattern in dashboard design means?

Ideal whitespace percentage in dashboards?

Using red color in dashboards typically signals?

Maximum recommended charts per dashboard screen?

mpatches.FancyBboxPatch() creates?

Primary chart position in dashboard layout?

Consistent color coding prevents?

F-pattern reading means users?

Delta arrow (▲▼) with color in KPI cards shows?

7. Interview Questions #

8. Summary #

9. Next Chapter Recommendation #

Finish this Chapter

Discussion

Explore More

📖 Related Tutorials 5

🧪 Related Labs 6

🗺️ Related Roadmaps 1

Send Feedback / Bug

Feedback Submitted!

Dashboard Design Principles

1. Chapter Introduction

2. Dashboard Layout Principles

3. KPI Card Design

4. Visual Hierarchy Rules

5. Common Mistakes

6. MCQs

`mpatches.FancyBboxPatch()` creates?

7. Interview Questions

8. Summary

9. Next Chapter Recommendation