Design en commun

Cette publication a pour objectif de présenter une démarche contributive de design et de développement web, au travers des méthodes, des outils et des livrables réalisés pour le site internet et l’identité graphique du laboratoire de recherche en design de CY école de design, le Transition design lab.

Elle a pour intention d’étayer et de valoriser des points d’amélioration et de réflexion pertinents pour le design et le développement en commun de sites sobres, accessibles, beaux et utiles. En résumé, les éléments abordés dans cet article ont attrait avec la contribution et la collaboration en design et en développement web.

La prestation de design a débuté par la définition d’un brief design, présentant l’ensemble des attentes, des contraintes et des données d’entrée du projet. Cet exercice de mise à plat a été réalisé à plusieurs sur FigJam (lien externe), un tableau blanc (board) collaboratif en ligne. Il s’agit déjà d’une première familiarisation pour l’équipe aux outils et livrables des designers.

Ce brief a été coconstruit en suivant la méthode VRAP (lien externe), un modèle de design stratégique créé par Praticable (lien externe) (anciennement Collectif Bam (lien externe)), pour travailler en cohérence toutes les dimensions importantes du projet.

Dans le cadre du projet de site internet et d’identité visuelle du Transition design lab, la Vision regroupe les valeurs et principes philosophiques du laboratoire, sous forme de mot-clés, ainsi que les objectifs de communication du laboratoire. L’équipe souhaitait notamment développer une image sérieuse, collective et bienveillante.

Pour Relation, il a été question de spécifier les acteurs·rices du projet, ainsi que leurs bénéficiaires. Il s'agit bien sûr des chercheurs·ses, des associés·s et des organisations partenaires du laboratoire.

Sur le plan technique, qualifié par le champ Action au sein du VRAP, l’équipe a défini les différentes fonctionnalités attendues par le site internet et l’identité visuelle. C’est donc à ce stade que le choix du CMS (Content Management System ou SGC pour système de gestion de contenu, en français) s’est précisé.

L’administration du site devait être facile à utiliser, simple et correspondre aux niveaux d’attentes et d’aisances de l’équipe. Ensuite, ce CMS devait permettre la génération et la rédaction de pages facilement et rapidement. L’indexation des contenus par des logiques de tags et de liens entre les pages était également attendue.

Autre besoin prioritaire, le site devait permettre une connexion avec HAL (lien externe), les articles, les thèses et autres publications du laboratoire. De plus, un portfolio devait être intégré au site afin de présenter des artefacts, des objets numériques ou non produits par le laboratoire.

Enfin, même s’il n’existe finalement aucun ordre dans la présentation de ces contraintes, l’équipe cherchait un site rapide à charger, sobre d’un point de vue formel (esthétique) et d’un point de vue fonctionnel (technique) afin de minimiser son impact écologique.

C’est pour toutes ces raisons que le laboratoire a choisi d’utiliser Osuny (lien externe), un CMS open-source, libre et éco-conçu par Noesya (lien externe), une coopérative de développement web engagé pour un numérique esthétique et éthique. Sans oublier qu'il s’agit d’un CMS français produit par une coopérative, raison de plus pour choisir cet outil.

Autrement dit, lors de cet atelier de Brief design, l’équipe a consulté le design system d’Osuny mis en ligne et partagé dans la communauté Figma, afin de vérifier si le CMS répondait à leurs besoins.

Enfin, le dernier volet traité par le VRAP se consacre aux formes et signes esthétiques employés et souhaités par le Transition design lab. L’identité visuelle devait respecter un ton sérieux, explicite, didactique et accessible. Une nouvelle fois, le choix d’Osuny comme CMS répondait tout à fait aux contraintes esthétiques imposées.

Une fois le brief terminé et validé, l’étape suivante fut la définition de l’identité visuelle du laboratoire. La livraison d’une charte graphique était attendue pour la création du site internet, des posters et de l’ensemble des supports du laboratoire.

Deux fichiers, livrables intermédiaires ont été mis en place pour réaliser cette tâche : dans un premier temps, un FigJam (comme le brief), appelé Moodboards pour créer des planches visuelles, puis un Figma, nommé Recherches graphiques pour explorer et converger vers les éléments graphiques définitifs du laboratoire.

Enfin, une fois l’identité visuelle définie, une charte graphique en bonne et due forme fut livrée et continuellement améliorée jusqu’à la livraison finale du site internet.

Ce document, réalisé sur Figma, a permis de constituer les styles et variables de l’identité (à intégrer plus tard dans le prototype du site). Il précise l’ensemble des éléments graphiques du laboratoire, dont le système colorimétrique (pour le site et les programmes de recherche) avec les pratiques et associations à effectuer pour favoriser une bonne accessibilité (AAA pour les contrastes de couleurs), la typographie et son utilisation, le logo et ses déclinaisons, les icônes, les formes, les compositions possibles, des informations pratiques pour l’intégration d’images (formats, pertinence, poids), des illustrations, ainsi que des liens vers les fichiers annexes à la charte (comme les recherches graphiques ou le prototype du site internet).

Ce document est accompagné d’un dossier graphique, lui aussi mis à jour régulièrement et partagé avec l’ensemble de l’équipe. Ce dossier comprend la totalité des exportations des fichiers graphiques en différents formats (jpg, png, svg).

Parallèlement à la création de l’identité graphique, l’équipe a travaillé sur le plan de son site internet. Cet exercice fut, lui aussi, réalisé avec FigJam, le board collaboratif de Figma. Encore une fois, la dimension collaborative des outils en ligne des designers favorise le travail collectif, diminue les allers-retours et augmente l’interaction et les échanges, contrairement à des échanges mails par exemple. La parole, l’échange direct et spontané, bien que dégradé par le dispositif de visioconférence, est, pour la pratique du design, impossible à soustraire. La création du plan site ou sitemap en anglais, fut concentrée dans un temps d’échange de quelques heures. Une fois l’atelier terminé, le plan de site est validé. Quelques légères mises à jour ont été effectuées par la suite. Ainsi, le format d’atelier permet de circonscrire une étape de projet et d’acter la livraison d’un livrable intermédiaire, le plan de site.

Le plan de site, sitemap en anglais, est une étape cruciale pour la conception d’un site internet. Il est question, à la fois, de structuration et d'indexation de contenu. L’équipe a défini les grandes entrées du site, présentes dans le header (en-tête du site), ainsi que la composition de chaque page. Pour réaliser ce travail de cartographie, l’équipe vérifiait simultanément leurs propositions avec le thème Figma d’Osuny. Un va-et-vient nécessaire entre le FigJam du plan de site et le Figma du design system du thème Osuny pour valider ou non les idées de structuration et de composition des pages du site.

Grâce à ce plan de site, la rédaction du contenu pouvait débuter. L’équipe éditoriale a ainsi produit les textes présents dans le site grâce à ce plan, lui-même utilisé pour générer les premières pages sur l'interface d’administration, qu’on appelle le backoffice. Ce dernier avait, en effet, pu être mis en ligne par Noesya quelques jours auparavant. Ainsi, l’équipe chargée de la rédaction pouvait d'ores et déjà insérer quelques contenus et apercevoir l’avancement du développement. Fond et forme se sont alors réalisés simultanément.

Parallèlement à ce travail d’écriture et à la mise en ligne du site, une importante contribution au design system d’Osuny fut entreprise pour optimiser la réalisation d’une maquette haute-fidélité du site. Ce travail constitue une importante contribution au projet d’Osuny pour l’ensemble des designers et développeur·eur·s qui souhaitent utiliser ce CMS. Les objectifs de cette contribution sont multiples.

Tout d’abord, le premier enjeu fut d’améliorer la customisation du thème en créant et en appliquant des variables (lien externe) à l’ensemble des éléments. Ces variables regroupent des données relatives à la forme du thème comme des règles typographiques (police, taille, graisses, interlettrage, interlignage, etc), des références colorimétriques, des dimensions (espacements, largeurs et rayons des bordures, tailles des supports, etc). La similitude avec les variables CSS utilisées en général pour le développement d’un site est frappante. La logique est naturellement proche, si ce n’est identique. Le logiciel Figma propose d’ailleurs un mode Dev, une sorte d’outil d’inspection dédié aux développeurs·euses pour étudier les maquettes créées par les designers. Dans ce mode, nous retrouvons les variables définies par les designers, dont leurs appellations (border-radius, padding-bottom, color-primary, etc) sont très largement inspirées des développeurs·euses.

Simultanément à la création des variables, le fichier Figma d’Osuny comprend aujourd’hui une librairie de composants clés en main, hautement fidèles à l’interface développée. Un UI kit disponible pour les designers pour concevoir et maitriser le design system d'Osuny. Ces composants incluent plusieurs options, elles-mêmes relativement proches des réglages proposés sur le backoffice d’Osuny. Chaque composant de l'UI Kit embarque des variables, des styles, des variants, des propriétés. La création de composant a permis d'harmoniser les éléments, de construire les pages sur Figma, de les visualiser, de les commenter et les modifier facilement et rapidement.

Une fois le prototype réalisé, il était temps de développer l’interface. À ce stade, le prototype est continuellement inspecté, avec le Dev Mode de Figma, pour réaliser le code du site. Côté développement, Osuny contient une feuille de style en Sass, dédiée à la configuration des variables. Ce fut la première étape du développement : modifier les variables disponibles dans la feuille configuration.sass.

Faire des variables est donc un exercice qui existe à l’étape de design sur Figma, et pendant le développement avec les feuilles de style (CSS, Sass). Elles sont d’ailleurs très similaires, si ce n’est identiques.

En ce qui concerne le développement de notre site, quelques feuilles de style ont été ajoutées en complément de la configuration.sass. L’équipe a ajouté, simultanément au développement, via l’interface d’administration d’Osuny, le contenu du site préfiguré dans le prototype Figma. Quelques semaines plus tard, le site était prêt pour le lancement officiel de la chaire de recherche, « le design de la décision ».