Case study · Landing page optimization
Website illustrations that turn optimization into momentum
A vivid purple-and-gold pack gives experiments, improvements, launches, and pricing one shared language of progress.
Input
The public brief
The source website and customer identity are intentionally withheld. The public brief was to make landing-page optimization feel active and rewarding while supporting a sequence of feature and pricing sections.
Visual reading
Signals visible in the finished system
- A saturated purple base palette with gold and warm cream achievement cues.
- Tactile 3D forms with layered highlights and a celebratory silhouette.
- Repeated checks, tools, launch shapes, and platforms that encode progress.
- Tall hero and tier compositions balanced by wider feature illustrations.
Art direction
The selected visual world
Achievement objects: bold purple sculptural forms with gold success signals, designed to make testing feel like visible forward motion.
Only the chosen visual direction is present in the public archive. Three rejected candidates and their review notes are not disclosed and are therefore not described here.
System rules
How the pack stays coherent
- Reserve gold for progress, selection, and successful outcomes.
- Use purple as the material anchor across every scene and tier.
- Pair each abstract platform or container with one legible action object.
- Keep lighting, bevel depth, and front-facing detail panels consistent.
Placement map
One story across the page
- Hero: the check-mark trophy establishes the outcome immediately.
- Testing section: subject and tool layers explain the act of optimization.
- Feature sections: container, item, pad, key, and launch scenes build the journey.
- Conversion moments: a dedicated button object reinforces action.
- Pricing: three related tier scenes keep commercial choices in the same world.
Transparent pack
The published artwork family
14 transparent WebP scenes form the published static pack.
Subject/tool and container/item pairs are separate motion-ready layers for small entrance, orbit, or parallax sequences.
Implementation
Notes for shipping the assets
- Place saturated subjects against quiet page backgrounds so the palette remains controlled.
- Use the tall hero at its intrinsic aspect ratio instead of forcing it into a landscape crop.
- Describe the progress metaphor in copy; the visual alone should not carry the product meaning.