UI Patterns: Empty States, Paywalls, Onboarding

No projects yet

Create your first project to get started.

Empty state

The UI shown when a list, section, or screen has no items to display.

Tab cycles focus

Focus ring

The visible outline drawn around the element that currently has keyboard focus.

Tab stays inside the dialog

Focus trap

Keeping keyboard focus inside a specific region (typically a modal dialog) until that region is dismissed.

Email

Inline validation

Form-field feedback that appears as the user types, rather than waiting until they submit.

Welcome to Flux

A faster way to track what your team is shipping.

Connect your tools

Pull data from GitHub, Linear, and Slack in one click.

You're all set

Your team's first dashboard is ready to view.

Onboarding flow

The guided sequence of screens that walks a user through first use of a product.

Nael

2h ago

Spent the morning rewriting form validation. Inline errors are doing a lot of heavy lifting here.

Optimistic UI

A pattern where the UI shows the result of an action immediately, before the server has confirmed it.

The case for boring software

By Alex Morgan · 6 min read

Most production systems don't break because of clever code. They break because clever code accumulates without anyone noticing. The cure isn't more rigor — it's choosing the boring path more often.

When you reach for an exciting new library, ask: is this solving a problem I have today, or one I imagine I'll have next quarter? The boring answer is usually the right answer.

Boring software is software you understand. Software you can debug at 2am. Software that doesn't surprise the next engineer.

Keep reading with a free account

Already a member? Sign in.

Paywall

A UI that blocks access to content or features until the user pays or subscribes.

Shimmer

An animated gradient that sweeps across a skeleton placeholder to signal that content is loading.

Sarah Chen

2 min read

Designing for clarity over cleverness

A short note on resisting the temptation to over-engineer interface surface area when the job is to help people get something done.

Skeleton screen

A placeholder UI of gray shapes shown while real content loads.

Tab reveals the skip link first

Skip link

A link, usually hidden until focused, that lets keyboard and screen reader users jump past repeated navigation to the main content.

First time here

Welcome to your dashboard

Connect your first data source to see your team's activity here.

Zero state

The screen shown when a user opens a feature for the first time, before they've created any data.