I did face lots of problems where i got to ask my self that \u201cDo i really need an Illustration for this?\u201d<\/p>\n\n\n\n
And here are some points i have gathered for my experience till this date:<\/p>\n\n\n\n
1. Illustrations for Hero Sections.<\/h1>\n\n\n\n
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.<\/p>\n\n\n\n
Here are some of the Illustrations i have made for hero sections\u00a0:<\/p>\n\n\n\n
\u201c<\/strong>Gift on Order<\/strong><\/a>\u201d App for Shopify.<\/strong><\/h4>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/gift-on-order-2.png\")
<\/figure>\n\n\n\nthis is the illustration i made for our app Gift on Order for shopify eCommerce Platform. <\/p>\n\n\n\n
In this app Merchant can provide Gifts to their customers for buying products of a targeted amount.<\/p>\n\n\n\n
\u201cProduct Auction<\/a>\u201d App for Shopify.<\/h4>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/product-auction-1.png\")
<\/figure>\n\n\n\nThis Illustration i made for our app Product Auction. In this app merchant can create auction products on your Shopify store.<\/p>\n\n\n\n
\u201cProduct Flag<\/a>\u201d App for Shopify.<\/h4>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/product-flag-1.png\")
<\/figure>\n\n\n\nthis 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.<\/p>\n\n\n\n
\u201cSeller Buyer Chat<\/a>\u201d for eCommerce Marketplaces<\/h4>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/seller-buyer-chat-1.png\")
<\/figure>\n\n\n\nthis illustration i made for a chatting platform which is compatible for eCommerce marketplaces for handling multiple seller chats in a single widget.<\/p>\n\n\n\n
\u201cBooking Commerce<\/a>\u201d for websites & eCommerce frameworks.<\/h4>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/booking-commerce-1.png\")
<\/figure>\n\n\n\nthis illustration above i made for a Booking Scheduling platform called \u201cBooking Commerce\u201d.<\/p>\n\n\n\n
A meaningful illustration can delivering the exact message for your product or app that might your content can\u2019t do.<\/em><\/p>\n\n\n\n <\/h1>\n\n\n\n2. Not Sure? Don\u2019t go with the Illustrations.<\/h1>\n\n\n\n
Illustrations can provide a meaningful thought but vice versa it can also make customers confuse about \u201cWhat\u2019s the meaning of this?\u201d<\/strong>or<\/p>\n\n\n\n have the thoughts in their minds about the product immaturity. so,<\/p>\n\n\n\n
if you\u2019re not sure with the illustrations, Don\u2019t go with it!<\/i><\/p>\n\n\n\n <\/h1>\n\n\n\n3. Illustrations for Zero UI or Empty States.<\/h1>\n\n\n\n
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. <\/p>\n\n\n\n
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. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\u201cDown below is an empty state illustration i made for an app for Shopify eCommerce Platform here at Webkul HQ<\/a>. In this illustration i did try to implement Shopify Polaris design theme.\u201d<\/p>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/empty-state-illustration.png\")
<\/figure>\n\n\n\n4. Illustrations for Error States.<\/h1>\n\n\n\n
Illustrations also should be provided for error states, a good illustration can prevent the user from getting frustrated in error states situations.<\/p>\n\n\n\n
down below is an illustration i made for a 404 Error Situation.<\/p>\n\n\n\n
404 Error Page for Booking Commerce<\/h5>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Cover.png\")
<\/figure>\n\n\n\n5. Say a big \u201cNo!\u201d to fake Stock Images.<\/h1>\n\n\n\n
Stock images can provide a really fake meaning of any of the product,<\/p>\n\n\n\n
\u201cFake models smiling in a team meeting & giving a thumbs up to you\u201d, hah! that days have gone now!<\/i><\/p>\n\n\n\n
Either choose a better real time image for your product or go with the illustrations.<\/p>\n\n\n\n
That\u2019s the case where illustrations can play a vital role.<\/p>\n\n\n\n
6. Sketch your illustrations first.<\/h1>\n\n\n\n
You should do sketching before you\u2019re making the illustration on the software, it doesn\u2019t mean that you should be a professional sketches,<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
7. Types & examples of Illustrations we can implement.<\/h1>\n\n\n\nFlat Design Illustrations:<\/h4>\n\n\n\n
in flat design we don\u2019t use gradients & shadows, here are some examples below:<\/p>\n\n\n\n
Marketplace Illustration<\/h5>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Marketplace-Illustration.png\")
<\/figure>\n\n\n\nFeedback Process for e-Commerce Products<\/h5>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/1-19.png\")
<\/figure>\n\n\n\nFlat 2.0 Illustrations:<\/h4>\n\n\n\n
Flat 2.0 is just an another transformed version of flat design & here can use gradients & shadows in flat design elements, like:<\/p>\n\n\n\n
Marketplace Onboarding Slide View<\/h5>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Cover-1.png\")
<\/figure>\n\n\n\nRoom Illustration for Qloapps<\/h5>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Cover-2.png\")
<\/figure>\n\n\n\nIsometric Illustrations:<\/h4>\n\n\n\n
In isometric illustrations we design elements in a 3D Geometric Plane, i personally follow this article a lot:<\/p>\n\n\n\n
Creating Isometric<\/span> Illustrations\u2014Made Simple with the Geometric Technique<\/a><\/h6>\n\n\n\nby @nitish_kumar<\/a><\/p>\n\n\n\nStroke Illustrations:<\/h4>\n\n\n\n
In this illustration style we use bold strokes in flat illustrations elements, like:<\/p>\n\n\n\n
Booking Commerce Sign up Page<\/h5>\n\n\n\n![\"image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/Cover-3.png\")
<\/figure>\n\n\n\nSo, these are my thoughts on Illustrations that \u201cwhy & where we should use\u201d.<\/p>\n\n\n\n
I might get wrong on some points. I will appreciate if you comment below & correct me if i\u2019m wrong.<\/p>\n\n\n\n
<\/figure>\n\n\n\nthis is the illustration i made for our app Gift on Order for shopify eCommerce Platform. <\/p>\n\n\n\n
In this app Merchant can provide Gifts to their customers for buying products of a targeted amount.<\/p>\n\n\n\n
\u201cProduct Auction<\/a>\u201d App for Shopify.<\/h4>\n\n\n\n<\/figure>\n\n\n\nThis Illustration i made for our app Product Auction. In this app merchant can create auction products on your Shopify store.<\/p>\n\n\n\n
\u201cProduct Flag<\/a>\u201d App for Shopify.<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis 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.<\/p>\n\n\n\n
\u201cSeller Buyer Chat<\/a>\u201d for eCommerce Marketplaces<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis illustration i made for a chatting platform which is compatible for eCommerce marketplaces for handling multiple seller chats in a single widget.<\/p>\n\n\n\n
\u201cBooking Commerce<\/a>\u201d for websites & eCommerce frameworks.<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis illustration above i made for a Booking Scheduling platform called \u201cBooking Commerce\u201d.<\/p>\n\n\n\n
A meaningful illustration can delivering the exact message for your product or app that might your content can\u2019t do.<\/em><\/p>\n\n\n\n <\/h1>\n\n\n\n2. Not Sure? Don\u2019t go with the Illustrations.<\/h1>\n\n\n\n
Illustrations can provide a meaningful thought but vice versa it can also make customers confuse about \u201cWhat\u2019s the meaning of this?\u201d<\/strong>or<\/p>\n\n\n\n have the thoughts in their minds about the product immaturity. so,<\/p>\n\n\n\n
if you\u2019re not sure with the illustrations, Don\u2019t go with it!<\/i><\/p>\n\n\n\n <\/h1>\n\n\n\n3. Illustrations for Zero UI or Empty States.<\/h1>\n\n\n\n
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. <\/p>\n\n\n\n
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. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\u201cDown below is an empty state illustration i made for an app for Shopify eCommerce Platform here at Webkul HQ<\/a>. In this illustration i did try to implement Shopify Polaris design theme.\u201d<\/p>\n\n\n\n<\/figure>\n\n\n\n4. Illustrations for Error States.<\/h1>\n\n\n\n
Illustrations also should be provided for error states, a good illustration can prevent the user from getting frustrated in error states situations.<\/p>\n\n\n\n
down below is an illustration i made for a 404 Error Situation.<\/p>\n\n\n\n
404 Error Page for Booking Commerce<\/h5>\n\n\n\n<\/figure>\n\n\n\n5. Say a big \u201cNo!\u201d to fake Stock Images.<\/h1>\n\n\n\n
Stock images can provide a really fake meaning of any of the product,<\/p>\n\n\n\n
\u201cFake models smiling in a team meeting & giving a thumbs up to you\u201d, hah! that days have gone now!<\/i><\/p>\n\n\n\n
Either choose a better real time image for your product or go with the illustrations.<\/p>\n\n\n\n
That\u2019s the case where illustrations can play a vital role.<\/p>\n\n\n\n
6. Sketch your illustrations first.<\/h1>\n\n\n\n
You should do sketching before you\u2019re making the illustration on the software, it doesn\u2019t mean that you should be a professional sketches,<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
7. Types & examples of Illustrations we can implement.<\/h1>\n\n\n\nFlat Design Illustrations:<\/h4>\n\n\n\n
in flat design we don\u2019t use gradients & shadows, here are some examples below:<\/p>\n\n\n\n
Marketplace Illustration<\/h5>\n\n\n\n<\/figure>\n\n\n\nFeedback Process for e-Commerce Products<\/h5>\n\n\n\n<\/figure>\n\n\n\nFlat 2.0 Illustrations:<\/h4>\n\n\n\n
Flat 2.0 is just an another transformed version of flat design & here can use gradients & shadows in flat design elements, like:<\/p>\n\n\n\n
Marketplace Onboarding Slide View<\/h5>\n\n\n\n<\/figure>\n\n\n\nRoom Illustration for Qloapps<\/h5>\n\n\n\n<\/figure>\n\n\n\nIsometric Illustrations:<\/h4>\n\n\n\n
In isometric illustrations we design elements in a 3D Geometric Plane, i personally follow this article a lot:<\/p>\n\n\n\n
Creating Isometric<\/span> Illustrations\u2014Made Simple with the Geometric Technique<\/a><\/h6>\n\n\n\nby @nitish_kumar<\/a><\/p>\n\n\n\nStroke Illustrations:<\/h4>\n\n\n\n
In this illustration style we use bold strokes in flat illustrations elements, like:<\/p>\n\n\n\n
Booking Commerce Sign up Page<\/h5>\n\n\n\n<\/figure>\n\n\n\nSo, these are my thoughts on Illustrations that \u201cwhy & where we should use\u201d.<\/p>\n\n\n\n
I might get wrong on some points. I will appreciate if you comment below & correct me if i\u2019m wrong.<\/p>\n\n\n\n
<\/figure>\n\n\n\nThis Illustration i made for our app Product Auction. In this app merchant can create auction products on your Shopify store.<\/p>\n\n\n\n
\u201cProduct Flag<\/a>\u201d App for Shopify.<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis 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.<\/p>\n\n\n\n
\u201cSeller Buyer Chat<\/a>\u201d for eCommerce Marketplaces<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis illustration i made for a chatting platform which is compatible for eCommerce marketplaces for handling multiple seller chats in a single widget.<\/p>\n\n\n\n
\u201cBooking Commerce<\/a>\u201d for websites & eCommerce frameworks.<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis illustration above i made for a Booking Scheduling platform called \u201cBooking Commerce\u201d.<\/p>\n\n\n\n
A meaningful illustration can delivering the exact message for your product or app that might your content can\u2019t do.<\/em><\/p>\n\n\n\n <\/h1>\n\n\n\n2. Not Sure? Don\u2019t go with the Illustrations.<\/h1>\n\n\n\n
Illustrations can provide a meaningful thought but vice versa it can also make customers confuse about \u201cWhat\u2019s the meaning of this?\u201d<\/strong>or<\/p>\n\n\n\n have the thoughts in their minds about the product immaturity. so,<\/p>\n\n\n\n
if you\u2019re not sure with the illustrations, Don\u2019t go with it!<\/i><\/p>\n\n\n\n <\/h1>\n\n\n\n3. Illustrations for Zero UI or Empty States.<\/h1>\n\n\n\n
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. <\/p>\n\n\n\n
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. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\u201cDown below is an empty state illustration i made for an app for Shopify eCommerce Platform here at Webkul HQ<\/a>. In this illustration i did try to implement Shopify Polaris design theme.\u201d<\/p>\n\n\n\n<\/figure>\n\n\n\n4. Illustrations for Error States.<\/h1>\n\n\n\n
Illustrations also should be provided for error states, a good illustration can prevent the user from getting frustrated in error states situations.<\/p>\n\n\n\n
down below is an illustration i made for a 404 Error Situation.<\/p>\n\n\n\n
404 Error Page for Booking Commerce<\/h5>\n\n\n\n<\/figure>\n\n\n\n5. Say a big \u201cNo!\u201d to fake Stock Images.<\/h1>\n\n\n\n
Stock images can provide a really fake meaning of any of the product,<\/p>\n\n\n\n
\u201cFake models smiling in a team meeting & giving a thumbs up to you\u201d, hah! that days have gone now!<\/i><\/p>\n\n\n\n
Either choose a better real time image for your product or go with the illustrations.<\/p>\n\n\n\n
That\u2019s the case where illustrations can play a vital role.<\/p>\n\n\n\n
6. Sketch your illustrations first.<\/h1>\n\n\n\n
You should do sketching before you\u2019re making the illustration on the software, it doesn\u2019t mean that you should be a professional sketches,<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
7. Types & examples of Illustrations we can implement.<\/h1>\n\n\n\nFlat Design Illustrations:<\/h4>\n\n\n\n
in flat design we don\u2019t use gradients & shadows, here are some examples below:<\/p>\n\n\n\n
Marketplace Illustration<\/h5>\n\n\n\n<\/figure>\n\n\n\nFeedback Process for e-Commerce Products<\/h5>\n\n\n\n<\/figure>\n\n\n\nFlat 2.0 Illustrations:<\/h4>\n\n\n\n
Flat 2.0 is just an another transformed version of flat design & here can use gradients & shadows in flat design elements, like:<\/p>\n\n\n\n
Marketplace Onboarding Slide View<\/h5>\n\n\n\n<\/figure>\n\n\n\nRoom Illustration for Qloapps<\/h5>\n\n\n\n<\/figure>\n\n\n\nIsometric Illustrations:<\/h4>\n\n\n\n
In isometric illustrations we design elements in a 3D Geometric Plane, i personally follow this article a lot:<\/p>\n\n\n\n
Creating Isometric<\/span> Illustrations\u2014Made Simple with the Geometric Technique<\/a><\/h6>\n\n\n\nby @nitish_kumar<\/a><\/p>\n\n\n\nStroke Illustrations:<\/h4>\n\n\n\n
In this illustration style we use bold strokes in flat illustrations elements, like:<\/p>\n\n\n\n
Booking Commerce Sign up Page<\/h5>\n\n\n\n<\/figure>\n\n\n\nSo, these are my thoughts on Illustrations that \u201cwhy & where we should use\u201d.<\/p>\n\n\n\n
I might get wrong on some points. I will appreciate if you comment below & correct me if i\u2019m wrong.<\/p>\n\n\n\n
<\/figure>\n\n\n\nthis 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.<\/p>\n\n\n\n
\u201cSeller Buyer Chat<\/a>\u201d for eCommerce Marketplaces<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis illustration i made for a chatting platform which is compatible for eCommerce marketplaces for handling multiple seller chats in a single widget.<\/p>\n\n\n\n
\u201cBooking Commerce<\/a>\u201d for websites & eCommerce frameworks.<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis illustration above i made for a Booking Scheduling platform called \u201cBooking Commerce\u201d.<\/p>\n\n\n\n
A meaningful illustration can delivering the exact message for your product or app that might your content can\u2019t do.<\/em><\/p>\n\n\n\n <\/h1>\n\n\n\n2. Not Sure? Don\u2019t go with the Illustrations.<\/h1>\n\n\n\n
Illustrations can provide a meaningful thought but vice versa it can also make customers confuse about \u201cWhat\u2019s the meaning of this?\u201d<\/strong>or<\/p>\n\n\n\n have the thoughts in their minds about the product immaturity. so,<\/p>\n\n\n\n
if you\u2019re not sure with the illustrations, Don\u2019t go with it!<\/i><\/p>\n\n\n\n <\/h1>\n\n\n\n3. Illustrations for Zero UI or Empty States.<\/h1>\n\n\n\n
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. <\/p>\n\n\n\n
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. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\u201cDown below is an empty state illustration i made for an app for Shopify eCommerce Platform here at Webkul HQ<\/a>. In this illustration i did try to implement Shopify Polaris design theme.\u201d<\/p>\n\n\n\n<\/figure>\n\n\n\n4. Illustrations for Error States.<\/h1>\n\n\n\n
Illustrations also should be provided for error states, a good illustration can prevent the user from getting frustrated in error states situations.<\/p>\n\n\n\n
down below is an illustration i made for a 404 Error Situation.<\/p>\n\n\n\n
404 Error Page for Booking Commerce<\/h5>\n\n\n\n<\/figure>\n\n\n\n5. Say a big \u201cNo!\u201d to fake Stock Images.<\/h1>\n\n\n\n
Stock images can provide a really fake meaning of any of the product,<\/p>\n\n\n\n
\u201cFake models smiling in a team meeting & giving a thumbs up to you\u201d, hah! that days have gone now!<\/i><\/p>\n\n\n\n
Either choose a better real time image for your product or go with the illustrations.<\/p>\n\n\n\n
That\u2019s the case where illustrations can play a vital role.<\/p>\n\n\n\n
6. Sketch your illustrations first.<\/h1>\n\n\n\n
You should do sketching before you\u2019re making the illustration on the software, it doesn\u2019t mean that you should be a professional sketches,<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
7. Types & examples of Illustrations we can implement.<\/h1>\n\n\n\nFlat Design Illustrations:<\/h4>\n\n\n\n
in flat design we don\u2019t use gradients & shadows, here are some examples below:<\/p>\n\n\n\n
Marketplace Illustration<\/h5>\n\n\n\n<\/figure>\n\n\n\nFeedback Process for e-Commerce Products<\/h5>\n\n\n\n<\/figure>\n\n\n\nFlat 2.0 Illustrations:<\/h4>\n\n\n\n
Flat 2.0 is just an another transformed version of flat design & here can use gradients & shadows in flat design elements, like:<\/p>\n\n\n\n
Marketplace Onboarding Slide View<\/h5>\n\n\n\n<\/figure>\n\n\n\nRoom Illustration for Qloapps<\/h5>\n\n\n\n<\/figure>\n\n\n\nIsometric Illustrations:<\/h4>\n\n\n\n
In isometric illustrations we design elements in a 3D Geometric Plane, i personally follow this article a lot:<\/p>\n\n\n\n
Creating Isometric<\/span> Illustrations\u2014Made Simple with the Geometric Technique<\/a><\/h6>\n\n\n\nby @nitish_kumar<\/a><\/p>\n\n\n\nStroke Illustrations:<\/h4>\n\n\n\n
In this illustration style we use bold strokes in flat illustrations elements, like:<\/p>\n\n\n\n
Booking Commerce Sign up Page<\/h5>\n\n\n\n<\/figure>\n\n\n\nSo, these are my thoughts on Illustrations that \u201cwhy & where we should use\u201d.<\/p>\n\n\n\n
I might get wrong on some points. I will appreciate if you comment below & correct me if i\u2019m wrong.<\/p>\n\n\n\n
<\/figure>\n\n\n\nthis illustration i made for a chatting platform which is compatible for eCommerce marketplaces for handling multiple seller chats in a single widget.<\/p>\n\n\n\n
\u201cBooking Commerce<\/a>\u201d for websites & eCommerce frameworks.<\/h4>\n\n\n\n<\/figure>\n\n\n\nthis illustration above i made for a Booking Scheduling platform called \u201cBooking Commerce\u201d.<\/p>\n\n\n\n
A meaningful illustration can delivering the exact message for your product or app that might your content can\u2019t do.<\/em><\/p>\n\n\n\n <\/h1>\n\n\n\n2. Not Sure? Don\u2019t go with the Illustrations.<\/h1>\n\n\n\n
Illustrations can provide a meaningful thought but vice versa it can also make customers confuse about \u201cWhat\u2019s the meaning of this?\u201d<\/strong>or<\/p>\n\n\n\n have the thoughts in their minds about the product immaturity. so,<\/p>\n\n\n\n
if you\u2019re not sure with the illustrations, Don\u2019t go with it!<\/i><\/p>\n\n\n\n <\/h1>\n\n\n\n3. Illustrations for Zero UI or Empty States.<\/h1>\n\n\n\n
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. <\/p>\n\n\n\n
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. <\/p>\n\n\n\n
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.<\/p>\n\n\n\n
\u201cDown below is an empty state illustration i made for an app for Shopify eCommerce Platform here at Webkul HQ<\/a>. In this illustration i did try to implement Shopify Polaris design theme.\u201d<\/p>\n\n\n\n<\/figure>\n\n\n\n4. Illustrations for Error States.<\/h1>\n\n\n\n
Illustrations also should be provided for error states, a good illustration can prevent the user from getting frustrated in error states situations.<\/p>\n\n\n\n
down below is an illustration i made for a 404 Error Situation.<\/p>\n\n\n\n
404 Error Page for Booking Commerce<\/h5>\n\n\n\n<\/figure>\n\n\n\n5. Say a big \u201cNo!\u201d to fake Stock Images.<\/h1>\n\n\n\n
Stock images can provide a really fake meaning of any of the product,<\/p>\n\n\n\n
\u201cFake models smiling in a team meeting & giving a thumbs up to you\u201d, hah! that days have gone now!<\/i><\/p>\n\n\n\n
Either choose a better real time image for your product or go with the illustrations.<\/p>\n\n\n\n
That\u2019s the case where illustrations can play a vital role.<\/p>\n\n\n\n
6. Sketch your illustrations first.<\/h1>\n\n\n\n
You should do sketching before you\u2019re making the illustration on the software, it doesn\u2019t mean that you should be a professional sketches,<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
7. Types & examples of Illustrations we can implement.<\/h1>\n\n\n\nFlat Design Illustrations:<\/h4>\n\n\n\n
in flat design we don\u2019t use gradients & shadows, here are some examples below:<\/p>\n\n\n\n
Marketplace Illustration<\/h5>\n\n\n\n<\/figure>\n\n\n\nFeedback Process for e-Commerce Products<\/h5>\n\n\n\n<\/figure>\n\n\n\nFlat 2.0 Illustrations:<\/h4>\n\n\n\n
Flat 2.0 is just an another transformed version of flat design & here can use gradients & shadows in flat design elements, like:<\/p>\n\n\n\n
Marketplace Onboarding Slide View<\/h5>\n\n\n\n<\/figure>\n\n\n\nRoom Illustration for Qloapps<\/h5>\n\n\n\n<\/figure>\n\n\n\nIsometric Illustrations:<\/h4>\n\n\n\n
In isometric illustrations we design elements in a 3D Geometric Plane, i personally follow this article a lot:<\/p>\n\n\n\n
Creating Isometric<\/span> Illustrations\u2014Made Simple with the Geometric Technique<\/a><\/h6>\n\n\n\nby @nitish_kumar<\/a><\/p>\n\n\n\nStroke Illustrations:<\/h4>\n\n\n\n
In this illustration style we use bold strokes in flat illustrations elements, like:<\/p>\n\n\n\n
Booking Commerce Sign up Page<\/h5>\n\n\n\n<\/figure>\n\n\n\nSo, these are my thoughts on Illustrations that \u201cwhy & where we should use\u201d.<\/p>\n\n\n\n
I might get wrong on some points. I will appreciate if you comment below & correct me if i\u2019m wrong.<\/p>\n\n\n\n
<\/figure>\n\n\n\nthis illustration above i made for a Booking Scheduling platform called \u201cBooking Commerce\u201d.<\/p>\n\n\n\n
A meaningful illustration can delivering the exact message for your product or app that might your content can\u2019t do.<\/em><\/p>\n\n\n\n Illustrations can provide a meaningful thought but vice versa it can also make customers confuse about \u201cWhat\u2019s the meaning of this?\u201d<\/strong>or<\/p>\n\n\n\n have the thoughts in their minds about the product immaturity. so,<\/p>\n\n\n\n if you\u2019re not sure with the illustrations, Don\u2019t go with it!<\/i><\/p>\n\n\n\n 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. <\/p>\n\n\n\n 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. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n \u201cDown below is an empty state illustration i made for an app for Shopify eCommerce Platform here at Webkul HQ<\/a>. In this illustration i did try to implement Shopify Polaris design theme.\u201d<\/p>\n\n\n\n Illustrations also should be provided for error states, a good illustration can prevent the user from getting frustrated in error states situations.<\/p>\n\n\n\n down below is an illustration i made for a 404 Error Situation.<\/p>\n\n\n\n Stock images can provide a really fake meaning of any of the product,<\/p>\n\n\n\n \u201cFake models smiling in a team meeting & giving a thumbs up to you\u201d, hah! that days have gone now!<\/i><\/p>\n\n\n\n Either choose a better real time image for your product or go with the illustrations.<\/p>\n\n\n\n That\u2019s the case where illustrations can play a vital role.<\/p>\n\n\n\n You should do sketching before you\u2019re making the illustration on the software, it doesn\u2019t mean that you should be a professional sketches,<\/p>\n\n\n\n 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.<\/p>\n\n\n\n in flat design we don\u2019t use gradients & shadows, here are some examples below:<\/p>\n\n\n\n Flat 2.0 is just an another transformed version of flat design & here can use gradients & shadows in flat design elements, like:<\/p>\n\n\n\n In isometric illustrations we design elements in a 3D Geometric Plane, i personally follow this article a lot:<\/p>\n\n\n\n by @nitish_kumar<\/a><\/p>\n\n\n\n In this illustration style we use bold strokes in flat illustrations elements, like:<\/p>\n\n\n\n So, these are my thoughts on Illustrations that \u201cwhy & where we should use\u201d.<\/p>\n\n\n\n I might get wrong on some points. I will appreciate if you comment below & correct me if i\u2019m wrong.<\/p>\n\n\n\n <\/h1>\n\n\n\n
2. Not Sure? Don\u2019t go with the Illustrations.<\/h1>\n\n\n\n
<\/h1>\n\n\n\n
3. Illustrations for Zero UI or Empty States.<\/h1>\n\n\n\n
<\/figure>\n\n\n\n4. Illustrations for Error States.<\/h1>\n\n\n\n
404 Error Page for Booking Commerce<\/h5>\n\n\n\n
<\/figure>\n\n\n\n5. Say a big \u201cNo!\u201d to fake Stock Images.<\/h1>\n\n\n\n
6. Sketch your illustrations first.<\/h1>\n\n\n\n
7. Types & examples of Illustrations we can implement.<\/h1>\n\n\n\n
Flat Design Illustrations:<\/h4>\n\n\n\n
Marketplace Illustration<\/h5>\n\n\n\n
<\/figure>\n\n\n\nFeedback Process for e-Commerce Products<\/h5>\n\n\n\n
<\/figure>\n\n\n\nFlat 2.0 Illustrations:<\/h4>\n\n\n\n
Marketplace Onboarding Slide View<\/h5>\n\n\n\n
<\/figure>\n\n\n\nRoom Illustration for Qloapps<\/h5>\n\n\n\n
<\/figure>\n\n\n\nIsometric Illustrations:<\/h4>\n\n\n\n
Creating Isometric<\/span> Illustrations\u2014Made Simple with the Geometric Technique<\/a><\/h6>\n\n\n\n
Stroke Illustrations:<\/h4>\n\n\n\n
Booking Commerce Sign up Page<\/h5>\n\n\n\n
<\/figure>\n\n\n\n