Explorer
KNOW-PAT-169

Portfolio — Patterns pour sites personnels et créatifs

Domaine
web-uiux
Type
pattern
Priorité
P2

Parent : [[INDEX-WEB-UIUX]]

Portfolio — Patterns pour sites personnels et créatifs

Patterns de présentation de travaux, galerie de projets, et identité personnelle en ligne. Extrait du corpus Godly (106 sites classifiés).

Quand utiliser cette fiche

  • L'utilisateur demande un site dans le domaine : portfolio
  • Mots-clés détectés : portfolio, personal, creative, gallery, showcase

Références visuelles (top sites)

Site URL Views
Daniel Sun https://danielsun.space 39 509
Pedro Duarte https://ped.ro 24 223
Max Yinger https://yinger.dev 23 659
Opal Camera Inc. https://opalcamera.com 22 098
JP https://www.jp.works 21 345
Carl Beaverson https://carlbeaverson.com 13 409
Maciej Zadykowicz https://www.maciej.co 13 035
Mike Matas https://mikematas.com 12 760
Regis Grumberg https://www.regisgrumberg.com 12 353
Christopher Ireland https://christopherireland.net 11 311
Andreas Antonsson https://www.andreasantonsson.dev 10 887
Mr. Pops https://mrpops.ua/en/ 9 743
iconwerk https://www.iconwerk.com 9 249
Misuko https://misuko.be 8 657
ARVIN LEEUWIS https://arvinleeuwis.xyz 8 641

Patterns observés (scraping de 11 sites)

Layout

  • Hero section : 73% des sites
  • CTA visible : 64% des sites
  • Grid layout : 64% des sites
  • Dark mode : 27% des sites
  • Sections moyennes : 4.2 par page

Typographie

  • Fonts body : Times New Roman (2x), __arbeitContrast_bf3c9f (1x), Die Grotesk C (1x), Ppneuemontreal (1x), Replica-Regular (1x)
  • Fonts headings : Replica-Mono (23x), Replica-Regular (22x), Lab Grotesque (15x), Dahlia (7x), Playfair Display (4x)

Couleurs dominantes

  • Backgrounds : rgb(255, 255, 255) (2x), rgb(0, 0, 0) (2x), rgb(17, 17, 17) (1x), rgb(18, 19, 15) (1x), rgb(10, 10, 10) (1x)
  • Texte : rgb(0, 0, 0) (4x), rgb(255, 255, 255) (3x), rgb(228, 223, 218) (1x), rgb(51, 51, 51) (1x), rgb(170, 170, 170) (1x)
  • Boutons (bg) : rgb(56, 58, 66) (4x), rgb(32, 32, 32) (2x), rgb(255, 255, 255) (2x), rgb(253, 253, 253) (2x), rgb(243, 243, 243) (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