Illustrations for Product Designers

Don’t be afraid of the pen tool….

I wanted to write a quick note to all those UI / UX people out there who are not born artists and can’t draw a straight line in real life, let alone a perspective shape. In today’s world a product designers need to know a lot, and one of those things are of course illustrations. I’m going to skip the many paragraphs on the WHY and get right down to quick tips that helped me create passable illustrations. The key like everything in life, is break it down to small chewable steps.

Storyboard

Create the “scene” on a piece of paper. For us non artists, it will be more like a blueprint than a sketch. If you are feeling fancy that day, start with a word cloud or a mind map for ideas. You can create mood boards as well if you want to keep everything in pixel land.

Trace an Image

Take an image that reflects what you want to build, and just trace over it with the pen tool. (Don’t worry about curves and such, just click for edge to edge until you are done.)

• Apply a fill to that shape and bring the opacity down so you can still see the image
• Click on the lines between the points and slowly move them until they match up with the image below
• Click on the points and round the corners until they match up with the image below

Make it come to life

Gradients on top of gradients my friend. Study and see how the shadow appear in the image. Light and the shadow the object creates from the light is what makes something look more realistic.

• Add a gradient on top of the color of the fill
• Add gradients as needed depending on the complexity of the shape
• Use textures as an additional tool to give depth to the illustration
• Make sure you limit illustrative details that are not in your focus point. (Case in point, the city in the hotel window. Less is always more)

Practice….

Carve out 30 minutes each day to practice. For me it was a plant, a car, or a bag, until I felt confident. As you get better, you will progressively enhance your methods, and you will be able to do more complex scenes. Nothing is better than actually doing. So, take a few nuggets and go create your own process :)

Pro tip: Use some free illustration libraries to see how they build scenes, and characters. I used this great library for people (i still cannot draw people) Humaaans.