Barbershop Demo
Barber & Shaving Parlour in Rayleigh, Essex
Overview
A real brand built from nothing but a bare Booksy listing.
A one-page site for a working barbershop that had no site before this, only a bare Booksy listing. Built mobile-first since most walk-in bookings happen from a phone, it's fast, and designed to read as the shop's real brand rather than a template with a logo swapped in.
Proof of conceptKey features
- 01
Custom brand system
Wordmark, roundel logo, and a masked-icon technique so the scissors mark renders identically in every browser.
- 02
Direct Booksy booking
Every button links straight to Booksy. No contact form standing in the way.
- 03
Real review data
Per-barber ratings pulled from a Booksy scraper, cross-checked against Booksy's own numbers.
- 04
Instagram Reels gallery
Scroll-snap carousel, one video playing at a time, tap-to-pause on mobile.
- 05
Responsive photography
Three width variants via srcset, so a phone isn't downloading a desktop-sized image.
- 06
Full Lighthouse pass
Contrast fixes, fonts off the critical render path, images sized to their real display dimensions.
Mobile-first. Responsive by design.
Built to feel native on a phone
Designed and tested across mobile, tablet and desktop, with particular attention to touch interactions, typography and layout on smaller screens.
Scroll over the phone to see the full page.
A closer look
01
A brand, not a colour scheme
Forest green and brass gold, a custom wordmark, and a masked-icon technique that keeps the scissors mark consistent across every browser.
Built to perform.
100
Performance
100
Accessibility
100
Best Practices
Lighthouse is Google’s own site-auditing tool, run against the live site to score real-world speed, accessibility and technical quality.