Préambule

EDM/MVBL, présentation

EDM/MVBL est une association sportive qui a plusieurs activités. D’un côté le Mouvement Volley-Ball Lyssois, un club de Volley-Ball qui propose de la compétition et du loisirs, et de l’autre l’École Du Mouvement qui travaille autour de la motricité. L’association agit hors-les-murs et dans quatre salles municipales : la Salle Jules Ferry (Lys-Lez-Lannoy), la salle Léo Lagrange (Lys-Lez-Lannoy, la salle David Douillet (Lannoy) et la Salle Jeanne d’Arc (Roubaix).

EDM

L’École du mouvement vise à développer et promouvoir les activités physiques et sportives pour tous·tes et dans tous les milieux. Agissant dans quatorze écoles, un collège et un centre de loisirs dans les communes de Lys-Lez-Lannoy, Lannoy, Roubaix et Hem. Elle agit aussi dans d’autres centres aérés dans les communes du Pévèle. D’abord axée autour de la motricité des enfants de 18 mois à 10 ans, à l’école et avec les parents, l’EDM agit aussi pour la promotion du sport pour les seniors, la pratique de Volley handisport et la mise en place de séances d’activité physique adaptée pour les patient·es pris en charge pour une pathologie cancéreuse.

MVBL

Le club MVBL forme neuf équipes féminines et sept équipes masculines, des benjamin·es aux séniors, qui participent régulièrement à des matchs compétitifs. Deux équipes loisirs participent aussi à la vie du club. D’autres activités se sont développées avec l’EDM telles que des interventions dans des écoles et collèges ou la mise en place de pratiques handisport (Volley Care) et de sport santé. Le MVBL organise aussi différents événements : le Volley Fluo Lyssois représente un des moments forts du club.

Point sur la situation graphique de l'association

Les problématiques de communication passent souvent au second plan, par manque de temps, mais Théo, alternant au sein du club, s'en charge généralement. Il a pour habitude d’utiliser l’outil Canva qui lui semble « facile et rapide » et permet aussi à ses collègues - qui n’ont pas de compétences informatiques particulières - de reprendre la main plus facilement que s’ils utilisaient des outils tels qu'Adobe Photoshop, l’alternative à laquelle il avait déjà pensé.

Cela dit, le contrat d’alternance de Théo va toucher à sa fin et personne ne prendra sa place pour la communication. Sans aisance sur les outils informatiques, et supposément pas non plus avec la conception graphique, le club se retrouve en difficulté.

Nous nous sommes réuni·es avec Théo dans l’optique de penser à des solutions et avons proposé le développement d'une identité visuelle et d’un outil sur mesure et spécifiquement adaptés à leurs besoins, le tout accompagné d'une charte interne et externe à l'outil pour faciliter la pédagogie. Cet échange ainsi que l'étude de leur communication actuelle nous a permis de faire un état des lieux de leur situation graphique ainsi que des supports dont ils ont besoin au quotidien.

La charte graphique originale de l’association est modeste, il y a deux logotypes et deux couleurs (jaune et bleu) qui ne sont pas strictement définies. N’importe quel bleu peut se substituer à un autre.

Puisqu’elle n’est pas strictement définie ou balisée, l’identité est réinvestie librement par les membres de l’association et les supports manquent de cohérence graphique. Il n’y a par exemple pas de choix typographiques définis. L’association bénéficie des services d’un photographe pour les prises de vues lors des matchs. En dehors de cela, les images investies sont dénichées sur le Web ou générées grâce à l’intelligence artificielle.

Une identité qui présente trois besoins majeurs

Pour mettre en place des supports de communication, les membres de l’association se retrouvent en posture de concepteur·ices alors qu’il ne s’agit ni de leur métier, ni de leurs compétences, ni de leur priorité. La mise en place d’une charte définie et d’un outil spécifique permettrait alors d’alléger les membres de cette charge tout en permettant de répondre aux problématiques d’ordre graphique : cohérence, qualité des supports produits et charte spécifiquement adaptée à l’identité et aux besoins de l’association.

Leurs trois besoins principaux peuvent donc être résumés en trois verbes : identifier, distinguer, faciliter

• Identifier : c'est-à-dire mettre au point une identité visuelle cohérente et unifiée pour l'ensemble de l'association ;

• Distinguer : c'est-à-dire être en mesure de pouvoir différencier d'un coup d'œil l'EDM et le MVBL de par la communication graphique ;

• Faciliter : c'est-à-dire disposer, pour les membres de l'association, d'un outil dont la prise en main est aisée et où la production de supports de communication ne constitue plus une corvée.

Identifier

Le besoin d'identification

Nous parlions plus tôt des trois besoins de l’association en termes de communication. La réponse au premier, l’identification, passe par une rationalisation de l’identité visuelle de l’association autour de parti-pris forts et définis. Ceux-ci permettent d’harmoniser les communications de l’EDM/MVBL et de la rendre reconnaissable aux yeux des membres et des non-membres.

Principes généraux de l'identité

Le jaune et le bleu

L’association est déjà identifiable par un élément : l’usage du jaune et du bleu. Nous avons fait le choix de conserver ces couleurs qui sont indissociables de l’identité de l’association, pour ses membres comme pour les personnes extérieures. Les subtilités colorés sont précisées lors de la distinction entre les deux entités EDM et MVBL.

Iconographie

La recherche iconographique a commencé à prendre une forme concrète lors d'une seconde visite au club. Nous avons eu accès au matériel de l’association et avons pu prendre des photos et fabriquer une matière iconographique en scannant, sur place puis à l’école, des objets appartenant à l’association.

Le choix des objets permet aussi de sortir d'une identité plus générique. Les objets appartiennent au club et sont spécifiques à celui-ci, souvent marqués par l’usage qui en est fait : traces d’usure et inscription du nom de l’association sur certains.

Typographie

La typographie EDM/MVBL est une dérivation de la police de caractères Poppins. Ses irrégularités s'inspirent des lignes de marquage présentes sur le sol du complexe sportif au sein duquel évolue l'association.

Elle est disponible en deux graisses, Bold et medium. Sur les supports imprimés en A3, la typographie peut être utilisée en quatre corps différents, correspondants à une certaine hiérarchie de l'information :

• Titraille (121 pt) : Pour les informations capitales telles que la date d'un match de volley ou l'annonce d'un évenement spécifique comme une kermesse ou un stage sportif.
• Sujet (34 pt) : Pour les informations essentielles, qui peuvent être lues dans un second lieu. C'est le cas de l'annonce des évenements très réccurents tels que les matchs (dont la date est, de fait, en corps de titraille) ou bien l'annonce de la période d'un évenement spécifique ou ponctuel. Les logotypes, eux aussi, apparaissent dans ce corps.
• Informations principales (11,5 pt) : Pour les informations nécessaires à la compréhension de l'évenement proposé. C'est le cas des informations de lieu, de division ou d'équipes des matchs de volley ou, pour l'EDM, des informations de lieu, dates ou encore cible des évenements proposés.
• Informations complémentaires (XXpt) : Pour les informations non essentielles pour une première lecture mais utiles au lecteur, telles que l'adresse d'un évenement spécifique ou les informations de contact pour une réservation.

Pour les communications numériques  dont le corps ne peut être strictement décidé puisqu'elles se font au travers d'images ;  les rapports de proportions entre les différents corps, et leurs usages, doivent être strictement respectés.

Logotypes

Les logotypes sont dessinés à partir de versions plus abîmées encore des caractères de la typographie. Nous avons fait le choix d’un logo edm en bas de casse et d’un logo MVBL en capitale en clin d'œil aux logos originaux de l’association.

Indications pour l'impression

Les supports imprimés (affiches disposées dans la salle) sont à imprimer en pleine page sur un papier A3 couché. Il est judicieux de couper les marges blanches, causées par les pinces de l'imprimante, à l'aide de la cisaille présente dans le bureau de l'association.

Le papier dit « couché » est un papier recouvert d'une fine couche minérale à l'aspect brillant. Il absorbe moins l'encre qu'un papier classique et permet d'avoir des couleurs plus éclantantes. Voici une liste de références dans laquelle les membres de l'association peuvent piocher pour les achats de papier.

La liste des papiers utilisables est à compléter.

Papier à couper

• Papier couché Cocoon SILK Blanc 115 g/m² 650 mm x 920 mm palette cube
• Papier Novatech Gloss 150g/m2 650mm x 920mm Palette cube

Papier déjà en format A3

• Ramette de papier Xerox Colotech+ Gloss Blanc 170 g/m² A3 003R91613 (antalis)

Méthode d'impression dans l'outil

1. Accéder à l'outil et le support désiré.
2. Générer l'affiche en fonction de l'évenement en suivant les étapes du formulaire. Ne pas rafraîchir ou fermer la page tant que le support n'a pas été généré, au risque de devoir recommencer.
3. Cliquer sur « Imprimer » ou appuyer sur les touches Ctrl+P du clavier.
4. Dans l'interface d'impression, choisir la Sauvegarde PDF.
5. Choisir Pages > Toutes / Couleur > Couleurs / Échelle > 100 / Pages par feuilles > 1 / Marges > Aucunes.
6. Ne pas cocher l'impression d'en-têtes et pieds-de-page.
7. Cocher l'impression d'arrière-plans.
8. Enregistrer le PDF produit puis l'imprimer depuis l'ordinateur ou en le déplaçant vers une clé USB.
9. Sur l'imprimante, sélectionner le tiroir qui contient le papier A3 couché et cocher l'option adapter au format papier.

Distinguer

Le besoin de distinction

Aujourd’hui, l’EDM/MVBL peine à communiquer sur la motricité (c'est-à-dire la partie EDM de l'association) bien qu’elle représente le plus grand pan de leurs activités. Le Volley (c'est-à-dire la partie MVBL de l'association) tend à être plus mis en avant, car iels communiquent sur les matchs à venir et les résultats chaque semaine. De plus, l’absence de distinction graphique entre les deux entités (toutes deux signifiées par le jaune et le bleu) les rends indissociables dans la communication de l’association. Notre travail a donc été de trouver des moyens graphiques pour distinguer les deux entités tout en gardant une cohérence et une identité visuelle commune pour marquer à la fois la différence et l'unité/le dialogue qui s'opère entre les deux. Cette phase du projet a donc été rythmée par la définition d'une iconographie propre à chaque entité, de même pour la répartition coloré et les principes de composition des différents supports de communication.

Les proportions colorés

Le non-choix de nuances précises participait à brouiller davantage la communication de l'association, puisque EDM et MVBL n'avaient pas de couleurs qui leur étaient propres, ne permettant donc aucune distinction réelle ; la palette coloré méritait alors d'être revue ou enrichie.

L'EDM et le MVBL continuent de partager leur palette coloré. Cela dit, pour l'EDM, les communications sont en moyenne composées de 80% de jaune contre 20% de bleu. Ces rapports de proportions s'inversent pour le MVBL avec en moyenne 20% de jaune et 80% de bleu. C'est cela qui permet, en un regard, de faire la différence entre les supports produits pour l'une et l'autre des entités.

Palettes spécifiques EDM

Palette MVBL

L'identité de l'EDM

Iconographie

L'iconographie de l'identité de l'EDM se compose d'objets de motricité scannés. La base de données complète des images ferait idéallement partie de l'outil. Nous avons choisi d'investir un maximum d'objets utilisés durant les activités propres à cette entité afin d'avoir un vocabulaire iconographique des plus riches possibles. Sur les scans, on retrouve certains objets en mouvement, d'autres plus immobiles, et également des tissus ou matières textiles qui ouvrent le champ des possibles pour les supports de communication : jeux de textures, gros plan sur un détail ou non…

Sur chaque support de communication,les images subissent un traitement coloré qui permet de distinguer chaque évenement.

Composition

Ici se plaçent les grilles edm

La grille de l'EDM est une version plus complexe de la grille « terrain de volley » utilisée pour le MVBL. Elle connote aussi un filet de cage.

Contrairement aux éléments iconographiques qui peuvent ignorer les marges, les éléments typographiques sont bornés par ces dernières qu’ils ne peuvent dépasser. Quant aux gouttières, images et textes doivent scrupuleusement les respecter.

Que l’événement soit un stage sportif, une kermesse, etc. les informations ci-dessus sont à indiquer obligatoirement.

Toute information supplémentaire peut être ajoutée mais troublera l’harmonie de la composition graphique : prenez le en considération avant tout ajout !

Toutes les variations de placement de texte sont possibles tant que les blocs de textes ne se superposent pas aux blocs d’images de premier plan et que les marges et les gouttières sont respectées.

Attention : les informations de contacts sont toujours placées dans un des deux coins inférieurs de l’affiche, à 10 mm du bord.

Toutes les variations de placement et de formats d’images de premier plan sont possibles tant que les blocs d’images ne se superposent pas aux blocs de textes et que les les gouttières sont respectées. Des compositions de deux ou trois images sont possibles.

Le logo et l’indication du mois de l’événement font 25mm de hauteur et sont chacun placés aléatoirement dans un des quatre coins de l’affiche, à 10mm du bord.

L'identité du MVBL

Iconographie

Concernant l'iconographie du MVBL, elle est composée de scans en mouvement des différents ballons utilisés par l'assocation. Les ballons d'entraînement et de match sont utilisés pour l'essentiel des communications, exception faite de celles qui concernent les équipes loisirs. En effet, un ballon spécifique à ces pratiques est utilisé pour celles-ci.

Composition

La grille composant les supports MVBL s'inspire du terrain de volley et du placement des joueur·euses sur celle-ci.

La grille est mobile et, tant que les quatres zones respectent leur hauteur (notamment en haut et en bas, zones où interviennent des logotypes qui ne doivent en aucun cas être recouverts de texte), tous les rapports en proportions sont possibles. Ceux-ci sont aléatoirements générés par l'outil qui s'assure du respect de ces règles.

Sur les annonces de match, les informations sont distribuées comme suit et peut être aligné, au choix, de trois façons différentes. Il est conseillé de varier les alignements de texte d'une affich à l'autre afin d'augmenter les variations, et donc la distinguabilité, de chaque affiche.

Enfin, les logotypes et informations de niveau « sujet » sont à placer au choix dans l'un des quatre coins de l'affiche. Il est recommandé de varier ces placements d'une affiche à l'autre en veillant à ne jamais les superposer. Ils font chacun 25mm de hauteur et sont placés, au minimum, à 10mm du bord.

Faciliter

Le besoin de facilitation

Puisqu'à ce jour aucun membre de l’association n’est ni formé à la conception graphique ni réellement à l’aise avec les outils numériques, malgré d'importants besoins de communication qui les poussent cvers une position de concepteur·ices graphiques qui ne correspond ni à leurs compétences ni à leurs intérêts, l'EDM/MVBL fait face à un véritable besoin de facilitation graphique et d’un outil adapté à leurs problématiques spécifiques, duquel découle la nécessité de mettre en place une médiation suffisante pour la compréhension et l’appropriation de l’identité visuelle et de l’outil associé.

La charte

La charte graphique de l’association que vous consultez actuellement montre les choix graphiques et le fonctionnement de l’identité, que nous vous avons déjà explicité. Elle existe sous forme numérique - en ligne et idéalement en local - afin de pouvoir être accessible à tout moment par les membres de l’association.

Nous avons choisi d’intégrer des schémas et des explications détaillées afin qu’elle puisse servir de support de référence « explicite ». Cela dit, elle est implicitement présente et appliquée dans l’outil qui, par les réglages CSS et certains scripts, applique directement la charte aux supports. Toute évolution de l'identité graphique de l'EDM/MVBL, dans le contexte spécifique de l'association, doit respecter ces recommendations. L'appropriation d'un quelconque élement de la charte par une personne extérieure à l'association est autorisée sous des conditions explicitées par les [licences et modalités de diffusion].(#Diffusion, licences)

L'outil

En fait, l’outil fonctionne comme un template « amélioré » qui d’une part restreint les libertés graphiques défavorables à la cohérence de l’identité et d’autre part permet de générer de la variabilité entre les supports tout en respectant strictement la charte graphique.

L’une des affiches, celle du MVBL, a été complètement mise en place dans l’outil à cette adresse. Le reste des supports n’a pas encore été codé, faute de temps, mais a été pensé de façon à être techniquement réalisable.

L’outil fonctionne dans un simple navigateur, de préférence Chromium ou assimilés (Chrome), et se compose comme tel :

• Un fichier PHP pour chaque support qui permet d’accéder à l’interface ;
• Des dossiers pour les typographies et les Bases de données d’images ;
• De multiples feuilles de style CSS qui permettent de gérer l’aspect visuel des supports et de l’interface ;
• Des scripts JavaScript qui permettent de gérer le passage du contenu du formulaire (à gauche) aux supports ainsi que d’automatiser et de réglementer les comportements de l'outil tels que la hauteur des zones de la grille ou les couleurs de l’image en fonction des catégories.

Le passage des informations se fait simplement à l’aide d’un « event listener » qui est une sorte d’écoutille informatique qui va être attentive aux changements d’ « inputs » des champs du formulaire. Par exemple, chaque fois que la date est changée dans le formulaire, l’écoutille va en être informée et activer un script qui s’occupe de modifier le contenu du support pour qu’il coïncide avec la donnée insérée : texte tapé par le membre, choix d’une option... Les couleurs sont aussi gérées de cette façon ; le choix de la division (sénior, minime…) indique au script vers quel dossier aller chercher les images de fond.

L’utilisateur·ice peut agir sur l’aspect de l’affiche, comme par exemple l’alignement/justification du texte, qui est gérée par trois classes CSS correspondant chacune à l’un des placements possibles. Lorsque l’utilisateur·ice clique sur le bouton correspondant, le script assigne aux éléments la classe correspondante.

D’autres paramètres sont plutôt gérés aléatoirement, notamment la hauteur des zones de la grille est définie par un calcul de proportion qui est, lui aussi, tiré au hasard. La hauteur de l’affiche est divisée par ces valeurs aléatoires et permet de générer des compositions différentes.

En outre, la médiation de l’outil se fait à différents niveaux : pour les membres du club (utilisateur·ices) et pour des personnes extérieures qui pourraient vouloir se réapproprier le projet ou l’améliorer (contributeur·ices).

Pour les contributeur·ices, nous avons essayé - si bien que possible - de commenter le code source au fur et à mesure et d’organiser les fichiers du projet de la façon la plus compréhensible possible. La charte que vous consultez actuellement permet d’expliquer le fonctionnement de l’outil sans entrer dans les micro-détails du code et, de fait, permet une première entrée dans le projet.

De la même façon, la charte nous sert de premier de support de médiation pour expliquer le fonctionnement de l’outil aux membres de l'association. À cela s'ajoutent des échanges - que nous aurions aimés plus réguliers - et l’explication pas à pas et en présentiel du fonctionnement de l’outil aux membres. Il y avait une volonté d’être pédagogue, de s’assurer que les usages coïncident avec la construction de l’outil et, d’autre part, que l’outil soit suffisamment simple à prendre en main pour ne pas constituer une difficulté supplémentaire pour les membres de l’EDM/MVBL. Nous avons d’ailleurs pu échanger avec le club sur la dernière version de l’outil et recueilli leurs retours sur le projet, en l’état où vous le voyez aujourd’hui.

Diffusion, licences

Afin de permettre au projet d’entrer dans ces communs et d’être réutilisable et modifiable par d’autres, nous avons fait le choix de le diffuser sous différentes licences :

• La SIL Open Font License (OFL) qui est spécifique au partage de fontes libres, pour nos caractères typographiques. Le choix de cette licence en particulier est conditionné par la licence de la typographie que nous avons forké (dont nous avons fait une dérivation), la Poppins. En effet, les versions modifiées d’une typographie sous licence SIL OFL doivent être distribuées dans les mêmes conditions ;
• La licence CC-BY-NC-SA pour le code source du projet, l’iconographie, les partis-pris de mise en page, les supports produits et tout ce qui n'est pas la typographie. Cela signifie que tous ces éléments peuvent être diffusés et partagés librement tant que l’usage n’est pas commercial - puisqu’il est réalisé dans le cadre de nos études, nous souhaitions que le projet participe aux communs sans qu’il ne puisse être exploité pour générer du profit, sauf autorisation spécifique accordée par nos soins - et qu’il soit partagé dans les mêmes conditions - sous la même licence - en citant ses autrices. La citation des autrices n’est pas à nos yeux un moyen d’avoir une quelconque reconnaissance, mais plutôt de s’assurer que toute personne découvrant le projet puisse retrouver son code source original et éventuellement échanger avec nous si l’opportunité se présente.

Enfin, concernant la diffusion, nous avons choisi d’héberger le code source du projet publiquement sur la plateforme GitLab, à partir de laquelle quiconque peut récupérer le projet et le modifier sur une copie personnelle. Nous prévoyons de rendre ce projet visible sur nos réseaux sociaux et sites web ainsi que, par le bouche à oreille qui démarre dans nos cercles plus proches, chez les designeur·euses graphiques.