My thought process for Illustration
Illustration for Web UI
In order to convey the value proposition to the customers, today’s websites have adopted the art of displaying it via illustrations. It feels more realistic and provides an emotional cue, which further helps in storing it in the long term memory! Nowadays, introducing illustration in a website has become more like garnishing a dish with grated cheese. But if done wrongly, both of them can have adverse consequences.
“So, what is the right process for making an illustration for the web?”
Well, there is no right or wrong process! But definitely, that is the best which you feel to be right!
I know all this might sound a little weird as of now! But here I am! In order to explain it with an example, I want to dump here all that I followed while making an illustration for a website.
Define the design brief
The very first thing I did while making the illustration is reading the design brief as many times as possible in order to get the hang of goals and idea behind the illustration. After reading the design brief which I got from the stakeholders, I sent them with a couple of questions to be answered like :
-What goal do you want to showcase in the form of this illustration?
-What is the mood that you want the illustration to reflect?
-What are the keywords or traits of your company?
-What is the role of your company?
-Who are your target Audiences?
1. Brainstorming 🤔
I believe that creativity doesn’t come with an immediate effect but after a certain span of time post assimilation of the thoughts. After receiving the answers to my aforementioned open-ended questions, I took a break and involved myself in a different work so that I let my creative juices flow without any bias. But, I always had the design brief at the back of my mind. And so, whenever an idea popped into my mind I noted it down in my small notebook (which I often carry along with me in order to capture every nitty-gritty of my mind 😛). The next day, I started brainstorming and noted down the main key traits of the company and every single relatable word that came to my mind.
It's always easy to connect the dots when the dots mean and relate to each other!
2. Mind-mapping ✍️
Among all the keywords noted, I chose the most important and relatable ones that might bring some sense and rationale to my illustration. So, I encircled the relevant ones and decided to move forward with them!
3. Frame different storylines 📝
This was the most creative and fun of all the processes! It becomes way too easy to draw an illustration when we have an exact visualization of the task. And, this becomes successful only when we start experimenting with the words and join them to form an interesting pattern (a story). This can be as creative as possible, but it should convey the following :
- Situation
- Motivation
- Outcome
As an example, it can be like :
For arranging the meeting for the discussion, Mr. Y needs a platform to invite his colleagues, in order to discuss the growth of the company.
In the aforementioned example, there are Situation, Motivation & Outcome. (one after the other)
Explore the illustration styles and color themes 🎨
Now that you have got a clear picture in your mind along with the storyline, you have already won half the battle! It’s time for the fun part now!
1. Create your mood-board 📌
It’s a good idea to explore and get inspired by the various illustration styles flooded all over the web. I decided to create a mood board so that I don’t get deviated from what I wanted my illustration to be. This was the time when one of my favorites(Pinterest) came handy. Yes, you heard it right! It’s way too simple to track and save the best ideas for your project on the internet. Here is my mood board for the illustration I was working on.
It’s always considered as a good practice to involve your stakeholders at every stage in order to make sure that everybody is on the same page. After organizing the mood-board, I decided to take some feedback from my stakeholders and we went forward with the ones which mostly conveyed the style of their own company.
2. Prepare your concept sketches 📑
Its time to bring out the best in you onto the paper with your pencils 😺 Make your concept sketches according to the research you have done in the previous steps. You will realize how easy it becomes to express your thoughts and ideas after getting a hang of things through your research process! The idea that comes first to your mind, is not always the best one. So, get your wrist do some exercise and keep trying. I made many sketches and liked the 4th one the most. I showed all of them to my stakeholders and we agreed upon the 4th one to continue with.
3. Time to color it! 🎨 🖌
Establishing a perfect color palette is the most amazing of all the tasks. It’s more like playing a game.
The sketch is just a structure and color provides definition and life to it!
I chose a color palette that was in harmony with the colors used on the website. The stakeholders helped me in getting the exact Hexcode which they wished the illustration to be in. After playing with the color theme by varying them in Hue, Saturation, and Brightness, I finally got a color palette which was efficient in conveying the appropriate mood and goal of the company.
Refine it! 👌
Now that you have already completed your illustration, it’s time to present the final version of it to the stakeholders for further iterations.
Iteration in design is implicit and imperative in order to get the best one!
But be sure to make changes on the ground of a viable rationale. It is important to make sure that the other versions of the design are better than the previous ones, else its just a waste of time and effort. This was my final illustration after a couple of iterations, as suggested by the stakeholders.
So finally, we have come to an end to this very long process! 😅 Well, this was my way of approaching to draw a web illustration. There is an umpteen number of ways out there, by which you can make it happen! But make sure you are not taken away by the mind-boggling illustrations out there on the internet. You can definitely use them as an inspiration but try to develop a unique style of your own because, in the end, you will be satisfied with what you have made. Remember! planning is the key here 🗝
Hope it helped you!
Let me know what are your unique ways of making illustrations. Also, I would love to know your views regarding my thought process and illustration.
Applauds 👏 give me more motivation to write further 😃. So, feel free to appreciate if you really like it! ❤️
You are most welcome to read my write-up: Learning Roadmap for a UX Designer
