Websites
Sharvielle Retail Plaza: Redesign einer Boutique
Ein komplettes Redesign für eine Damenmode-Boutique auf den Philippinen, inszeniert als Theater: roter Samtvorhang, eine Kollektion in drei Akten und eine Bestellübersicht im Stil einer Eintrittskarte. Die neue Startseite lädt ausserdem 1.06 MB statt 69.77 MB.
- Kontext
- Sharvielle Retail Plaza, eine Damenmode-Boutique in Taguig 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 blau-goldenen Willkommenskarte wurde eine Premiere: ein feiner Serifen-Titel vor rotem Samtvorhang, eine Figur im Abendkleid in der Bühnenmitte und ein Knopf «Raise the curtain», der die Kollektion öffnet.
Kollektion
Aus einem Raster kleiner Produktkarten wurde «The collection, in three acts»: Laufstege zum Durchschieben, jeder Akt eine Stimmung, beginnend mit Akt I, La vie moderne.
Rechtliche Hinweise
Aus hellen Karten wurde ein dunkles bordeauxfarbenes 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 Bühne auf den Bildschirm, die Tasche bleibt immer im Kopfbereich.
Überblick
Sharvielle Retail Plaza verkauft in Taguig City Damenmode, von Alltagsblusen bis zur Abendgarderobe. Die neue Website präsentiert die Kollektion wie eine Vorstellung: Der Vorhang hebt sich, die Teile treten in drei Akten auf, und die Bestellung ist die Eintrittskarte.
Das Problem
Die alte Startseite lud bei jedem Besuch 69.77 MB, davon 69.39 MB Bilder, was bei simulierten 10 Mbit/s 56.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 tiefem Rot, Bordeaux und Creme mit einer feinen, kontrastreichen Serifenschrift. Eine kurze Vorhang-Animation eröffnet die Seite, die Kollektion läuft auf drei Laufstegen (Alltag, Abend und letzter Schliff), Kundenzitate werden zu Kritiken der Vorstellung, und die Bestellübersicht ist eine Eintrittskarte. 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
- Kollektion in drei Akten: La vie moderne, The evening edit und The finishing touch
- Laufstege zum Durchschieben per Knopf, Wischen oder Tastatur
- Kurze Vorhang-Animation beim Laden, die bei reduzierter Bewegung entfällt
- Bestellübersicht im Stil einer Eintrittskarte «Admit one»
- 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
- Telefonlink korrigiert: Die alte Website wählte eine andere Nummer als die angezeigte
- Änderungen in der Tasche werden Screenreadern angesagt, strukturierte Daten vom Typ ClothingStore
Technische Herausforderungen
Eine Vorstellung ohne Wartezeit
Eine Eröffnungsanimation steht schnell im Weg. Der Vorhang ist in weniger als zwei Sekunden offen, der Inhalt dahinter ist bereits geladen, und wer reduzierte Bewegung bevorzugt, sieht sie gar nicht.
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.
Eine Bühne, die kein echter Ort ist
Das Theater ist eine visuelle Idee und kein Veranstaltungsort, Models und Teile sind Illustrationen. Die Kollektion weist darauf hin, dass die Fotos Illustrationen sind, so schafft das Konzept Stimmung, ohne eine echte Vorstellung oder echte Ware vorzutäuschen.
Verifizierter Stack
- HTML
- CSS
- JavaScript
- WebP
- JSON-LD structured data
Fakten aus dem Code
- Gewicht der Startseite beim Laden
- 69.77 → 1.06 MB
- Beim Laden am Handy
- 69.76 → 1.12 MB
- Nach Scrollen der ganzen Seite
- 69.77 → 1.40 MB
- Vollständig geladen (simuliert, 10 Mbit/s)
- 56.3 → 0.69 s
- Layoutbreite am Handy (390-px-Bildschirm)
- 780 → 390 px
- Produkte in der Kollektion
- 15
Ergebnisse
- Live unter sharvielleshop.online.
- Mit demselben Skript gemessen: Die Startseite lädt am Desktop 1.06 MB statt 69.77 MB, am Handy 1.12 MB.
- Während des Aufnahmelaufs keine fehlgeschlagenen Anfragen und keine Konsolenfehler auf der neuen Website.
Erkenntnisse
- Eine Animation verdient ihren Platz nur, wenn sie kurz ist und übersprungen werden kann.
- Eine Kollektion nach Stimmung zu gruppieren lässt ein kleines Sortiment kuratiert wirken.
- 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 Theaterbühne ist ein visuelles Konzept, kein echter Ort; 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.