Creating Illustrations for Different States
Creating Illustrations for Different States
This article will discuss the usage of state for illustration requests in UX design. Hopefully, you can understand the complexities from a designer’s perspective as a simple yet memorable reading for future implementation.
When a request comes…
A designer job request sometimes starts like this, “Hey, could you please fill in the illustrations on this page, so it’s not completely blank?” That’s when the “creative mind” explodes. Why? There’s not much that comes inside my head. Sometimes we only have a rough idea to fill that page.
Some of us might have a little extra time to draw or make some initial sketches on paper. Sadly, most of the time, the deadline is quite tight — leaving us to do the work directly on the digital screen. Us, as a designer, does not wait for the inspirations or mood to come to us. We simply get the job done by the deadline.
First thing first, you have to know in what state the requested page is. It will help you to generate illustrations quicker. There are some common states which contain different pieces of information. Let’s break it down.
Breaking down the states in UI
Above is an example of a positive state. It appears when a user succeeds in doing or finishing the task within the application. Thus, the illustration shows a woman giving appreciation with a cheerful expression. If you try to change a simple element like the eyebrows shape, it doesn’t represent the positive state very well. Our users will get confused when they see the illustration, even when the copywriting explains in a positive tone.
Let’s move to the negative state that sometimes represents these edge cases: mobile network error, no search result, etc. Knowing the exact edge case can help you to create the illustrations easier. One thing you should remember is not to create illustrations that worsen the user experience. We have to show users that we can help them during an unpleasant moment. In this case, a designer needs to create illustrations that will calm them down.
Pay attention to the sign we use on the illustrations for an error message of a login attempt on a different device. In this case, we don’t want the user to be worried about their account. Thus, we highly suggest not to use the cross-mark or even display the worried face. Pick something more neutral that will generate a positive emotional response from our user.
The next one is the most frequent case to appear — an empty state. An empty state often occurs when the app is not yet fully developed. Same as the negative state, you want to generate a positive emotional response from the user. Give them more context, so they understand the case better.
The last example is for an empty state that wants to tell about voucher unavailability. In this illustration, we gave a more fun aspect by adding wings to the lost vouchers to generate a positive emotional response from the user.
Key takeouts
Illustration-making for UX design is made and influenced by the current state of the product that’s being developed. There’s no certain recipe or how-to that should be followed, all you need is to focus on the user.
Consequently, it’s a matter of trial and error, and of fine-tuning the internal processes of a designer itself & team until the right fit is found. It’s also important to establish a collaborative environment and a nurturing culture where everyone learns from experience, and mistakes are treated as opportunities. It’s about applying good illustration creation: prototyping, testing, analyzing results, and refining.
