Introduction
Ce n’est un secret pour personne, l’IA a le vent en poupe en ce moment et c’est primordial en tant que designer de se mettre à la page et d’expérimenter les nouvelles possibilités offertes par les puissants outils qu’elle propose.
Je ne voulais pas utiliser l’IA juste pour le plaisir de prompter de manière hasardeuse tout en me fichant de résultat alors j’ai choisi un exercice de product design proposé par Monowi comme support et prétexte : il s’agissait d’imaginer une micro-interaction pour un bouton “Like”. En apparence : simple et efficace donc. Mais puisque j’aime relever des défis et que je souhaitais à tout prix “remettre les mains dans le cambouis”, j’ai décidé d’y aller à fond en mêlant mes différentes connaissances en product design, motion et dev.
Prêt à parler génération d’image ? Let’s go.
Spoiler : Non, je ne vais pas réellement rentrer dans les détails du sujet, mais plutôt m’amuser à proposer un cas d’application.
Étape 1 — Idéation
Mon idée était de concevoir un mini post “Instagram-like” avec une card comprenant une image et en dessous, un bouton “Like”. Simple. Basique.
J’ai d’abord entrepris d’aller à contre-courant de la demande initiale et de faire un bouton “Dislike” avec un compteur négatif, quelque chose de plus inattendu et d’un peu chaotique…
Finalement, j’ai opté pour davantage de magie…
Étape 2 — Inspiration
Pour mêler mes inspirations perso à ma pratique pro, j’ai voulu revisiter un symbole culte de mon enfance tiré de l’anime Sugar Sugar Rune : un cœur en cristal magique.
L’objectif : utiliser cette référence visuelle pour injecter une touche de nostalgie à mon UI dès lors que l’on cliquerait sur mon fameux bouton “Like”.
Étape 3 — Vectorisation & UI dans Figma
J’ai conçu ma card avec mon icon en guise de bouton “Like”, puis j’ai recréé le cœur au format vectoriel dans Figma, avec quelques ajustements mais de manière assez sommaire. J’aurais utilisé Illustrator si j’avais opté pour un résultat moins rapide mais plus rigoureux.
Étape 4 — Passage à la 3D grâce à l'IA
C’est à cette étape que la magie opère (ou presque). J’ai utilisé Sora de OpenAI pour générer un rendu plus réaliste et animé du cœur de cristal. Volontairement, j’ai dicté à Sora un court prompt comme “Glowing heart gem” afin de tester ses capacités, en lui ajoutant mon coeur vectorisé en image de référence.
Le résultat était bluffant : Sora a parfaitement interprété les facettes du coeur de cristal et m’a même proposé une transition de cette transformation du flat design à la 3D.
Étape 5 — Affinement du rendu 3D
Le coeur proposé par Sora était très beau et très détaillé… Trop détaillé pour l’usage que je comptais en faire dans mon UI. J’ai modifié le prompt pour simplifier mon rendu 3D. Sora a de lui-même ajouté du mouvement en faisant tourner le coeur sur lui-même. Fair. J’ai conservé ce coeur-là et ai poursuivi, malgré l’apparition de facettes beaucoup moins clean une fois l’objet de profil (c’était presque imperceptible lors du looping)…
Étape 6 — Animation dans After Effects
Pour simuler une vraie interaction, j’ai animé le cœur dans After Effects : quelques images-clefs sur des propriétés classiques comme l’échelle, la position ou l’opacité avec un peu de easing et le tour était joué… Enfin, à peu près.
ChatGPT m’a en réalité aidé à me débarrasser assez proprement du fond noir de ma vidéo d’origine et à ajouter un effet “translucide” à mon coeur en cristal.
P.S. On remarque ici que ma courbe a beau faire le tour de mon coeur, elle est bien moins belle que dans le poème auquel je fais référence.
Étape 7 — Export & compression
Étape intermédiaire pour publier dans mon playground : j’ai réalisé l’export comme à mon habitude via Media Encoder, puis converti ma vidéo en GIF via FFmpeg – probablement une des seules occasions que j’ai d’utiliser un CLI – en deux lignes de commandes. Grâce à Gifsicle, j’ai pu considérablement alléger le poids du fichier – de 902ko à 446ko – tout en préservant au maximum sa qualité.
De nouveau : mention spéciale à ChatGPT qui m’a orienté vers un format vidéo et un codec spécifiques avec canal alpha pour conserver la transparence du GIF.
Étape 8 — Intégration et rendu final
Un choix iconographique : un souvenir, pris à la va vite, avec des références personnelles. Quelques ajustements UI : on retiendra principalement la réduction de la taille du coeur en cristal. Et surtout de l’interaction : un déclenchement au clic du bouton “Like“, soutenu par un effet sonore… Le tout pour renforcer la satisfaction.
Cela m’aura pris à peu près 2 jours mais le résultat me convient très bien.
Attention : iOS/Safari ne supporte pas le format WebM et le fallback dans ce cas précis est un GIF sans gestion du noir donc le résultat est forcément bien moins convaincant…
Pourquoi cet univers girly ?
Pour rappel, cet exercice de product design mêlait la génération d’images par l’IA avec des éléments nostalgiques de mon enfance dans un projet à visée purement récréative (et exploratoire).
P.S. Ces stickers holographiques illustrés proviennent de l’artiste Monicherrie.