Websites
Micara Fashion House: Redesign eines Kleidergeschäfts
Ein komplettes Redesign für ein Kleidergeschäft auf den Philippinen, rund um eine Wäscheleine: warme orange Wände, Kleidungsstücke an der Leine für sie, für ihn und für Kinder, und eine Bestellübersicht, die wie ein Kleideretikett hängt. Die neue Startseite lädt ausserdem 0.75 MB statt 32.66 MB.
- Kontext
- Micara Fashion House, ein Kleidergeschäft in Caloocan 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 rosa Verlaufskarte mit Logo wurde eine sonnige Wand: ein warmer Serifen-Titel auf Orange und eine Reihe Alltagskleider an der Wäscheleine, mit klaren Knöpfen zum Shop und zu mehr Informationen.
Shop
Aus einem Raster kleiner Produktkarten wurde «Fresh off the line»: Teile auf Bügeln an einer gezeichneten Wäscheleine, gruppiert für sie, für ihn, für Kinder und Teenager und für 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 die Wäscheleine auf den Bildschirm, der Warenkorb bleibt immer im Kopfbereich.
Überblick
Micara Fashion House verkauft aus Caloocan City Alltagskleidung für Frauen, Männer und Kinder und nimmt Sammelbestellungen für Teams an. Die neue Website nimmt ihr Aussehen vom einfachsten Bild frischer Kleidung: einer Leine mit Teilen, die in der Sonne trocknen.
Das Problem
Die alte Startseite lud bei jedem Besuch 32.66 MB, davon 32.29 MB Bilder, was bei simulierten 10 Mbit/s 26.4 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 warmem Orange, Terrakotta und tiefem Grün mit einer weichen Serifen-Titelschrift. Der Katalog hängt in vier Gruppen an Wäscheleinen, ein kurzer Abschnitt lädt zu Sammelbestellungen für Teams ein, Kundenzitate erscheinen als Stimmen von der Strasse, und die Bestellübersicht ist ein hängendes Kleideretikett. 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
- Katalog an Wäscheleinen in vier Gruppen: für sie, für ihn, für Kinder und Teenager und für alle
- Fünfzehn Produkte auf Bügeln, jedes mit Preis, Bestand und Knopf zum Hinzufügen
- Abschnitt für Sammelbestellungen, für Teams, die einheitlich eingekleidet werden sollen
- Bestellübersicht im Stil eines hängenden Kleideretiketts
- 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 im Shop, dass die Fotos Illustrationen sind und vom Teil abweichen können
- Änderungen im Warenkorb werden Screenreadern angesagt, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ ClothingStore
Technische Herausforderungen
Ein einfaches Bild, das einen ganzen Laden trägt
Eine Wäscheleine ist sofort vertraut und passt zu Alltagskleidung. Die Leine wird pro Gruppe einmal gezeichnet, so ordnet sie den Katalog, ohne Bilder oder Gewicht hinzuzufügen.
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.
Neue Bilder, ehrlich gekennzeichnet
Die eigenen Fotos des Geschäfts wurden nicht verwendet, jedes Produktbild ist eine generierte Illustration. Der Shop weist darauf hin, und die Fallstudie stellt die neuen Bilder nicht als Fotos der ursprünglichen Stücke dar.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 32.66 → 0.75 MB
- Beim Laden am Handy
- 32.66 → 0.70 MB
- Nach Scrollen der ganzen Seite
- 32.66 → 1.26 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 26.4 → 0.52 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Shop
- 15
Ergebnisse
- Live unter micarastyle.store.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.75 MB statt 32.66 MB, am Handy 0.70 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Das vertrauteste Bild ist bei Alltagsprodukten oft das stärkste Konzept.
- Nach Zielgruppe zu gruppieren hilft, den eigenen Bereich schnell zu finden.
- 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, und die Wäscheleine ist ein visuelles Konzept; die Website weist darauf hin, dass die Fotos Illustrationen sind. Produkttexte und Kundenzitate auf der Website stammen von der alten Website.
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.