Explorer
KNOW-PAT-168

SaaS Product — Patterns pour applications et outils

Domaine
web-uiux
Type
pattern
Priorité
P2

Parent : [[INDEX-WEB-UIUX]]

SaaS Product — Patterns pour applications et outils

Patterns de landing page, onboarding, pricing, et interfaces produit pour applications SaaS. Extrait du corpus Godly (130 sites classifiés).

Quand utiliser cette fiche

  • L'utilisateur demande un site dans le domaine : saas-product
  • Mots-clés détectés : saas, product, app, landing, onboarding, pricing

Références visuelles (top sites)

Site URL Views
Augen https://augen.pro 63 172
Reflect https://reflect.app/home 47 336
10x Designers https://10xdesigners.co 45 131
Roasted https://roasted.design 40 730
AuthKit https://authkit.com 40 366
Metalab https://metalab.com 35 252
Status https://status.app 31 704
Endless https://endless.design 29 563
Evervault: Customers https://evervault.com/customers 29 507
Swag https://swagapp.com 28 602
Amie https://amie.so 26 298
Umbrel https://umbrel.com 26 127
Shuttle https://shuttle.zip 25 393
Tatem https://tatem.com 22 467
Height https://height.app 21 865

Patterns observés (scraping de 23 sites)

Layout

  • Hero section : 57% des sites
  • CTA visible : 48% des sites
  • Grid layout : 57% des sites
  • Dark mode : 13% des sites
  • Sections moyennes : 3.3 par page

Typographie

  • Fonts body : Inter (4x), PP Neue Montreal (2x), Times New Roman (2x), Inter V (1x), Arial (1x)
  • Fonts headings : Inter (15x), TT Hoves Light (15x), PP Neue Montreal (14x), AeonikPro (12x), Roobert (10x)

Couleurs dominantes

  • Backgrounds : rgb(255, 255, 255) (4x), rgb(0, 0, 0) (3x), rgb(239, 239, 239) (1x), rgb(3, 0, 20) (1x), rgb(5, 6, 15) (1x)
  • Texte : rgb(0, 0, 0) (11x), rgb(255, 255, 255) (4x), rgb(15, 16, 18) (1x), rgb(223, 225, 244) (1x), rgba(255, 255, 255, 0.95) (1x)
  • Boutons (bg) : rgba(186, 186, 186, 0.2) (5x), rgb(255, 255, 255) (3x), rgba(84, 57, 255, 0.16) (2x), rgba(193, 241, 0, 0) (2x), rgba(252, 252, 252, 0.08) (2x)

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