Aller au contenu
wasabi web designDevis gratuit

Étude de cas · Refonte + direction artistique

BlockInfos : un média crypto tenu comme un registre

Un média crypto en français, riche de plus de cent articles, dont l’apparence ne disait rien de son sérieux. Refondu autour de ce qu’est une blockchain : un grand livre où chaque bloc est daté, numéroté et relié au précédent.

Le site BlockInfos affiché sur un ordinateur portable
Projet
BlockInfos, média crypto
Prestation
Refonte + direction artistique
Mise en ligne
Octobre 2026
Stack
WordPress · Etch + ACSS
Lighthouse ordinateur
100Sur les quatre catégories, page d’accueil
Défaut de contraste
0Sur 239 textes contrôlés
Visuels créés
130Un collage par article et par fiche

01 Point de départ

Le défi

BlockInfos explique la crypto au grand public : guides pas à pas, actualité, dossiers sécurité. Mais le site ne reflétait pas ce sérieux. Des images disparates, pop art, photos et logos, revenaient d’un article à l’autre ; chaque article chargeait des images de 1 920 pixels sans version adaptée à l’écran, environ 1,1 Mo par page ; la recherche affichait le texte brut du premier résultat.

  • Des images disparates, réutilisées d’un article à l’autre
  • Environ 1,1 Mo d’images par article
  • Une recherche qui affichait du texte brut

02 Direction artistique « Registre »

La blockchain comme grand livre.

Une blockchain est un registre : des blocs datés, numérotés, enchaînés les uns aux autres. Le site adopte la même logique. Chaque article porte son numéro de bloc, l’actualité se lit comme une chaîne, les métadonnées s’écrivent en caractères à chasse fixe, comme dans un explorateur de blocs. Les titres en Archivo élargi rappellent le logo sans le copier.

La palette

  • Menthe#00E5A8Accent, liens, boutons
  • Registre#0C0E0DFond du site
  • Bloc#171B19Cartes et tableaux
  • Encre claire#ECEEE9Texte
  • Orange Bitcoin#F5A13DRubrique Bitcoin
  • Corail#FF7A66Sécurité et hacks

Les typographies

  • Archivo · Titres

    Graisse 100 à 900 · chasse 62 à 125 %

  • JetBrains Mono · Métadonnées

    Chasse fixe, comme un explorateur de blocs

Le décodeur

Chaque fonction du site a trouvé son objet. En petit, ce qu’elle fait ; en gros, ce qu’elle est devenue.

  • Détail du site BlockInfos : la chaîne de blocs Détail du site BlockInfos : la chaîne de blocs
    Sur le site · Les derniers articles La chaîne de blocs Chaque article est un bloc : numéro, date, rubrique, temps de lecture, relié au suivant par un maillon.
  • Détail du site BlockInfos : le dernier bloc Détail du site BlockInfos : le dernier bloc
    Sur le site · L’article à la une Le dernier bloc L’article mis en avant porte son numéro de bloc, comme la dernière entrée du registre.
  • Détail du site BlockInfos : les étapes numérotées Détail du site BlockInfos : les étapes numérotées
    Sur le site · Le parcours Crypto 101 Les étapes numérotées Six lectures dans l’ordre, du lexique au staking, pour partir de zéro.
  • Détail du site BlockInfos : le livre de comptes Détail du site BlockInfos : le livre de comptes
    Sur le site · Le registre des hacks 2026 Le livre de comptes Chaque exploit majeur, daté et chiffré, avec une barre à l’échelle des montants dérobés.
  • Détail du site BlockInfos : le mot du jour Détail du site BlockInfos : le mot du jour
    Sur le site · Le lexique Le mot du jour Un terme mis en avant, et un abécédaire vers plus de 80 définitions.
  • Détail du site BlockInfos : l’index Détail du site BlockInfos : l’index
    Sur le site · Les rubriques L’index Les rubriques en grands caractères, avec leur nombre d’articles, comme l’index d’un registre.
  • Détail du site BlockInfos : l’en-tête du bloc Détail du site BlockInfos : l’en-tête du bloc
    Sur le site · Un article L’en-tête du bloc Rubrique, numéro de bloc, dates et durée de lecture en chasse fixe, sommaire numéroté.
  • Détail du site BlockInfos : les blocs illustrés Détail du site BlockInfos : les blocs illustrés
    Sur le site · Une rubrique Les blocs illustrés 130 visuels neufs dans un même style collage, un par article et par fiche.

03 La visite

Visitez le site, page par page

Choisissez une page : elle s’affiche en entier, sur ordinateur et sur téléphone. Faites défiler chaque écran pour la parcourir.

Page à afficher
Accueil du site BlockInfos sur ordinateur, capture de la page entière
Accueil du site BlockInfos sur téléphone, capture de la page entière

Accueil. Du dernier bloc au registre des hacks : l’accueil se lit comme un explorateur de blocs.

Article du site BlockInfos sur ordinateur, capture de la page entière
Article du site BlockInfos sur téléphone, capture de la page entière

Article. En-tête en chasse fixe, sommaire numéroté, intertitres repérés comme des entrées.

Rubrique du site BlockInfos sur ordinateur, capture de la page entière
Rubrique du site BlockInfos sur téléphone, capture de la page entière

Rubrique. Les articles de la rubrique en blocs illustrés, numérotés, filtrables par rubrique.

Fiche de test du site BlockInfos sur ordinateur, capture de la page entière
Fiche de test du site BlockInfos sur téléphone, capture de la page entière

Fiche de test. Les tests de portefeuilles, plateformes et VPN : l’essentiel en tête, tableau des caractéristiques, sommaire numéroté.

Page 404 du site BlockInfos sur ordinateur, capture de la page entière
Page 404 du site BlockInfos sur téléphone, capture de la page entière

Page 404. « Ce bloc n’est pas dans la chaîne » : une recherche, les rubriques et les derniers blocs pour repartir.

04 Méthodologie

L’approche en 5 étapes

  1. Constat

    Images disparates, pages lourdes, recherche défaillante.

  2. Concept

    Une idée directrice : la blockchain comme registre.

  3. Maquette

    Accueil, articles, rubriques et fiches validés en local.

  4. Intégration

    Portage sur WordPress avec Etch et Automatic.css.

  5. Visuels

    130 illustrations collage, une par article et par fiche.

Ouvert à de nouveaux projets

Votre site mérite sa propre identité.

Parlez-moi de votre activité : je vous envoie sous 48 h un devis gratuit et des recommandations concrètes pour vous lancer.

SébastienFondateur de Wasabi Web Design, à Arras