Honey, I shrunk the UI Illustrations
There and back again
Creating medium-sized illustrations is not just about shrinking the large ones, the way hobbits are not just small humans. Medium illustrations have a lot of weight to pull and little (literally) leeway for error.
The work area defines the amount of detail we can cram into a medium illustration. With only 96px of space, we need to bring simplification to another level. Every pixel can either help with recognisability or distract from the meaning. Here’s how to I went about this balancing act.
Concerning context
I already have a set of large illustrations with clearly defined rules, you can read about them in this article. My task was to redesign an existing set of medium illustrations and make them visually coherent with the larger ones. The previous design used a slightly different logic with two main colors. I wanted to create a design with the main color for the strokes and subordinate fill color.
I quickly realized that smaller illustrations will need a color adjustment, so I used Stark (a great Figma plugin) to check the contrast ratio. You can learn more about how we use colors in our design system at Homeday in this article by fantastic Andrea Tovar.
I had to rethink the use of fill colors and decided that they will touch the middle of the bounding strokes across the whole set. Having a stroke of 4 pixels was really helpful to place elements on full pixels. Spaces between elements suggest depth or overlap but at this scale, I had to get rid of decorative line breaks.
Here is a few examples of the size adaptations. Note how some illustrations are of the Honey-I-shrunk-the-kids variety, while some had to go through a larger change to achieve the desired simplification.
Concerning optics
Our brains are pretty good at recognizing shapes. Try looking at an object and squinting. It’s a popular method among artists and illustrators. You don’t start by shading the earlobe but by defining the form of an ear. In our case, though, you need to forget about the ear for the sake of a face.
With medium illustrations, your job is to suggest meaning in the simplest possible way. You want to stay on the utilitarian side.
Beauty comes from consistency rather than the details, so exceptions need to be carefully considered. Here’s an example of using a 2px spacing instead of the usual 4px.
Pixel perfection becomes even more important at this scale to avoid problems with compression & aliasing. We want the illustrations to look crispy on every screen.
In practice
Here’s a video where I explain my process (8 minutes). Enjoy!
Want to join the product engineering team at Homeday? Check out the open positions on our job page.
If you’re interested in my work, here are my Medium articles:
