Websites
Mayrelle Apparel Boutique: Redesign einer Kleiderboutique
Ein komplettes Redesign für eine Kleiderboutique auf den Philippinen, gerahmt von Capiz-Fenstern: Rundbogenrahmen mit Gittern aus Muschelscheiben, Kleidungsstücke auf Schneiderpuppen dahinter und Fensterflügel, die sich beim Scrollen öffnen. Die neue Startseite lädt ausserdem 1.19 MB statt 31.26 MB.
- Kontext
- Mayrelle Apparel Boutique, eine Kleiderboutique in Imus 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 blauen Verlaufskarte mit Logo wurde ein Schaufenster: ein Serifen-Titel mit olivgrünem Schriftzug auf Creme und ein Kleid auf einer Schneiderpuppe hinter einem Capiz-Rundbogenfenster.
Kollektion
Aus einem Raster kleiner Produktkarten wurde «Explore our collection»: jedes Teil hinter einem eigenen Capiz-Rundbogenfenster, gruppiert für sie, für ihn sowie für Kinder und alle.
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 das Capiz-Fenster auf den Bildschirm, der Warenkorb bleibt immer im Kopfbereich.
Überblick
Mayrelle Apparel Boutique verkauft in Imus City, Cavite, Alltags- und Anlassmode für Frauen, Männer und Kinder. Die neue Website greift ein vertrautes philippinisches Detail auf: das Capiz-Fenster, hinter dem jedes Teil in einem eigenen Rahmen steht.
Das Problem
Die alte Startseite lud bei jedem Besuch 31.26 MB, davon 30.89 MB Bilder, was bei simulierten 10 Mbit/s 25.3 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 Creme, dunklem Holzbraun und Oliv mit einer klassischen Serifenschrift und einem Schriftzug-Akzent. Jedes Produkt steht hinter einem Capiz-Rundbogenfenster in drei Gruppen, und die Fensterflügel öffnen sich, sobald sie ins Bild scrollen. 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
- Kollektion in drei Gruppen: für sie, für ihn sowie für Kinder und alle
- Fünfzehn Produkte, jedes hinter einem eigenen Capiz-Rundbogenfenster
- Fensterflügel, die sich beim Scrollen öffnen, ohne Animation bei reduzierter Bewegung
- 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 Grösse, Farbe und Verfügbarkeit
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Hinweis in der Kollektion, dass die Fotos Illustrationen sind und vom Teil abweichen können
- Änderungen im Warenkorb werden Screenreadern angesagt, strukturierte Daten vom Typ ClothingStore
Technische Herausforderungen
Ein lokales Detail als Rahmen für alles
Capiz-Fenster sind auf den Philippinen sofort erkennbar. Derselbe Rundbogenrahmen für jedes Produkt gibt dem Katalog einen ruhigen Rhythmus, sodass fünfzehn verschiedene Teile als eine Kollektion wirken.
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.
Bewegung, die das Produkt nie verdeckt
Die Flügel öffnen sich als kleine Enthüllung, das Produkt dahinter ist aber bereits geladen, und wer reduzierte Bewegung bevorzugt, sieht die Fenster von Anfang an offen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 31.26 → 1.19 MB
- Beim Laden am Handy
- 31.25 → 1.29 MB
- Nach Scrollen der ganzen Seite
- 31.26 → 1.96 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 25.3 → 0.74 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Shop
- 15
Ergebnisse
- Live unter mayrellefashion.shop.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.19 MB statt 31.26 MB, am Handy 1.29 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Ein vertrautes lokales Detail lässt einen kleinen Laden verwurzelt wirken.
- Ein wiederholter Rahmen macht aus einem gemischten Sortiment eine Kollektion.
- 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 ohne Personen, und das Capiz-Fenster ist ein visuelles Konzept, nicht der echte Laden; die Website weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte 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.