How to Plan a Coded Illustration Before Writing Code

The fastest path to a coded doodle is a bad pencil sketch first. Not because the sketch is art — because the sketch tells you which shapes you actually need before you've written a single class.

Five minutes on paper saves an hour of rewriting CSS because you realised too late that the ears should sit behind the head, not on top.

Under the sketch, list the shapes out loud: "one rounded triangle for the body, two small triangles for ears, two dots, one half-circle mouth." That list is your component plan. Each line becomes one element.

Order the list back-to-front. Whatever paints last sits on top. Getting the order right on paper means you rarely reach for z-index later.

Decide your five colors up front — body, outline, accent, blush, background. Naming classes is more pleasant when you already know that .blush is pink and .nori is navy, not the other way around.

Every doodle has one bit that's harder than it looks — the zigzag tail, the asymmetric wink, the overlapping flame. Circle it on the sketch and write a one-line plan for it. The easy parts will take care of themselves.