Gladyne Beauty Studio: Redesign eines Beauty-Studios

Gladyne Beauty Studio bietet in Bulusan, Sorsogon, nahe dem Bulusan-See und dem Vulkan Bulusan, Beauty- und Spa-Behandlungen an und verkauft Pflegeprodukte für Gesicht, Körper und Haar. Die neue Website nimmt ihre Stimmung aus dieser Landschaft: Nebel, Moos und Vulkangestein.

Die alte Startseite lud bei jedem Besuch 21.46 MB, fast nur grosse PNG-Bilder, was bei simulierten 10 Mbit/s 17.4 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, und die Seite machte Aussagen, die das Studio nicht belegen konnte.

Ein Neubau ohne Framework in Moos, Vulkanasche, Creme und Bernstein, mit einer Serifen-Titelschrift und einer klaren serifenlosen Schrift. Im ersten Bildschirm blendet das Foto von rechts unter ziehendem Nebel ein, während eine einzige Linie den Vulkangrat zeichnet. Die Produkte stehen in Bogenrahmen, und ein Schmetterling aus dem Logo fliegt beim Hinzufügen vom Produkt zum Warenkorb. 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.

Die neue Website gestaltet und gebaut, die Bilder erstellt und für das Web komprimiert, die Nebel- und Schmetterlingsanimation entwickelt, Warenkorb und Bestellseite neu aufgebaut, die Texte auf Aussagen geprüft und die alte und neue Version mit demselben Skript gemessen.

• Titelbild, das unter ziehendem Nebel einblendet, mit einer Linie, die den Vulkangrat zeichnet
• Produkte in Bogenrahmen, in Bereichen wie «For the face»
• Schmetterling aus dem Logo, der beim Hinzufügen zum Warenkorb fliegt
• Hausetikett auf jedem Produkt aus dem eigenen Logo des Studios, ohne Marken Dritter
• Zwei unbestätigte Aussagen der alten Website entfernt: eine Zeile zur Mehrwertsteuer-Registrierung und eine zu Zulassung und Vorschriften
• 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 Verfügbarkeit, Lieferung und Summe
• Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
• Die beiden ursprünglichen Kundenzitate wörtlich übernommen

• HTML
• CSS
• JavaScript
• WebP
• JSON-LD structured data

Gewicht der Startseite beim Laden

21.46 → 1.48 MB

Beim Laden am Handy

21.46 → 1.34 MB

Nach Scrollen der ganzen Seite

21.46 → 2.16 MB

Vollständig geladen (simuliert, 10 Mbit/s)

17.4 → 0.77 s

Layoutbreite am Handy (390-px-Bildschirm)

780 → 390 px

Produkte im Shop

15

• →Live unter gladynestudio.site.
• →Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.48 MB statt 21.46 MB, am Handy 1.34 MB.
• →Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen, keine Konsolenfehler und keine Anfragen an Dritte auf der neuen Website.

• Das stärkste Konzept kommt oft vom Ort selbst.
• Aussagen entfernen, die das Geschäft nicht belegen kann.
• Wenn Bilder Illustrationen sind, gehört das auf die Seite.

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 ohne Personen; die Produkte tragen ein Hausetikett aus dem eigenen Logo des Studios, ohne Marken Dritter, und der Shop weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte, Öffnungszeiten und die beiden Kundenzitate auf der Website stammen von der alten Website. Im Screenshot der alten Startseite ist der Name der Gründerin oder des Gründers unkenntlich gemacht.