Cinéma
Fauteuils rouges : petite histoire des salles de quartier
De l’âge d’or des cinémas de quartier à leur renaissance associative.
8 min de lecture
Association · Site
Site WordPress custom pour une association culturelle
Le brief
Un simple blog sur le papier, une vraie bibliothèque de contenus en pratique
Osapaclap est une association qui écrit sur le cinéma, le jeu vidéo et les arts visuels. Elle m'a confié la création d'un site WordPress pour publier ses articles et gagner en visibilité.
On pensait partir sur un blog. Mais en listant tout ce que l'équipe voulait publier, le projet a pris une autre ampleur : des articles, des parcours d'apprentissage qui se terminent par un quiz, une bibliothèque de personnalités, d'œuvres et de vocabulaire du cinéma, un agenda d'événements et une page équipe. Chaque contenu avait besoin de son propre modèle de page, et tous devaient communiquer entre eux.
Ayant conçu de nombreux sites à l'architecture complexe, j'ai mis au point une méthode en sept étapes, du premier rendez-vous à la mise en ligne. Ce projet en est une bonne illustration, j'en détaille chacune des étapes.
Mon périmètre
01
Découverte
D'abord les contenus et les besoins
02
Direction artistique
Identité validée sur la page d'accueil
03
Design system
Composants et modèles de page clés
04
Spécifications
Contenus, champs et règles
05
Thème custom
Thème WordPress et extensions
06
Formation
Back office et guide de prise en main
07
Mise en ligne
DNS, nom de domaine et lancement
Étape 1 · Découverte
Travailler à partir du contenu
Avant d'ouvrir Figma, j'ai rencontré l'équipe pour lister tout ce que le site devait contenir et à qui il s'adressait. Une chose est vite apparue : tout est lié. Un article sur un film mentionne un réalisateur, une œuvre et quelques termes techniques, qui méritent chacun leur page. Voici l'architecture que nous avons validée ensemble :
Le pivot
Articles
Cinéma, jeu vidéo et arts visuels, classés par thème. Tous les autres contenus y renvoient.
Apprendre
Parcours
Des articles à lire dans l'ordre, avec un quiz final
Bibliothèque
Personnalités
Réalisateurs, artistes et game designers
Bibliothèque
Œuvres
Films, jeux et œuvres d'art
Bibliothèque
Lexique
Les termes techniques, expliqués simplement
Agenda
Événements
Projections, conférences et ateliers
Équipe
Équipe
Les auteurs et leurs articles
Sur le site en ligne
Sur le site, cette architecture devient un réseau de liens. À la fin de chaque article, un bloc « Dans cet article » rassemble les personnalités, les œuvres et les termes du lexique cités, chacun menant à sa propre page. Les lecteurs passent naturellement d'une page à l'autre, et c'est aussi bon pour le référencement : Google suit ces liens internes pour comprendre comment les contenus s'organisent.
Au survol d'un terme, sa définition s'affiche sans quitter l'article.
Étape 2 · Direction artistique
La page d'accueil en premier, pour valider l'identité
J'ai commencé par la page d'accueil. C'est elle qui porte le plus l'identité du site, et elle donnait à l'association quelque chose de concret à commenter. Une fois validée, elle a servi de référence pour tous les autres modèles de page.
01 / 04
La page d'accueil, telle que l'association l'a validée
Faites défiler dans le cadre : derniers articles, les trois domaines, prochains événements et équipe, le tout sur une seule page.
Étape 3 · Design system et modèles de page
Une bibliothèque de composants, puis les pages clés
Une fois l'identité validée, j'en ai fait un design system dans Figma : navigation, boutons, filtres, une carte par type de contenu, lignes de parcours, en-tête et pied de page. Je m'en suis ensuite servi pour dessiner les pages les plus importantes du site.
Cinéma
8 min de lecture
On vous propose
Des rétrospectives
Retrouvez ici des articles où l'on remonte le fil du temps. On revient sans distinction ce qui compose le jeu vidéo, le cinéma et les arts visuels.
Cinéma
Agnès Varda
RéalisatriceFigure de la Nouvelle Vague, du documentaire et de la photographie.
Cinéma
Le septième art, de la salle obscure aux plateaux.
Découvrir 
Les principaux composants de la bibliothèque Figma, recréés ici en code. Testez les filtres.
Étape 4 · Spécifications techniques
Des maquettes au cahier des charges
Une maquette montre l'apparence d'une page, pas son fonctionnement. Avant d'écrire la moindre ligne de code, je les ai donc traduites en spécifications : quels types de contenu, quels champs pour chacun, comment ils se relient, et ce que les éditeurs peuvent modifier.
Design
Maquettes
Les pages validées dans Figma
Structure
Types de contenu
Articles, parcours, bibliothèque, événements
Données
Champs et liens
Auteur, catégorie, thème, personnalités et œuvres liées
Édition
Règles
Champs obligatoires et blocs autorisés
Validation
Spécifications validées
Approuvées par l'association avant le développement
Étape 5 · Thème WordPress custom
Un thème custom, conçu pour durer
J'ai développé un thème WordPress 100 % sur mesure, sur l'éditeur de blocs natif, avec un modèle de page pour chaque type de contenu. Les fonctionnalités propres au site sont regroupées dans une extension dédiée. Pour le reste, j'ai choisi des extensions gratuites et largement utilisées : agenda d'événements, champs personnalisés, avatars locaux et tri des pages. L'association n'a donc aucune licence à renouveler chaque année.
100%
Custom
Chaque modèle de page est fidèle à la maquette Figma, sans thème du commerce à détourner.
0 €
De licences d'extensions
Que des extensions gratuites et très utilisées : le site fonctionne sans abonnement annuel.
Natif
Éditeur de blocs
Construit sur l'éditeur fourni avec WordPress : n'importe quel développeur WordPress pourra reprendre le projet.
Un modèle de page pour chaque type de contenu
La liste des articles, filtrée par domaine et par thème.
Étape 6 · Back office et formation
Un back office que l'équipe gère seule
Mon objectif : que l'équipe n'ait jamais besoin de moi pour publier. J'ai adapté le back office WordPress à ce que les éditeurs font au quotidien, puis je les ai formés à son utilisation.
Les éditeurs modifient le contenu d'une page, jamais sa structure : le design reste intact.
Impossible de publier un article sans titre, auteur, image principale, extrait, catégorie et thème.
Les éditeurs ne voient que les blocs prévus par le design : tous les articles restent cohérents.
J'ai rédigé un guide d'utilisation en français et formé les éditeurs lors d'une session avant la mise en ligne.
L'édition au quotidien
Étape 7 · Mise en ligne
Une mise en ligne clé en main pour l'équipe
Je me suis aussi chargé de la mise en ligne : dernières vérifications, configuration des DNS, puis branchement du nom de domaine. L'association a reçu un site terminé, prêt à publier.
Contrôles
Relecture finale
Pages, liens et formulaires testés avant la bascule
Configuration
Réglages DNS
Enregistrements orientés vers le serveur
Adresse
Nom de domaine
Bascule vers le nouveau site, dernière étape avant la mise en ligne
Remise
En ligne
L'équipe publie dès le premier jour
Le résultat
Plus de visibilité et de crédibilité pour l'association
Osapaclap dispose désormais d'un site à la hauteur de ce qu'elle publie. Les lecteurs passent d'un article à un réalisateur, un film ou un terme technique sans perdre le fil. Le site est agréable à parcourir, et tout aussi simple à gérer : l'équipe publie en toute autonomie, et chaque page reste fidèle à l'identité, quel que soit l'auteur.
Votre projet
Vous souhaitez un site unique et durable, que votre équipe peut gérer en parfaite autonomie ?
Voici ma méthode en 7 étapes, que j'adapte en fonction des besoins de chaque projet. Parlez-moi du vôtre.
- 01Découverte
- 02Direction artistique
- 03Design system
- 04Spécifications
- 05Thème custom
- 06Formation
- 07Mise en ligne
