If you asked me a month ago, before I was documenting illustration guidelines for our design team, I probably would have said this type of thing isn’t very important. At least not relative to nearly any other part of the product design process. From jobs to be done to flows to microcopy and so forth, there are so many things to get rid before fixing a stroke that sits on a half-pixel. But sometimes it’s the little things.
This is a dissection of a few minutes of work I did last week.
We have a set of illustrations in our app that are drawn at 96x96 pixels. They’re used to liven up empty states, feature announcements, and instructional pages. We‘ve also recently introduced a couple of new component patterns that use 40x40 pixel illustrations. Not surprisingly, it’s handy to have a lot of those larger illustrations available for use in smaller contexts.
Many people would simply resize the 96px one to 40px and call it a day.
There are a couple of problems with this. Firstly, it’s too busy. The detail of the larger version gets lost. It’s difficult to tell what is being visualised, especially without the context of the original. Secondly, it looks blurry. 2px strokes become 0.08333px, which will only cut it on super high-resolution devices.
I used the downsized version as a starting point, but I knew it could quickly be made even better.
I started by removing any extraneous bits. This specific illustration is used to represent onboarding and product tours, so the directional signs are the most important visual elements. I got rid of the clouds and the coloured circles used only as flourishes.
You can see in the magnified screenshot above that the remaining elements aren’t aligned with the pixel grid like they were in the original illustration. Because it was downsized to 41.7% of its intended size (40/96), the lines and rectangles are all slightly off. (Even downsizing illustrations by even numbers can cause problems if any of the shapes or stroke widths have odd number sizes and end up at x.5.)
Additionally, the blue circle is now 43px and won’t fit in the 40px illustration template we use.
I resized the outer circle to be 40px in diameter. Then I adjusted each line and rectangle (except the bushes at the bottom) so that they sit on full pixels — no decimal places. This is known as “pixel fitting.” Some elements got slightly bigger, smaller, or repositioned in that process. More noticeable examples are the signpost width, the blue sign, and how the signs sit on the post.
I also adjusted the overall composition slightly to bring the whole sign up toward the top and improve the visual balance.
Above is the original 96px illustration, the original scaled to 40px, and the redrawn 40px version. This adjustment took fewer than five minutes while preparing assets for use and the result is more clear, clean, and crisp.
(Original illustration by my coworker Igor)