Describing process through illustrations
The steps I went through to demonstrate the features of a software company through meaningful illustrations.
Few months ago, I was designing a website for a software company. The company had its promising values and tasks. Nobody likes to read too much. What really makes one eager to read is the good outlook! So I thought to myself, why not try something different and new to me!
This was the time when I decided to design a website that contained graphics and illustrations which could describe the core values of the company without having to read the text portions. However, I am not a professional artist. I knew this would be very challenging to me but I did know the fact that I would enjoy it equally.
So how did I actually begin?
The first thing I needed to understand was the company, it’s process, methods and steps, kind of works, etc. Understanding the purpose of any company or product is very crucial before beginning any task. Immediately, I began discovering different forms of illustrations. I searched on dribbble for different varieties of artworks and ended up discovering multiple kinds including line art, flat illustrations, broken stroke, and many more. The one style that I really preferred was freehand flat style of illustration. This was quite trending during that time and it still is. Just like the renowned author Austin Cleon said,
“ STEAL LIKE AN ARTIST. ”
Once I was clear about the style I selected, the next step was to literally create illustrations. I started implementing the same technique that I used when designing logos i.e. collecting metaphors. I gathered all the attributes that represented a particular task and merged them together to present a scenario.
Building Prototypes
Build > requires strength > crane.
Prototype > Requires different component that are merged together to give a meaningful output > Squares, lines, rectangles, tick mark ( basically geometrical components ), desktop (viewport).
In-house team of company
Team > Group of people with different tasks and responsibilities ( design, code, statistical analysis ) > Pen tool of illustrator as a representer of design, lines of code, graphs for statistics.
A Group > Sense of togetherness to share ideas > Same table for multiple members of a team.
Consultation and flow discussion
Flow discussion > Idea must be presentable to all the team members in order to discuss > Use of projector and white board, lines, rectangles and curves to give a visual representation of flow.
Complex softwares and machine learning models
Complexity in development > Requires stepwise task listed in order to prevent any events, needs fixes to bugs, needs paperwork for concept breakdown > Use of gears, codes, paper, pen, ipad, checklist, database, pie chart, puzzles, etc.
Simultaneous communication with the client
Communication > Requires a Representer / Project Manager to share updated tasks or ask queries > Slack, skype, email, chat.
Idea to production
Final product > Web app, mobile and tablet optimized > Website, mobile app, tablet view.
Idea > Pops in one’s head > Bulb
Team augmentation
Augmentation > Requires experts to have a deeper analysis on the tasks to improve the effectiveness > Meeting and discussion
I used a guy with a headphone common throughout the illustrations with a purpose to view one member who acts as a project manager / representative.
To add an extra dimension to the website, one of my team’s awesome motion designer, Bardan helped me.
#
