Form & Fade — Barbershop Website
A concept website for a modern barbershop, featuring services, pricing, stylist profiles and a simulated booking experience.
Form & Fade is a self-initiated concept for a modern barbershop website. It demonstrates a responsive design, service and pricing pages, stylist profiles, and an interactive booking flow. Booking and payment are simulated; this demo is not connected to a live booking or payment system.
- My role
- Design, development & SEO
- Client
- Form & Fade (concept barbershop)
- Year
- 2026
- Timeline
- Typically 1–2 weeks for a site like this
Overview
The project in a nutshell
Most people find a barbershop on Google Maps, tap its website and decide within moments whether to book or go back and tap the next listing. I built Form & Fade to show exactly what that moment can look like for your shop. It is a complete, working site, not a mockup: open the live demo on your phone, scroll it, slide the before/after photos and walk through the booking. Every section answers a question a new customer is silently asking: Is it open? Where exactly? How much? Are they good? Can I book right now?
The challenge
A barbershop can have a great Google Maps listing and still lose the customer one tap later. The website is missing, slow on a phone, hides the prices, gives no proof of quality or only offers a phone number to call. A new customer has no reason to trust you yet, so they pick the listing that makes the decision easy.
My solution
One fast, mobile-first page that follows the order a new customer thinks in: who you are, what it costs, who will cut my hair, what the result looks like, what others say, and how to book or get there. The address, hours and services are also written in a form search engines can read, so your site and your Google listing tell the same story.
What I built
Key features
Prices and times, upfront
Four services, each with a clear duration and a fixed price. A customer never has to message you just to learn what a cut costs.
Booking built for phones
Pick a service, a barber, a date and a time, leave your details, done. Dates in the past are blocked, times follow the shop's own timezone and UAE phone numbers are formatted automatically.
Proof you can see
Ten before/after transformations with a draggable comparison slider, filterable by style. Trust comes from seeing the work, not from adjectives.
Meet the barbers
Three profiles with experience, specialty and languages spoken, and a Book with … button for each. People are more comfortable booking with someone they have already met.
Made to be found on Maps
An embedded Google Map, one-tap directions and the opening hours right next to the address. Behind the scenes, BarberShop structured data, canonical URL, social preview image and sitemap help search engines understand the business.
Fast, calm and tested
Images are served as WebP, the heavy 3D layer only loads once the browser is idle, and animations respect the visitor's reduced-motion setting. The project ships with automated tests and strict type-checking.
The customer's path
From Google Maps to your chair
This is what the page is designed around. Each step removes one reason for the customer to hesitate.
- 01
They find you and tap “Website”
Someone searches for a barber nearby and opens your listing. The page they land on should feel like the same business they just saw on the map.
- 02
The first screen says who you are
Your name, your area and a clear Book button appear immediately, on any phone, with no waiting and no popups.
- 03
They see the price before they ask
Services, durations and prices are on the page. No guessing, no awkward message, no surprise at the till.
- 04
They check that you are good
Before/after photos, the barbers' faces and their specialties, and what real clients say. Doubt gets answered by evidence.
- 05
They book or get directions in one tap
Booking, the address, the opening hours and Get directions are all within reach, so the decision turns into an appointment.
Screens
Project gallery
Tap any image to view it full size.
On a real project
What your shop would get
- Your real name, address, phone, hours and prices, matching your Google Business Profile exactly
- Your own photos of your shop, your barbers and your work in place of the placeholders
- A map and one-tap directions linked to your actual listing
- Structured data so search engines can read your hours, location and services
- Booking that fits how you already work: requests sent to you by email, WhatsApp or Instagram, or a link to the booking tool you already use
- A page that is fast and easy to read on a phone, on your own domain
- Prices, hours and services you can change without touching code, or I change them for you
- Full ownership of the source code and every asset, plus support after launch
Before you decide
Questions a shop owner usually asks
Will this put me at the top of Google Maps?
No website can promise that, and I won't either. Your Maps ranking mostly depends on your Business Profile: category, reviews, activity and how close the customer is. What the website does is turn the visitors you already get into bookings, and keep your name, address and hours consistent everywhere Google looks. If anyone guarantees you the first position, be careful.
Is anything on this demo real?
The website is real and fully working. The shop is not. Its name, prices, hours, reviews and photos are placeholders, and the demo says so on the page. I also deliberately left fake star ratings out of the search data, because made-up ratings go against Google's guidelines. Your site would only ever show your real reviews and your real work.
Does the booking actually work?
In the demo it is simulated: nothing is saved and no card is charged. On a real project we choose together how it works. It can send each request to you by email or WhatsApp, or link to a booking tool you already use. Taking payments online is optional, never forced.
I'm not technical. Will I be able to manage it?
Yes. Your details live in one place, so changing a price, an opening hour or a barber is a small edit. If you would rather not touch anything, send me the change and I'll make it.
I already have an Instagram and a Google listing. Do I need more?
Those are where people discover you. The website is where they decide. It puts prices, proof and booking in one place that you control, and links back to your Instagram and your listing instead of replacing them.
What happens first, and how do I know what I'm paying for?
We start with a short conversation about your shop. You then get a clear scope, timeline and price before I write any code, and a working preview early, so you can react to something real. You only move forward if you like what you see.
Who owns the website?
You do. On delivery the source code and all project assets are yours.
Want this for your barbershop?
Send me the link to your Google Maps listing. I'll look at what a customer sees after tapping your website and tell you what I would change, honestly and with no pressure.
© 2026 Ali Afarinifard. All rights reserved.