Aperçu du projet
Pour le site Shopyy de StocksKick, nous avons organisé les pages autour des collections de chaussures et du choix des tailles. De grandes bannières créent la première impression, puis des icônes de service et des grilles par catégorie conduisent aux modèles. L’interface noire et blanche, les photos généreuses et les fiches régulières relient découverte, comparaison du catalogue et consultation des produits.
| Services | Secteur | Plate-forme |
| Conception et développement de sites Shopyy | Chaussures et sacs | Shopyy |
| Besoins du projet | Marché cible | Style de design |
| Présentation des collections et choix des tailles | Boutique en anglais avec prix en dollars américains | Interface noire et blanche, grandes bannières de chaussures et fiches ordonnées |
| Devis du projet | Livrables | Délai |
| CNY 6,700 | Accueil, structure des catégories, fiches produits, mise en page adaptative, pages de marque et de contact | 14 jours |
Défi de conception
Un site de chaussures doit présenter formes et coloris tout en gardant le choix des tailles clair. Nous avons séparé bannières, comparaison du catalogue, photos et options afin que l’expression visuelle et les décisions pratiques disposent chacune de leur espace.
Stratégie : collections de chaussures et choix des tailles
Les grandes bannières introduisent les collections ; les icônes de service et les grilles de catégories conduisent au choix. L’accueil oriente, les catégories permettent de comparer et les fiches précisent apparence et caractéristiques. Navigation et liens de contenu relient ces niveaux.
Poppins structure titres, navigation et texte ; taille, graisse et largeur des paragraphes établissent la hiérarchie. Noir et blanc, grandes photos et fiches régulières parcourent les pages principales. Les informations liées restent proches, avec davantage d’espace entre sections pour distinguer images, explications et actions.
Animation et fonctions au service du choix
Les bannières d’accueil défilent automatiquement et les catégories de l’en-tête ouvrent les différents catalogues. Les fiches conservent des miniatures sous plusieurs angles, des boutons de taille groupés et des informations dépliables. Ces interactions facilitent changement d’image, comparaison et lecture dans une interface noire et blanche hiérarchisée.
Accueil : la bannière de chaussures exprime la collection
Une bannière horizontale domine le premier écran ; logo, recherche et catégories restent bien alignés. La grande photo et le titre forment le centre visuel. Le cadre noir et blanc met les coloris de la collection en valeur.
Poppins garde titres et navigation épurés. Recherche et icônes suivent une ligne horizontale. Le premier écran laisse respirer la collection ; les détails se développent dans les pages suivantes.
Produits d’accueil : séparer services et sélection
Sous la bannière, messages de service et produits font passer de la collection aux modèles. Icônes et phrases brèves composent un bandeau léger ; les fiches utilisent des images, noms et prix réguliers pour faciliter la comparaison.
Fond blanc et colonnes fixes limitent les distractions, avec des espaces égaux entre images. Une pause entre titres et fiches sépare les informations de service et les produits.
Catégorie : comparer formes et coloris
La catégorie présente plusieurs colonnes, avec photos, noms et prix dans le même ordre. Les silhouettes occupent assez d’espace pour une première comparaison visuelle des coloris.
Texte noir, fond clair et espacements réguliers organisent les fiches. Les outils du catalogue sont séparés des produits pour affiner le choix avant de consulter les tailles.
Fiche produit : grande photo et matrice de tailles
La grande photo de la chaussure rouge est à gauche ; titre, prix et tailles à droite. Des boutons de même largeur forment une matrice avec les correspondances US et EU directement dans la sélection.
La photo montre forme et matière ; graisse et espacement différencient titre, prix et tailles. Les boutons noirs et blancs maintiennent l’attention sur le modèle et ses options.
Bas de fiche : plusieurs angles et informations dépliables
La photo principale et les miniatures restent visibles ; à droite figurent tailles, quantité, achat, Detail et Customer Reviews. Angles de vue et explications sont voisins, puis viennent les recommandations de chaussures.
Les miniatures partagent un petit format ; lignes fines et signes plus/moins distinguent les volets. De larges espaces entre photos et texte rendent lisibles les caractéristiques denses.
Page de marque : des sous-titres pour les textes longs
Une page dédiée présente la marque, avec des sous-titres pour transactions, produits et services. Elle conserve l’en-tête de la boutique et réserve l’espace central à la lecture.
La graisse de Poppins distingue sous-titres et corps, avec des espaces entre paragraphes. Le découpage thématique permet de trouver l’information puis de revenir au catalogue par l’en-tête.
Contact : horaires et canaux réunis
La page énumère horaires, e-mail et WhatsApp. Une structure verticale simple réunit ces renseignements au même endroit, évitant de chercher dans plusieurs zones du pied de page.
Texte aligné à gauche et espaces entre groupes facilitent la lecture. En-tête et pied de page restent ceux de la boutique ; le contenu privilégie clarté et légèreté.
Fiche mobile : image, nom puis tailles
Sur mobile, la photo prend toute la largeur disponible, suivie du nom, du prix et des options. Les colonnes deviennent une séquence verticale afin de laisser de la place aux photos et aux tailles.
Titres clairs et espacements relient l’image aux informations. Les boutons gardent le noir et blanc de l’ordinateur : le visiteur confirme le modèle avant de chercher sa taille.
Bilan : relier la collection aux informations pratiques
Chez StocksKick, collections et tailles guident une interface noire et blanche, de grandes photos et des fiches ordonnées sur l’accueil, les catégories et les produits. L’image exprime le thème, le texte détaille et les accès au catalogue et aux options permettent d’avancer. Le mobile conserve cet ordre pour une expérience cohérente.
Concevez un site Shopyy clair pour votre marque
Présentez votre site actuel, vos éléments de marque et les pages nécessaires. Nous étudierons produits, marché et priorités éditoriales pour définir ensemble pages, visuels et fonctions adaptés.
