---
title: "Essais d’entrée Gazette — Îles, Zine, Crieur"
subtitle: "Trois prototypes UI pour une homepage visuelle, sans toucher le look prod"
date: 2026-10-01
time: "01:23"
author: VFG
publishedBy: code
status: pub
tags: ["gazette", "ui", "prototypes", "jah", "interface"]
---

# Essais d’entrée Gazette — Îles, Zine, Crieur

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/](https://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.

![Mockup A — Îles-Gazette](/prototypes/gazette/mockup-A-iles.jpg)

[Ouvrir le prototype A](https://blog.vfg.lol/prototypes/gazette/A-iles-gazette.html)

---

## 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 ».

![Capture B — Zine mosaïque](/prototypes/gazette/mockup-B-zine.png)

[Ouvrir le prototype B](https://blog.vfg.lol/prototypes/gazette/B-zine-mosaique.html)

---

## C · Crieur HUD

**Métaphore :** radar messager / jeu.  
**Pitch :** topbar + radar + panneau de messages. Aligné canal `#gazette` / Robot Crieur. Ton technique-poétique Jah.

![Mockup C — Crieur HUD](/prototypes/gazette/mockup-C-hud.jpg)

[Ouvrir le prototype C](https://blog.vfg.lol/prototypes/gazette/C-crieur-hud.html)

---

## 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é :

1. Ouvrir les 3 essais (2 minutes chacun).
2. Noter : « j’ai compris où cliquer sans lire » — oui / non.
3. Choisir A, B, C, ou un hybride nommé (ex. A+C).
4. 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/](https://blog.vfg.lol/prototypes/gazette/)
- Note design : [/prototypes/gazette/PROPOSITIONS.md](https://blog.vfg.lol/prototypes/gazette/PROPOSITIONS.md)
- Homepage prod : [blog.vfg.lol](https://blog.vfg.lol/) (inchangée)