Designing Illustration for Empty States.
--
When we talk about designing a product we tend to think about the conversion, usability, familiarity or user flow. While it’s important to think about all that, as product designer sometimes we feel that there is not much spaces to be creative with the design. We bound by some rules. That’s until I designing an empty states.
Empty states are great opportunity for designer to be more creatives!
Empty States in user interfaces
An Empty state is the moment in which regular content of a page can’t be displayed to users. Example of empty states are first use states, 404s, and error messages. These empty states are part of user journey and a great place to engage, and give user satisfying experience. Good empty states design also prevent user from disappointment or confusion.
The Concept
While designing an Apps and Websites for Santara, I have a chance to be involved in the development of all the illustration across all platform. Most of illustration I made were used in empty states. In designing the empty states our team have 4 things to keep in mind.
- Inform the user
Empty states are great opportunities to interact with the user. Use this chance to inform the states, how to use the feature or explain the error.
- Guide the user
User could stuck on empty states. To avoid that situation we try to always give your users a next step. Putting a relevant link or button to the next step is a clear call for users to retain on the page.
- Entertain the user
Empty states especially the error pages are pain point for user. To ease the pain we make fun illustration and try to entertain user (appropriately).
- Have fun with the illustration
The most important point are we always try to have fun and be creative with the illustration.
Sketching and Concepting Phases
In this phases we try to find the general feel and style of the illustration. We sketching and try a lot of style. Here is some sketch and early illustration concept.
Visualizing and Coloring Phases
After all the ideas were completed and agreed-upon, the sketches were converted into digital illustration. To complete the visual aesthetic we try different colors to find the most suitable color for the apps usability and their brand values.
Final Result
Below you can see the finalized versions of the illustrations for Santara apps and websites.
