Websites
Sharmina Beauty Haven: Redesign eines Beautysalons
Ein komplettes Redesign für einen Beautysalon auf den Philippinen, illustriert als Cyanotypie-Sonnendrucke: tiefes Preussischblau, weisse Pflanzensilhouetten mit Schere, Kamm und Flaschen, und Drucke, die sich beim Scrollen entwickeln. Die neue Startseite lädt ausserdem 0.90 MB statt 92.16 MB.
- Kontext
- Sharmina Beauty Haven, ein Beautysalon in Cavite City, Philippinen.
- Meine Rolle
- Design, Frontend-Entwicklung und Bildproduktion
- Jahr
- 2026
Mein Redesign: vorher und nachher
Die alte Website neben meinem Design, in derselben Bildschirmgrösse.
Startseite
Aus einer pfirsichfarbenen Willkommenskarte mit Logo wurde ein blaupausenblauer erster Bildschirm: ein feiner Serifen-Titel mit kupferfarbenem Akzent neben einem Sonnendruck aus Farn, Schere, Kamm und Flasche.
Rechtliche Hinweise
Aus hellen Karten wurde ein cremefarbenes Band mit einer kurzen Zusammenfassung und einem Link zu jedem vollständigen Text.
Auf dem Handy
Das alte Handy-Layout war auf einem 390 px breiten Bildschirm 780 px breit. Jetzt passen Titel, zwei Knöpfe und der Sonnendruck auf den Bildschirm, die Besuchsliste bleibt immer im Kopfbereich.
Überblick
Sharmina Beauty Haven bietet in Cavite City Haar-, Haut-, Körper- und Nagelbehandlungen an. Die neue Website gibt jeder Behandlung einen eigenen Sonnendruck, einen ruhigen, handgemacht wirkenden Bildstil, der den Salon von austauschbaren Beautyfotos abhebt.
Das Problem
Die alte Startseite lud bei jedem Besuch 92.16 MB, davon 91.79 MB Bilder, was bei simulierten 10 Mbit/s 74.3 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, Schriften und Icons kamen von drei externen Hosts, und die Behandlungsfotos zeigten Gesichter und Marken Dritter.
Die Lösung
Ein Neubau ohne Framework in Preussischblau, Creme und Kupfer mit einer feinen, kontrastreichen Serifenschrift. Fünfzehn Behandlungen sind in fünf Gruppen geordnet (Haar, Haut, Körper, Nägel und Pakete), jede illustriert durch einen Druck, der sich beim Scrollen von blass zu vollem Blau entwickelt. Der Warenkorb heisst «My visit», und die Anfrageseite fragt nach Wunschtag und -zeit. Die Bilder sind komprimierte WebP-Dateien, die erst beim Scrollen laden, und die Schriften werden mit der Website ausgeliefert, sodass die Startseite ohne Anfragen an Dritte auskommt.
Screenshots
Aufgenommen an der echten, live geschalteten Website.
Mein Beitrag
Die neue Website gestaltet und gebaut, die Bilder erstellt und für das Web komprimiert, Besuchsliste und Anfrageseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Angebot in fünf Gruppen: Haar, Haut, Körper, Nägel und Pakete
- Fünfzehn Behandlungen, jede mit eigenem Sonnendruck
- Drucke, die sich beim Scrollen entwickeln, ohne Animation bei reduzierter Bewegung
- Warenkorb als «My visit», mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Anfrageseite mit Wunschtag und -zeit
- Anfrage als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst den Termin
- Prüfung der Felder auf der Anfrageseite, einschliesslich philippinischer Handynummern
- Hinweis im Angebot, dass die Bilder künstlerische Drucke und keine Fotos des Salons sind
- Änderungen in der Besuchsliste werden Screenreadern angesagt, strukturierte Daten vom Typ BeautySalon
Technische Herausforderungen
Ein Bildstil für fünfzehn Behandlungen
Beauty-Websites mischen oft Stockfotos in verschiedenen Stilen. Eine einzige Technik, der Sonnendruck, gibt jeder Behandlung denselben Ausdruck, sodass das Angebot wie eine ruhige Sammlung wirkt.
Anfragen ohne Backend
Die Website ist statisch und kann deshalb selbst keine Termine buchen. Die Anfrageseite prüft die Angaben und öffnet eine vollständige, vorausgefüllte E-Mail, die die Kundschaft abschickt. Sie erklärt auch, dass das Team den Termin zuerst bestätigt.
Beautybilder ohne Gesichter und Versprechen
Die alten Fotos zeigten Gesichter und Markenprodukte. Die Drucke zeigen nur Pflanzen und Werkzeuge, und das Angebot weist darauf hin, dass es künstlerische Drucke sind. So schaffen die Bilder Stimmung, ohne Ergebnisse oder fremde Marken zu zeigen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 92.16 → 0.90 MB
- Beim Laden am Handy
- 92.15 → 0.71 MB
- Nach Scrollen der ganzen Seite
- 92.16 → 1.23 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 74.3 → 0.56 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Behandlungen im Angebot
- 15
Ergebnisse
- Live unter sharminaglow.life.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.90 MB statt 92.16 MB, am Handy 0.71 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Eine eigenständige Bildtechnik kann mehr bewirken als ein grosses Fotobudget.
- Behandlungen lesen sich als Besuch besser denn als Warenkorb voller Produkte.
- Wenn Bilder Illustrationen sind, gehört das auf die Seite.
Zu dieser Fallstudie
Kunden-Website, mit Namen gezeigt. Screenshots und Messwerte stammen aus einem Aufnahmeskript, das auf der alten und der neuen Website lief, auf einem lokalen Server. Der Wert bei 10 Mbit/s beruht auf einer simulierten Verbindung und nicht auf Daten echter Besucher. Die Bilder sind generierte Illustrationen im Stil von Cyanotypie-Sonnendrucken, ohne Personen; es sind weder handgemachte Drucke noch Fotos des Salons, worauf die Website hinweist. Behandlungstexte und Kundenzitate auf der Website stammen von der alten Website. Der Untertitel des alten Logos ist im Screenshot der alten Startseite unkenntlich gemacht; das alte Behandlungsraster wird nicht gezeigt, weil es Gesichter und Marken Dritter abbildete.
Planen Sie eine neue Website, oder ist Ihre heutige zu langsam?
Beschreiben Sie Ihr Vorhaben in ein paar Sätzen. Innerhalb von zwei Arbeitstagen erhalten Sie Rückfragen, einen groben Lösungsansatz und eine Preisspanne in CHF.