Website voor een kapsalon

Dit voorbeeld telt vier pagina's: de homepage, de prijslijst, een pagina over de zaak en het team, en de contactpagina.

• Prijslijst Elke behandeling met het bedrag ernaast en ruimte voor een regel uitleg eronder, verdeeld over categorieën als knippen, kleuren en barbier. Alles als tekst op de pagina, dus ook vindbaar in Google.
• Tijden De openingstijden staan in de voettekst. De blauwe balk op de pagina leest die tabel uit en zegt of de zaak vandaag open is, en de rij van vandaag wordt gemarkeerd.
• Bellen Op mobiel verschijnt er een vaste belknop zodra je een stukje gescrold hebt, en die blijft daarna staan. Bij een kapper is bellen nu eenmaal de eerste actie.
• Formulier Naam, mailadres, telefoon, waarvoor je wilt komen en je bericht. Meer velden hoeft het niet te hebben; wie liever belt, ziet het nummer overal staan.
• Route Een knop naar Google Maps in plaats van een ingesloten kaart. Scheelt laadtijd, en er komt geen extern script op de pagina.
• Vragen De vragen die klanten toch stellen, open uitgeschreven onder de prijslijst in plaats van weggeklapt achter plusjes.

Een kapperszaak is in de regel wit en licht, met spiegels die het daglicht rondkaatsen. Dat is het uitgangspunt geworden. De pagina is puur wit, geen creme, met precies een kleur erin: kobaltblauw, #0047ab. Kobaltblauw is van oorsprong een verfpigment, en op wit werkt het als een geschilderde deur in een verder witte zaak.

Die ene kleur betekent overal hetzelfde: hier kun je iets doen, of hier staat een bedrag. Verder is er niets gekleurd, wat de knoppen en de prijzen vanzelf laat opvallen.

Alle tekst staat in een letterfamilie, Schibsted Grotesk, van het grote woordbeeld bovenaan tot het bijschrift onder een foto. Het verschil zit in korps en gewicht, zoals op een gezette prijskaart. Een tweede lettertype zou ruis zijn in een ontwerp dat verder alles weglaat. De letter staat op de server zelf, dus er gaat bij het laden geen verzoek naar Google.

De hoeken zijn overal recht, ook op de belknop, en er staat geen enkel kaartje met een schaduw op de pagina. Foto's liggen randloos in hun eigen verhouding met een kort bijschrift eronder. Bewegen doet er niets uit zichzelf: de site reageert alleen als je iets aanwijst of aanklikt, en wie animaties in zijn systeem heeft uitgezet krijgt ook dat niet te zien.

De foto's in dit voorbeeld zijn vrij te gebruiken stockbeelden en de prijzen heb ik verzonnen. Bij een echte salon gaat dat er allemaal uit. Er komen jouw foto's in, van de zaak en van kapsels waar je trots op bent, met jouw bedragen en jouw tijden. Past kobaltblauw niet bij je pui of je logo, dan wordt het een andere kleur; het ontwerp is er niet aan vastgeklonken.

Wat blijft is de opzet. De prijslijst is het hart van de site, de balk met de status leest de tijden uit de tabel in de voettekst zodat er nooit twee verschillende verhalen op je site staan, en op een telefoon leest alles net zo prettig als op een groot scherm. Wat zo'n site kost staat op de prijzenpagina.