The Hair Butcher — barbershop website design

The Hair Butcher is a fictional barbershop, and nobody commissioned it. I set the brief myself: build the kind of website a premium British barbershop would be proud to send people to, one that feels like walking into the shop, and still does the everyday jobs well. Show the cuts. Show the prices. Show the barbers. Make booking easy.

The idea behind the name runs through everything. A butcher knows every cut of the beast; a good barber knows every cut of the head. So the shop is a Victorian butcher’s, turned barbershop, on a cobbled side street, and the website borrows the butcher’s language all the way down: prime cuts, the bill of fare, cuts hung on the rail.

The homepage opens on a film, and you drive it by scrolling. It starts above the rooftops on a rainy night, comes down to one window still glowing on a wet street, goes through the door and into a busy Saturday in the shop, and ends when the chair turns round to show the bull cut into the back of a customer’s head. Scroll back up and the film runs backwards with you.

The words sit on top of the film in short chapters, one line each, and a Book a chair button is never far away. If you just want to book, a Skip to booking link takes you straight past the film.

A wide film squeezed onto a phone loses the thing you are meant to be looking at. So the phone version has its own tall 9:16 cut, framed to follow the subject: the shopfront, the door, the barbers, then the back of the customer’s head. It is a separate film, not the desktop one cropped on the fly.

Scrubbing a film with your thumb is hard on a phone, so I engineered and tested this part on a real Android phone rather than a desktop pretending to be one, until scrolling backwards and forwards stayed smooth.

The shop section sets the scene in a few plain lines: four chairs, hot towels at every sitting, walk-ins whenever a chair is free. Then comes the part I enjoyed building most, the cutting chart. Like a butcher’s chart of the beast, it maps the head into parts. Tap a part to see how it is cut and what it costs, add the parts you want, and the chart prices the whole sitting for you.

Next to it is the Butcher’s Mark, the shop’s signature: shaved designs and hair tattoos cut in by hand, from a simple line to the bull you have just watched appear in the film, each with its own price that is added to any cut.

The cuts are shown the way a butcher hangs meat: on a rail. Seven cuts sit on cards hung from hooks, each with a photograph, a price, a time and a Book this button, and the rail moves sideways as you scroll down or swipe across.

Then the prices, set out as a bill of fare pinned to the wall: cuts, shaves, beards, sittings booked together, young gents and the Butcher’s Mark, every line with a price and a time, and a note that every sitting includes a consultation and a hot-towel finish. No “prices on request”, no surprises at the till.

The barbers are the faces from the film, so you can pick the person you have just watched at work, or take the first free chair. Below them are the questions people actually ask a barbershop: do I need to book, do you cut children’s hair, how do I pay, where do I park, how long does a shaved design last.

Booking is a short flow in five steps: the cut, the barber, a day and time, your name, and done, with your order building in a panel as you go. Because there is no real shop, it is a working front-end preview that sends nothing, and the confirmation says so plainly: no appointment has been made. Everything up to that point behaves the way a real booking would, which is the part a barber needs to see and try. The page closes with an invitation to join the shop: rent a chair or take an apprenticeship.

Most About pages are a paragraph and a photograph. The Hair Butcher’s is a book. Our story is a real-time 3D family history built with three.js: a leather-bound book of the Whitfield family, butchers on this street since 1908, lying on an oak counter in lamplight in front of the shop.

As you scroll, the cover opens and the pages turn, one chapter at a time, from Arthur Whitfield opening his butcher’s shop in 1908, through his son and grandson, to the day the shop became a barbershop. The pages are properly typeset, with drop capitals and captions, and the photographs are styled like an old family archive. The family and the photographs are fictional, and the captions in the book say so.

A homepage built around a film has every excuse to be slow, so I gave it none. The opening still is the first thing to load, and the film only starts loading once you start to scroll. The fonts are self-hosted and the photographs are served as WebP at the size the screen needs.

Google’s PageSpeed Insights on the live homepage, 22 October 2026, phone test: performance 97, accessibility 100, best practices 96, with the largest paint at 2.0 seconds, no blocking time and no layout shift. On a desktop: performance 100, with the largest paint at 0.5 seconds.

A barbershop website with a world of its own: you walk in from the street, watch the shop at work, price your cut on a chart, read the prices on the wall, pick your barber and book, and if you want the story behind the name, there is a family book to read.

There are no booking numbers or reviews here, because it is an independent studio project with no customers. What it shows is what a barber or salon gets when the film, the brand, the build and the speed are treated as one job. Open The Hair Butcher on your phone and scroll through the film yourself.