Les designs système pour l'architecture, un parallèle avec l'UI / UX

Script de la vidéo

Bienvenue au podcast agile BIM donc ça faisait un petit peu longtemps que je j'avais pas sorti d'épisodes donc en ce moment je suis assez occupé parce que je sors une nouvelle version de l'application Bricks. Donc vous pouvez trouver à l'adresse Bricksapp.io et on va rajouter pas mal de fonctionnalités et notamment une vision globale des projets au niveau de l'agence et plein d'autres choses si vous êtes intéressés vous pouvez me contacter et on peut en discuter pour que je vous explique un peu notre développement.

Voilà et du coup là je reviens un peu sur sur l'agile BIM et sur ce podcast et donc avec un nouvel épisode sur le thème des design systèmes. Donc je sais pas si ce terme vous parle donc c'est un un terme qui est populaire dans le design web de design d'interface et qui est de plus en plus important dans ce domaine. Mais en fait en écoutant en me renseignant sur le sujet, je me suis rendu compte qu'il y avait un parallèle avec l'architecture, donc c'est pour ça je voulais vous en parler.

Donc ce parallèle c'est quoi en fait moi je vous explique déjà un petit peu mon histoire avec les design system et pourquoi c'est quelque chose qui m'intéresse particulièrement.

Dans les années 2005-2006, je travaillais pour une agence d'architecture et d'urbanisme assez connue qui s'appelle l'agence TER et donc à l'agence TER je faisais pas mal de DCE et je travaillais du coup sur pas mal de détails j'ai eu l'idée en fait de documenter ces détails ce qui n'était pas vraiment le cas avant de manière à que les personnes de l'agence puissent avoir des informations sur comment faire par exemple un garde-corps standard entre guillemets de l'agence TER ou un autre détail de l'agence et pourquoi j'ai pensé que c'était une bonne idée souvent les agences d'architecture, les agences d'urbanisme peu importe on a des solutions qu'on réutilise de projets en projet qui est une chose de tout à fait normal c'est ça qui fait l'expérience de l'agence c'est ça qui fait le style de l'agence.

Si une agence avait tout le temps un style différent avec toujours une manière différente de faire des gardes-corps de faire je sais pas les terrasses en bois etc. On perderait un peu le fil. Ca arrive des architectes qui changent de style vraiment au cours de leur carrière il n'y a pas de souci avec ça mais souvent on a un style qui se répète et c'est quelque chose de bien. Mais par contre là où c'est pas très bien c'est la manière d'utiliser ces éléments répétitifs en fait en architecture on a un peu l'illusion qu'on fait à chaque fois des one shot des créations qui sont uniques et en fait c'est pas le cas quand on regarde l'oeuvre des grandes architectes on voit que les bâtiments se ressemblent.

Ce qui pêche c'est qu'on assume pas cela l'assumer c'est quoi c'est dire les éléments se répètent, les détails se répètent et c'est bien parce que c'est un détail qui va s'améliorer avec le temps et pour que ça s'améliore, il faut qu'il y ait un endroit où on définit ce que c'est un détail de l'agence, qu'il est utilisé sur tel projet tel projet tel projet qu'on a constaté des problèmes sur tel projet mais voilà parce qu'on a utilisé tel matériau dans les prochaines versions de ce détail on va faire autrement etc

Dans l'industrie, c'est pas des créations uniques et quand le produit arrive sur la chaîne de production il a déjà été testé pas mal de fois. il est produit en série il peut avoir des modifications pour l'améliorer. Ils peuvent faire ça parce que le produit reste relativement constant dans sa fabrication et pareil il est documenté donc il y a des feedbacks il y a des retours d'utilisation qui donnent des indications pour l'améliorer.

Donc voilà le sujet le problème et en quoi un design System pourrait être une solution à ça. Donc pour cela j'ai besoin de vous introduire un peu à qu'est ce que c'est pratiquement le design system dans le cadre du design d'interface web donc dans le web, tous les sites, les applications que vous utilisez au jour le jour donc il y a des éléments communs récurrents en fait qui vous servent à interagir avec l'interface. Donc par exemple les menus ça peut être une popup qui s'affiche et qui vous demande une information ça peut être l'affichage de vos projets d'architecture avec une image un petit titre un sous-titre ça on appelle ça une carte et les cartes c'est assez fondamental dans le design d'un site.

Voilà il y a toute une série de choses qui ne sont pas des choses qui sont spécifiques au site parce que le web a pareil de la même manière que l'architecture qui a des portes des fenêtres des planchers des choses qui sont connues de tous mais adaptés dans un style particulier. Le web pareil à des éléments standards, un vocabulaire des popups des menus qu'on ne peut pas on peut pas juste venir en tant que designer et dire là moi je vais inventer autre chose que le menu donc on ne réinvente pas la roue on utilise des éléments standards, mais par contre évidemment ils ont un style ils s'adaptent à la marque voilà il y a toute une série de choses là-dessus et donc il y a deux niveaux il y a le niveau d'adaptation à la compréhension générale de ces éléments du web de la même manière qu'on s'adapte à la compréhension générale des éléments d'architecture on ne peut pas juste réinventer la porte mettre la poignée en haut en bas c'est vraiment une expérience de beaucoup d'années et ça ne sert à rien de réinventer ça.

Et après il y a le niveau interne à notre projet mais également interne à l'agence. Donc c'est à dire que dans tel projet peut-être qu'on va on va créer une nouvelle idée de garde-corps pourquoi pas et ce serait intéressant que si dans d'autres projets cette idée est réutilisée que l'information soit accessible et même à l'intérieur du projet, évidemment on va essayer de ne pas avoir trop de modèles différents pour de mauvaises raisons, par exemple un modèle de garde-corps ou peut-être deux portes ou de fenêtres ou les dimensions varient, mais de manière qui n'est pas visible de l'utilisateur de l'utilisateur du bâtiment ça sert rien c'est une diversité qui n'apporte que de la complexité de gestion mais qui n'apporte pas de vraie valeur ajoutée. Donc c'est ça qu'il va falloir faire.

Donc en quoi le design system répond à un besoin pour uniformiser ces éléments. Donc déjà un design système c'est quoi. En fait c'est une sorte de catalogue de tous les composants qui vont constituer le vocabulaire d'un projet ou même d'une série de projets et donc ces composants sont organisés par leur type donc dans le cadre de l'architecture on pourrait imaginer par exemple organiser touts les détails de garde-corps organiser tous les détails de toiture etc. Et essayer de les distinguer suivant leur cas d'usage, on peut aussi documenter certains composants, certains éléments et dire qu'on souhaite ne plus les utiliser.

Quelqu'un qui travaille en agence, qui arrive il connaît pas du tout l'historique et après il dit ah oui c'est intéressant j'ai connu l'agence pour tel détail c'est très joli je vais le réutiliser alors il part sur cette hypothèse sauf que peut-être qu'il n'est pas au courant que ce détail en fait ça s'est pas bien passé sur sur site en fait il y a beaucoup de problèmes et donc on ne veut pas faire la même chose donc documenter le fait qu'on veut arrêter de faire quelque chose c'est déjà quelque chose d'important.

Donc pratiquement c'est quoi en fait donc dans le web, dans le design d'interface il y a des outils qui permettent de lister tous ces composants. On peut les utiliser également en architecture il y en un par exemple qui s'appelle Figma qui est gratuit. Imaginez par exemple que vous exporter vos documents types : les élévations, les plans etc sur Figma. Vous insérez donc les images dessus et à chaque fois vous documenter ces choses là,vous pouvez l'exporter en pdf . On peut très bien avoir un pdf, qui mise à jour avec tous ces détails et à mon avis c'est quelque chose qui est très bien Après vous pouvez évidemment le faire avec d'autres outils mais ce qui est important c'est de faire contribuer tout le monde de faire que tout le monde soit au courant de cette volonté de documenter les composants de l'agence, les détails de l'agence de faire qu'on ne prenne pas forcément la version exacte d'un projet qu'on essaie de le rendre plus générique de dire finalement dans ce projet il y avait une particularité c'est ça et mais va ça c'était vraiment spécifique au projet dans la version standard qu'on peut se servir comme point de départ dans des projets futurs, on va faire quelque chose de plus simple.

Voilà et en quoi cela ça peut vous aider quand on a une documentation claire des détails type de l'agence qui peut être mise à jour par toutes les personnes de l'agence on va perdre beaucoup moins de temps à dessiner des choses qui sont finalement en anglais on appelle ça "boilerplate", c'est à dire des choses qui sont banales en fait ne font pas la valeur ajoutée du projet. La valeur ajoutée du projet ça va être un espace particulier une solution particulière dans ce contexte là mais on va utiliser pour faire cette solution des éléments qu'on a déjà en stock. Et donc ça c'est une première chose d'éviter de perdre du temps à refaire des choses qui finalement ont déjà été fait par d'autres.

Un autre avantage d'avoir un design système c'est que ça permet de ne pas reproduire les mêmes erreurs que dans le passé c'est à dire que vous pouvez documenter les détails comment ils ont été mis en place sur les différents projets et ce qui a marché ce qui n'a pas marché et éviter de refaire les mêmes erreurs également. Evidemment vous pouvez monter en qualité un peu de la même manière qu'un industriel en fait de version en version il va améliorer son produit vous également dans l'implémentation dans la mise en oeuvre de vos détails sur vos différents projets vous allez pouvoir l'améliorer prendre en compte la réalisation parce que évidemment si on le conçoit de manière abstraite et après on le voit sur un chantier sur un vrai projet c'est pas la même chose donc on peut évidemment l'améliorer et enfin vous allez créer une cohérence en fait dans votre style qui va donner une impression de lisibilité donc vous pouvez communiquer également sur cette cohérence donc.

Un design système ça peut être aussi un outil de communication on le voit très bien là dans les grosses sociétés elles publient leur design d'interface par exemple Décathlon une boîte française mais plein d'autres boîtes à l'international comme Google, Facebook tous ont leur design système en ligne. Donc c'est quoi l'avantage pour eux le fait que ça soit en ligne ça donne donne une obligation en fait d'être clair sur la manière d'exprimer ce qui compose nos interfaces mais ça peut être aussi un moyen de montrer que ce qu'on fait c'est cohérent qu'il y a une cohérence globale il y a même donc des design systèmes qui sont publics donc on pourrait imaginer ça pour l'architecture bon il y a un peu un gap culturel à franchir dans la notion de partage.

Mais rien ne l'empêche pratiquement donc par exemple dans le domaine de l'UX, ceux qui ont des design systèmes open source qui peuvent être réutilisés, qui ont été conçus pour une utilisation massive c'est par exemple Google avec son design system Material qui sert de base à des centaines et des milliers de sites. Donc à la fois après le style se répète de site en site ça c'est une chose Mais donc c'est un élément peut-être négatif parce que c'est un peu pareil. Mais un élément positif c'est que ça élève la qualité de l'interface ça donne un vocabulaire commun à de très nombreux sites et ça évite à beaucoup beaucoup d'utilisateurs finalement de galérer parce que à chaque fois ils ont une nouvelle expérience à comprendre.

Donc voilà pour les intérêts du design system après comment faire en pratique donc vous pouvez la première étape en fait c'est de lister tous les composants tous les détails en fait qui sont importants pour vous qui fait le style de vos projets de le faire si possible en petit groupe ou à la limite avec toute l'agence si c'est possible si vous n'avez pas une trop grosse agence et essayer de voir sur quel projet ces détails ont été implémenté de voir un peu les différences, les différences entre les projets, ce qui est spécifique au projet et ce que ce qui est plutôt générique et après de trouver un moyen pour le documenter donc évidemment il y a beaucoup de moyens ça peut être sur une In design ça peut être sur Autocad, ça peut être sur n'importe quoi pourvu que ça soit accessible facilement par toutes les personnes de l'agence, qu'on puisse faire des mises à jour que éventuellement on puisse le publier en ligne, ça c'est encore une autre option.

Donc ce que je vous suggère si vous ne connaissez pas c'est de tester Figma donc il a un outil de dessin en ligne qui est très sympa donc est utilisé par les designers du monde entier, qui est gratuit la version gratuite elle est très étendue. Ca c'est une option et qui permet également de publier en ligne sans problème après vous pouvez plus classiquement utiliser In design par exemple et avec une page par détail. Il faut juste penser à pouvoir le mettre à jour de manière simple l'avantage d'un outil comme Figma c'est que tout le temps en ligne a pas de notion de version c'est toujours à jour accessible de partout voilà c'est ça qui qui est tout de même important.

Et si vous voulez des conseils plus détaillés et adaptés à votre cas sur comment mettre en place, cela je peux évidemment vous aider n'hésitez pas à me contacter par exemple sur Linkedin et enfin je vous dis à bientôt pour un prochain épisode sur cette chaîne Agile BIM podcast où on va parler d'autres thèmes sur l'agilité et sur différentes méthodes qui peuvent vous faire gagner du temps et rendre votre collaboration plus efficace pour dessiner des meilleurs projets.

Voilà à bientôt !