Mobile UI Illustration Process
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.
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.
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.
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–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.
Do you see the difference? It might be subtle, but the eye can recognize patterns in designs. We want the organic shapes to look relaxed and natural, not repetitive.
All About the Beziers
I plot my lines fairly quickly and go through several rounds of revisions before I feel comfortable with the layout.
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.
I always test out my illustrations on mobile device mock-ups to make sure that everything looks the way I’ve intended.
