Explorer
KNOW-PAT-172

E-commerce — Patterns pour boutiques et marques

Domaine
web-uiux
Type
pattern
Priorité
P2

Parent : [[INDEX-WEB-UIUX]]

E-commerce — Patterns pour boutiques et marques

Patterns de fiche produit, panier, checkout, et storytelling de marque. Extrait du corpus Godly (32 sites classifiés).

Quand utiliser cette fiche

  • L'utilisateur demande un site dans le domaine : ecommerce
  • Mots-clés détectés : ecommerce, shop, product, brand, checkout

Références visuelles (top sites)

Site URL Views
KidSuper World https://kidsuper.world 31 640
Spring/Summer https://springsummer.dk 30 808
Bigpicture Company https://www.bpco.kr 22 123
099 https://099.supply 20 100
Samara https://www.samara.com 19 992
Fora https://www.fora-concept.com 6 326
Coco https://www.getcoco.com 4 991
Berner Kühl https://bernerkuhl.com 4 729
Fallen Grape https://www.fallengrape.com 4 687
de Bijenkorf https://admireamaze.debijenkorf.nl 4 608
D.S. & DURGA https://www.dsanddurga.com 4 483
Matthew Fisher https://collection-ii.mfisher.com 4 482
HARDCLO https://hardclo.com 4 456
Cowboy https://cowboy.com 4 439
WOUQ https://wearewouq.com 3 612

Patterns observés (scraping de 5 sites)

Layout

  • Hero section : 80% des sites
  • CTA visible : 80% des sites
  • Grid layout : 80% des sites
  • Dark mode : 20% des sites
  • Sections moyennes : 0.6 par page

Typographie

  • Fonts body : __abcDiatypeMono_811167 (1x), Montreal (1x), Helvetica Neue (1x), Soehne Mono (1x), regola-book (1x)
  • Fonts headings : regola-light (31x), Grotesk (13x), Montreal (9x), Supply (3x), Soehne Mono (3x)

Couleurs dominantes

  • Backgrounds : rgb(255, 255, 255) (2x), rgb(222, 220, 211) (1x), rgb(0, 0, 0) (1x)
  • Texte : rgb(0, 0, 0) (2x), rgb(254, 57, 57) (1x), rgb(18, 18, 18) (1x), rgb(16, 16, 16) (1x)
  • Boutons (bg) : rgb(0, 150, 247) (4x), rgb(255, 255, 255) (3x), rgb(255, 64, 0) (1x)

Composants récurrents

  • Hero avec titre principal + sous-titre
  • Section features / bénéfices
  • Témoignages / social proof
  • Pricing / CTA final
  • Footer avec liens et newsletter

Animations

  • Hover effects sur boutons et liens
  • Scroll-triggered reveals
  • Parallax et micro-interactions
  • Transitions fluides entre sections

Anti-patterns à éviter

  • Ne pas copier un design sans adapter au contexte client.
  • Éviter les layouts surchargés qui nuisent à la lisibilité.
  • Toujours tester le responsive.

Méthode d'extraction