Websites
Mavira Style Boutique: Redesign einer Modeboutique
Ein komplettes Redesign für eine Modeboutique auf den Philippinen, gestaltet als Plattenhülle der 1970er-Jahre: Magenta und Orange in Wellen, ein Shop mit Seite A und Seite B und jedes Teil nummeriert wie ein Track. Die neue Startseite lädt ausserdem 0.77 MB statt 41.23 MB.
- Kontext
- Mavira Style Boutique, eine Modeboutique in Dasmariñas, 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 weissen Willkommenskarte mit Logo wurde ein Plattencover: ein kräftiger Retro-Titel in einem magentafarbenen Bogen, eine Tänzerin im senfgelben Kleid vor orangen Wellen und ein Knopf «Play Side A», der den Shop öffnet.
Shop
Aus einem Raster blasser Produktkarten wurde «Side A: Wear»: grosse Bilder auf warmen Streifen, ein Preisaufkleber auf jedem Teil und Tracknummern ab A1.
Rechtliche Hinweise
Aus hellen Karten wurde ein cremefarbenes Band mit einer kurzen Zusammenfassung und einem Link zu jedem vollständigen Text.
Auf dem Handy
Bogen und Titel füllen den ersten Bildschirm mit zwei breiten Knöpfen, die Tasche bleibt im Kopfbereich.
Überblick
Mavira Style Boutique verkauft in Dasmariñas, Cavite, Alltagsmode und Accessoires. Die neue Website behandelt den Laden wie eine Schallplatte: ein Cover, zwei Seiten, eine Trackliste und Liner Notes.
Das Problem
Die alte Startseite lud bei jedem Besuch 41.23 MB, davon 40.88 MB Bilder, was bei simulierten 10 Mbit/s 33.3 Sekunden dauerte. Schriften und Icons kamen von drei externen Hosts, und die Kartenvorlage sah aus wie bei vielen anderen Shops.
Die Lösung
Ein Neubau ohne Framework in Magenta, Orange und Senfgelb mit einer kräftigen Retro-Titelschrift. Kleidung liegt auf Seite A, Taschen und Accessoires auf Seite B, jedes Teil ist wie ein Track nummeriert, und Kundenzitate werden zu Liner Notes. 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, Tasche und Bestellseite neu aufgebaut und die alte und neue Version mit demselben Skript gemessen.
Funktionen
- Shop in zwei Seiten: Seite A für Kleidung, Seite B für Taschen und Accessoires
- Fünfzehn Produkte, jedes mit Tracknummer, Preisaufkleber und Bestand
- Knopf «Play Side A» auf dem ersten Bildschirm, der direkt zum Shop führt
- Kundenzitate als Liner Notes
- Tasche 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 Grösse, Farbe und Verfügbarkeit
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Hinweis im Shop, dass die Fotos Illustrationen sind und vom Teil abweichen können
- Änderungen in der Tasche werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ ClothingStore
Technische Herausforderungen
Eine Platte, die trotzdem ein Laden ist
Die Albumidee durfte dem Einkaufen nicht im Weg stehen. Tracknummern und Seiten beschriften nur den Katalog, Preis, Bestand und Knopf stehen bei jedem Teil an derselben Stelle.
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 Grösse und Verfügbarkeit bestätigt.
Laute Farben, leichte Seite
Ein kräftiges, bildstarkes Design wird schnell schwer. Komprimierte Bilder, ein eigenes Titelbild fürs Handy und Bilder, die erst beim Scrollen laden, halten die Startseite am Handy bei 0.59 MB beim Laden und 0.83 MB nach vollständigem Scrollen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 41.23 → 0.77 MB
- Beim Laden am Handy
- 41.22 → 0.59 MB
- Nach Scrollen der ganzen Seite
- 41.23 → 0.99 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 33.3 → 0.54 s
- Drittanbieter-Hosts beim Laden
- 3 → 0
- Produkte im Shop
- 15
Ergebnisse
- Live unter mavirawardrobe.shop.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.77 MB statt 41.23 MB, am Handy 0.59 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Ein starkes Konzept wirkt am besten als Beschriftung und Layout, nicht als Hindernis.
- Ein gemischtes Sortiment in zwei Seiten aufzuteilen macht es leichter zu durchstöbern.
- 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 markenloser Artikel, worauf die Website hinweist. Die Kundenzitate auf der Website stammen von der alten Website. Der Name der Inhaberschaft 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.