Skip to content

Design Principles

Design Thinking (user-centric)

  1. Empathize — emotions and needs of the audience
  2. Define — audience needs, problems, insights
  3. Ideate — start drafting visualizations
  4. Prototype — put findings into a presentation or dashboard
  5. Test — show prototypes to teammates before final delivery

9 basic principles of design

  1. Balance — distribute visual elements evenly
  2. Emphasis — focal point with contrast; the most important data stands out first
  3. Movement — guide the viewer's eye with lines, color, animation
  4. Pattern — consistent shapes/colors highlight similarities or disruptions
  5. Repetition — repeat elements so audience recognizes data sets
  6. Proportion — size and scale signal relative importance
  7. Rhythm — arrange for natural flow
  8. Variety — mix chart types and colors; avoid confusion
  9. Unity — components work together as a cohesive story

Design a chart in 60 minutes

Phase Time What to do
Prep 5 min Mental space; consider amount and type of data
Talk and listen 15 min "Ask behind the ask"; set expectations
Sketch and design 20 min Draft approach; define timing and output
Prototype and improve 20 min Build, evaluate, iterate

3 data storytelling steps

(Real-world example: Spotify Wrapped)

  1. Engage the audience
  2. Create compelling visuals
  3. Tell the story in an interesting narrative

McCandless Method (presenting a single graphic)

  1. Introduce the graphic by name
  2. Answer obvious questions before they're asked
  3. State the insight of your graphic
  4. Call out data that supports that insight
  5. Tell your audience why it matters

Edward Tufte's principles

  • Above all, show the data
  • Maximize data-ink ratio (remove non-data ink)
  • Avoid chartjunk
  • Use small multiples for comparison
  • Show comparisons, contrasts, differences

Practical checklist before publishing

  • Title states the insight (not just the topic)
  • Axes labeled with units
  • Numbers formatted (commas, currency, %)
  • No truncated y-axis (unless you flag it)
  • Color-blind friendly
  • Source cited
  • Caption explains what to notice
  • Looks fine on a phone

References