Websites
Katrielle Glow Studio: Redesign eines Beautyshops
Ein komplettes Redesign für einen Beauty- und Hautpflegeshop auf den Philippinen: eine ruhige Seite in Steinfarben, Glasflaschen mit einer feinen Linie aus Regenbogenlicht und das Sortiment als Pflegeroutine in vier Schritten. Die neue Startseite lädt 0.24 MB statt 17.95 MB, die leichteste dieser Reihe.
- Kontext
- Katrielle Glow Studio, ein Beauty- und Hautpflegeshop in Marikina 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 schwarz-gelben Verlaufskarte wurde ein ruhiger erster Bildschirm: ein grosser Serifen-Titel mit handschriftlichem Akzent, eine Serumflasche und ein Tiegel auf warmem Stein und eine feine Regenbogenlinie, wo das Licht durch das Glas fällt.
Rechtliche Hinweise
Aus dunklen Karten wurde ein helles 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 das Produkt-Stillleben auf den Bildschirm, der Warenkorb bleibt immer im Kopfbereich.
Überblick
Katrielle Glow Studio verkauft aus Marikina City Hautpflege-, Körperpflege- und Haarprodukte. Die neue Website ist bewusst ruhig: ein Material, ein Lichteffekt und eine Routine, die zeigt, womit man beginnt.
Das Problem
Die alte Startseite lud bei jedem Besuch 17.95 MB, davon 17.58 MB Bilder, was bei simulierten 10 Mbit/s 14.5 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, Schriften und Icons kamen von drei externen Hosts, und die Produktfotos zeigten Marken Dritter.
Die Lösung
Ein Neubau ohne Framework in Stein, Creme und Schwarz mit einer eleganten Serifenschrift und einem handschriftlichen Akzent. Die fünfzehn Produkte sind als Routine in vier Schritten geordnet, Reinigen, Pflegen, Schützen und Farbe sowie Körper und Haar, Kundenzitate erscheinen als «Glowing reviews», und die Bestellübersicht heisst «Your routine». Eine feine Spektrallinie, wie Licht durch Glas, ist der einzige Schmuck. 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, Warenkorb und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Fünfzehn Produkte als Routine in vier Schritten: Reinigen, Pflegen, Schützen und Farbe sowie Körper und Haar
- Produkt-Stillleben mit neutraler Verpackung statt Fotos mit Fremdmarken
- Eine feine Spektrallinie als einziges Schmuckelement
- Bestellübersicht mit dem Titel «Your routine»
- Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Team bestätigt zuerst die Verfügbarkeit
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Hinweis im Shop, dass die Fotos Illustrationen sind und vom Produkt abweichen können
- Änderungen im Warenkorb werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ HealthAndBeautyBusiness
Technische Herausforderungen
Die leichteste Seite der Reihe
Ein zurückhaltendes Design ist auch ein leichtes. Mit wenigen, gut komprimierten Bildern und ohne externe Schriften oder Icons lädt die Startseite am Desktop und am Handy 0.24 MB, nach vollständigem Scrollen 0.44 MB.
Bestellen ohne Backend
Die Website ist statisch und kann deshalb selbst keine Bestellung auslösen. Die Bestellseite prüft die Angaben und öffnet eine vollständige, vorausgefüllte E-Mail, die die Kundschaft abschickt. Sie erklärt auch, dass das Team zuerst die Verfügbarkeit bestätigt.
Eigene Bilder statt Fremdmarken
Die alten Produktfotos zeigten Verpackungen anderer Marken. Die neuen Stillleben verwenden neutrale Verpackungen, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. So suggeriert die Seite keine Produkte oder Partnerschaften mehr, die nicht zum Geschäft gehören.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 17.95 → 0.24 MB
- Beim Laden am Handy
- 17.95 → 0.24 MB
- Nach Scrollen der ganzen Seite
- 17.95 → 0.44 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 14.5 → 0.37 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Shop
- 15
Ergebnisse
- Live unter katriellebeauty.site.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop und am Handy 0.24 MB statt 17.95 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Ein Material und ein Lichteffekt können eine ganze Marke tragen.
- Eine Routine zeigt, wo man anfangen soll; ein Raster tut das nicht.
- 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 Produkt- und Szenenbilder sind generierte Illustrationen mit neutraler Verpackung und ohne Personen, worauf die Website hinweist. Produkttexte und Kundenzitate auf der Website stammen von der alten Website. In den Screenshots der alten Startseite sind eine Ortsangabe und ein Personenname unkenntlich gemacht; das alte Produktraster wird nicht gezeigt, weil es 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.