Bicycode est le service de marquage et de recensement des vélos de la FUB. Malgré vingt ans d'existence et une expertise reconnue dans la sécurité vélo, le service ne disposait d'aucune charte graphique constituée. Le site web s'était construit par sédimentation, sans cohérence visuelle ni architecture de contenus claire. La mission consistait à définir une identité graphique complète, à la décliner en supports imprimés, puis à concevoir un concept de site web. Elle incluait également un accompagnement à la structuration des contenus, nécessaire pour que les choix graphiques reposent sur une organisation éditoriale lisible.
L'objectif de communication était double : rendre le site accessible à un public plus large que la communauté militante historique, et clarifier les différents domaines d'expertise du service (marquage, antivol, éclairage, assurance).
Une charte construite par le papier
La direction artistique a suivi un ordre logique : définir la charte graphique sur support imprimé avant d'aborder le numérique. Trois flyers thématiques ont été créés, portant respectivement sur le marquage Bicycode, l'antivol et l'éclairage. Ces documents ont servi de terrain d'expérimentation pour établir les fondamentaux visuels : palette chromatique, typographie, hiérarchie, ton graphique général. Cette séquence a permis de valider des choix sur des formats contraints avant de les transposer à l'écran, où les variables de mise en page sont plus nombreuses.
Un système d'icônes a été dessiné pour accompagner cette charte. Il couvre les différentes thématiques du service et assure une continuité visuelle entre les supports imprimés et le site web.
Le logotype Bicycode existant a été conservé, conformément à la demande du commanditaire.
Palette et typographie
La palette retenue articule trois couleurs principales : un orange vif, un bleu-violet sombre, un jaune, un bleu ciel, un vert et un beige crème, complétés par le blanc. Ces couleurs ne sont pas distribuées de façon uniforme. L'orange structure les éléments actifs et les points d'attention (boutons, icônes, titres de rubrique). Le bleu-violet occupe les zones de fond à forte densité de contenu ou les séquences éditoriales longues. Le beige crème assure les respirations et les transitions entre blocs.
Deux polices de caractère ont été sélectionnées. ChivoMono Italic Variable est utilisée pour les titres : à chasse fixe et en italique, elle introduit une tension graphique reconnaissable, distincte des typographies sans empattement couramment utilisées dans la communication associative ou institutionnelle. Overpass Variable assure les textes courants : lisible à toutes les tailles, elle supporte aussi bien les corps courts des légendes que les textes longs des pages de contenu.
Concept de site web
Le concept de site a été développé sous forme de maquettes couvrant plusieurs pages types : la page d'accueil, une page thématique sur les antivols, une page sur le marquage Bicycode et une page agenda. Ces pages permettent de vérifier la cohérence du système graphique sur des contenus de nature différente : contenus informatifs, comparatifs (tableau de tests antivols), récits (portraits, témoignages), et données chiffrées.
La navigation principale est organisée par domaine d'expertise : Marquage, Antivol, Éclairage, Assurance, Actualité, Agenda. Cette structure reflète directement le travail de clarification des contenus mené en amont avec le commanditaire. Chaque rubrique correspond à un champ délimité, ce qui permet à des visiteurs aux profils différents (cycliste novice, propriétaire averti, professionnel du secteur) d'identifier rapidement le contenu qui les concerne.
La mise en page repose sur une organisation en blocs distincts, avec une alternance de fonds colorés qui segmente visuellement les séquences de contenu sans recourir à des séparateurs graphiques. Les photographies sont intégrées en pleine largeur pour certaines sections, et en formats cadrés pour les portraits et les actualités. Le système d'icônes intervient en appui des titres de rubrique et des catégories, renforçant la lisibilité des entrées thématiques sans alourdir la mise en page.
Ce que cette mission illustre
Cette mission illustre une démarche de direction artistique construite par étapes, du support imprimé vers le numérique, en partant d'une situation sans charte établie. Elle engage à la fois la définition d'un langage visuel cohérent sur plusieurs supports, la conception d'un système typographique et iconographique, et la traduction de choix éditoriaux en architecture de page.
Avant d'aborder la refonte du site web, la mission a démarré par la création de trois flyers thématiques : l'un consacré au marquage Bicycode, le second aux antivols, le troisième à l'éclairage. Ces documents constituent le premier acte de la direction artistique : c'est sur ce format contraint, à la fois dense en informations et destiné à une distribution physique, qu'ont été définis les fondamentaux visuels de la nouvelle identité.
Chaque flyer organise un contenu technique et pédagogique à destination du grand public : conseils de protection, tableaux de tests comparatifs, procédures à suivre en cas de vol. La mise en page devait rendre ce contenu lisible sans en appauvrir la précision. Les données chiffrées (classements FUB, notes d'éclairage, prix, poids des antivols) ont été intégrées sous forme de tableaux et de graphiques construits dans le système graphique, sans recourir à des outils de dataviz extérieurs à la charte.
C'est à cette occasion qu'ont été arrêtés la palette chromatique, le choix des deux polices de caractère (ChivoMono Italic Variable pour les titres, Overpass Variable pour les textes courants) et les premiers éléments du système d'icônes. Le flyer sur les antivols introduit ainsi les six familles de produits (U, cadre, pliant, chaîne, câble avec armure, câble sans armure) représentées chacune par une icône dessinée spécifiquement pour la charte. Ces icônes sont ensuite reprises dans les maquettes du site web, assurant une continuité entre les deux supports.
Ce travail sur le papier a également servi de cadre à une clarification des contenus : identifier ce qui relevait du marquage, de la sécurité active ou passive, de l'expertise FUB, a directement orienté la structure de navigation du site conçu dans un second temps.
Dans le cadre du congrès FUB 2022 qui s'est tenu à Tours au mois de mars, j'ai créé et réalisé le rapport de 52 pages ainsi que la présentation des conclusions de l'enquête 2021 sur les villes cyclables.
Conception d'un système éditorial modulaire pour la Fédération des Usagers de la Bicyclette (FUB), destiné à structurer une collection de guides pratiques à destination des associations adhérentes. La mission a porté sur la création d'un gabarit de 12 pages au format A5 avec couverture, déclinable selon les thématiques (sécurité routière, plaidoyer départemental). Le dispositif graphique intègre une série de pictogrammes dédiés, des éléments d'habillage spécifiques et une fiche action complémentaire. L'ensemble s'appuie sur la charte graphique FUB existante, adaptée aux contraintes de lisibilité et de reproduction (impression et diffusion numérique). Les fichiers sources ont été livrés au format InDesign avec feuilles de style paramétrées, permettant au commanditaire d'assurer la production autonome des futurs titres de la collection.
Campagne "Cyclistes, brillez !" soutenue par la Direction à la Sécurité Routière : les associations du réseau FUB proposent des actions de sensibilisation sur l’importance de l’éclairage à vélo. Un kit de communication regroupant une affiche, des bannières web ainsi qu'un flyer a ainsi été créé par mes soins.

Les visuels, photographies et illustrations sont protégés par la loi du 11 mars 1957 sur les Droits des Auteurs et par le Code de Propriété Intellectuelle du 1er Juillet 1992.
L'ensemble des contenus (textes, graphiques, logos, images, photographies, illustrations) sont la propriété de Guénolé Le Gal ou de tiers dont il a été obtenu les droits d’exploitation, et ne peuvent en aucun cas être utilisés sans son autorisation.
Toute représentation ou reproduction intégrale ou partielle du site internet, faite sans consentement de l'auteur est illicite (art. L 122-4 du Code de la Propriété Intellectuelle).

You may also like

Back to Top