Empty State With Illustration
Two variants — nothing created yet, versus filters excluded everything — because offering "create your first" to a bad filter is the classic bug.
First-run screens, no-results, 404s, permission walls and failures.
Empty states are the first screen a new user sees and the last one anybody designs. The useful ones distinguish the four cases that look identical in a wireframe: nothing created yet, nothing matched your filter, you are not allowed, and something broke. Each needs different words and a different button, which is how these are split.
Two variants — nothing created yet, versus filters excluded everything — because offering "create your first" to a bad filter is the classic bug.
Failed-to-load panel with a visible retry, a copyable error reference and the stack tucked behind a disclosure.
A 404 that helps: a real GET search form that works without JavaScript, likely destinations, and home as the fallback rather than the headline.
Loading placeholders with varied row widths and a sweep that is motion-safe only, falling back to a flat tint under reduced motion.
The state where the page exists and the account is not on the list: names who can grant access, sends the request, and leaks nothing about what is inside.
Leads with what still works — three edits saved on this device — instead of with the failure. The retry backoff counts down in the open, and the three things that genuinely cannot work offline are named rather than discovered.
The empty state for a list emptied by its own filters: every active filter shown as a removable chip ordered by how many results it would restore, with clear-all deliberately second.
Planned downtime with a live countdown, an end time in the reader’s timezone, what still works — and a different sentence once the window overruns rather than a negative timer.
Not found, server error, maintenance, offline and permission walls.
Shimmering placeholders shaped like the content that replaces them.
Multi-step wizards, checklists, tours and welcome screens.
Month grids, availability pickers, booking flows and time slots.
Profile, preferences, team, security and danger zones.
Inboxes, unread badges, grouped feeds and preference panels.