Parent : [[INDEX-WEB-UIUX]]
Agency — Patterns pour agences et studios créatifs
Patterns de présentation de services, case studies, équipe, et culture studio. Extrait du corpus Godly (96 sites classifiés).
Quand utiliser cette fiche
- L'utilisateur demande un site dans le domaine : agency
- Mots-clés détectés : agency, studio, creative, branding, showcase
Références visuelles (top sites)
| Site | URL | Views |
|---|---|---|
| Motto | https://wearemotto.com | 19 692 |
| reboot | https://reboot.studio | 18 352 |
| Two Create Studio | https://www.twocreate.com | 15 664 |
| Unseen Studio | https://unseen.co | 14 850 |
| Concrete Club Studio | https://concreteclub.studio | 13 803 |
| OFFICE | https://offficestud.io | 12 268 |
| Locomotive | https://locomotive.ca/en | 12 251 |
| Traffic Productions | https://www.traffic.productions | 11 480 |
| OHM | https://ohm.studio | 10 939 |
| 247Studio | https://www.247studio.co | 10 022 |
| EPIC Agency | https://www.epic.net | 9 363 |
| Dash Digital Studio | https://dashdigital.studio | 9 157 |
| Build in Amsterdam | https://www.buildinamsterdam.com | 7 664 |
| The Craftsmen Agency | https://www.thecraftsmen.tech | 6 970 |
| Dala | https://dala.craftedbygc.com | 6 578 |
Patterns observés (scraping de 9 sites)
Layout
- Hero section : 44% des sites
- CTA visible : 22% des sites
- Grid layout : 33% des sites
- Dark mode : 11% des sites
- Sections moyennes : 2.0 par page
Typographie
- Fonts body : system-ui (1x), __inter_d4f92f (1x), PP Neue Montreal (1x), Neue Montreal (1x), HelveticaNeue-Light (1x)
- Fonts headings : HelveticaNowDisplay (7x), Suisse (4x), system-ui (3x), PP Neue Montreal (3x), Neue Montreal (2x)
Couleurs dominantes
- Backgrounds : rgb(249, 247, 244) (1x), rgb(17, 17, 17) (1x)
- Texte : rgb(0, 0, 0) (5x), rgb(49, 49, 49) (1x), rgb(12, 12, 12) (1x), rgb(254, 254, 254) (1x), rgb(21, 21, 21) (1x)
- Boutons (bg) : Variées
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
- Source : godly.website
- Date : 2026-06-13
- Sites analysés : 96