Designing Illustrations for Small Screens

Meg Robichaud
Aug 21, 2018 · 9 min read

When I interviewed with Lyft, one of the last things they asked was “Are you sure you’ll be happy? I’ve seen your work and it’s detailed as shit. We work on phones. Have you ever _really_ thought about how small a phone screen is?

I laughed, appreciated the sentiment, and accepted the job twice as hard — with a smug dont-you-worry-about-me-I-can-draw-anywhere* packed into every signature.

Y’all.

Illustrating for small screens is hard.

The first thing I did was try to look for my own blindspots — I know how to illustrate for products, and the Lyft brand is basically my brand (more cars, less butts, for now)—but mobile devices as the primary platform, this is uncharted territory. KIDDING. I totally thought I could figure it out with brute force and a general things-usually-work-out-for-me attitude. BUT the second thing I did was try to look for my own blindspots, scoured the internet for any tips on illustrating for small screens. And then the third, fourth and tenth thing I did was scour the internet for suggestions on illustrating for small screens.

From what I can tell, no one has written it down yet (although I’m kind of hoping y’all will call me out for missing some glaring, awesome resource, like oh, my bad, but also: finally). And because productivity is making lists of things you already did so that you can cross them off: here’s what I’ve learned over the past 3-ish months of working on the Lyft illustration style.

Let’s start with a car (duh).

What we can learn from icon design

Use Universal Meanings

So, like, there are a ton of people who are actual adults now, who don’t remember flipping through stacks of floppy disks to pull out a beat up copy of Lemmings for the hundredth time, but they know the floppy disk icon means save. An illustration of a floppy disk, however, wtf is that? why did you colour in the save icon? While the principle is the same, the level of abstraction changes as you move from icon to illustration. Icons are symbols; illustrations are scenes. Both exist inside the product to help you move quickly, and understand the product better. Both will only slow you down if you try to introduce new meanings.

Context Matters

Choose Clear over Clever

So, like, yes, my half jeep, half SUV, half IDK-I-cant-really-tell-cars-apart-I-just-added-things-I-liked looks cool AND I’m pretty sure all kinds of super jeeps technically exist (even some with snorkels), but we’re aiming for what the average person thinks of when they’re describing a modern Jeep, save the creative liberties for the billboards.

What we can learn from type design

Simplify (more than you want to)

You knew this one tho, right? It would still be weird if I didn’t say it. We remove serifs for legibility at small sizes. We remove details for legibility at small sizes. Nothing fine lined. Nothing low contrast. Nothing close together. Skip the cool asymmetrical details, they’ll just look like a mistake anyway. Look for the elements of your illustration that actually help you identify it, and the orientation it is facing. Like, those door handles look dope, but no one is looks for door handles to tell a car from a potato. You don’t need to remove everything, you just can’t include everything.

Silhouettes are everything

We read the shapes of words, not the individual letters; we read the shapes of the objects, not the details inside. In type, each letter needs to be distinct enough to be told apart, but not so distinct that it distracts from the complete word. In illustration, each detail needs to be distinct enough to be it’s own identifiable object, but not so distinct that it becomes the focal point. Consider both the overall shape of the illustration, and the shape of each of it’s components. Extend the edges of each of the components to help indicate where a new object begins.

Also don’t do that contained in a circle thing, at least at small sizes, ’cause: silhouettes

Exaggerate everything

Okay so everything you just did, do it more. Extend the edges of all your silhouettes, increase the spaces between each of the elements. So much that it looks kinda dumb when you scale it up. In type, we truck with the details—stretch the i, squish the m, draw out every ascender/descender we can find—to help you recognize the shapes of the letters from a distance. In illustration we go after the edges and proportions. Focus on scaling up the objects that best help us identify the illustration, and the creating edges to indicate where they begin. The two wheels are doing a helluva lot more to say Jeep than the roof rack ever will, so they can take up half the car for all I care.

Light to get bigger; Dark to get smaller

Dark colors recede; bright colors come forward. In type this means white text looks heavier. We accommodate this by using a lighter weight or giving the letters breathing room with larger kerning/leading. In illustration, it creates a tool for fine-tuning the hierarchy, or uncrowding some of the elements.

That is, if I want the windows to feel a little bit larger, or maybe the reflector feels a little bit too close to the wheels when we scale it down, we can solve it with color.

Making It Work IRL

Get Ruthless: Does it really need an illustration? (probably not)

When you don’t use illustration to solve an actual problem—reinforce/reinterpret copy, create shorthand/parse text, explain new features, ect—it just feels forced. If you’re constantly trying to cram in another illustration, the available space for an illustration gets continually smaller, while the expectations for the illustration to capture more grows. The impact of the all of the illustrations diminish with each subsequent unnecessary illustration, that teaches the user they can (and should) be ignored. Instead, let the content—iconography, navigation and copy—lead the way, and use illustration more sparingly, with a more pointed purpose. Allow the copy to take up space first, and wait for your turn to use illustration in the more long-winded explanation when you’re certain the user is looking for a little bit of extra help.

Icons and Illustrations on a sliding scale

Like Flubber: stretchable, foldable, highly viscous


I hate writing conclusions. Hope this helps! ✌️ I would just repeat things I already said anyway, and who has time for that?

PS. We’re hiring senior product and systems designers. Hit me up.

*I super can’t, being asked to draw without a wacom tablet makes me visibly nauseous

Thanks to Linda Dong.

Meg Robichaud

Written by

Draw for $$$