Shop
Une constellation marchande flottante sur du marbre blanc
La boutique en ligne fonctionne selon un modèle « toile blanche», les produits étant affichés sous forme de grandes images incurvées plutôt que de grilles de vignettes. L'interface est d'une fluidité remarquable: rayons de 20 à 28 px, commandes en forme de pilule et un corps compact de 16 px (police GT Standard) avec un espacement négatif précis qui rend le texte net et gras. Le seul élément de couleur vive est un violet éclatant (#5433eb), présent dans le logo, le champ de résultats de recherche circulaire et sous forme d'ombre teintée sur le bouton correspondant. Le reste de la palette est neutre et chaud: surfaces blanches, toile grise subtile, bordures discrètes et texte presque noir. La densité reste compacte avec des marges de 12 px, mais les bandes principales et de catégories sont aérées grâce à un rythme vertical généreux de 64 à 80 px, donnant l'impression de naviguer sur Internet plutôt que de consulter un catalogue.
La largeur maximale est de 1200 px, centrée sur un canevas translucide #f2f4f5, avec une barre latérale fixe de 64 px de large à gauche contenant uniquement des icônes de navigation. L'élément principal est une bande pleine largeur, avec des fiches produits positionnées au-dessus d'un logo « boutique» violet centré, et une barre de recherche en forme de pilule juste en dessous. Les catégories sont disposées sur une seule ligne centrée sous la barre de recherche. Les sections de contenu (Femme, Homme, Beauté, Maison, Bébé et Enfant) suivent sous forme de bandes distinctes, chacune contenant une grille à 4 colonnes avec des images de produits ou une composition à 2 colonnes « élément principal et grille». L'espacement vertical est généreux: 64 à 80 px entre les sections principales. Le pied de page est une bande sombre en bas de la page avec des groupes de liens en forme de colonne. Les flèches de carrousel à droite des panneaux de produits horizontaux indiquent un contenu défilable sans pagination.
La photographie est l'élément visuel dominant: photos de produits en plein écran sur fond blanc, au format 1:1, et images lifestyle aux tons chauds et naturels (beige, terracotta, sauge, ivoire). Chaque image de produit possède sa propre couleur; l'interface utilisateur reste achromatique, laissant ainsi les nuances des produits apporter une variété visuelle. Les logos de la marque apparaissent en surimpression sur les images principales, claires ou foncées, plutôt que sous forme d'icônes individuelles. Dans la composition principale, les fiches produits sont disposées comme une constellation flottante, légèrement superposée au nom de la marque. Les icônes sont minimalistes et monochromes (contours noirs), à l'exception des icônes de catégorie, qui utilisent une seule couleur de la marque. Les images de produits ne comportent ni illustrations, ni effets 3D, ni dégradés.
Palette
Marque
- Shop Violet
#5433eb— Le bouton d'envoi, le texte en pointillés et le logo de la marque sont les seuls éléments qui soulignent l'action et l'individualité sur le fond blanc. - Violet Wash
#c0b5f3— Un halo translucide derrière le bouton d'envoi violet conserve son éclat sans changer de teinte.
Neutre
- Canvas Mist
#f2f4f5— Fond de page et traitement de surface supplémentaire derrière les cartes en relief. - Pure White
#ffffff— La surface principale pour les cartes, les champs de saisie, les panneaux flottants et les boutons en forme de pilule. - Ink Black
#000000— Texte principal, titres, icônes, symboles de navigation et fiches produits en mode sombre. - Faint Border
#ebebeb— Lignes de séparation fines sur les cartes, contours des champs de saisie et cadres de boutons en forme de pilule. - Muted Gray
#787574— Texte secondaire, étiquettes de navigation, contours des icônes lorsqu'elles sont inactives - Cool Stone
#cccccc— Espaces réservés, états désactivés et arrière-plans d'icônes inactifs
Typographie
de 11 à 16 px · 4 étapes
- GT Standard — remplacement: Inter · grandes lignes 400 · La police principale est utilisée pour toutes les tailles, aussi bien pour le corps du texte que pour les titres. GTStandard-MRegular (16 px / -0,031 em) est la police principale pour le corps du texte, les boutons et les étiquettes. GTStandard-MSemibold (20 px / -0,05 em) est utilisée pour plusieurs grands titres; GTStandard-MMedium (11-12 px) est utilisée pour les micro-légendes. Chaque variante de police est affichée avec une épaisseur optique de 400; la hiérarchie des polices est obtenue grâce à des dégradés subtils et un espacement négatif dense entre les lettres, plutôt qu’à un contraste marqué. C’est une signature stylistique: Shop ne mise pas sur le gras, mais structure le texte par l’espacement des lettres.
- Shopify Sans — remplacement: Inter · grandes lignes 400, 700 · Réservé aux messages système tels que les bannières de chargement d'applications et les textes de consentement aux cookies.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | moyenne |
| Étape de base | 12px |
| Rayon du bouton | 9999px |
| Rayon de la carte | 28px |
| Ombres | ombres douces |
| Entre les sections | 64px |
| Largeur de la page | 1200px |
L'IA construira votre site web dans le style Shop et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Cursor — Un atelier de parchemin chaleureux, éclairé par des braises incandescentes.
- Slush — univers gonflable d'autocollants sur papier pastel
- MindMarket — Un livre de contes de fées douillet sur papier crème – une toile éditoriale conviviale où de grands titres d'Inter et des personnages en papier découpé coexistent sur une surface douce comme un autocollant, baignée de soleil.
- Airbnb — Un mur de galerie blanc et paisible avec un seul marque-page rouge corail
- Superr — Un cahier d'écolier aux tons chauds, baigné par la douce lumière de l'après-midi. Une page couleur crème, un feutre orange sans capuchon et une pile d'étiquettes plastifiées avec nom, prêtes à être décollées.
- Apple (España) — La galerie du musée, baignée d'une douce lumière naturelle, est un espace blanc unique, captivant et immatériel, où chaque œuvre est éclairée par un projecteur sur un mur légèrement teinté.
- Lamborghini — Une voiture jaune, couleur noire, exposée dans la salle d'exposition sous les projecteurs.
- Amplemarket — Un lieu de travail baigné de soleil et jonché de confettis
- Getharvest — Un bureau à l'heure dorée – une toile couleur crème chaude, des cartes postales blanches accrochées à la toile et une unique flamme orange vif.
- Agence Foudre — La couverture du magazine est d'un rose tendre qui rappelle celui du rouge à lèvres.
- Drive Capital — Affiche rétro de road trip sur papier chaud
- Apple (España) — Vitrine blanche pour galerie