Designing Engaging Empty States: Reuse Existing UI ContextDesigning Engaging Empty States: Reuse Existing UI Context
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
I was having trouble this week with creating an empty state that actually worked
Something visually interesting, illustrative… without leaving that feeling of a “dead” interface as soon as the user arrives at the product.
The most common approach has always been to use illustrations. And it makes sense, it's what works best.
But how to do that without time, or without someone dedicated to drawing everything? It would even be possible to generate it with AI, but arriving at a consistent line, with personality and aligned with the product… takes time.
So I thought, what if I kept the component itself there… but deactivated? And that's how I arrived at this result. A simple, visual, and contextual empty state.
It avoids that feeling of emptiness and also helps the user understand what will happen in that space when they start using the product. If it will be a table…
Sometimes, the best solution is not to add more elements. It's to reuse the context that already exists in the interface.
Post image
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started