Esc
  • Design SystemsFrom Figma Variables to Tailwind, Without the Copy-PasteDesign tokens only help if design and code read from the same source. Here's how I set up a pipeline where Figma variables become Tailwind theme values and React props, and what I learned about naming along the way.
  • Next.jsBuilding a Like Button, From Database to DelightThe heart at the bottom of every article on this site is a tiny full-stack feature. Here's how it works, from the SQLite table and API route to optimistic updates and batched requests.
  • AnimationA Friendly Introduction to Spring PhysicsSprings make interfaces feel alive. Instead of picking a duration and an easing curve, you describe how something should move, and physics does the rest. Let's build an intuition for stiffness and damping with a live playground.
  • UI DesignDesigning Dashboards People Can Actually ScanData-heavy screens fail when every number shouts at once. A practical guide to hierarchy, tables, filters and progressive disclosure for dashboards that engineers and analysts use all day.
  • CSSUnderstanding Flexbox Alignment, Visuallyjustify-content or align-items? Main axis or cross axis? If you still guess which property to use, this interactive guide will fix that for good.
  • BrandA Brand System Is More Than a LogoA logo is the smallest part of a brand. What makes a brand recognizable is the system around it, from type and color to iconography, voice and the way the product itself behaves. Here's how I approach building one that survives contact with real products.
UI Design

Designing Dashboards People Can Actually Scan

Data-heavy screens fail when every number shouts at once. A practical guide to hierarchy, tables, filters and progressive disclosure for dashboards that engineers and analysts use all day.

2 min read…

Most dashboards are designed from the database outward. Every field gets a column, every metric gets a card, and the result is a screen where everything is technically available and nothing is easy to find.

People don't read dashboards. They scan them, looking for the one thing that needs their attention. Good dashboard design is mostly about helping that scan.

Start with the question, not the data

Before drawing anything, write down the three questions someone opens this screen to answer. For an engineer searching for parts, it might be:

  1. Does a part exist that meets my specs?
  2. Is it in stock, and at what price?
  3. How does it compare to the one I'm using now?

Every element on the screen should help answer one of those. If it doesn't, it belongs one click away, not on the first view.

Give the screen one clear hierarchy

A dashboard has three levels, and they should look different:

  • Summary: a handful of key numbers at the top. Large type, very little decoration.
  • Detail: the table or chart where the real work happens. This gets the most space.
  • Controls: filters, date ranges, exports. Quiet, consistent and always in the same place.

When summary cards, charts and filters all use the same weight, the eye has nowhere to land.

Tables are the workhorse

In data-heavy products, the table is usually the most-used component. A few details make a big difference:

  • Right-align numbers and use tabular figures (font-variant-numeric: tabular-nums) so digits line up.
  • Keep row height consistent and let people choose density. Power users often want compact rows.
  • Make status scannable with a colored badge and a label. Never rely on color alone.
  • Freeze the first column on wide tables so people don't lose track of which row they're in.

Filters should show their state

Advanced filtering is where many dashboards get frustrating. Two rules help:

  1. Show active filters as removable chips above the results, so people can always see why the list looks the way it does.
  2. Show result counts next to filter options when you can. "In stock (1,240)" prevents dead ends before they happen.

Progressive disclosure

Not every detail deserves the first screen. Inspection panels that slide in from the side let people dig into one row without losing their place in the list. That beats navigating to a new page and back again.

Want to know when I publish something new?

I send a short email when there's a new article or project, usually a couple of times a month. No spam, and you can unsubscribe whenever you like.