Choosing an art direction from an existing brand and website

Read the product before the palette

Begin with the headline, supporting copy, feature sequence, calls to action, and proof. Write a one-sentence product promise and identify the transformations the page repeats. Those ideas are more useful than a color extraction alone because they tell the artwork what it should communicate.

Map the available placements at the same time. Note the hero's empty space, which features need explanation, where a decorative object could reinforce rhythm, and whether pricing or social artwork belongs in the pack. Direction work is stronger when it answers a real page rather than producing an isolated concept image.

Extract constraints, not a costume

Record the interface's color roles, typography tone, corner geometry, line weight, density, spacing, and contrast. Separate durable signals from incidental ones. A temporary campaign color should not necessarily govern the whole pack; a recurring cobalt action color or unusually sharp geometry probably matters more.

The artwork may introduce new supporting colors and a new medium, but it should respect the page's hierarchy. Decide which brand color remains dominant, which becomes an accent, and which surfaces need enough quiet space for copy and controls. Matching means fitting the system, not sampling every pixel.

Turn product ideas into visual metaphors

Generate several metaphor candidates before choosing a medium. A routing product might use paths and waypoints; an optimization product might use targets, keys, lifts, or forward motion; a research product might use lenses, books, and connected evidence. Reject metaphors that could describe almost any software company.

Then choose a medium that strengthens the message. Technical schematics can clarify systems and verification. Tactile objects can make tools and progress feel concrete. Editorial collage can express assembly, iteration, and human judgment. Cut paper can create an approachable world of layered routes and landmarks.

Compare complete directions on the same brief

Each direction should solve the same product story so the comparison is meaningful. Show a representative hero composition, enough of the palette and material rules to judge extension, and at least one secondary placement. A mood board of disconnected references does not prove that a direction can produce usable artwork.

Review each option for product fit, clarity at page scale, contrast with the interface, originality, and ability to extend across the asset matrix. Ask what the hero, feature, decoration, social, and optional motion assets would become. A striking hero that cannot support the rest of the page is not yet a system.

Convert the selected direction into rules

Document the selected metaphor family, medium, palette roles, geometry, camera or line treatment, texture, shadows, and placement constraints. Name what the direction must avoid as well: extra card backgrounds, generic floating shapes, excessive detail, or a competing accent color.

Use a public URL only when the content is intended to be read publicly. For an unreleased product, provide a written brief or approved screenshot rather than exposing a private source. The resulting analysis should describe visual signals and placement needs without retaining confidential page content in public result URLs.

See the system in context

Its selected indigo 3D direction turns the product journey—from search and selection to features, plans, and scale—into a coordinated family rather than a generic technology image. See the anonymous ecommerce automation artwork case study.

Continue with How to build a consistent website illustration system, or apply the method to your own public page in the free art-direction preview.

Ready to produce a coordinated pack? Start free with three credits.