Illustration

For a long time every drawn thing on a product screen went by one word: image. Icons were images, photographs were images, hand-drawn artwork was an image. With one name for all of it, the jobs they do never got separated either. Stock photography ended up where a compact repeating symbol belonged, and decorative artwork ended up where a process needed explaining.

At Pagedeck the clearest cost of that showed up on the document list. A new account has nothing in the list, so the middle of the screen was simply blank. Users read it as a screen that hadn't loaded, refreshed a few times, and wrote in. The feature worked fine; what the screen lacked was anything saying that empty was the correct state.

When Noa proposed artwork and a line of copy for that spot, the first response was whether it was really necessary. Drawing was filed under making things pretty, and making things pretty is the first item cut in a busy week. With no name for what the artwork was doing, the discussion collapsed into an argument about taste, which the person with the most conviction tends to win.

Once "illustration" settled in as a term, the shape of that discussion changed. You could now ask whether a given piece was decoration or explanation, and if explanation, what exactly it was saying in place of words.

It takes advantage of artwork being read before text. People recognize shape and color before they read a sentence, and illustration uses that moment to say what state the screen is in.

It does two jobs. The first is explanation: a concept with several steps, or a relationship between parts, that would take five lines of prose fits into one picture. The second is mood. The same message reads as stiff or as warm depending on the line weight and palette, and that impression connects to brand identity — the character and expressive system a brand defines for itself.

Four things get decided in practice.

1. Keep the style as one set. Line weight, the range of colors allowed, how people are drawn — these are settled in advance and new artwork is matched to them. Styles that differ screen to screen make a product feel like several products. Illustration rules therefore live inside the design system, the reusable set of rules and parts a team builds on.
2. Decide where it lands in the reading order. Artwork pulls attention hard, so scaling it up means it gets read before the button that matters. Sizing the picture under the button and letting white space carry it is the adjustment that follows.
3. Choose a format. Artwork made of lines and flat shapes exports to a format whose edges stay crisp at any size; artwork full of texture and shadow exports the way a photograph would. If the product supports dark mode, this is also where you check that the linework doesn't vanish against the other background.
4. Make it readable as text. Attach alt text, the written description of an image — but leave it empty for decorative artwork whose neighboring copy already says the same thing, or a screen reader announces it twice.

The places it belongs are fairly settled, and the job differs by place.

1. Empty state — the screen shown when there's nothing to display yet. One picture and one line separate "broken" from "starting point." The standard arrangement puts the button for the next action right there too, so the screen explains itself and offers a way forward at once.
2. Error state — the screen announcing something went wrong. Bare error copy invites users to blame themselves, and artwork takes the edge off. Where money is involved, though — a failed payment — a light drawing reads as making light of the situation.
3. Onboarding — the process of settling a new user into a product. Unfamiliar concepts explained only in sentences don't get read, so a screen carries one picture and fewer words. Three drawn steps beat a paragraph describing the same three steps.
4. Landing page — a standalone page built to drive one action. Early on, when product screenshots aren't convincing yet, artwork says what the product does instead.

The test is the same everywhere: ask what the user loses if the picture is removed. If nothing, that piece is decoration. Decoration isn't wrong, but decoration is something you buy with load time and maintenance rather than something you get for free.

"This needs an illustration. Right now it's a blank screen and it looks broken."

Arguing that the artwork does the work of communicating state.

"That one's decorative, so leave the alt text empty."

Judging that the adjacent copy already carries the same information.

"The illustration style is different on every screen. Let's start by matching line weights."

Pointing out that the artwork has accumulated without being kept as one set.

When Noa designs a new screen at Pagedeck, she leaves the artwork slot blank and places the copy and the button first. If the screen reads with only those, no picture goes in. If the state is still ambiguous, that's when she draws. Running it in that order keeps artwork in the spots where it adds explanation, and it cuts down on pictures papering over weak copy. A screen that only makes sense with the illustration in place usually has a copy problem underneath.

The most common view is that illustration is decoration — nice to have, fine to drop. It looks like something added for appearance rather than function, so it's first out when a schedule slips. On empty screens and error screens, though, it is doing the work of reporting state. Without the picture and the line of copy, a user reads an empty document list as a failure. File it all under decoration and those screens never get finished, while support collects tickets nobody can trace to a cause.

The opposite mistake is assuming more artwork means a friendlier product. Artwork does shape the impression, but several pieces on one screen scatter attention and push the actual task backward. Image files are heavier than text, so they show up in how fast a screen appears, too. Screens people use daily want less of it; screens people see once, like a welcome flow, can carry it without wearing anyone out.