Illustration is Key-A New Dimension to UX & UI Design

Original: Onboarding by MuziYing
  1. 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.
  2. 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.
  3. Too many illustrations and graphical elements across a design can higher the risk of cluttered design.
  4. 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.
  1. In my attempt to speak of the different types of illustrations, the above image is a collage of all the illustration sections of Slack.
  2. 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)
  3. 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.
  4. Slack has achieved their goal of communicating their features and product principles in the most visually interesting way without losing any value.
  1. Sometimes we need to depict an entire flow or a status in one illustration for the user to quickly grasp information.
  2. Generally made in a set, these illustrations can be fun, creative and packed with a punch.
  3. 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.
  4. 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.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A contactless digital metro card?

UAG Plasma Series MacBook Pro 4th Generation Case REVIEW | MacSources

10% is the product, 90% is the business and internal processes

is design dead? / 12–17.2021

What we have realized about digital gaming’s local weather affect — a abstract

Tackling the food system — design, community, and agriculture

What do you do when your data tell you nothing?

Diagnosing a Customer’s Problem

Diagnosing a Customer’s Problem — abstract illustration

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ananya Sankranthi

Ananya Sankranthi

More from Medium

Theoretical base on coloristic for UI/UX designer

Mandatory and Optional Component, What the h*ll is that?

The Importance of Style Guides & Pattern Libraries

Sparking Engagement: Redesigning AdvocacyDenver

A brightly lit photo of an adult holding an infant’s hand with their pointer finger.