Beauty Salon Website
Natural Beauty & Academy
A commercial presentation website for a real Fulham, London beauty salon, built around genuine specialists, treatments and prices, with enquiries routed to the salon's preferred booking channels.
About this project
Natural Beauty & Academy
Natural Beauty & Academy is a real, actively trading beauty salon in Fulham, London, and this is a genuine commercial project delivered for that business, not a concept or demo.
The salon provided its logo, colour direction, hero photography, specialist portraits and treatment pricing. Working from those materials, and in collaboration with Oleh Patrykei, a member of the SetupFocus team, we built the site's structure, visual presentation, responsive layouts and live deployment around the salon's real business.
The client asked for a presentation website rather than a custom booking system, online payments or a heavy CMS, so enquiries and bookings are routed through the salon's preferred channels, Instagram Direct and agreed booking links, exactly as requested.
Category
Beauty Salon Website
Built With
HTML & CSS, JavaScript, SEO & Accessibility, Vercel
Live Site
VisitProject scale
Built beyond brochure-site scale
6
live pages published
4
specialist profile pages
5
treatment categories covered
14
technical & accessibility fixes
1
genuine paying client, not a demo
Project Overview
What was built and why it matters
Challenge
The client runs a real, actively trading beauty salon with several specialists, some renting their own room and handling their own bookings, others working directly under the salon's own service list. The salon needed a clear, presentable website that could go live quickly, without commissioning a custom booking system, payment processing or a content platform it did not want to maintain.
Solution
Working from client-supplied materials, the logo, brand colours, hero photography, specialist portraits and service pricing, we built a static HTML, CSS and JavaScript website with a premium homepage, individual profile pages for each specialist, and full treatment listings covering manicure, hair, permanent makeup, skin, laser and aesthetic treatments. Enquiries and bookings are routed through the salon's preferred external channels, Instagram Direct and agreed booking links, exactly as the client requested, rather than forcing a custom booking system onto a business that did not need one.
Results
The finished site is live on a Vercel preview while the salon connects its own domain, with clean URLs configured through Vercel redirects and rewrites and the project history preserved on GitHub. It gives the salon a professional first impression, clear treatment and pricing information, and a simple enquiry journey, without any unnecessary technical overhead.
Business value
What this gives the website owner
Every major section was designed to support visibility, credibility, clearer client journeys or future growth.
01
A professional presence before the domain switch
The salon has a polished, on-brand website live and shareable immediately, while its existing domain is prepared and connected separately.
02
Clear presentation of specialists and pricing
Every specialist has their own page with real photography, and treatment pricing is laid out in clean, readable groups instead of scattered price blocks.
03
An enquiry journey that matches how the salon works
Enquiries route to Instagram Direct or an agreed booking link for each specialist, so the site fits the salon's real process instead of forcing a new one.
04
A stronger first impression for new clients
A premium dark and gold visual identity gives prospective clients more confidence before they get in touch.
05
Room to grow
The static structure makes it straightforward to add specialists, treatments or an academy section later without rebuilding the site.
Screenshots
A closer look
Homepage: Hero
1/2
Where Precision Meets Comfort
Salon atmosphere and specialist team
Specialist Page: Profile
1/2Technical approach
Complex underneath, straightforward for the business
The technology was selected to keep a large site consistent, quick to deliver and easier to extend, without forcing the client to understand the engineering behind it.
01
Static HTML, CSS and JavaScript
The site is a hand-built static front end: HTML for structure and content, CSS for the visual identity, spacing and responsive layouts, and JavaScript for mobile navigation, scroll behaviour and media handling.
02
Vercel hosting with clean URLs
Vercel hosts and serves the static site, with redirects and rewrites configured so each specialist has a clean, readable URL instead of exposing raw file names.
03
Version-controlled in GitHub
The project and its full development history are stored in GitHub, keeping future changes traceable and safe to roll back.
04
Technical SEO foundations
Meta descriptions, Open Graph tags, canonical URLs and BeautySalon structured data (schema.org) were added across every page so search engines and shared links represent the salon correctly.
05
Performance and accessibility pass
A follow-up audit added lazy loading and explicit image dimensions to prevent layout shift, a skip-to-content link for keyboard and screen reader users, a video poster frame, a favicon, and fixes for CTA links that pointed to the wrong destination.
Features
What's included
Premium homepage
A dark, gold-accented homepage introducing the salon brand and its specialists.
Real specialist profiles
Genuine photography and introductions for each of the salon's specialists.
Dedicated specialist pages
Individual pages for the manicure, permanent makeup, hair and aesthetic treatment specialists.
Full treatment coverage
Manicure, pedicure, hair, permanent makeup, skin, laser and aesthetic treatment information.
Clear pricing
Treatment descriptions and prices presented in clean, readable groups.
Contact page
Salon address, phone number and map, matching the client's real details.
External booking links
Instagram Direct and agreed booking links used exactly as the client's process requires.
Responsive, mobile-first layout
Layouts adapt cleanly from desktop down to small mobile screens.
Search-friendly structure
Clean navigation, calls to action and metadata built for real discoverability.
Next Project
Crestfield Advisory
Financial Services Website