Design d'app de boutique de mode : refonte de l'écran d'accueil d'un magasin de vêtements, avant et après

Une app de boutique de mode a un seul travail sur son écran d'accueil : donner envie des vêtements. Le premier jet ci-dessous met la remise en premier. Un bandeau défilant rouge court en haut, six liens soulignés sont dessous, et chaque tuile produit empile une étiquette, des étoiles, deux prix, des pastilles de couleur et un bouton sous une petite photo.

La correction garde chaque fonction et laisse les vêtements porter la promo. Le bandeau devient une photo denim plein cadre avec l'offre en deux lignes dessous, l'en-tête devient sobre, et chaque tuile reçoit une grande photo 3:4 avec un seul prix.

L'écran entier, avant et après

Brouillon junior

Corrigé

À gauche, tout crie au même volume. Le bandeau est rouge, les étiquettes sont rouges, les prix sont rouges et les boutons sont noirs : l'œil ne sait pas par où commencer, et les vêtements sont la chose la plus petite de l'écran.

À droite, l'ordre est clair : la marque, où aller, l'unique offre, puis les produits. Les photos sont plus grandes, il y a moins de textes, et le rouge est réservé à un seul mot, Sale.

Ce qui a changé, en chiffres

Correction 1 : vendre les vêtements, pas la remise

Avant

Après

Une fine barre rouge pleine largeur avec des capitales blanches indiquant Soldes d'été, jusqu'à 50 pour cent, plus livraison gratuite, code SUMMER50, face à une photo plein cadre d'une veste en jean portée avec The Denim Edit en grande serif et Jusqu'à 50 % en gris dessous.

Un bandeau défilant est une bannière, et les gens ont appris à ignorer les bannières. Celui-ci porte quatre messages à 10 px : une saison, une remise, la livraison gratuite et un code. Aucun ne montre un vêtement, donc quelqu'un qui ouvre une app de mode voit d'abord une étiquette d'avertissement.

La correction donne une image à l'offre. La photo montre le produit porté, recadrée sous le menton pour que la veste remplisse le cadre, sans arrondi ni dégradé pour aller d'un bord à l'autre. Dessous, deux lignes de texte font le travail du bandeau : un nom de collection à 28 px et une ligne de remise à 14 px. Le code et la promesse de livraison sont passés sur la page derrière le hero, où quelqu'un qui a tapé est prêt à lire les conditions.

Le calcul des prix reste honnête. 178 $ moins 50 % font 89 $, le même prix que dans le brouillon.

Règle à réutiliser : montrez ce qui est à vendre et nommez l'offre en texte simple dessous. Si la photo a besoin d'une bannière pour s'expliquer, choisissez une meilleure photo.

Correction 2 : un en-tête sobre et des onglets qui montrent où l'on est

Avant

Après

Un en-tête aligné à gauche avec une icône de menu, le logotype OLEA, puis recherche, cœur et un panier avec un badge rouge, au-dessus de six liens soulignés, Women, Men, Kids, New, Brands et un Sale rouge, face à un en-tête avec une icône de menu à gauche, un grand logotype OLEA centré et un panier avec un petit badge sombre, au-dessus d'onglets texte où Women est foncé avec un soulignement, Sale est rouge, et les autres sont gris, débordant du bord droit.

Dans le brouillon, quatre icônes et un logotype se disputent une seule ligne de 364 px, et les six liens dessous sont tous soulignés. Un soulignement veut dire « c'est celui-ci le courant », donc six soulignements ne veulent rien dire. Il n'y a aucun état sélectionné.

La correction fait deux choses. Le logotype passe au centre à une taille lisible, et l'en-tête tombe à deux icônes, car la recherche et le cœur vivent déjà dans la barre d'onglets. Ensuite, les catégories perdent leurs soulignements, et le soulignement retrouve un seul sens : Women est foncé avec un trait, les autres sont gris, et Sale est rouge parce que c'est la seule catégorie qui n'est pas un rayon. La ligne déborde du bord, ce qui indique qu'elle défile.

Règle à réutiliser : laissez un soulignement signifier « vous êtes ici » et n'utilisez la couleur qu'une fois, pour l'élément qui mérite un drapeau.

Correction 3 : une photo, un prix

Avant

Après

Une rangée de trois tuiles produit, chacune avec une petite photo en portrait d'une personne en veste en jean, une étiquette rouge moins 50 pour cent, un cœur, un nom à 9 px, cinq étoiles dorées avec une note, un prix rouge à côté d'un prix barré, trois pastilles de couleur et un bouton noir ADD TO CART, face à deux tuiles plus grandes avec une photo de la veste seule, un cœur et un plus sur la photo, le nom, un prix et trois pastilles de couleur.

Une tuile du brouillon contient neuf éléments : photo, étiquette, cœur, nom, étoiles, note, deux prix, pastilles et un bouton. À 117 px de large, chacun reçoit quelques pixels, et la photo est la partie la plus petite. Les visages remplissent le cadre, donc le produit se voit à peine.

La correction en garde quatre : photo, nom, prix et pastilles.

La photo fait 169 x 225, un vrai 3:4, avec des coins carrés, et chacune est recadrée sur le vêtement, donc la texture du denim est l'image. Le cœur reste sur la photo. Ajouter au panier devient un plus dans le coin de la photo, donc la fonction est à un tap sans barre noire sous chaque tuile. Les étoiles et le second prix passent sur la fiche produit, où l'acheteur a décidé de regarder de plus près.

Deux photos par rangée au lieu de trois permettent aussi que chaque nom tienne sur une ligne à 13 px, et la barre d'onglets flotte au-dessus de la rangée de tuiles suivante pour que le défilement ne heurte jamais un mur.

Règle à réutiliser : une tuile sur une page de liste répond à « est-ce que ça me plaît et combien ça coûte ». Tout le reste se trouve un tap plus loin.

Les petites corrections

• Chaque fonction reste accessible. Ajouter au panier est le plus sur chaque photo, Filtrer et Trier sont derrière l'icône de curseurs, la recherche est le deuxième onglet, le menu reste en haut à gauche, Brands reste dans la ligne de catégories, et les autres produits sont plus bas dans le défilement.
• Marges égales. Le brouillon a 14 px à gauche et 12 à droite. La correction utilise 20 des deux côtés et 10 entre les blocs.
• Fond blanc, une seule encre. Du texte noir sur blanc est la seule couleur de l'interface. Les photos apportent le reste.
• Photos recadrées sur les vêtements. Chaque image est surdimensionnée et décalée dans un cadre de découpe pour que la veste le remplisse. Il y a des gens sur les photos, mais le vêtement est le sujet.
• Une barre d'onglets plus calme. Quatre icônes dans une petite barre flottante remplacent cinq onglets avec libellés et icônes pleines et contour mélangées.
• Une vraie échelle typographique. Le texte va de 13 à 28 px, contre 8 à 15 px dans le brouillon.

Auditez votre propre écran de boutique

Récupérer le fichier Figma

Le fichier gratuit contient le brouillon junior, l'écran corrigé et chaque élément sous forme de composant.

Fichier Figma gratuit

Refonte de l'écran d'accueil d'une boutique de mode, avant et après

Les deux écrans et chaque élément en composant Figma. Gratuit, en lecture seule, dupliquez-le dans vos brouillons.

Ouvrir dans Figma

FAQ

Comment concevoir l'écran d'accueil d'une app de boutique de mode ?

Ouvrez avec une photo plein cadre du produit et mettez l'offre en deux lignes de texte dessous. Enchaînez avec des catégories en texte simple, puis des tuiles sur deux colonnes avec de grandes photos 3:4, un seul prix et quelques pastilles de couleur sous chacune.

Quelle taille pour les photos produit dans une app de vêtements ?

Un portrait 3:4 est le standard pour les vêtements. Ici, les tuiles font 169 x 225 px sur un écran de 390 px, deux par rangée, avec des coins carrés et la photo recadrée sur le vêtement.

Une app de mode doit-elle afficher une bannière de promo ?

Évitez une bannière qui ne porte aucun produit. Une photo avec une courte ligne d'offre dessous fait le même travail, et le rouge peut rester sur un onglet Sale pour que la remise soit facile à trouver sans dominer l'écran.

Combien de détails une tuile produit doit-elle montrer ?

Quatre suffisent sur une page de liste : photo, nom, prix et pastilles de couleur. Les avis, l'ancien prix et les tailles appartiennent à la fiche produit, et Ajouter au panier peut être un plus sur la photo.

À quoi doit ressembler la navigation par catégories dans une app d'achat ?

Utilisez des onglets texte avec un seul souligné pour montrer le courant, du gris pour le reste et une seule couleur d'accent pour Sale. Laissez la ligne déborder du bord de l'écran pour que l'on voie qu'elle défile.

Que doit contenir la barre d'onglets d'une app de boutique ?

Quatre icônes suffisent : boutique, recherche, favoris et profil. Le panier reste dans l'en-tête, où son compteur est visible.

Sources

• Les deux écrans sont les nôtres, conçus et mesurés dans Figma. L'app, OLEA, ses produits et ses prix sont inventés. Les prix sont cohérents sur les deux écrans : 178 $ moins 50 % font 89 $, et 118 $ moins 50 % font 59 $.
• Modèle étudié : les apps de mode de Zara et SSENSE, avec un fond blanc, un en-tête sobre, des onglets texte, un hero plein cadre et des tuiles 3:4 aux coins carrés.
• Photos de Pexels : le hero par Thomas Nguka, la tuile veste par Arturo A, et le Bleached Trucker par Kristina Polianskaia. Les icônes viennent de Phosphor (MIT).
• D'abord publié en carrousel sur App Brainy.