Empty state design is the practice of designing screens that appear when there is no content to display yet. A great empty state explains the situation, shows the value of filling the space, and provides a clear next step. In 2026, the best empty states combine illustration, copy, and a primary CTA to turn a blank canvas into the first moment of engagement.
What Is an Empty State?
An empty state is any screen, panel, or container that has nothing in it yet. It appears the first time a user opens an app, when search returns no results, when a list is filtered down to zero items, or when something fails to load. Empty states are often called the most under-designed part of any product.
The default treatment is a blank space with a generic line like “No results found.” That is a wasted moment. Every empty state is a chance to teach the user, motivate action, or maintain emotional connection to the product.
Types of Empty States
Not all empty states are the same. The right design depends on which type you are dealing with.
First-Use Empty States
This is the empty state a brand-new user sees the first time they open the product. There is no data yet because they have not created any. The goal is to onboard. Show what the space will look like once filled, explain the first action, and remove all friction from completing it.
User-Cleared Empty States
The user has emptied the space themselves by deleting items, clearing a queue, or archiving everything. The goal here is positive reinforcement. “All caught up” or “Inbox zero” makes the moment feel like an accomplishment rather than a failure.
No-Results Empty States
The user searched or filtered, and nothing matched. The goal is recovery. Suggest related terms, offer to clear filters, or expand the search scope. Never leave the user at a dead end.
Error Empty States
The content failed to load due to a network or server error. The goal is honesty. Tell the user what went wrong in plain language and offer a retry button. Do not pretend everything is fine.
Permission-Locked Empty States
The user is viewing a space they do not yet have access to. The goal is to explain the gate, not to scold. Tell the user what is in the space and how to request access without making them feel like they did something wrong.
Empty State Design Principles
Strong empty states share a small set of design principles, regardless of type.
Always Provide a Next Step
The single biggest mistake in empty state design is leaving the user stuck. Every empty state should include a CTA: create your first project, invite a teammate, try a different search, retry the connection. The CTA should be obvious, large, and aligned with the user’s goal.
Match the Visual Tone of the Product
Empty states are a high-personality surface. A playful illustration in an otherwise corporate interface feels jarring. Make sure the visuals fit the rest of your design system and brand.
Keep Copy Short and Action-Oriented
One or two sentences max. Lead with the action, not the state. “Start your first project” beats “You have no projects yet, click below to create one.”
Use Illustration Sparingly
A small, custom illustration adds warmth. A massive hero illustration that dominates the screen pushes the CTA below the fold and slows the user down. Aim for 200 to 300 pixels max on desktop.
First-Use Empty States: The Most Important Type
The first empty state a user sees often determines whether they stick around. It is the moment the product feels useful or hollow.
Great first-use empty states do three things at once. They preview the value: show what the screen will look like once the user adds content. They reduce friction: include the primary action as a prominent button. They build trust: explain in one sentence what the user is about to do.
For example, in a project management app, a first-use empty state on the tasks page could show three dummy task cards with placeholder text, a banner explaining what tasks are, and a single “Create your first task” button. The dummy cards preview the value. The banner builds trust. The button removes friction. For more on guiding new users, see our website conversion rate guide.
Writing Copy for Empty States
Copy is half the empty state. The visuals set the tone, but the words tell the user what to do. Treat empty state copy like microcopy on a CTA: every word earns its place.
- Lead with a verb in the heading. “Create your first dashboard” pulls the eye toward the action. “You have no dashboards” stalls.
- Reserve one sentence for context. Explain what the user will get out of taking the next step. Skip the explanation if the heading already says it.
- Match brand voice but stay clear. Cleverness is welcome on user-cleared states. On first-use and error states, clarity beats wit every time.
- Avoid the word “empty.” Naming the blank moment reinforces it. Use forward-looking language: “Ready to start,” “Nothing scheduled yet.”
- Localize carefully. Copy that fits in English may overflow in German or Japanese. Reserve enough vertical space for a 30 percent length increase.
Accessibility for Empty States
Empty states have a small set of accessibility requirements that are easy to meet and easy to miss.
- Announce the state to screen readers. Use a role of “status” or aria-live=”polite” on the container so users hear the message after the list updates. Without it, the screen reader announces nothing and the user thinks the page froze.
- Decorative illustrations should be hidden. Add alt=”” or aria-hidden=”true” to illustrations that do not carry meaning. If the illustration is the only thing conveying meaning, give it real alt text.
- Focus the CTA on first-use states. When a user lands on a first-use empty state, set keyboard focus to the primary action so they can press Enter without tabbing.
- Keep color contrast high. Illustrations and faded copy often dip below the 4.5:1 contrast ratio. Test the meaningful text against the background, not the illustration.
- Provide multiple paths. A single “Create” button is fine on first-use, but no-results states benefit from secondary options like “Clear filters” so keyboard and assistive users have a quick recovery path.
Empty State Best Practices
- Show the value before asking for action. Preview what the populated screen will look like with sample data or a screenshot.
- Lead with the CTA. Make the next step the most visually prominent element on the screen.
- Avoid generic stock illustrations. Custom illustrations or simple shapes from your design system always feel more polished.
- Personalize when possible. Use the user’s name or context: “Welcome, Alex. Create your first dashboard.”
- Test on real data. Empty states only happen briefly. Make sure they are reachable in QA so designers and PMs see them.
- Plan for partial empty states. A list with one item is almost empty. A dashboard with one chart but four empty panels needs care too.
Examples From Real Products
The teams that take empty states seriously turn them into product moments.
- Dropbox Paper: A new doc opens with a friendly tip, a Slack-like cursor inviting the first paragraph, and quick formatting hints. The user starts writing within seconds.
- Slack: Empty channels show a custom illustration plus suggested messages to get the conversation going. Users do not have to guess what to say first.
- Linear: Empty boards show a placeholder workflow with three sample issues, teaching the user the system through example before they create anything.
- Mailchimp: An empty audience list shows a step-by-step onboarding card with three big buttons for the most common next steps.
- Notion: The empty document state has a slash menu primed and a “Press / for commands” hint above the caret, doubling as both empty state and product tutorial.
Common Empty State Mistakes
The same mistakes show up across products. Avoid them and your empty states will stand out.
Just Showing “No Data”
Two words and a blank screen. The user has no idea what to do. This is the most common and most expensive mistake because new users churn here.
Overloading With Information
The opposite extreme: a giant onboarding tour, a tutorial video, and three CTAs all on the empty state. The user gets overwhelmed and leaves.
No Clear Action
Lots of explanation, no button. The user reads the message and asks, “Now what?” Always include a button.
Treating All Empty States the Same
A no-results state needs different copy than a first-use state. Reusing a generic template across all four types feels lazy.
Ignoring Mobile
Empty state illustrations that look great on desktop often break on mobile. Always test on a real phone.
Forgetting the Loading-to-Empty Transition
If a list loads and immediately shows empty, users assume something failed. Add a beat between the loading state ending and the empty state appearing, so the transition reads as intentional.
Tools and Resources
You do not need a custom illustrator for every empty state. Several resources speed up the process.
- unDraw: Free, customizable SVG illustrations in your brand color.
- Figma: Build empty state components as part of your design system so they stay consistent.
- Storybook: Document empty states alongside populated states so engineering does not forget to build them.
- Framer: Native variant support makes it easy to design and prototype empty states inline with the populated version.
If you want a partner to design polished empty states that convert, work with our team at Framer Websites.
Frequently Asked Questions
What is an empty state?
An empty state is a screen or component that appears when there is no content to display, such as before a user adds data, after they delete everything, or when a search returns no results.
Why are empty states important?
Empty states are often the first thing new users see. They determine whether the user understands the product, takes the next step, and stays. Poorly designed empty states cause churn.
Should every empty state have an illustration?
Not necessarily. An illustration adds warmth but is not required. A clear message and a strong CTA are the essentials. Add illustration only when it fits the brand and does not push the CTA below the fold.
What is the difference between an empty state and a loading state?
An empty state is when there is no content. A loading state is when content is being fetched. Loading states are temporary and usually show a spinner or skeleton, while empty states are persistent until the user takes action.
How do I design a no-results empty state?
Acknowledge the search returned nothing, suggest related terms or filters to clear, and offer a way to start a new search. Never leave the user at a dead end with no path forward.