The opening frame is a crop, not a product shot — the object runs off all four edges.
case study / wästberg
Wästberg
A catalogue that is mostly photograph.
Lighting is bought on the quality of the object and the quality of the light it throws, and neither survives a thumbnail. The catalogue has to be almost entirely photograph, and it still has to open quickly on a phone.
the catalogue, top to bottom.
Products, designers and installed rooms run in one sequence, with the product codes carried throughout.
Designers and product codes are first-class routes, because that is how the category is browsed.
The hero advances on its own and ships a visible pause control beside it.
responsive system
full-bleed photography, at phone width.
The crop is the hard part on a narrow screen: a landscape frame that reads as material at 1280 pixels can turn into an unreadable grey field at 390. The mobile view re-crops rather than scales, so the object still fills the frame.
notes on image-led catalogues.
An image-led catalogue has a contradiction at its centre. The photography is the product, and the photography is also what makes the page slow. A lighting or furniture site cannot fix that by using fewer pictures. It fixes it with format discipline, and with restraint about what loads first.
crop until it is a texture.
The hero is a macro crop — a shade running off all four edges, the grain of the finish visible. It reads as material rather than as product.
A catalogue photographed this way needs fewer images to establish quality, which makes it a performance decision as much as an art-direction one.
let the type be the brand.
A self-hosted custom grotesk carries the identity, so almost nothing else has to. No colour system, no borders, no illustration.
One well-drawn typeface weighs less than the ornament it replaces, and self-hosting keeps it off a third-party domain and out of the critical request chain.
browse by designer.
Products, About, Designers, Inspiration, Support. Putting the designer alongside the catalogue matches how the category is actually searched — people look for a name before they look for a product code.
It also produces a set of genuinely useful landing pages that a pure product tree never generates.
the discipline underneath.
One homepage carries more than fifty srcset declarations, forty lazy-loaded images and thirty-four WebP files. That is the whole trick: modern formats, explicit width sets, and nothing below the fold requested until it is needed.
Core Web Vitals thresholds — largest contentful paint under 2.5 seconds, interaction to next paint under 200 milliseconds, cumulative layout shift under 0.1 — are reachable on an image-heavy site, but only if every image declares its dimensions.
a pause button on the carousel.
The hero advances on its own, and there is a pause control sitting next to it. WCAG 2.2 asks for exactly that on any motion that starts automatically and runs longer than five seconds.
It is among the most-skipped details on brand sites, and it is one button.
a catalogue to show?
Tell us what it has to hold.
start a conversation →