Case Study / 02
Web Design · 2025
All work

Eskens Web
Refresh.

A full visual rebuild of the Eskens Tinting Solutions site — modern type system, motion-rich layout, and a live in-page preview you can scroll through right here.

HTML / CSS Vanilla JS Motion Design System Responsive

Overview.

A redesign of the Eskens Tinting Solutions website — replacing a dated marketing brochure with a typographically considered, motion-led layout that reflects the precision of the products.

The existing site at eskens.co.uk reads like a 2010 brochure — flat product grids, no hierarchy, generic stock imagery. The audience is paint shops, distributors and in-house ops teams who already know the kit; the site needs to feel as precise as the machines, not like a leaflet.

The redesign leans on a tight type scale, a single warm accent against a calm neutral, and motion that's only used where sequential reveals help comprehension — scroll-reveals on the product grid, parallax on the dispenser shots, a marquee for partner brands. Nothing decorative, everything earning its place.

Live preview.

Scroll inside the frame
eskens-redesign.local / preview

  The frame above renders the redesign exactly as it would ship — animations, type, and layout intact. Scroll inside it to walk through the site.

Hero

A landing that leads with the kit

The original site buried products under marketing copy. The redesign opens with a confident headline, a clear product split (Tinting Machines / Shakers & Mixers), and imagery that carries the brand instead of stock photos.

Catalog

Filterable product grid

Tinting and shaker pages share a filterable catalogue — Corob, Fast & Fluid, Collomix — with live counts, spec lists, and a single card pattern that scales from 14 models to whatever ships next.

FAQ

Answers customers actually ask

Replaced the old "contact us" wall with a real FAQ — brand coverage, machine sizing, install and training, service area. The questions buyers raise on the phone, surfaced where they look first.

Footer

One footer, used everywhere

A single footer pattern across the home, tinting, and shakers pages — brand block, site map, and contact list — so the site finally feels like one product instead of three loosely related templates.

Up next.

Browse the rest of the work, or skip back to the homepage.