Trois directions pour une homepage visuelle : progressive disclosure, clusters illustrés, zéro mur de texte au premier viewport. La prod n’a pas encore changé — seulement des essais sous /prototypes/gazette/.
Hub live : blog.vfg.lol/prototypes/gazette/
A · Îles-Gazette
Métaphore : carte / archipel.
Pitch : chaque série est une île colorée ; les titres s’ouvrent au clic (drawer). Ton ludique, chaleureux, compatible Jah par groupes.
B · Zine mosaïque
Métaphore : numéro de magazine.
Pitch : masthead + tuiles couverture plein cadre ; panneau latéral pour la liste. Ton éditorial, punchy — le meilleur essai « vitrine web pure ».
C · Crieur HUD
Métaphore : radar messager / jeu.
Pitch : topbar + radar + panneau de messages. Aligné canal #gazette / Robot Crieur. Ton technique-poétique Jah.
Comparaison rapide
| A Îles | B Zine | C Crieur | |
|---|---|---|---|
| Premier viewport | Îles + 1 phrase | Masthead + tuiles | Topbar + radar |
| Disclosure | Drawer dans l’île | Panneau latéral | Messages dans le panneau |
| Ton | Ludique | Éditorial | HUD Jah |
| Risque | « Trop jeu » | Dense mobile | Sembler « outil » |
Recommandation
Priorité 1 — hybrider A (structure) + accents C (Jah) : garder l’archipel / clusters illustrés comme modèle mental lecteur, et emprunter à C le vocabulaire Crieur (canal, messages) pour le rendu dans Jah.
B reste le meilleur essai magazine si l’on veut que le blog crie couverture avant messagerie.
Ordre de validation proposé :
- Ouvrir les 3 essais (2 minutes chacun).
- Noter : « j’ai compris où cliquer sans lire » — oui / non.
- Choisir A, B, C, ou un hybride nommé (ex. A+C).
- Seulement alors brancher le template landing réel (sandbox / look-poc comme filet).
Sinon ? (si une direction échoue)
| Si… | Alors… |
|---|---|
| A trop « cartoon » | B, ou A désaturée (îles plates) |
| B trop print / agressif | A, ou Sinon D : pile actuelle + un bandeau clusters au-dessus de la liste |
| C trop HUD / geek | C seulement pour embed Jah / PWA ; web public = A ou B |
| Clusters flous sans covers | Sinon E : générer des covers avant toute refonte chrome |
| Zéro nouvelle route HTML | Sinon F : look-poc.css + strip séries enrichi (déjà dans le code) |
| Sibling UI PWA avance déjà | Ne pas merger CSS — traiter ces essais comme brief design |
Liens
- Hub : /prototypes/gazette/
- Note design : /prototypes/gazette/PROPOSITIONS.md
- Homepage prod : blog.vfg.lol (inchangée)