Les pieds sur terre — TFE
Fond et forme
C’est sur le contenu et l’esthétisme du site que j’ai le plus travaillé ces dernières semaines. Après les commentaires reçus de la présentation, je savais désormais quoi faire. Depuis le début, je travaille sur la génération des éléments et le résultat est assez brut. Je me suis rendu compte que je n’avais pas réellement travaillé sur l’esthétique du site. Dans un design de site non génératif, on contrôle tout, la police, le placement des éléments, la/les couleurs. Tandis qu’un site génératif, tu ne contrôles quasiment rien. Comment faire un design de site génératif si on ne peut se fixer sur rien ? Mes premières tentatives n’ont pas été très concluantes. J’ai décidé de faire un design classique sans prendre en compte la partie générative et dans un second temps, réfléchir à comment varier le design avec de la génération.
Recherches et inspirations
Avant de me lancer dans un design, je me suis lancé dans une recherche graphique et quelques inspirations.
La couleur a une place importante dans le site. Pour utiliser au mieux le principe d’aléatoire, j’utilise un dégradé de couleurs cela rends donc une combinaison de deux couleurs. De plus, durant mes tests, j’ai pu remarquer que la génération donnait des résultats intéressant.
Tabula rasa
Pour la maquette de mon site, j’ai décidé de faire un nouveau fichier Figma et ainsi recommencer afin de ne pas répéter les précédentes tentatives de maquettes qui n’étaient pas concluantes. Comme dit un peu plus tôt j’ai d’abord fait le design du site avec une police pour ne pas me bloquer. J’ai décidé seulement après être content du résultat d’essayer de modifier la police et voir ce que cela donne. Entre temps, j’ai aussi eu le temps de reformuler le contenu pour rendre ça plus compréhensible.
Le résultat me plaisant bien, le site génèrera donc une police aléatoire parmi cette liste :
- Raleway
- Inconsolata
- DM Serif Display
- Roboto Slab
- Lora
- Abel
- Questrial
- Catamaran
- Cuprum
- Montserrat
- Oswald
- Poppins
Le site actuel avait déjà quelques polices générées, avec le code fait en amont, je peux choisir n’importe quel police de Google Fonts et donc choisir quels polices je souhaite ou non sur mon site.
Il s’agit tout simplement d’un tableau ou il me suffit donc de changer le nom des polices. Tandis que WebFont se charge de chercher les polices sur Google fonts.
01000011 01101111 01100100 01100101
Fichiers JavaScript modulaires
Le code quant à lui avait besoin d’être organisé. Mon fichier JavaScript commençait à être assez lourd, + de 700 lignes. Afin de ne pas se perdre dans un seul et gros fichier, j’ai décidé de fragmenter mon code en plusieurs fichiers JavaScript. Après plusieurs centaines de lignes de codes, il s’agit plus de consulter un gros dictionnaire compliqué qu’un script. La tâche de coder devient alors fastidieuse, lente et pénible. Il est important de maintenir une certaine “quality of life”.
J’ai donc divisé le code pour chacune des parties générées, la police, les couleurs, le contenu ainsi que le layout dans des fichiers JavaScript différent. Encore une fois dans l’optique de rendre le code plus lisible et mieux optimisé, j’ai utilisé un fichier JSON avec tout le contenu génératif. Cela me permet de générer autant de contenu sans que mon code soit alourdi par contenu ajouté au fur et à mesure.
Quelques lignes de codes et quelques fichiers supplémentaires plus tard, je pouvais enfin y voir plus clair.
GSAP
Toujours dans l’optique de rendre le projet plus attrayant, je me suis lancé dans la recherche d’animations, de transitions et d’interactions. Les animations font parties intégrante de l’expérience d’un site. C’est une occasion supplémentaire d’utiliser l’aléatoire. Je souhaite développer deux animations. Dans un premier temps, avoir des transitions entre chacune des parties du site. Secondement, avoir une interaction avec le background.
Mieux s’organiser
Ces dernières semaines, j’ai l’impression de ne pas avancer. Depuis la présentation du MVP, je sais sur quoi je dois travailler, mais je ne sais pas comment le faire. L’idée de faire un site génératif remets en question le processus que l’on applique sur un projet plus classique.
Prenons l’exemple d’un site qui présente un produit ou une application. Tout d’abord il y a une phase de recherche, ensuite d’exploration. La constitution d’une identité visuelle se fait dans un premier temps et le code se fait quand le design est finalisé. Il n’y a pas ou peu de modifications après. Dans un projet comme le mien, le code se fait en même temps que le design. Pensant faire un design directement depuis le navigateur, je me suis rué sur le code et obtenir un résultat minimum qui collait au délivrable d’un MVP. Même si je ne trouve pas que cela soit une mauvaise idée, il aurait peut-être fallu travailler de manière plus conventionnel. Le MVP rendu, je me retrouve quand même à faire le design sur Figma.
Depuis le début, j’essaye d’avancer avec deux sacs de plomb où il est presque impossible d’avancer alors que la solution est de prendre un sac à la fois.
