Designing Illustrations for Small Screens
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
Okay so I don’t know how to illustrate for small screens apparently, but I do know how to make the tits out of an icon. There are a few basic principles that apply to both illustration and icon design.
Use Universal Meanings
In icon design, using universal meaning is assigning symbols to interactions that actually make sense to everyone (and not just people within 100m of silicon valley), despite vastly different backgrounds/cultures, in order to create a more accessible, intuitive product. In illustration, using universal meanings is using that same understanding—that symbols and metaphors do not always cross cultures—but with the expectation that the user is going to slow down and try to read the illustration within the context of your product, rather than simply accept it as symbolism.
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
We give icons labels because we want to add context; to teach the user what this icon means to us (so we can use it without the label later (read: when we’re famous)). Illustrations already have context. They exist in combination with the UI and copy, as part of a product the user already understands. We draw cars (…and wheels and seats and roads…) at Lyft, because, yes, we have a lot to say about cars — but also because the user is already primed to expect and recognize cars. Like, yes, if we draw a potato, they will eventually figure out what it is, but it requires extra cues and more detail, to say yes, you saw it right, we did in fact draw a potato. The user is already half way there when you keep the illustrations within the product domain, and will be faster to recognize objects/actions, even as you reduce the level of detail enough to accommodate the technically termed: ridiculously-small phone sized requirements.
Choose Clear over Clever
When you’re working at small sizes, you need to think in archetypes, not clever interpretations. Okay sure, it is kind of funny to put an actual hamburger instead of the hamburger menu icon we all know and loathe, but also: don’t. Use the zeitgeist to your advantage and just pick the things we already know.
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
There are not a lot of resources about illustrating for small screens, but there is an actual shit-ton written about creating legible type. And what have I been saying all this time, if not that illustrations should be readable?
Simplify (more than you want to)
AKA serifs just create noise below 10pt; contrast between thicks/thins lost below 10pt
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
AKA Title case is more legible than all cap
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.
Exaggerate everything
AKA extended letterforms and open counters increase legibility
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
AKA reverse type reduces legibility
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
When you’re working on any product, you’re always going to struggle with deciding what actually needs an illustration; and making feel at home in an otherwise utilitarian product. When you’re working on small screens—with so many things to say; and so many things that need to be tappable; and people holding their phones way further away from their faces than you’d think—the problems are just magnified. Kind of like when I asked my physiotherapist one time if I was going to have any long term problems, he was like “well, it’s only going to intensify the problems you already have” And I was like what problems?
Get Ruthless: Does it really need an illustration? (probably not)
Hey, listen, (product) illustration’s number one fan here. Like, I’d definitely for sure be slingin’ burgers if y’all didn’t let me draw on your phones all day. But, like, sometimes I feel like I owe product design an apology. I know I talked you into using illustration. Like, hey listen to meg: illustration is cool! .. but I didn’t mean you need to use it on Every. Single. Screen.
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
I’ve always had a hard time deciding who icons should live with. Part of the system or part of the content? Inspired by the type or by the illustrations? Children of divorced parents, sure, they can cross the border for holidays and weekends, but we need to figure out what school to put them in, y’know? When you’re working on large screens, I put them with type. With enough room to consistently use labels, and large blocks of text that use icons to help parse it—it’s safe to assume that the icons will be more often living along side text at similar sizes. Meanwhile illustration can take up, like, the entire screen. When you’re working on small screens, however, the illustrations are, you guessed it: small. And actually, the icons are kinda big, for icons anyway (they’re more for tapping, not parsing, and people just can’t see their phone screens that well, as it turns out). What I’m trying to say here is it’s time to change schools. Designing for web, the illustrations stand alone as a unique content, falling neatly into small/medium/large, and rarely approach the size or context of an icon. Designing for mobile, the icons and illustrations often live in the same sized container, changing only depending on the needs of the the flow. Creating an illustration style that flows smoothly from icon to illustration and back again, helps insure that which ever imagery you use in the limited space feels like it was designed to be there.
Like Flubber: stretchable, foldable, highly viscous
Yes. I re-watched flubber to write this. What? When you’re working on small screens, size constraints are REAL. Ideally, you’d be working with the designers to choose the best way to include illustrations; realistically you rarely get first pick. The spaces allotted for illustration are generally pre-determined, and are often very vertically or horizontally constrained. Keeping this in mind when you are laying the building blocks for your illustration style, and designing it to easily grow to fit any container (and not be constrained by more realistic human proportions) sets you up for success at small sizes.
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
