Parent : [[INDEX-WEB-UIUX]]
Editorial — Patterns pour blogs et magazines
Patterns de lisibilité, typographie, mise en page article, et navigation par catégories. Extrait du corpus Godly (7 sites classifiés).
Quand utiliser cette fiche
- L'utilisateur demande un site dans le domaine : editorial
- Mots-clés détectés : editorial, blog, magazine, content, readability
Références visuelles (top sites)
| Site | URL | Views |
|---|---|---|
| Kons | https://kons.fyi | 29 956 |
| Threads | https://threads.net | 29 218 |
| Pam | https://thisispam.com | 28 993 |
| Threads | https://threads.com | 4 350 |
| Marina Abramović: Traces | https://wepresent.wetransfer.com/story/marina-abramovic-traces | 805 |
| Fuse | https://fuse.blog | 713 |
| Books Read By | https://booksread.by | 534 |
Patterns observés (scraping de 3 sites)
Layout
- Hero section : 33% des sites
- CTA visible : 33% des sites
- Grid layout : 33% des sites
- Dark mode : 0% des sites
- Sections moyennes : 1.3 par page
Typographie
- Fonts body : Inter (1x), system-ui (1x), PPKyoto (1x)
- Fonts headings : PPKyoto (2x), Inter (1x), system-ui (1x), OT Neue Montreal (1x)
Couleurs dominantes
- Backgrounds : rgb(250, 250, 250) (1x)
- Texte : rgb(0, 0, 0) (2x), rgba(255, 255, 255, 0.96) (1x)
- Boutons (bg) : rgb(0, 0, 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
- Source : godly.website
- Date : 2026-06-13
- Sites analysés : 7