Le Projet “Imprévisible”
Ce projet est mon travail de fin de 2ème année en web à l’Haute École Albert Jacquard. La consigne était de créer tout un contexte de design fiction sous la forme d’un site web.
Son concept
L’idée derrière ce contexte, c’est d’imaginer des lunettes à reconnaissance faciale qui prédisent nos relations sociales pour les rendre "parfaites".
Son idéalisation
Les recherches technologique
Pour trouver l’idée du concept, j’ai commencé par lire des articles sur les différents domaines technologiques. Par la suite, j'ai dû choisir une technologie qui servirait de point de départ pour imaginer le contexte de mon design fiction.
La technologie qui me parlait le plus, c’était la reconnaissance faciale.
La réflexion de la thématique
Avec cette technologie, j’avais trois idées de thématique :
- La première était de scanner les animaux errants pour aider les vétérinaires pour faire du suivi sur leurs soins.
- La seconde était de mettre des caméras dans les magasins pour mettre les prix en fonction des revenus des personnes.
- La dernière était d’utiliser la reconnaissance faciale pour savoir à qui on avait en face de nous.
C’est sur la dernière idée que je suis parti. Puis, c'est en regardant l'émission “Mariés au premier regard” que j’ai eu l’idée de faire ça sur la compatibilité relationnelle, et aussi en voyant les applications de rencontre qui vous promettent de vous trouver la personne qui vous correspond parfaitement.
Son contexte
C’est après tous ça que j’ai eu mon idée pour mon contexte : et si on utilisait la reconnaissance faciale pour trouver des relations idéales avec les personnes que vous croisez au quotidien ?
Mais il fallait un objet où je pouvais mettre les caméras qui servent à analyser et que tout le monde peut porter au quotidien. Du coup, l’idée la plus facile, c'était des lunettes connectées.
Son contenu
Au début, j'étais un peu perdu sur ce que je voulais raconter. La seule chose que je savais, c'est qu'il me fallait une page qui mette le contexte de ce monde fictif.
En imaginant des situations qui pourraient se passer, j'ai eu deux idées bien distinctes :
- La première, c'était si les lunettes créaient des relations superficielles et non authentiques.
- La seconde, c'était que ça créait de l'isolement pour ceux qui ne veulent pas les porter, car les porter n'est pas une obligation.
Puis, en discutant avec des professeurs, comme je parlais d'un code couleur pour le pourcentage de compatibilité et d'un onglet où on pouvait voir les points communs avec la personne au niveau de l'interface des lunettes, on m'a conseillé de mettre des visuels pour avoir une vision concrète de ce point-là.
Son nom
Pour le nom du projet, j’ai hésité entre «Imparfait» et «Imprévisible». «Imparfait», car il n'existe pas de relation parfaite, étant donné que nous sommes tous différents. Mais j’ai finalement choisi « Imprévisible », car l’IA ne saura jamais prédire l’imprévisibilité humaine, qui nous rend authentiques et rend nos relations véritablement humaines. »
Sa mise en forme
Ma page d’accueil
Je voulais quelque chose de sombre pour faire ressortir mes images, qui redirigent vers les différentes pages de mon projet.
-
La première version était mal structurée, on comprenait que toutes les pages avaient le même niveau d’importance.
-
La deuxième version était plus originale, mais vu que mon nombre d’images était impair, cela ne rendait pas comme je voulais ; de plus, ce n’était pas intuitif à l’utilisation.
-
La version finale est simple et facile à comprendre, mais l’utilisateur doit passer sur les images pour découvrir le thème des différentes pages, afin de ne pas avoir toutes les informations d’un coup
Les polices utilisées
Figtree
DIN 2014
Son nuancier
La page « Un monde avec Lunas »
Pour cette page, je l’ai rédigée en reprenant les codes du recrutement de bénévoles pour l’aide humanitaire : c’est-à-dire en jouant sur les sentiments des utilisateurs et en restant très positif.
L’inspiration pour le design est venue du site Unicief.
-
J'aime bien la disposition des éléments de mon premier essai, mais je n'étais pas convaincu par ce vert-là.
-
Elle manquait de dynamique dans le rythme de lecture.
-
La version finale
Les polices utilisées
Bricolage Grotesque
Inria Serif
Son nuancier
La page « Le Caméleon»
Cette page raconte une histoire personnelle, destinée à démontrer que les prédictions des algorithmes ne sont jamais fiables à 100 %. Dans les relations humaines, il existe des paramètres imprévisibles, comme notre capacité à faire des compromis, notre empathie envers les autres ou, tout simplement, ces liens inexplicables que l’IA ne prend pas en compte. Sur le papier, deux personnes peuvent se ressembler et pourtant ne jamais s'entendre ; à l'inverse, deux êtres totalement différents peuvent se compléter parfaitement.
L’inspiration pour le design est venue du site Frandroid.
-
La version prototype était bien fixée, mais en la codant, j’ai dû faire quelques modifications dans la taille de certains éléments.
-
Pour le design final, j’ai changé la police de mon corps de texte pour plus de lisibilité.
Les polices utilisées
Open Sans
Koulen
Son nuancier
La page «FAPSL»
Le FAPSL est l'endroit où je mets en scène la discrimination qui peut frapper ceux qui décident de ne pas porter les lunettes, par refus d'être influencés dans leurs rencontres potentielles. Or, les lunettes Lunas sont devenues un code social incontournable pour être acceptées dans la société. Pour illustrer cela, j'ai décidé de créer une conversation sur un forum où les utilisateurs témoignent de discriminations vécues au quotidien. Pour rédiger ces témoignages, je m'inspire des discriminations faites aux femmes voilées, que j'adapte à mon design fiction.
-
Le premier essai ressemble plus à une conversation de groupe qu'à un forum.
-
La version finale
Les polices utilisées
IBM Plex Sans JP
Diplomata
Son nuancier
La page «Lunas»
Cette page est le mode d’emploi des lunettes où l’on peut retrouver un visuel des différentes fonctions, car les images expliquent mieux l’utilisation que les mots. Pour le créer, je me suis inspiré du fonctionnement des lunettes connectées qui existent déjà.
L’inspiration pour le design est venue du site Apple.
-
La première version de cette page était dans les tons de vert avec une police carrée, mais cela ne rendait pas ce que je voulais.
-
Dans la seconde version, j'ai mieux réussi avec une police plus arrondie, et les couleurs donnaient un rendu plus futuriste à toute ma page. Mais mes images étaient de mauvaise qualité et ne faisaient pas futuristes.
-
La version finale
Les polices utilisées
Figtree
Fabulosa
Son nuancier
La partie code
En codant j’ai rencontre quelques problème avec mon js et dans le positionnent de certain élément.
L’animation du header sur la page d’accueil m’a donné du fil à retordre. J’avais commencé à la réaliser en CSS , mais je me suis rendu compte par la suite que ce n’était pas compatible avec le rendu souhaité. Je l’ai donc fait en JS avec GSAP et ScrollTrigger.
Au début, mes éléments d'animation se mettaient à clignoter. Une fois ce problème réglé, un autre est apparu : le texte situé après l'animation apparaissait dans mon footer. Lorsque j’ai réussi à le remettre à la bonne place, l'animation était saccadée. J’ai fini par comprendre le problème : avec ScrollTrigger, il est difficile de passer d'une position fixed à une position sticky. J'ai donc ajusté la hauteur de mon header pour stabiliser l'animation.
Dans la page FAPSL, pour la fonction où l’utilisateur peut écrire un message, j’ai galéré pour qu’il s’affiche avec la même disposition que les autres témoignages, mais j’ai finalement réussi après quelques essais et erreurs.
Pour la page Lunas, les animations de changement d’images ont créé des problèmes de mise en page, car toutes mes images s’emboîtaient les unes dans les autres. La solution que j’ai trouvée a été de définir des hauteurs fixes sur mes images.
Dans la navigation de la page d’accueil, je n’arrivais pas à placer mes boutons sur les images tout en gardant leurs animations, mais j’ai résolu ce problème en les mettant dans une div de la même taille que l’image, en position absolue.