Sarah Hair Salon měl na začátku web, který vypadal jako každý jiný SaaS produkt: sekce Proces, Garance, Statistiky, vystavené produkty, blog. Všechno hezké, ale nic z toho neříkalo návštěvníkovi „tady je salon, kam chceš přijít”. homepage redesign to mění — kompletně.
Proč redesign vůbec
Původní layout vznikal jako generická šablona pro webové aplikace. Měl smysl, když se web stavěl rychle a šlo spíš o to mít něco živého. Jakmile ale začal přitahovat reálné návštěvníky z Liberce, začalo být vidět, že tohle není web pro kadeřnictví — je to web, který má kadeřnictví v popisu.
Cíl redesignu byl jasný: ať to vypadá jako salon, ne jako tech produkt. Editoriální struktura, reálné fotky, příběh místo feature listu.
Co se změnilo
33 souborů, 783 nových řádků, 1 311 smazaných. Nejde o kosmetické úpravy — je to přestavba od základu.
Hero sekce
Původní hero měl na mobilu video a na desktopu statickou fotku s překryvem. Nový hero:
- Mobil: salon reel video s jemnými překryvy (gradient + vignette), beze změny — tohle fungovalo dobře
- Desktop: křížově přecházející slideshow reálných fotek z práce kadeřnice — žádné stock fotky, žádné AI generované obrázky. Pět fotek rotujících každých 5,5 s, bez barevných gradientů, jen tmavý scrim a měkký vignetový přechod
- Indikátory slajdů pro orientaci
Editoriální sekce
Místo generických bloků (Proces, Garance, Statistiky) přibyly sekce, které dávají smysl pro salon:
- Stylists — jména, fotky (přímo z profilů kadeřnic, ne stock), zaměření každé kadeřnice
- Service Highlights — světy služeb místo generickeho výčtu
- New Clients — sekce pro nové zákazníky, co ještě salon neznají
- Final CTA — jasná výzva k akci na konci stránky
Navigace jako cesta
Navigace teď odpovídá pořadí sekcí na stránce: Salon → Kadeřnice → Služby → Galerie → Ceník → Kontakt. Kliknutí na jakýkoli odkaz v navigaci vás posune dolů na příslušnou sekci — žádné přeskoky, žádné zmatení.
Ceník jako samostatná stránka
Dřív byl ceník součástí homepage. Teď má vlastní stránku /cenik s cenami načítanými přímo z rezervačního systému — žádné ruční přepisování, vždy aktuální data.
Galerie a lightbox
Lightbox galerie prošel technickou opravou: přesunul se přes portál, aby unikl z MotionReveal kontejneru a na mobilu zaplnil celý viewport. Dřív se lightbox na menších obrazovkách lámal, teď funguje čistě.
Co zmizelo
Stejně důležité jako to, co přibylo, je to, co odešlo:
- Process — generická „Jak to funguje” sekce, která nepatřila ke kadeřnictví
- ServiceGuarantees — garance služeb, které nikdo nečte
- StatsBanner — čísla typu „spokojených zákazníků”, která v salonu nedávají smysl
- FeaturedProducts — vystavené produkty z e-shopu na homepage, kam nepatří
- AnimatedCounter — animovaný čítač bez kontextu
- LatestBlog — blog sekce na homepage, která odváděla pozornost
Všechny tyhle komponenty byly mrtvé váhy — vznikly jako součást šablony, ale nikdy neodpovídaly tomu, co salon potřebuje ukázat.
Fotky bez kompromisu
Původní web používal AI generované a stock fotografie. redesign je kompletně nahradil reálnými fotkami z práce kadeřnic. Stylist photos pocházejí přímo z profilů kadeřnic v rezervačním systému — žádné generované portréty, žádné cizí tváře.
Tohle je pro salon zásadní. Zákaznice přichází za konkrétní kadeřnicí a chce vědět, jak její práce vypadá. Web by měl odpovědět na tuhle otázku hned.
Shrnutí
Redesign není o tom přidat další animaci nebo přebarvit tlačítka. Je o tom pochopit, že web kadeřnictví nemá vypadat jako web SaaS produktu. Sarah Hair Salon teď na homepage ukazuje to, co je důležité: kadeřnice, jejich práci, salon atmosféru a cestu k rezervaci. Zbytek je pryč.