Canon · Web Design For Mini Printers
A playful product page concept for Canon's mini-printer line — colorful, tactile, shoppable.
[ N° 02 // Visuals ]
Inside the work.
Drag, swipe or use the arrows to scrub through the project's key frames.
01 / 00
[ N° 03 // The Story ]
From brief
to outcome.
Overview
Designed as a story-driven product page that walks the visitor through features, customization, and use cases. The aesthetic mixes Canon's polish with the toy-like joy of instant photography.
Problem
Mini-printers were treated as forgettable phone accessories — buried in a category page, sold on specs, with zero emotional pull. The brief was to lift one product line out of the catalog and let it carry its own narrative.
Challenge
Make a small accessory feel like a hero product. We leaned on bold layouts, vibrant chips, and lifestyle imagery layered over clean white.
Outcome
A complete landing concept with hero, feature blocks, configurator and purchase flow.
[ N° 04 // Process ]
Problem
to pixel.
Every project moves through the same spine — research, wireframes, mockups, ship — but the weight on each step changes with the brief.
- 01 · Discover01 / 04
Brand & audience
Studied Canon's existing tone (precise, professional) and contrasted it with how Gen-Z actually uses instant prints (stickers, fridge art, scrapbooks). Built two mood-boards to find a middle voice: polished but playful.
- 02 · Wireframe02 / 04
Story spine
Wireframed the page as a 7-act scroll: hero, the joy, the colors, the configurator, the prints, social proof, checkout. Each act got a single message and a single CTA — no competing actions in the same viewport.
- 03 · Mockup03 / 04
Visual system
Designed bold typographic blocks, candy-colored chips for the configurator, and lifestyle photography layered over clean white. Built a flexible card library that the team can re-skin for future product drops.
- 04 · Outcome04 / 04
Shoppable concept
Delivered desktop and mobile mockups for every section, plus a documented configurator flow ready for engineering scoping.
