C'est une rencontre fortuite qui m'a conduit à connaître le Fer à Coudre, collectif de théatre et scénographie œuvrant dans l'espace public pour y apporter spectacle et poésie. Afin de leur assurer une meilleure visibilité et faire honneur à leur univers foisonnant, j'ai conçu un site internet basé sur un thème graphique sur-mesure.
Général • Brief
Le Fer à Coudre est à l’initiative de nombreuses performances, spectacles, installations, ateliers… Dépareillés avec une arborescence et une navigation peu claire, les contenus du site d’origine étaient répartis sur une cinquantaine de pages. Pour ne pas perdre en visibilité, il était essentiel de conserver et adapter ces nombreux contenus sur la nouvelle version.
La refonte avait ainsi pour but de proposer un design plus en accord avec l’identité du Fer à Coudre, mais également de proposer une meilleure organisation des contenus pour plus de clarté.
Pour cela, le design s’est concentré sur les deux pages clés Accueil et Compagnie, et a évolué progressivement en suivant les directives de la compagnie.
Style initial proposé VS style final
Graphisme • Webdesign
Le Fer à Coudre présente un univers décalé, où costumes côtoient métals et fers forgés, avec un important travail sur la scénographie.
Dès leurs premièrs retours sur mes propositions graphiques, la Compagnie a insisté sur la nécessité « d’alourdir » le style visuel et d’augmenter le contraste pour être plus en accord avec leur identité. Peu à peu, j’ai agrémenté les maquettes de petits objets (écrous, clé anglaises, engrenages…) et ai supprimé l’effet de demi-tons appliqué aux photos de sculptures détourées afin de les mettre plus en valeur.
Pour une question de budget, seules les pages Accueil et Compagnie ont été maquettés. Les autres ont été construites directement sur le site sur des modèles simples déclinés à partir de ces bases.
Développement • Thème
Construit sous WordPress, j’ai conçu un thème sur-mesure pour le site, basé sur les outils Roots.io (Bedrock / Sage / Acorn / Bud) pour assurer un environnement de développement optimisé.
La facilité d’administration et d’ajout de contenus étant un point essentiel, le site exploite pleinement la fonctionnalité FSE (Full-Site Editing) introduite dans les dernières versions de WordPress, pour une expérience d’édition améliorée.
- Thème WordPress sur-mesure compatible FSE (Full-Site Editing), sur base Sage et framework Acorn (Laravel PHP)
- Style visuel construit avec le framework CSS Tailwind
- Gestion d'extensions et packages Composer
- Développement de blocs Gutenberg statiques (React / TypeScript) et dynamiques (React / TypeScript + Blade Laravel + Composers PHP)
- Compilation Babel, React, PostCSS, Sass, Typescript via Bud.js
Développement • Full Site Editing
Les thèmes FSE permettent l’édition de l’ensemble des contenus avec l’éditeur natif Gutenberg, via une interface d’édition intuitive et fidèle à l’aspect en front, évitant au passage l’ajout d’un éditeur visuel tiers.
Afin de combler les lacunes de l’éditeur, j’ai eu recours à deux solutions :
- l’utilisation d’un plugin étendant les fonctionnalités stylistiques : notamment pour la gestion responsive au cas par cas et la mise en page en colonnes
- le développement de blocs sur-mesure sur certaines fonctionnalités non reproductibles (équipe, slider, agenda, rétrospectives, panel des rôles équipe…)
Développement • Blocs Gutenberg/React
Tous les blocs suivent l’architecture moderne de Gutenberg avec une définition et enregistrement via un fichier block.json.
L’éditeur visuel étant une application React et Acorn un framework Laravel PHP pour WordPress, plusieurs techniques ont été utilisées pour le développement des blocs personnalisés :
- Blocs statiques : édition et gestion des données full typescript avec composants React, sauvegardant une version statique destinée à l’affichage en front
- Blocs dynamiques : édition en typescript avec appel de templates Blade/Laravel pour le front et back Laraval PHP View Composers pour la gestion des objets et variables
