Fashion-Store-App-Design: Ein Redesign des Home Screens eines Bekleidungsshops, Vorher und Nachher

Eine Fashion-Store-App hat auf ihrem Home Screen genau eine Aufgabe: Lust auf die Kleidung machen. Der erste Entwurf unten stellt den Rabatt an die erste Stelle. Ein rotes Laufband zieht sich über den oberen Rand, sechs unterstrichene Links stehen darunter, und jede Produktkachel stapelt unter einem kleinen Foto einen Tag, Sterne, zwei Preise, Farbpunkte und einen Button.

Die Lösung behält jede Funktion und lässt die Kleidung den Sale tragen. Das Laufband wird zu einem randlosen Denim-Foto, darunter das Angebot in zwei Zeilen, der Header wird schlicht, und jede Kachel bekommt ein großes 3:4-Foto mit nur einem Preis.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Repariert

Links schreit alles mit derselben Lautstärke. Das Laufband ist rot, die Tags sind rot, die Preise sind rot und die Buttons sind schwarz, also hat das Auge keinen Startpunkt, und die Kleidung ist das Kleinste auf dem Screen.

Rechts ist die Reihenfolge klar: die Marke, wohin man will, das eine Angebot, dann die Produkte. Die Fotos sind größer, es gibt weniger Text, und Rot ist für ein einziges Wort reserviert: Sale.

Was sich geändert hat, gemessen

Fix 1: Verkaufe die Kleidung, nicht den Rabatt

Vorher

Nachher

Eine dünne rote Leiste in voller Breite mit weißen Versalien: Summer Sale, bis zu 50 Prozent Rabatt, plus kostenloser Versand, Code SUMMER50, gegenüber einem randlosen Foto einer getragenen Denim-Jacke mit The Denim Edit in großer Serifenschrift und Up to 50% off in Grau darunter.

Ein Laufband ist ein Banner, und Leute haben gelernt, Banner zu überspringen. Dieses trägt vier Botschaften mit 10 px: eine Saison, einen Rabatt, kostenlosen Versand und einen Code. Keine davon zeigt ein Kleidungsstück, also sieht jemand, der eine Fashion-App öffnet, zuerst ein Warnschild.

Die Lösung gibt dem Angebot ein Bild. Das Foto zeigt das Produkt an einem Menschen, ab dem Kinn abwärts zugeschnitten, damit die Jacke den Bildausschnitt füllt, ohne Radius und ohne Verlauf, damit es von Rand zu Rand läuft. Darunter erledigen zwei Textzeilen die Arbeit des Laufbands: ein 28-px-Name für die Kollektion und eine 14-px-Zeile für den Rabatt. Der Code und das Versandversprechen sind auf die Seite hinter dem Hero gewandert, wo jemand, der getippt hat, bereit ist, Bedingungen zu lesen.

Die Preisrechnung bleibt ehrlich. 178 $ minus 50 % sind 89 $, derselbe Preis wie im Entwurf.

Regel zum Wiederverwenden: Zeige, was verkauft wird, und benenne das Angebot in schlichtem Text darunter. Wenn das Foto ein Banner braucht, um es zu erklären, wähle ein besseres Foto.

Fix 2: Ein schlichter Header und Tabs, die zeigen, wo du bist

Vorher

Nachher

Ein linksbündiger Header mit Menü-Icon, der OLEA-Wortmarke, dann Suche, Herz und einer Tasche mit rotem Badge, über sechs unterstrichenen Links: Women, Men, Kids, New, Brands und einem roten Sale, gegenüber einem Header mit Menü-Icon links, einer großen zentrierten OLEA-Wortmarke und einer Tasche mit kleinem dunklem Badge, über Text-Tabs, bei denen Women dunkel und unterstrichen ist, Sale rot und der Rest grau, über den rechten Rand hinauslaufend.

Im Entwurf kämpfen vier Icons und eine Wortmarke um eine 364 px breite Zeile, und die sechs Links darunter sind alle unterstrichen. Eine Unterstreichung bedeutet „das ist der aktuelle“, sechs Unterstreichungen bedeuten also nichts. Es gibt überhaupt keinen ausgewählten Zustand.

Die Lösung tut zweierlei. Die Wortmarke wandert in die Mitte, in einer lesbaren Größe, und der Header schrumpft auf zwei Icons, weil Suche und Herz schon in der Tab-Leiste leben. Dann verlieren die Kategorien ihre Unterstreichungen, und die Unterstreichung bedeutet wieder genau eine Sache: Women ist dunkel mit Linie, die anderen sind grau, und Sale ist rot, weil es die einzige Kategorie ist, die keine Abteilung ist. Die Zeile läuft über den Rand, was zeigt, dass sie scrollt.

Regel zum Wiederverwenden: Lass eine Unterstreichung „du bist hier“ bedeuten und nutze Farbe einmal, für den Eintrag, der eine Flagge braucht.

Fix 3: Ein Foto, ein Preis

Vorher

Nachher

Eine Reihe aus drei Produktkacheln, jede mit einem kleinen Hochformatfoto einer Person in Denim-Jacke, einem roten Minus-50-Prozent-Tag, einem Herz, einem Namen mit 9 px, fünf goldenen Sternen mit Bewertung, einem roten Preis neben einem durchgestrichenen Preis, drei Farbpunkten und einem schwarzen Button IN DEN WARENKORB, gegenüber zwei größeren Kacheln mit einem Foto der Jacke selbst, einem Herz und einem Plus auf dem Foto, dem Namen, einem Preis und drei Farbmustern.

Eine Entwurfskachel enthält neun Dinge: Foto, Tag, Herz, Name, Sterne, Bewertung, zwei Preise, Punkte und einen Button. Bei 117 px Breite bekommt jedes nur ein paar Pixel, und das Foto ist der kleinste Teil. Gesichter füllen den Ausschnitt, das Produkt ist kaum zu sehen.

Die Lösung behält vier: Foto, Name, Preis und Farbmuster.

Das Foto misst 169 x 225, ein echtes 3:4, mit eckigen Ecken, und jedes ist auf das Kleidungsstück zugeschnitten, sodass die Denim-Textur das Bild ist. Das Herz bleibt auf dem Foto. „In den Warenkorb“ wird zu einem Plus in der Ecke des Fotos, die Funktion ist also einen Tipp entfernt, ohne schwarzen Balken unter jeder Kachel. Sterne und der zweite Preis wandern auf die Produktseite, wo die Käuferin schon entschieden hat, genauer hinzuschauen.

Zwei Fotos pro Reihe statt drei bedeuten außerdem, dass jeder Name bei 13 px in eine Zeile passt, und die Tab-Leiste schwebt über der nächsten Kachelreihe, sodass das Scrollen nie gegen eine Wand läuft.

Regel zum Wiederverwenden: Eine Kachel auf einer Listenseite beantwortet „gefällt es mir und was kostet es“. Alles andere gehört einen Tipp tiefer.

Die kleineren Fixes

• Jede Funktion bleibt erreichbar. „In den Warenkorb“ ist das Plus auf jedem Foto, Filter und Sortieren liegen hinter dem Schieberegler-Icon, die Suche ist der zweite Tab, das Menü bleibt oben links, Brands bleibt in der Kategorienzeile, und die anderen Produkte liegen weiter unten im Scroll.
• Gleichmäßige Ränder. Der Entwurf hat 14 px links und 12 rechts. Die Lösung nutzt 20 auf beiden Seiten und 10 zwischen den Blöcken.
• Weißer Grund, eine Tinte. Schwarzer Text auf Weiß ist die einzige UI-Farbe. Die Fotos liefern den Rest.
• Fotos auf Kleidung zugeschnitten. Jedes Bild ist übergroß und innerhalb eines Beschneidungsrahmens verschoben, damit die Jacke ihn füllt. Menschen sind auf den Fotos, aber das Kleidungsstück ist das Motiv.
• Eine ruhigere Tab-Leiste. Vier Icons in einer kleinen schwebenden Leiste ersetzen fünf Tabs mit Beschriftungen und gemischten gefüllten und Outline-Icons.
• Eine echte Typo-Skala. Der Text läuft von 13 bis 28 px, gegenüber 8 bis 15 px im Entwurf.

Prüfe deinen eigenen Store-Screen

Hol dir die Figma-Datei

Die kostenlose Datei enthält den Junior-Entwurf, den reparierten Screen und jedes Teil als Komponente.

Kostenlose Figma-Datei

Redesign des Home Screens eines Fashion-Shops, vorher und nachher

Beide Screens und jedes Teil als Figma-Komponente. Kostenlos, nur ansehen, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Wie sollte der Home Screen einer Fashion-Store-App gestaltet sein?

Beginne mit einem randlosen Foto des Produkts und setze das Angebot in zwei Textzeilen darunter. Darauf folgen schlichte Text-Kategorien, dann zweispaltige Kacheln mit großen 3:4-Fotos, einem Preis und ein paar Farbmustern darunter.

Welche Größe sollten Produktfotos in einer Bekleidungs-App haben?

Ein 3:4-Hochformat ist der Standard für Kleidung. Hier sind die Kacheln 169 x 225 px groß auf einem 390 px breiten Screen, zwei pro Reihe, mit eckigen Ecken und dem auf das Kleidungsstück zugeschnittenen Foto.

Sollte eine Fashion-App ein Sale-Banner zeigen?

Vermeide ein Banner, das kein Produkt zeigt. Ein Foto mit einer kurzen Angebotszeile darunter erledigt denselben Job, und das Rot kann auf einem Sale-Tab bleiben, damit der Rabatt leicht zu finden ist, ohne den Screen zu dominieren.

Wie viele Details sollte eine Produktkachel zeigen?

Vier reichen auf einer Listenseite: Foto, Name, Preis und Farbmuster. Bewertungen, der alte Preis und Größen gehören auf die Produktseite, und „In den Warenkorb“ kann ein Plus auf dem Foto sein.

Wie sollte die Kategorie-Navigation in einer Shopping-App aussehen?

Nutze Text-Tabs, einen unterstrichen für den aktuellen, Grau für den Rest und eine einzige Akzentfarbe für Sale. Lass die Zeile über den Bildschirmrand laufen, damit man sieht, dass sie scrollt.

Was sollte die Tab-Leiste einer Store-App enthalten?

Vier Icons reichen: Shop, Suche, Gemerktes und Profil. Die Tasche bleibt im Header, wo ihre Anzahl sichtbar ist.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die App OLEA, ihre Produkte und ihre Preise sind erfunden. Die Preise sind auf beiden Screens konsistent: 178 $ minus 50 % sind 89 $, und 118 $ minus 50 % sind 59 $.
• Untersuchtes Muster: die Fashion-Apps von Zara und SSENSE, mit weißem Grund, schlichtem Header, Text-Tabs, randlosem Hero und 3:4-Kacheln mit eckigen Ecken.
• Fotos von Pexels: der Hero von Thomas Nguka, die Jacken-Kachel von Arturo A und der Bleached Trucker von Kristina Polianskaia. Icons stammen von Phosphor (MIT).
• Zuerst als Karussell auf App Brainy veröffentlicht.