Erlebnis — Pour un monde meilleur
Génératif et web design, un potentiel inexploré
Dessein du génératif
Tout commence par une idée, il arrive que cette idée change, se transforme ou évolue. À plusieurs reprises, j’ai changé de direction, mais une chose est toutefois restée intacte, la volonté d’utiliser le génératif dans le domaine du web. Je suis convaincu depuis le début que le génératif est un outil très puissant. Selon moi, il est encore sous-exploité et l’idée d’inclure du génératif sur un site web est presque inexistante. Durant mes recherches, j’ai pu découvrir plusieurs projets comportant un algorithme, génération ou intelligence artificielle, mais aucun ne ressemblait de près à un site génératif comme je l’entendais. C’était donc l’occasion pour moi d’essayer.
Qu’est-ce qu’est ?
Ce travail de fin d’étude est d’abord une réflexion sur le génératif et le potentiel qu’il aurait dans le domaine du web. Ensuite, c’est aussi la possibilité de mettre en oeuvre un exemple de site génératif, mon portfolio génératif.
Philosophie du web
Le web est un milieu très hétéroclite dans ses applications, mais ses utilisations sont toutes aussi diverses que les supports sur lequels il s’affiche. Avec la technologie qui ne cesse d’inventer de nouveaux appareils, l’affichage d’une page web est alors sujette aux variations. Cette différence de support fait que le web doit suivre une philosophie, un code de conduite pour que le site soit accessible au plus de gens, il se doit d’être ‘responsive’.
D’autres méthodologies de travail ont émergé comme le design atomique, le design system. Toutes ces méthodologies, en plus de favoriser l’accessibilité pour les utilisateurs, peuvent aussi faciliter la vie des designers et développeurs. Le design system, principe qui consiste à créer un système visuel avec des règles, des ‘guidelines’, est dans une logique de ‘scability’ en anglais. Traduit littéralement en ‘évolutivité’, il signifie “sa capacité à faire évoluer quelque chose”, ici par exemple, le système visuel d’une marque, d’un site. On conçoit de manière durable et évolutive une identité visuelle.
Faire du design de manière durable, c’est gagner du temps, ne pas réinventer la roue et s’assurer que quoi qu’il arrive, le design s’adaptera et évoluera au fil du temps. Cette même durabilité cultivée ici avec un design system pourrait être cultivée d’une autre manière, avec le génératif.
Multiplicité
Utiliser le génératif dans un design a un avantage. Grâce à ses variations, il donne un résultat toujours différent. Cette différence permet de ne pas se lasser. Contrairement à un design classique qui est totalement fixe. De plus, le taux de variation ne dépend que de nous. Selon ce que l’on souhaite, il peut y avoir des petites ou grandes variations. Ce principe de multiplicité peut être appliqué de ma manière flexible en fonction du projet. C’est la possibilité d’éveiller l’intérêt chez l’utilisateur à consulter la page sur la durée. C’est toujours agréable de consulter un site bien fait, cela l’est encore plus s’il varie, car il ne cessera jamais de nous montrer des versions différentes.
“Process matters as much as the result”
Le génératif permet de réfléchir en mettant le procédé au-dessus du résultat. Se concentrer sur la démarche et non sur le résultat permets d’atteindre un champs de résultat plus large. Par exemple, il est demandé de faire 16 posters différents. Au lieu de faire les 16 posters manuellement, faire un outil qui permet de le faire de lui-même. C’est ce que le studio Chevalvert a fait pour la FFP (fédération française du Paysage).
L’agence a constitué une identité visuelle qui se base sur le génératif. Ci-dessus, le fonds est génératif et donne des résultats toujours différents. C’est aussi le cas pour tous leurs supports visuels, cartes de visites, posters, etc.
Cette mentalité permet de concevoir sur le long terme. Le studio peut aujourd’hui créer un visuel pour n’importe quel format en quelques secondes et sans difficulté. Que ce soit pour une agence de communication ou une agence de web, inclure le génératif est un gain de temps sur le long terme non-négligeable.
Mise en œuvre
Recherches et réflexion
Le début de mon projet a été une phase de réflexion, de recherche et de lecture. Le site algorithms.design est l’une de mes découvertes. Il présente des projets utilisant un algorithme pour faire du design. Par exemple, ce site qui génère des oeuvres du suprématisme de manière aléatoire.
Rapidement, j’ai été emballé par le principe. Plus proche du milieu du web, il y a ce générateur de combinaison de police, FontJoy .
Je me suis rendu compte qu’il existait déjà beaucoup de sites, mais aucun qui génère un site entièrement. Il tenait donc qu’à moi de tout mettre en place.
Erlebnis
Durant mes recherches, j’ai aussi lu sur le sujet et j’ai pu découvrir le terme Erlebnis. L’Erlebnis est un terme qui est apparu au 19ᵉ siècle. Il signifie “tout ce qu’on a éprouvé soi-même […]”. Pour ne pas le confondre avec d’autres termes, il doit “désigner un évènement marquant, une expérience intense […]”. Erlebnis est selon moi ce qu’on devrait chercher à atteindre lorsqu’on conçoit avec le génératif.
Pistes et idées
Art expérimental
Un site est génératif quand un certain nombre de paramètres varie. Il y a la police (sa famille, sa taille, son interlignage), les couleurs utilisées, l’espacement des éléments ou même son contenu. L’une des premières pistes fut alors de générer tout. Il s’agissait de voir le site génératif comme une oeuvre expérimental. Ici, le but est purement artistique, voir esthétique. Après longues réflexions, j’ai compris que ce n’était la direction que je souhaitais pour mon projet.
Si je souhaite faire une œuvre générative, tout doit être génératif, le contenu aussi. Un site avec un contenu généré ne donnerait aucun autre intérêt que celui d’une œuvre. Même si le principe de créer une œuvre expérimental est un but en soit et est une direction concevable, ce n’est pas ce que je souhaite essayer de faire avec le génératif. Je recherche plutôt à utiliser le génératif de manière effective et concrète dans le domaine du web.
Portfolio génératif
Afin d’utiliser le génératif de manière concrète, il me fallait du contenu, je me suis donc tourné vers un portfolio. J’ai décidé cela pour plusieurs raisons. Dans un premier temps, c’est l’occasion de se démarquer des autres avec un site qui est toujours différent. De plus, utiliser le génératif dans ce cadre permets de se présenter de plusieurs manières différentes et de donner plus d’informations qu’un portfolio classique. Le contenu est génératif, mais déjà défini, c’est un bon compromis avec mon idée initiale de tout générer. En parallèle de la réflexion sur la mise en œuvre d’un site génératif, j’avais déjà commencé à coder sur le côté. Après l’idée de faire un portfolio, j’ai adapté ce que j’avais déjà fait pour coller à un portfolio. Après quelques semaines, la date de remise du MVP (minimum required project) s’approchait de plus en plus, je me suis donc concentré sur le code, sa génération et non sur l’esthétique. L’important était d’avoir les bases de mon projet, une génération de style et de contenu.
La remise du MVP était accompagnée d’une présentation de quelqu’un d’autre. Tous déjà anticipés, les commentaires étaient globalement positifs, et ce, qu’il n’allait pas était normal pour un MVP. Le plus gros défaut à ce stade était son apparence. Depuis le début, je me concentre sur le code afin d’avoir la base de mon projet, une génération de style et de contenu. Il était maintenant nécessaire de travailler l’esthétisme.
Construire un portfolio génératif
Pour concevoir le visuel d’un site génératif, il faut créer un design de site fixe. Tout en faisant cela, il faut réfléchir aux potentielles variations. Tout ne doit pas varier, seulement quelques éléments. Dans mon portfolio, par exemple, j’ai fait le choix de faire varier le bord de quelques éléments. Il a fallu vérifier que le texte ne sorte pas du dégradé, qu’il soit carré, arrondi ou totalement ronds. Après vérification, je pouvais valider cela dans mon design.
Inclure des variations est compliqué aux premiers abords. Il faut vérifier que toutes les variations soient esthétiques et faisables en code et qu’il soit possible de passer d’une variation à une autre. Par exemple, il est compliqué de passer d’une balise image à une balise div alors que modifier l’arrondissement d’un élément est assez simple.
Pourquoi utiliser du génératif pour un portfolio
Choisir, c’est renoncer
Premier avantage, je ne dois pas faire de choix. Pour un portfolio classique, on doit faire le choix d’une typographie, d’une photo de profil, du style global. Rien ne guide les choix d’une typographie si ce n’est que l’appréciation d’une d’entre-elles. Dès lors, il ne s’agit que de se présenter selon nos appréciations, nos goûts du moment. Aujourd’hui, j’aime la Roboto, mais peut-être que demain je préférerais l’Helvetica. Pourquoi faire un choix si on sait qu’il changera tôt ou tard. Pour moi, la question du choix est compliquée à résoudre. Pour ne pas renoncer, je ne choisis pas.
Faire un choix pour la forme est compliqué, mais cela est aussi applicable pour le fond : le contenu. Il y a aussi un choix dans les informations que l’on souhaite communiquer et la priorité qu’on leur donne. Je n’ai pas envie qu’une information prévale sur une autre. Il est trop simple de ne mettre que le meilleur de nous en avant. Utiliser le génératif permets d’aller à contre-courant et de ne pas montrer uniquement le plus intéressant ou le plus avantageux. Montrer des informations moins essentielles et accessoire en ressort avec plus d’originalité et plus de fidélité sur ce que je suis.
Une autre raison plus personnelle m’a poussé à cela. Juste avant mon travail de fin d’étude, j’étais en stage trois mois dans une agence et l’un des compliments que j’ai reçu est ma pluridisciplinarité, “je sais faire un peu de tout”. Faire un portfolio génératif est aussi l’occasion de montrer tous ses champs de compétences sans que le contenu soit une liste de choses que je sais faire.
Génératif et expérience unique
Le design génératif est déjà présent dans beaucoup de domaines telle la mode, l’architecture, la modélisation 3D, etc. Ce projet a été l’occasion d’explorer les possibilités du génératif dans le domaine du web. Je me suis surtout concentré sur le potentiel du génératif à offrir une expérience unique.
Selon moi, pour qu’une génération ait un certain intérêt, il faut que cela rime avec singularité. Le génératif permet facilement d’avoir un nombre élevé de combinaisons. Dès lors, il ne faut pas tomber dans le piège du nombre et chercher à avoir des millions de combinaisons. Il s’agit de trouver un juste-milieu dans le nombre de combinaisons, mais il faut surtout accorder plus d’importance à la qualité des variations et en avoir un réel intérêt. Deux types de variations existent.
Décor
La première est celle qui concerne le décor, le fonds d’une génération. Elle permet d’être bien différente de la génération précédente. Elle doit être capable d’avoir un minimum de variations. Dans un site web, elle se manifeste à travers le style, ses couleurs, sa typographie. Comme dit précédemment, il ne faut pas avoir un nombre trop important, sinon, l’autre type de variation va être mise à mal, la génération de contenu.
Contenu
Celle-ci concerne l’intérêt que l’on porte. La, où le fonds permet d’avoir un décor toujours différent, la forme nous donne l’intérêt de consulter cette différente génération. Le contenu peut se manifester de différentes manières. Cela peut être du texte, une image, une manière d’interagir. Dans mon portfolio, il s’agit de ma photo de profil, des informations à mon propos.
Yin et yang
Les deux types de variations sont complémentaires et doivent être présente pour donner une expérience unique et marquante. Sans le fonds, le contenu varie, mais l’intérêt est moindre car aucun sentiment de génération unique. Sans la forme, le seul intérêt réside dans ses différents décors. Il faut les deux, sans ça, le génératif perds de son intérêt.
Mise en oeuvre technique
Pour la mise en œuvre de mon projet, j’ai décidé d’utiliser Webpack et Laravel. Ce sont des outils que je maîtrise déjà. Le projet sortant de l’ordinaire, je ne souhaitais pas essayer un nouveau framework. Qui plus est, cela ne m’aurait pas plus aidé que ça. Pour la génération, j’ai tout simplement utilisé du Javascript. Pour les animations, j’ai utilisé GSAP. Enfin, afin d’avoir une trace de mon travail et permettre un accès à tous de consulter mon projet, j’ai utilisé Github. Il m’a été très utile pour suivre l’avancé de mon travail.
