Empty States Design for Website Pages
Empty state is what user sees when no data yet, list empty, search found nothing, or error occurred. Most projects add this design last moment and it shows: blank white screen or single "Nothing found" line — missed opportunity to guide user.
Types of Empty States
Not all empty states same. Context matters:
First-run empty state — user just registered, no data yet. Task: explain section value and provide first step. Example, in "My projects" section — illustration + "Create first project" + create button.
User-generated empty state — user deleted everything or cleared list. Different tone: shorter, no explanations, just call to action.
Search/filter empty state — query returned no results. Confirm we understood query, suggest changing filters or viewing other.
Error empty state — data didn't load due to error. Need "Retry" button and explanation of reason if possible.
Component Structure
Typical empty state vertically centered block in container:
- Icon or illustration (48–120px depending on context)
- Headline: 4–8 words, specific to situation
- Description: 1–2 sentences, what to do
- CTA: button or link, concrete action
For tables and lists empty state fits in data area — not fullscreen but occupying rows space.
Illustrations and Icons
For first-run states illustration works better than icon: creates context and reduces anxiety "why is this empty". For error and search — icon sufficient.
If design system already has illustration set — empty states built from them. If not — develop minimal set of 4–6 illustrations: "no data", "no results", "no access", "load error", "task completed" (success empty state when everything processed).
Illustrations should be neutral: no specific people (gender, nationality), vector style matching overall site style.
Example from Practice
For B2B dashboard with "Reports" section empty state designed in three variants:
- First entry: chart illustration + "Your reports will be here" + "Create report" button
- After filtering with no results: filter icon + "No reports for selected period" + "Change filters"
- Load error: exclamation mark icon + "Failed to load data" + "Retry" button
Such division reduced support questions "why is section empty" by 30% compared to single "No data" state.
Timeline
Design set of empty states (6–10 states for one product) — 2–4 days: inventory all empty states in project, develop component and variants, create illustrations or adapt existing.