Dolly Rouge — hair salon website design

Dolly Rouge is a fictional women’s hair salon, and nobody commissioned it. I set the brief myself: show what a salon website can be when it has a real personality, and make sure it still does the four jobs every salon site has to do. Show the work. Show the prices. Show the place. Make booking easy on a phone.

Most salon websites I look at fail on one of those. The photos are stock, the prices say “please call”, or booking means a phone number and a hope. Dolly Rouge was built to get all four right, in a look that a salon owner would be proud to send people to.

The name came first: Dolly Rouge, a salon for colour that turns heads, cuts that swing and blow-dries that see the night out. The logo is drawn, not typed. It is Abril Fatface turned into outlines, with the “o” of Dolly replaced by a rouge disc holding a single kiss curl, so it works as a full wordmark, a favicon and a social avatar.

The palette is deep wine, a hot rouge red, blush pink and cream. There is no grey or beige anywhere. The shapes are curves, arches, circles and pill buttons, with tilted cards that overlap and two ticker strips that run across the page at an angle. The idea was energy without clutter: every section has one job and one big move.

The hero is sized from the height of the screen, not just the width. On a 1366 by 768 laptop, a 1440 by 900 screen and a 1920 by 1080 monitor, the whole opening fits without scrolling: the navigation, the full headline, the line underneath, both buttons and the photograph. I tested it at the heights a browser really leaves you once its own toolbars are drawn, not just the screen size.

On a phone the headline, the description and both buttons sit above the fold, on one row, and the photograph follows straight after. Nothing was hidden or cut to make it fit; the type, spacing and image are sized to the screen.

The services page is a proper salon menu: cut and finish, colour, the blow-dry bar, occasion hair and treatments. Every one of its 21 items has a price and a timing, so a client knows before she books that a full head of highlights is about three hours and that a cut can be added to any colour. The sections alternate between blush and wine with rounded corners that change from card to card, and a row of chips at the top jumps straight to each part of the menu.

The prices on the homepage cards match the menu exactly. It sounds obvious, but it is one of the most common mistakes on salon sites, and one of the quickest ways to lose trust.

A salon’s gallery has to feel like one place. Every photograph in the lookbook was art-directed to sit in the same room: the same arched brass mirrors, the same plaster walls and pendant lights, the same velvet chairs. It mixes finished hair with moments in the chair, covers a range of ages and hair types, and keeps the brand colours in the design rather than on the clients.

The photography is illustrative, made for the project in Adobe Firefly, and the site says so plainly on the homepage, the lookbook and the salon page. None of it is presented as real clients or real work. The lookbook filters by colour, cuts, blow-dries and occasion hair; a look can sit in more than one, the chosen filter is kept in the address so it can be shared, and screen readers hear how many looks are showing.

Most people choose a salon on their phone, quickly, so the booking request is short and tap-first. Pick everything you are coming in for (colour and a cut, say), a rough time, and if there is a big day coming, the date. Then your name and email. Errors appear next to the field that needs fixing, with a plain sentence saying how to fix it, and the first problem is focused for you.

Because Dolly Rouge is not a real salon, the form is labelled as a demonstration before you start, and the confirmation says plainly that no appointment has been made and nothing has been sent. Everything up to that point works the way a real request would, which is the part a salon owner needs to see and try before deciding how their own bookings should work, whether that is a request form like this or a full online diary.

The salon page introduces the way Dolly Rouge works in three promises and the stylists on the floor, by first name only, with no invented qualifications. The contact page pairs a short question form with the things salon clients ask most: patch tests, moving an appointment, fixing colour from elsewhere, how early to book for a wedding, and curly and coily hair.

There is no address, phone number, opening hours or review anywhere on the site, because there is no salon to visit. That honesty is built in, not bolted on.

The site is hand-written HTML, CSS and a small amount of JavaScript, with no framework, built by a short Node script that also makes every photograph into two sizes of WebP. The fonts are self-hosted and preloaded, the stylesheet and script carry version stamps so browsers can cache them for a year, and the scroll animations respect anyone who has asked their device for less motion. The phone menu, the lookbook rail and every form control work with a keyboard, and focus is always visible.

Dolly Rouge lives on its own subdomain of the SR7 site, so it can be found in search on its own merits. Every page has its own title, description and canonical address, clean URLs, a sitemap, a robots file that lets search engines in, Open Graph images for sharing, and structured data that describes it honestly: a website and a piece of SR7 work, not a local business with an address it doesn’t have.

Every photograph is served at the size the screen needs, the hero image is fetched first, and everything below the first screen loads only as it comes into view. Nothing on the page blocks it from drawing.

Measured with Google PageSpeed Insights on the live site on 18 October 2026: 99 for performance on mobile and 100 on desktop, with 100 for accessibility, best practices and SEO on both. On the mobile test, first contentful paint was 0.8 s, largest contentful paint 1.4 s, with no blocking time and no layout shift; on desktop the largest paint lands in 0.3 s. Lighthouse on the other five pages scored 97 to 100 on mobile and 100 on desktop.

A salon website with a personality of its own that still does the ordinary jobs well: a first screen that says what the salon is and how to book, a menu with prices and timings, a lookbook that feels like one room, a booking request that is easy on a phone, and a footer that says plainly what the site is.

There are no booking numbers or review scores here, because it is an independent studio project with no customers. What it shows is what a hair or beauty salon gets when the brand, the photography, the build and the search set-up are treated as one job. Open Dolly Rouge on your phone and try the booking journey yourself.