Websites
Jolivane Fashion Boutique: Redesign einer Boutique
Ein komplettes Redesign für eine Modeboutique auf den Philippinen: tiefes Indigo, ein riesiger Schriftzug wie auf einem Modemagazin und ein Schneidermassband am Seitenrand. Die neue Startseite lädt ausserdem 0.99 MB statt 44.47 MB.
- Kontext
- Jolivane Fashion Boutique, eine Kleiderboutique in Parañaque 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 rosafarbenen Verlaufskarte wurde ein Magazin-Cover: ein riesiger Schriftzug auf tiefem Indigo, eine Figur im geblümten Kleid und ein Massband am Seitenrand.
Kollektion
Aus Reihen kleiner Produktkarten wurde eine redaktionelle Doppelseite, mit grossen Bildern in versetzten Grössen und einer handgeschriebenen Beschriftung bei jedem Look.
Rechtliche Hinweise
Aus weissen Karten wurde ein ruhiges Band in Indigo mit kursiven Titeln und einem klaren Link zu jedem vollständigen Text.
Auf dem Handy
Schriftzug und Figur bleiben auch auf dem hohen Bildschirm das Cover, die beiden Hauptaktionen folgen als breite Knöpfe darunter.
Überblick
Jolivane Fashion Boutique verkauft Freizeitmode, Büro-Outfits und Accessoires und nimmt in Parañaque City Massanfertigungen entgegen. Die neue Website präsentiert das Geschäft wie ein Modelabel: grosse Schrift, wenige Worte und die Kleidung im Zentrum jedes Bildschirms.
Das Problem
Die alte Startseite lud bei jedem Besuch 44.47 MB, davon 44.10 MB Bilder, was bei simulierten 10 Mbit/s 35.9 Sekunden dauerte. Auf einem 390 px breiten Handybildschirm war das Layout 780 px breit, und die kartenbasierte Vorlage glich vielen anderen Shops statt einem Modelabel.
Die Lösung
Ein Neubau ohne Framework rund um eine Idee aus der Schneiderwerkstatt: tiefer Indigostoff, ein Massband am Seitenrand, feine kontrastreiche Schrift und handgeschriebene Beschriftungen. 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 Stücke in einem redaktionellen Layout, mit Bildern in versetzten Grössen
- Riesiger Schriftzug, der am Desktop die Figur im Titelbild überlappt
- Massband am Seitenrand als Erkennungszeichen der Website
- Eigener Bereich für Massanfertigungen neben der Kollektion
- Warenkorb mit Mengensteuerung und dem Hinweis, dass noch nichts zu bezahlen ist
- Bestellung als vorausgefüllte E-Mail, die die Kundschaft selbst abschickt, das Geschäft bestätigt zuerst Farbe, Grösse und Verfügbarkeit
- Prüfung der Felder auf der Bestellseite, einschliesslich philippinischer Handynummern
- Tastaturbedienung im Warenkorb, Unterstützung für reduzierte Bewegung und strukturierte Daten vom Typ ClothingStore
Technische Herausforderungen
Modebilder ohne echte Models
Die Looks sind generierte Illustrationen, so aufgebaut, dass keine erkennbaren Gesichter erscheinen. Die Website sagt direkt über der Kollektion, dass es keine Fotos ihrer Ware oder Models sind.
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 Geschäft zuerst Farbe, Grösse und Verfügbarkeit bestätigt.
Ein dramatisches Cover, das leicht bleibt
Ein Vollbild-Titelbild ist oft der schwerste Teil einer Seite. Eigene Titelbilder und Bilder, die erst beim Scrollen laden, halten die Startseite am Handy bei 0.54 MB beim Laden und 1.48 MB nach vollständigem Scrollen (am Desktop 1.64 MB).
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 44.47 → 0.99 MB
- Beim Laden am Handy
- 44.47 → 0.54 MB
- Nach Scrollen der ganzen Seite
- 44.47 → 1.64 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 35.9 → 0.60 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte im Katalog
- 15
Ergebnisse
- Live unter jolivanestyle.shop.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 0.99 MB statt 44.47 MB, am Handy 0.54 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Startseite.
Erkenntnisse
- Eine einzige Idee aus dem Handwerk des Kunden kann ein ganzes Design tragen.
- In der Mode verkaufen weniger Worte und grössere Bilder mehr.
- 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 Modebilder sind generierte Illustrationen ohne erkennbare Gesichter und keine Fotos echter Models oder Ware, worauf die Website hinweist.
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.