Mobile UI Illustration Process

April 29, 2017

This week I'm working on some mobile illustrations for a health and wellness app. I wanted to show people doing different healthy activities, whether that's mindful eating, exercises or even just relaxing.

I always start my designs with a quick and loose sketch. I don't worry too much about the details because I know that I'll change things and move around objects in Illustrator.


The Sketch

I try and keep my sketches loose and just focus on the basic shapes and layout. I've learned that if I make my sketches too precise, I get attached to the design and have a hard time making adjustments later.

mobile sketch

Next, I scan my sketch using ScannerPro, which makes your sketches look super awesome if you're going to share them with a client or your team.

mobile sketch

After I import the sketch into Illustrator, I decrease the opacity to about 60% so that I can remove distractions and focus on the design.

mobile opacity
The color palette

Before I start recreating this design in Illustrator, I need to pick a color palette that represents the story and the mood that I'm going for. This stage is the hardest part to get right. There are a lot of great resources I used to help find inspiration. These are some of my favorites:

I try to choose a color palette which matches the theme that I'm working with. In this case, I want feminine, vibrant and relaxing. So I choose a palette with soothing tones, but not too bright and bold.

I try to stick to about 4 to 5 colors for my illustrations. I find that the fewer the better, and you can add visual interest through shading and opacity.


After choosing my main palette, I'll then create a palette of darker and lighter shapes, increasing by 10%. I use a Hex Color Tool or Illustrator's color choices to increase or decrease my palette.


Outlining the Sketch

I usually create one shape and duplicate it if it's a repeating pattern. I try to make sure that my designs aren't limited by the tool I'm using. I don't want my organic shapes to look repeatable. So after I duplicate the shapes, I go in and make alterations until it looks a little more natural.

Repeating pattern
More natural design
mobile mobile close
All About the Beziers

I plot my lines fairly quickly and go through several rounds of revisions before I feel comfortable with the layout.

mobile close mobile close

Final Design

Once I feel that the illustration is complete, I check for anomalies and add small details. Since this illustration is intended for mobile UI, I don't worry about add tiny details since they will be lost in the final product.

mobile final

I always test out my illustrations on mobile device mock-ups to make sure that everything looks the way I've intended.

mobile mobile

*Previously posted on Medium

Get in touch.