Empty states get designed last, if they get designed at all. A screen with zero data, zero results, or a first-run state before the user has done anything usually inherits whatever the developer typed as a placeholder, and it shows. These seven resources make it easy to do better without hiring a full-time illustrator, and none of them require a paid subscription to get real value out of.
Empty states matter more than their small footprint in the product suggests. They're often the very first screen a new user sees after completing onboarding, before they've added any of their own content, which means a generic or broken-feeling empty state can undercut an otherwise well-designed onboarding flow at the last step. Getting this one screen right pays off disproportionately relative to the effort it takes.
1. Mobbin: A Real-World Pattern Library
Mobbin catalogs actual screens from shipped apps, organized by flow and pattern, including empty states, onboarding, and permission moments. Instead of guessing how a category leader handles a zero-results search screen, you can look at dozens of real examples side by side and see what the pattern actually looks like in production, not in a mockup.
This matters especially for empty states because the good ones are subtle. A screenshot in a design article rarely captures the microcopy, spacing, and illustration choices that make a real empty state feel intentional rather than apologetic. Browsing real shipped screens closes that gap fast.
2. Nielsen Norman Group's Usability Research
Nielsen Norman Group publishes free research on how users actually respond to empty and error states, backed by usability testing rather than aesthetic opinion. Their guidance on writing helpful, action-oriented copy for zero-data screens is directly applicable whether you're designing a search-with-no-results state or a brand new user's dashboard before they've added anything.
The research angle is what separates this resource from a pure inspiration gallery. It tells you why certain phrasing or layout choices measurably reduce confusion and abandonment, which is more useful than a collection of pretty screenshots when you're trying to justify a design decision to a product manager.
3. Material Design's Empty State Guidance
Google's Material Design system includes explicit component and layout guidance for empty states as a first-class pattern, not an afterthought. Even teams not building on Material components benefit from reading how the system thinks about the anatomy of a good empty state: a clear illustration or icon, a short explanation, and a single obvious next action.
The emphasis on exactly one clear call to action is worth internalizing regardless of your design system. Empty states that offer three competing buttons dilute the one action that actually moves the user forward, usually "add your first item" or equivalent.
4. Apple's Human Interface Guidelines
Apple's developer documentation covers empty and loading states as part of its broader interface guidance, with a consistent emphasis on treating a zero-data screen as an opportunity to explain the feature rather than a dead end. The framing they push toward, explaining what will appear here once the user takes an action, applies well beyond iOS.
Reading platform guidelines even when you're building for both iOS and Android surfaces conventions users already expect from other apps on the platform, which reduces the learning curve for your specific screen.
5. LottieFiles for Lightweight Empty State Animation
A static illustration is fine, but a small, lightweight animation can make an empty state feel alive rather than broken, especially on a first-run screen. LottieFiles hosts a large library of free, small-file-size animations built on the open Lottie format, which renders natively on both iOS and Android without the overhead of a video file.
The key constraint worth respecting: keep any empty-state animation short, subtle, and skippable. An animation that loops aggressively or blocks the layout from loading defeats the purpose of making the screen feel lighter, not heavier.
6. Figma's Community Files for Empty State Patterns
Figma hosts a large ecosystem of free, community-published design files, many of which are built specifically around common mobile UI patterns including empty states, onboarding carousels, and error screens. Searching the community library for "empty state" turns up dozens of ready-made layouts you can duplicate and adapt rather than building illustration and copy layout decisions from a blank canvas.
The value here isn't copying a specific file wholesale. It's seeing how other designers have solved the same layout problem, illustration placement, headline length, button prominence, across a wide enough sample that patterns start to emerge, which is a faster way to internalize good defaults than reading a single style guide.
7. Android's Empty State Design Guidance
Beyond the general Material Design system, Android's developer documentation includes specific guidance on empty view handling within RecyclerViews and list-based screens, covering both the visual pattern and the underlying implementation approach for showing and hiding empty state views correctly as data loads. This is useful specifically because empty states often have a technical implementation trap alongside the design one: showing an empty state briefly during a normal loading flicker, before real data arrives, creates a worse experience than no empty state at all.
Getting the loading-versus-genuinely-empty distinction right at the implementation level is just as important as getting the illustration and copy right, and this is one of the few resources that addresses both halves of the problem together.
How These Resources Fit Together in Practice
None of these seven resources are meant to be used in isolation. A typical workflow we'd recommend: start with Mobbin to see how real, shipped apps in your category handle the specific empty state you're designing, cross-reference the Material Design or Apple guidance for the platform-level conventions users already expect, pull research from Nielsen Norman Group when you need to justify a specific copy or layout decision to stakeholders, and use Figma community files or LottieFiles when you need an actual visual asset rather than just guidance.
Treating these as a toolkit rather than picking just one tends to produce a better result than any single resource alone, since each covers a different part of the problem: real-world precedent, platform convention, research justification, and production-ready assets. Teams that skip straight to building custom illustrations from scratch often end up re-solving layout and copy problems that the research and pattern-library resources above have already worked out.
Why Empty States Deserve the Same Rigor as Permission Prompts
Empty states and permission requests get dismissed for similar reasons: users encounter a screen that doesn't explain itself and assume the worst. The same discipline that goes into timing a permission prompt and explaining it clearly before the system dialog fires applies directly to a zero-data screen. Both are moments where a user is deciding whether to trust the app enough to keep going.
For a deeper look at getting that trust-building moment right at the permission-request level specifically, this guide on designing permission requests users actually grant walks through timing, framing, and denial recovery in detail. Teams rebuilding these secondary states as part of a larger product design pass often lean on specialists like 137Foundry's web development team, who treat empty states, onboarding, and permission flows as one connected system rather than separate tickets.
None of these resources require a full redesign sprint to start using. Pick the one or two empty states in your own app that see the most new-user traffic, a search-with-no-results screen or a first-run dashboard are usually the highest-impact candidates, and start there rather than trying to rebuild every zero-data screen across the product at once. Small, targeted improvements to the highest-traffic empty states tend to move user perception more than a comprehensive pass applied unevenly across screens nobody actually lands on.
Top comments (0)