Illustration is Key-A New Dimension to UX & UI Design
As designers, are we all only responsible to solve problems and create functional designs?
A user-centric design process focuses more on empathising how a user connects or interacts with a product. It is both a logical and an emotional supplement that enhances your product experience.
“People ignore design that ignores people” -Frank Chimero
The balance of both emotional and functional attributes of a design can be achieved through illustrations.
As a Product Designer, I couldn’t agree more with what Atlassian Design has to say about Illustrations.
THE ROLE OF ILLUSTRATIONS:
1.It makes complex ideas more accessible.
2. It can change the tone and speak directly to users based on the user’s task to be done and the user’s emotional state.
3. Just like the written word, illustrations exist to tell stories and thoughtfully convey ideas.
4. Illustrations are used across marketing touch points to support a cohesive, clear, and a consistent story from start to finish.
Today, we are going to look at a few examples of good User Experience Design supported by illustrations.
- Across mobile and web platforms, it is essential to study the target demographic and the goal of the product (guidelines) to come up with the elements, concepts and design language of the illustrations.
- All components and elements such as colours, shapes, sizes and depth play a major role and need to be given a lot of thought before execution.
- Too many illustrations and graphical elements across a design can higher the risk of cluttered design.
- Airtable has achieved their goal of communicating what their product does through a hero illustration and text that balance each other both visually and contextually on their homepage.
2. Slack (My numero uno)
- In my attempt to speak of the different types of illustrations, the above image is a collage of all the illustration sections of Slack.
- The different types of illustrations are :
- Hero (Hero illustrations are intended to tell the bigger picture or the entire value of a product. Usually balanced with a single heading or subtext)
- Supporting (Slightly simplified versions of the hero illustrations which convey a single feature or concept. Mostly used to support a considerable amount of copy)
- Spot (The most direct representation of an element or action. Mostly small and simple like a composite icon illustration)
- The judgement of the weightage of an illustration in a particular section/ page can change the user’s experience and perception. For example: In a section/page providing an enquiry or a contact form with information, the illustration needs to be downplayed a little or in the most simplest form. It makes sure the user focuses more on the information and not miss out on any important action or detail.
- Slack has achieved their goal of communicating their features and product principles in the most visually interesting way without losing any value.
3. Onboarding and Error State Illustrations
- Sometimes we need to depict an entire flow or a status in one illustration for the user to quickly grasp information.
- Generally made in a set, these illustrations can be fun, creative and packed with a punch.
- Speaking on how to make it creative and instinctive for the user to come back to your product, the approach needs to be well thought.
- For example, an empty state of ‘No internet connection’ or ‘Empty wallet’ can be made fun and motivating for the user to take a positive action.
Illustrations are very impactful! You can let your user find your product interesting, curious and also relish them with a warm and an empathetical experience with your product, they know nothing about!