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.

Un dégradé génératif

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.

Bingo !

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.

Un tableau JavaScript comportant des noms de police
Liste des polices actuels

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.

Visuel du MVP vs Beta

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.

Import des différents fichiers JavaScript

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.

Un premier jet d’une interaction

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.

--

--

--

Probably busy creating unmeaningful design experience…

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elie Durieux

Elie Durieux

Probably busy creating unmeaningful design experience…

More from Medium

The Unique Features of the LunaChow Project

Yemen: UAE-backed forces charge into Marib after taking Shabwah from Houthis

China Factory Sell Direct ks 0037 Powder CAS 288573–56–8 Safety to Mexico,USA,Canada

Merit Circle 质押挖矿教程_双语