First Impressions Matter

Talk
Styling Data Projects People Actually Want to Use
Author

Shelby Level

Published

September 16, 2024

Talk Materials

Slide Deck

 Fullscreen  Source

References

datawrapper.de
What to Consider When Using Text in Data Visualization
A practical guide covering labels, annotations, titles, and captions — how to use text to clarify rather than clutter your charts.
nightingaledvs.com
What Are Data Visualization Style Guidelines?
An introduction to dataviz style guides — what they are, how they fit into broader design systems, and real-world examples from organizations like Google, the BBC, and the Sunlight Foundation.
nightingaledvs.com
Core Dataviz Style Guide Components
A practical framework for building a dataviz style guide from scratch — covering accessibility audits, color, typography, and chart layout, with step-by-step exercises for each component.
medium.com
Data Visualization: Colors Matter, but What About Typography?
A reflection on typography as an underappreciated design element in data visualization — exploring how font choices shape readability, hierarchy, and chart effectiveness alongside color decisions.
datawrapper.de
Emphasize What You Want Readers to See with Color
How to use gray and desaturation strategically to create visual hierarchy — directing readers' attention to what matters most through saturation and contrast rather than by adding more colors.
data.london.gov.uk
City Intelligence Data Design Guidelines
The Greater London Authority's publicly available dataviz style guide (PDF), covering color palettes, chart types, typography, and accessibility principles for GLA data products — a frequently cited real-world example.
datawrapper.de
Which Color Scale to Use When Visualizing Data
An overview of categorical, sequential, and diverging color scales — when to use each, how highlighting and de-emphasizing work, and why the "right" choice is often less clear-cut than textbooks suggest.
github.com
Cato Institute Data Visualization Guidelines
A pocket style guide from the Cato Institute with chart-by-chart graphic guidelines and design justifications — aimed at making data visualization clearer and more effective for readers and communicating the organization's mission.
dl.acm.org
Affective Color in Visualization
A study on how colors convey affects — playfulness, calm, seriousness, trustworthiness — in data visualizations, with implications for choosing palettes that match the intended tone of a chart.
dl.acm.org
Trustworthy by Design: The Viewer's Perspective on Trust in Data Visualization
The qualitative study behind the talk's trust framework — how viewers describe their own trust in visualizations, why their reasoning is surprisingly consistent yet individually diverse, and actionable guidelines for designing more trustworthy visualizations.

After the Talk: Where to Start

If you want to bring these ideas into your own work, don’t try to redesign everything at once. Styling works best as a series of layers, each one building on the last:

  1. Bootstrap is your foundation. If you’re building HTML output with Quarto or Shiny, you already have it — structure, components, and sensible defaults come for free.
  2. A Bootswatch theme gives you a better starting point. One line changes the look and feel of the entire product.
  3. A _brand.yml file makes it yours. Define your colors and typography once, then reuse them across dashboards, reports, and slides.
  4. Polish selectively. Custom CSS and per-chart adjustments are the final layer, reserved for the details specific to that product and audience.

Below are resources for each layer, plus deeper reading on color and typography for when you’re ready to go further.

Bootswatch Themes

The fastest way to move from “good enough” to “intentional.” Pick a preset, apply it, and every styled component updates at once.

Quarto:

quarto.yml

format:
  html:
    theme: lux

Shiny (bslib):

app.R

library(bslib)

page_navbar(
  title = "Dashboard",
  theme = bs_theme(preset = "lux"),
  ...
)
bootswatch.com
Bootswatch Theme Gallery
Browse all 25+ free Bootstrap themes with live previews of every component — buttons, navbars, tables, forms — so you can see exactly what a preset will do to your product before you apply it.
rstudio.github.io/bslib
Theming with bslib
How to apply Bootswatch presets and customize themes in Shiny apps and R-based Quarto documents with bs_theme(), including runtime theme switching for quick experimentation.
quarto.org
Quarto HTML Theming
Quarto's guide to applying Bootswatch themes to HTML documents, websites, and dashboards — plus how to layer custom SCSS on top of a preset.

Brand.yml

A Bootswatch preset doesn’t know your organization’s colors or fonts. A _brand.yml file records those decisions once so every product can reuse them — which is also what makes work from the same source recognizable over time.

brand.yml

meta:
  name: shelbylevel
  link: https://www.shelbylevel.org

color:
  palette:
    deep-jade: "#254D56"
    faded-jade: "#45767a"
    gulfstream: "#7fa6ad"
    edgewater: "#d3dfdd"
    storm-cloud: "#64635E"
    plum-crazy: "#59224A"
  
  foreground: deep-jade
  background: edgewater
  primary: faded-jade
  secondary: gulfstream
  success: "#b2c5b4"
  warning: "#B8AEA8"
  danger: plum-crazy
  light: "#ecf1f2"
  dark: storm-cloud

typography:
  fonts:
    - family: "Lato"
      source: google
      weight: [200, 300, 400, 600]
    - family: "Nunito Sans"
      source: google
      weight: [400, 600]
  
  base:
    family: "Lato"
    size: "1rem"
    weight: 300
    line-height: 1.6
  
  headings:
    family: "Nunito Sans"
    weight: 600
    line-height: 1.2
    color: primary

Apply it on top of a Bootswatch preset in Quarto:

quarto.yml

format:
  html:
    theme: lux
    brand: _brand.yml
posit-dev.github.io/brand-yml
brand.yml Documentation
The official reference for the brand.yml format — how to define brand colors, typography, and logos in one portable file that works across Quarto, Shiny, and other tools.
quarto.org
Quarto Brand Support
How Quarto applies a _brand.yml file to documents, dashboards, websites, and presentations — including how brand colors flow into plots and tables.
rstudio.github.io/bslib
brand.yml in Shiny with bslib
Using a brand.yml file to theme Shiny apps — bslib reads the same file Quarto uses, so one brand definition covers your apps and your documents.

Colors

nightingaledvs.com
How to Create Brand Colors for Data Visualization Style Guidelines
Why your brand colors often don't translate to charts, and how to build accessible, functional color palettes — for categorical, sequential, and diverging data — while preserving brand identity.
datawrapper.de
A Detailed Guide to Colors in Data Vis Style Guides
A comprehensive deep-dive into building organizational color palettes — from four palette approaches (minimalist to expansive) to considerations like accessibility, brand alignment, dark mode, and color ordering.

Typography

datawrapper.de
Which Fonts to Use for Your Charts and Tables
A guide to choosing and adjusting fonts for data visualization — covering typeface categories, figure styles (lining vs. oldstyle, tabular vs. proportional), weight, sizing, and when uppercase text works.