Applying Illustration Thinking in Design Work
By Justin Jones
As a designer, I have naturally built a box of tricks over the years. Every artist has some sort of toolbox and for me, incorporating illustration & illustration thinking into my design work is one of them. Applying this to my design work has helped me out in some really crucial moments in my career.
WHY ILLUSTRATION?
Before Facebook, Instagram, and Snapchat, how did humans communicate? How were stories told before those archaic things we call “books”? Before the written word, humans used illustration! Cave paintings and hieroglyphics were the main ways that humans documented events and told stories. There is about 40,000 years of history on illustration. At this point, I think we can all agree that illustration as a visual language is built into our DNA.
Some designers may be intimidated by the thought of illustration and I’m here to say, don’t be! Just like design, there are different tiers of illustration. You don’t need to be a fine arts master to add illustration or illustration thinking into your designs. You may have even been illustrating without knowing it. For example, iconography, logo design, and hand-lettering are all forms of illustration.
HAND DRAWN GRAPHICS
If you are able to, adding in hand drawn graphics into your designs can really add a sense of authenticity and a strong point of view. It’s a really fun way to create an experience for a user that they can immediately relate to.
If you are not skilled in doodling or drawing, then I would suggest using simple vector shapes to create your illustrations. A great example is below:
As you can see from the example above, the artist used simple shapes to create context for the user. Sure, the words provide context, but the illustrations allow the user to understand the concept at a glance. Another great detail in this example is the artist’s incorporation of some of his illustration choices into his UI elements. This detail is noticeable in the carousel dots.
DESIGNING SOMETHING FROM NOTHING
Many times I will find myself in a situation where I’ll receive a design brief from a client, but the client will have nothing (photography, imagery, graphics, etc.) for me to work with. In those cases, I used to jump straight to stock photography, but not anymore. Stock photography is still a great solution when you are in a pinch but, if possible, I recommend creating your own assets and graphics. I had to force myself to get really creative in these situations.
An example of this is when I had to design graphic assets for a medieval style video game website. The company that owned the video game hadn’t created any assets for the game yet but they knew they wanted something similar to the aesthetic and tone of Game of Thrones. Knowing this, I knew I wasn’t going to be able to just pull assets from stock photos. I wanted to keep the graphics very simple due to the fact that the client still hadn’t confirmed any official branding guidelines.
After doing a good amount of research on what types of imagery and textures could be utilized for a “Game of Thrones” style game, I was ready to jump into designing assets. I first started out by sketching simple shapes and patterns.
I keep my sketches very loose and try to produce as many ideas as possible. I sketch very quickly without worrying about details. Once I’ve purged as many ideas as possible, I’ll go back and narrow them down to what I believe has the most potential to visually tie together and achieve the tone I’m looking for. As you can see, I try to stick to basic shapes, mostly lines. I’ll then add details later in the process. As long as you have a solid shape foundation, the details will work their way in.
The next step is to create the “shape silhouette” as I like to call it. Basically, create a flat vector version of the shapes. Once your vector shapes are created, throw it into Photoshop for painting/texturing. This is really where the illustration thinking takes place.
In the example above you can see how the flat vectors on the left transformed into the textured beauties on the right. In only a few steps, I was able to achieve the look I was going for.
- Create vector shapes.
- Find a base texture.
- Sharpen the texture to create a sense of depth.
- Change the hue to match the tone of the project.
- Paint in shadows and highlights using a new layer with the “Overlay” blending mode.
- Make sure your light source is consistent. You will notice that the light source on each asset is coming from the top. I followed this rule throughout the process.
And that’s it! You don’t have to be an amazing fine artist to create your own assets or illustrations. All you need is a game plan and some patience.
Justin Jones is a UX/UI Designer at TribalScale’s Orange County office. Throughout his career he has worked on digital solutions for some high profile clients, such as Toyota, Lexus, Mattel, Ubisoft, Warner Bros., LEGO and more. While being a tech savvy visual designer by day, he is a geek art illustrator by night.
Join our fast growing Tribe and connect with us on Twitter, LinkedIn & Facebook! Learn more about us on our website.
