When starting with a new mobile app, we come across a few empty state screens. It is a state where there is no content to be shown as yet, in situations like zero-data state and first-use state. Other times, an error screen can also be considered an empty state screen. Instead of leaving this space literally empty, designers have been using this free space for better user engagement with the use of clever illustrations.
As this collection will show you, zero data state is chock full of potential designers can take advantage of. From encouraging users to give their app a go, to providing short and useful tips on how to proceed further, empty state design is a space for creativity waiting to happen. Some of the designs here are concept designs while others are already in use.
More on mobile design:
- Designing for Mobile Devices [A Guide]
- 20 Beautiful Mobile User Interface For Your Inspiration
- 20 Eye-Catching Mobile Calendar Designs
- Music Apps for Mobile: 50 Beautiful Concept Designs
On-Boarding – Empty states for Friends List, Navigation and Messages section.
Lost & Empty – Cute but sad robots notify a user when the signal is lost or a cart is empty.
Modspot – This empty state design serves as a first step, how-to tutorial.
Workmates – Animals greet you at individual sections with cute hi’s and hello’s.
Mobile Payment Method – "No cash? No problem!" – the perfect tagline for cashless payment.
No Conversations – Life’s a bore without conversations. Take a nap.
Driver app – No orders versus new, incoming order. The app also reminds the drivers to check to see if their availability is set on.
Marvel Projects App – The funny folder looks sad without projects.
Yuhuu Car Rental App – The onboarding screen is great for teaching users how to start renting cars.
Project Fi – What happens when something is no longer active? It needs to recharge with a nap (get it?). The other empty state design features an invitation to move this "party" to a desktop.
Musixmatch – Adorable colored faces interact with music, widgets and spotify alongside helpful instructions.
Google Photos – When nothing is shared here, a soda with two straws is shown to encourage users to start sharing.
Favorites – Empty state design falls back on what users are used to, using the star icon to indicate our favorites, the pencil icon to show questions asked, and the document icon to indicate questions answered.
Azendoo – Feel lost and unconnected, like you are on a deserted island? Follow the advice, keep calm, light a fire, and keep refreshing.
Traveloka – This travel app uses illustrations in their empty states to depict various statuses: a sleeping satellite/antenna shows lost connection, a ladder with no plane indicates no flight available, and an empty bench to show no hotels available.
Sketch – Let’s get something going! Let’s add some sketches with the plus button. Come on!
BitGold -The use of a darkened background to show emptiness, nothing has started yet and a center-stage gold action button seems very fitting for this money app.
Urban Looks – How better to encourage people to start uploading selfies and photos than to show another person doing it? Hence this adorable empty state design.
No Files Found – Well this zero data scenario feels awkward. Even the document file finds this awkward. Follow its instructions: go back and try another keyword.
Sad Folder is Sad – Stop making all these folders sad, start creating new projects.
Trip Planner – If you have no trips planned yet, just know that the night sky will be waiting.
Lighthouse – This zero data state displays an error using a lone lighthouse.
Group Chat – Part of the onboarding process, this design illustrates an active group chat with lots of messages, something like a "what this could be" if you would just start chatting.
Trip Planner – This one features a plane in mid-flight. No elective trips yet? Well, let’s change that, shall we?
Frizzbee – Here’s a clever use of the brand mascot in empty state designs. This is an idea that will surely take off.
Virtual Pizza – The zero data state encourage you to create a virtual pizza to order a real one. A simple yet minimalistic illustration of a pizza used here.
PandaDoc – You can never go wrong by using cute pandas to break bad news.
Seek – No matches yet, but keep looking. Here, take these binoculars.
Travel app – This one is ambitious. It shows a rocket and suitcase for an out-of-this-world travel experience. See the world together.
A360 – It’s clear that this app is focused on some real estate properties.
Invoice app – The two-color illustrations here tells it all, from getting quick access to your data, checking your sales performance, and having all your clients in the palm of your hand.
Whittl – Don’t make this funny face sad, make an appointment. The hair of sad face is twirled similar to the brand logo – a clever touch.
Social app for truck drivers – The "No parking places found" illustration asks you to keep driving while a loss in Internet connection shows a blockade.
My Leads – Adding your first lead is like to launching a rocket into space.
Unroll.me – "Welcome to your tidy inbox!"
Snapchat – It’s a party on a Snapchat screen. You need friends to get great stories.
Workangel – Save all your favorite (hence the hearts) retailers into this folder right here.
My Projects – Excited folder is excited to know what your first prototyping project will be about.
Signature app – This pokes fun at a blank doc and a captured one (smile for the camera).
Kickpush – Adorable renditions of popular movies and iconic scenes. Great use of empty state design by this movie app.