Websites
Rosavelle Beauty Lounge: Redesign eines Beautysalons
Ein komplettes Redesign für einen Beautysalon auf den Philippinen, gehängt wie eine Kunstgalerie: tiefviolette Wände, jede Behandlung ein Stillleben im Goldrahmen und vier Räume, die beim Durchgehen aufleuchten. Die neue Startseite lädt ausserdem 1.22 MB statt 88.13 MB.
- Kontext
- Rosavelle Beauty Lounge, ein Beautysalon in General Trias City, Cavite, 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 rosa Willkommenskarte wurde eine Galeriewand: ein goldener Serifen-Titel auf tiefem Violett neben gerahmten Stillleben mit Orchideen, mit Knöpfen zu den Behandlungen und zur Geschichte.
Behandlungen
Aus einem Raster kleiner Karten wurde «Now showing in the lounge»: das Angebot als Ausstellung in vier Räumen, Haut und Körper, Hände und Füsse, Haar und Make-up.
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 breite Knöpfe und ein gerahmtes Stillleben auf den Bildschirm, die Besuchsliste bleibt immer im Kopfbereich.
Überblick
Rosavelle Beauty Lounge bietet in General Trias City, Cavite, Gesichtsbehandlungen, Nägel, Haare und Make-up an. Die neue Website behandelt das Angebot wie eine Ausstellung: Jede Behandlung hängt in einem eigenen Rahmen, und man geht von Raum zu Raum.
Das Problem
Die alte Startseite lud bei jedem Besuch 88.13 MB, davon 87.76 MB Bilder, was bei simulierten 10 Mbit/s 71.0 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, und Schriften und Icons kamen von drei externen Hosts.
Die Lösung
Ein Neubau ohne Framework in tiefem Violett, Gold und Creme mit einer kontrastreichen Serifenschrift. Die fünfzehn Behandlungen hängen als gerahmte Stillleben in vier Räumen, und die Rahmen jedes Raums leuchten auf, sobald er ins Bild scrollt. Der Warenkorb heisst «My visit», die Anfrageseite fragt nach Wunschtag und -zeit, und die Kundenzitate stammen aus dem Gästebuch. 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 als Ausstellung in vier Räumen: Haut und Körper, Hände und Füsse, Haar und Make-up
- Fünfzehn Behandlungen als gerahmte Stillleben, jede mit Preis und Knopf zum Hinzufügen
- Rahmen, die aufleuchten, sobald ein Raum ins Bild scrollt, 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 statt Lieferadresse
- 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 Illustrationen und keine Fotos des Salons sind
- Änderungen in der Besuchsliste werden Screenreadern angesagt, strukturierte Daten vom Typ BeautySalon
Technische Herausforderungen
Ein Behandlungsangebot, kein Produktshop
Die alte Website verkaufte Behandlungen wie Pakete, mit Bestand und Lieferung. Der neue Ablauf spricht von einem Besuch: Man wählt Behandlungen, nennt eine Wunschzeit, und das Team bestätigt den Termin.
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
Beautybilder suggerieren schnell Ergebnisse. Die Galerie zeigt Stillleben aus Blumen, Werkzeugen und Stoffen ohne Personen, und das Angebot weist darauf hin, dass es Illustrationen sind. So schaffen die Bilder Stimmung, ohne Ergebnisse zu zeigen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 88.13 → 1.22 MB
- Beim Laden am Handy
- 88.13 → 1.05 MB
- Nach Scrollen der ganzen Seite
- 88.13 → 2.01 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 71.0 → 0.80 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Behandlungen im Angebot
- 15
Ergebnisse
- Live unter rosavelleglow.life.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.22 MB statt 88.13 MB, am Handy 1.05 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Behandlungen lesen sich als Besuch besser denn als Warenkorb voller Produkte.
- Eine starke Metapher kann auch das Angebot ordnen: Räume machen fünfzehn Behandlungen überschaubar.
- 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 Stillleben ohne Personen, und die Galerie ist ein visuelles Konzept, kein echter Ort; die Website weist darauf hin, dass die Bilder Illustrationen sind. Behandlungstexte und Kundenzitate auf der Website stammen von der alten Website. Der Name der Gründerperson im Screenshot der alten Startseite ist unkenntlich gemacht.
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.