Illustration are the main part of any of the UI project, an illustration can decide the maturity & fundamentals of the product.

Previously i was working/designing a “Symfony” Based Stand Alone product for creating Bookings for eCommerce & non-eCommerce Websites called “Booking Commerce”.

I did face lots of problems where i got to ask my self that “Do i really need an Illustration for this?”

And here are some points i have gathered for my experience till this date:

1. Illustrations for Hero Sections.

Illustrations should speak for itself. wherever you are placing them it should describe the meaning of it & should deliver the exact message which you want to provide to the user.

Here are some of the Illustrations i have made for hero sections :

“Gift on Order” App for Shopify.

this is the illustration i made for our app Gift on Order for shopify eCommerce Platform.

In this app Merchant can provide Gifts to their customers for buying products of a targeted amount.

“Product Auction” App for Shopify.

This Illustration i made for our app Product Auction. In this app merchant can create auction products on your Shopify store.

“Product Flag” App for Shopify.

this illustration i made for our app Product Flag, In this app merchant can add multiple flags or labels on his product image on his store on Shopify.

“Seller Buyer Chat” for eCommerce Marketplaces

this illustration i made for a chatting platform which is compatible for eCommerce marketplaces for handling multiple seller chats in a single widget.

“Booking Commerce” for websites & eCommerce frameworks.

this illustration above i made for a Booking Scheduling platform called “Booking Commerce”.

A meaningful illustration can delivering the exact message for your product or app that might your content can’t do.

 

2. Not Sure? Don’t go with the Illustrations.

Illustrations can provide a meaningful thought but vice versa it can also make customers confuse about “What’s the meaning of this?”or

have the thoughts in their minds about the product immaturity. so,

if you’re not sure with the illustrations, Don’t go with it!

 

3. Illustrations for Zero UI or Empty States.

Empty state illustrations tells the user about which data is missing in this place & guide them to go further and take the action which you have not taken yet.

although there are really few people will consider that you have placed a graphic element to guide them in an app but it does matters when you are building a gigantic product.

It tells about the product maturity & the mindset behind building a product & you have to take care of small things when your are building a big product.

“Down below is an empty state illustration i made for an app for Shopify eCommerce Platform here at Webkul HQ. In this illustration i did try to implement Shopify Polaris design theme.”

4. Illustrations for Error States.

Illustrations also should be provided for error states, a good illustration can prevent the user from getting frustrated in error states situations.

down below is an illustration i made for a 404 Error Situation.

404 Error Page for Booking Commerce

5. Say a big “No!” to fake Stock Images.

Stock images can provide a really fake meaning of any of the product,

“Fake models smiling in a team meeting & giving a thumbs up to you”, hah! that days have gone now!

Either choose a better real time image for your product or go with the illustrations.

That’s the case where illustrations can play a vital role.

6. Sketch your illustrations first.

You should do sketching before you’re making the illustration on the software, it doesn’t mean that you should be a professional sketches,

its about making a kind of storyboarding on a paper so that you can remember that what you are actually making & what it tells your from first look.

7. Types & examples of Illustrations we can implement.

Flat Design Illustrations:

in flat design we don’t use gradients & shadows, here are some examples below:

Marketplace Illustration

Feedback Process for e-Commerce Products

Flat 2.0 Illustrations:

Flat 2.0 is just an another transformed version of flat design & here can use gradients & shadows in flat design elements, like:

Marketplace Onboarding Slide View

Room Illustration for Qloapps

Isometric Illustrations:

In isometric illustrations we design elements in a 3D Geometric Plane, i personally follow this article a lot:

Creating Isometric Illustrations—Made Simple with the Geometric Technique

by @nitish_kumar

Stroke Illustrations:

In this illustration style we use bold strokes in flat illustrations elements, like:

Booking Commerce Sign up Page

So, these are my thoughts on Illustrations that “why & where we should use”.

I might get wrong on some points. I will appreciate if you comment below & correct me if i’m wrong.

At Last i wanna thanks to ❤ Webkul for giving me the opportunity for letting me share my thoughts on the amazing experience i got on here.

 So, that’s it from my side & thank you very much for on the way scrolling to the bottom to read this article 😀

have a great weekend & i’ll see you again with some new topics! 😃