Hoi Jamal, Coco hier! Ik heb me de afgelopen tijd verdiept in de restyling van Haarvisie.nl, zoals je me vroeg. Het was een leuk project om te kijken waar we nu staan, wat er al gebouwd is en hoe we die nieuwe site echt onderscheidend kunnen maken met wat award-waardige inspiratie. Ik heb alles rustig bekeken, zonder iets aan te passen natuurlijk.
Laten we beginnen met de huidige site, haarvisie.nl. De basis staat als een huis! Jullie honderden positieve reviews, de erkenning met awards en die supertransparante tarievenpagina zijn echt sterke punten die we absoluut moeten behouden. Ook de SEO-teksten per behandeling zijn goed en de consistentie tussen de vestigingen is top. Maar eerlijk is eerlijk, er zijn ook een paar punten die we kunnen moderniseren. Die blogpagina bijvoorbeeld, waar je het zelf ook over had, is nu nog een vrij saaie verticale lijst. Ook ‘Onze Creaties’ voelt wat geleend met die Pinterest-widgets, en de stylistenpagina mist persoonlijke touch. Ik zag ook dat er nauwelijks video op de site is, terwijl dat juist enorm krachtig kan zijn voor de visuele behandelingen en een echte ‘wow’ factor kan geven, zeker op mobiel. En we missen een echte contactpagina met kaarten. Dus ja, genoeg ruimte voor verbetering, vooral op het visuele en persoonlijke vlak.
Dan over wat er al gebouwd is. Er lopen nu twee sporen naast elkaar, de versie van Conductor en een prototype van Kimi. Het valt me op dat er verschillen zijn in bijvoorbeeld de gekozen lettertypes en zelfs de precieze crèmekleuren. De versie van Conductor, op higgsfield.app, lijkt verder ontwikkeld en gebruikt ook al echte data en video’s. De kleurtokens daar komen ook precies overeen met wat als 'besloten' stond in je briefing. Het lijkt er dus op dat dit de leidende richting is, maar om misverstanden te voorkomen, zou ik adviseren dit even hardop te bevestigen met Conductor. Zeker omdat Kimi, die aan de blogs werkt, anders misschien op het verkeerde spoor verdergaat. Goed nieuws is wel dat beide versies al een mooie basis hebben, met vloeiende scroll-effecten en goede responsiviteit voor mobiel.
En dan de inspiratie. Ik heb rondgekeken op sites als Awwwards en een aantal gave ideeën verzameld om Haarvisie.nl echt te laten schitteren. Denk bijvoorbeeld aan een sectie waar een model stap voor stap transformeert terwijl je scrollt – dat laat jullie vakmanschap zien in plaats van erover te vertellen. Of wat dacht je van een sleepbare voor-en-na-slider voor haartransformaties? Supervisueel en direct bewijs van kwaliteit. Ook kunnen we de diensten of de blog veel dynamischer maken, bijvoorbeeld met een speelse Bento-grid lay-out in plaats van een lijst, of zelfs met scrollytelling-artikelen voor de blog, waarbij een artikel over kleurtrends een echte reis door kleuren wordt met meebewegende beelden. We kunnen ook spelen met luxere elementen zoals magnetische knoppen, een donker, premium menu, of zelfs een sfeervolle microsite-stijl met veel video op de achtergrond.
Kortom, Jamal, er ligt een solide basis en we hebben concrete punten om aan te pakken én inspiratie om van Haarvisie.nl echt iets award-waardigs te maken. Het belangrijkste nu is dus even die koers voor de technische opbouw bevestigen, zodat we allemaal de neuzen dezelfde kant op hebben. Ik hoor graag wat je ervan vindt!
titel: Haarvisie.nl restyling — content-audit, status + award-waardige inspiratie
datum: 2026-07-25
Dit verslag bundelt drie onderzoeken die ik (Coco) deed op verzoek van Jamal: (1) een grondige, read-only audit van de huidige live site haarvisie.nl, (2) een check van wat Conductor en Kimi al gebouwd hebben aan restyling-previews, en (3) een inspiratie-onderzoek op awwwards.com en vergelijkbare bronnen, met extra aandacht voor een spectaculaire blog-visualisatie. Alles is read-only bekeken — er is niets aangepast.
Sterke punten om te behouden:
- Honderden echte reviews (24+ paginas), 4 geloofwaardige awards (o.a. Platinum Great Lengths-status, beste kapsalon Zuid-Holland).
- Eerlijke, transparante tarievenpagina met "vanaf"-prijzen.
- Praktisch afspraakformulier (4 stappen, WhatsApp-alternatief).
- Sterke SEO-teksten per behandeling (bv. Balayage: uitleg, voor/nadelen, prijsindicatie).
- Beide vestigingen (Rijswijk + Wateringen) consistent en volledig getoond.
Zwakke/gedateerde punten:
- Blog is een saaie verticale lijst — geen grid, geen categorieën, geen visuele hiërarchie. Dit is exact het probleem dat Jamal noemde.
- Onze Creaties leunt volledig op ingesloten Pinterest-widgets in plaats van een eigen, snelle beeldgalerij — voelt "geleend".
- Team/stylisten-pagina is leeg qua persoonlijkheid: alleen naam + foto, geen bio of specialisme.
- Geen aparte contactpagina (/contact/ geeft 404) — geen kaart per vestiging.
- Nauwelijks video op de site, ook niet op de meest visuele behandelpagina's (Balayage, Extensions, Keratine) — juist video is sterk voor mobile-first "wow".
- Footer-copyright "© 2025" loopt achter.
- Mobiele visuele test kon dit keer niet zelf uitgevoerd worden (browsertool werd geblokkeerd) — aanbevolen dit alsnog met een echte device-test te doen.
Volledige pagina's bekeken: home, over ons, specialiteiten (+ balayage-detail), tarieven, stylisten, onze creaties, awards, reviews, blog (+ 1 artikel), afspraak maken, veelgestelde vragen.
Er lopen twee parallelle builds die elkaar op twee punten tegenspreken:
| haarvisie-nieuw.higgsfield.app (Conductor, meest volwassen) | haarvisie-dev.haartips.nl (dev-prototype v2) | |
|---|---|---|
| Koppen-font | Josefin Sans | Playfair Display |
| Body-font | Hanken Grotesk | Inter |
| Kleur-tokens | crème #f7f5f0 / #efeae0, champagne-goud #c29a86 / #d9b9a7 / #a98a7a | crème #f4ecd9 / #eee2c6, goud #c6a96e, blush #e8c4b0 |
| Techniek | Echte SSR-app (TanStack), video's, live booking-widget, dark mode | Statische HTML-mockup, nog placeholders (bv. "[adres Rijswijk]") |
| Status | Verder ontwikkeld, productie-achtig | Vroeger prototype, expliciet "niet live" |
De higgsfield-versie is duidelijk het verder ontwikkelde spoor (echte openingstijden, echte booking-flow, video's) en de kleurtokens komen exact overeen met wat als "besloten" werd aangehaald in Jamal's briefing. Dit lijkt dus de leidende richting, met Playfair+Inter als een eerder/verlaten spoor — maar dat is een afleiding op basis van bouwvolwassenheid, geen bevestigd besluit. Advies: dit even hardop laten bevestigen door Conductor/Jamal, zodat Kimi (die de blogs bouwt) niet op het verkeerde spoor verder werkt.
Beide builds bevatten al goede fundamenten: gestaffelde scroll-reveals, responsive breakpoints tot 360px, prefers-reduced-motion-support (a11y), en op de dev-versie een mooi "5 tinten smelten samen tot 1"-scroll-animatie als signature-element.
Bron: awwwards.com en vakbronnen, zelf geopend waar mogelijk (gemarkeerd), anders uit betrouwbare zoekresultaten (link meegegeven, niet zelf geverifieerd — dat staat er expliciet bij).
Sticky-scroll transformatie-reis — een scroll-vaste sectie waarin een model in fases verandert (voor → kleuren → knippen → resultaat) met parallax. Laat vakmanschap zien i.p.v. vertellen. Mobiel: werkt van nature (verticaal scrollen).
awwwards.com/inspiration/scroll-driven-storytelling-synapser-studio
Sleepbare voor/na-slider voor haartransformaties — vinger-slepen i.p.v. losse foto's naast elkaar. Direct bewijs van kwaliteit, standaardpraktijk bij goede salon-sites.
Bento-grid als diensten-overzicht — vakjes in wisselende groottes i.p.v. saaie lijst, met video/preview bij tap. Op mobiel: verticale bento-stack.
Magnetic/bounce-knop op de "boek nu"-CTA — geeft de belangrijkste actie een premium, speels gevoel. Op mobiel vertaald naar zachte tap-bounce.
Warm, fullscreen microsite-stijl (zelf bekeken: Salon Sona, Awwwards Honorable Mention) — verticale navigatie, vloeiende animaties, eigen karakter i.p.v. generiek wit-grijs.
awwwards.com/sites/salon-sona
Donker, luxe hover/tap-reveal dienstenmenu (zelf bekeken: Ever Beauty) — voelt premium en anders dan de klassieke lichte salon-site.
awwwards.com/sites/ever-beauty-in-every-details
Horizontale swipe-sectie voor team of portfolio — swipen is een vertrouwde mobiele beweging, mooi voor "ontmoet ons team" of een voor/na-galerij.
Editorial typografie + smooth scroll — grote, zelfverzekerde koppen + een "zwaar" scroll-gevoel, voelt duur zonder overdreven effecten.
Cursor-transformatie-effecten — leuk extra detail voor de 15% desktopbezoekers, puur progressive enhancement (mobiel mist niets).
Clean single-page met video-achtergrond (zelf bekeken: Westend Hair Salon, Awwwards Honorable Mention) — bewijs dat "minder druk, meer sfeer" ook award-waardig is; goed tegenwicht tegen te veel effecten.
awwwards.com/sites/westend-hair-salon
Alle 6 bronnen die ik zelf heb geopend en gelezen zijn in de tekst gemarkeerd; de overige links komen uit zoekresultaten en zijn niet stuk voor stuk door mij zelf bevestigd — dat staat er expliciet bij.
🎙️ Bespreek met Jarvis