Systèmes d’icônes 3D

Une méthode, trois matières

Les trois sets ont été faits de la même façon. Quelques icônes phares ont été modélisées dans Cinema 4D pour fixer la matière, la lumière et la profondeur du glyphe, et ces rendus sont devenus la cible. Le reste de chaque set a été généré par IA (une chaîne de diffusion Hugging Face) ancrée à ces références, puis nettoyé, normalisé et exporté en 2048 ou 4096 px, et livré comme bibliothèque Figma, un frame par icône pour un export en un clic. Ce qui change d’un set à l’autre, c’est la matière, et c’est dans la matière que vit la marque.

Cinema 4D — modélisation des icônes héros pour verrouiller le matériau verre, le shader et l’éclairage

Cinema 4D — affiner l’angle et l’éclairage sur la même scène

Les références 3D sont la raison pour laquelle les sorties IA se lisent comme une seule famille plutôt que comme 66 générations séparées

66 icônes qui ont l’air de jouets — une plateforme d’e-commerce pour enfants

Un retailer en ligne pour enfants a commandé un système d’icônes 3D sur mesure pour remplacer l’iconographie stock, plate et sans âme, de sa plateforme e-commerce. Deux problèmes : les icônes de catégories étaient fonctionnelles mais froides, et les icônes promotionnelles (soldes, retours, fidélité) ressemblaient à celles de tous les autres sites du web. Le brief demandait 66 icônes réparties en huit catégories fonctionnelles — navigation, paiement, campagnes saisonnières, puériculture — exploitables en format miniature (64–128 px à l’écran), sans que l’équipe marketing ait besoin de la moindre compétence en édition vectorielle. Le nom du client et de la plateforme reste confidentiel, à leur demande.

Chaque icône partage deux signatures. Les yeux mobiles — bombés, semi-transparents, légèrement asymétriques — donnent à chaque objet une personnalité sans y ajouter un visage qui viendrait concurrencer son identité. Une petite étiquette en tissu pend à chaque objet, avec un descripteur d’un seul mot en minuscules (Cart, Dream, Roar). L’étiquette fait office à la fois d’aide à l’accessibilité et de détail de marque. M’engager tôt sur ce système signifiait que chaque nouvelle icône était une variation autour d’un problème déjà résolu, et non une nouvelle décision de design.

Palette et langage de surface — ombres teintées de chaud, sans aplats noirs, formes gonflées brillantes

Les assets finaux ont été recadrés à 2048 × 2048 px sur fond neutre et livrés en PNG. Durée totale : environ trois semaines de bout en bout. Un système de 66 icônes à ce niveau de finition relève d’habitude d’un projet d’agence ; c’est le pipeline à deux outils (C4D + IA) qui l’a rendu réalisable en solo.

Les 66 icônes sont organisées en huit sections dans le fichier de livraison Figma, qui correspondent directement à la hiérarchie de navigation de la plateforme : Navigation & UI (7), Shopping & Livraison (13), Bébé & Nouveau-né (11), Jouets & Jeu (10), Éducation & Créativité (8), Vêtements & Accessoires (7), Santé & Soins (4), Saisons & Célébrations (6). Chaque frame est nommé selon la convention Icon — [Nom], pour un export d’assets sans friction.

21 icônes de verre et leur mouvement — un concept bancaire pour KBC

Les interfaces bancaires ont à la fois un problème de chaleur et un problème de confiance. Les icônes plates et monochromes sont claires mais froides ; elles font ressembler un produit financier à un utilitaire plutôt qu’à un service que l’on prend plaisir à utiliser. Ce concept auto-initié répond à un brief unique : donner à une appli bancaire une voix visuelle plus chaleureuse et plus premium sans sacrifier la clarté. Les icônes devaient se lire instantanément à petite taille (une barre d’onglets ou une ligne de liste de 24–48 px), rester cohérentes sur les 21 actifs pour que l’appli ne paraisse jamais assemblée à partir de banques d’images, demeurer indubitablement KBC — le bleu de marque, le logo, les motifs de carte et de pièce — et être réutilisables par une équipe marketing sans aucune compétence en 3D.

Une note sur le périmètre : il s’agit d’une exploration de marque, non d’un projet commandé. KBC ne l’a ni briefé ni approuvé ; j’ai utilisé l’univers de marque public de la banque comme contrainte précisément parce qu’une identité réelle et reconnaissable est le test le plus exigeant pour un langage d’icônes.

Chaque icône partage trois traits signature. Une peau de verre bleu translucide — une palette du marine au cyan dans un matériau givré et réfractif dont le bord capte la lumière et donne à chaque objet une véritable profondeur physique. Un glyphe blanc doux associé à des corps mats marine pleins, pour que le symbole fonctionnel reste lisible face aux reflets vitreux. Et des ancres de marque KBC — le logo, des cartes bancaires de marque et de petites pièces bleues reviennent tout au long, reliant chaque icône à la banque plutôt que de se lire comme un pack 3D générique.

Analytics & Growth — 5 icônes ; la peau de verre et les motifs récurrents de carte / pièce KBC maintiennent la cohésion de la famille

Un sous-ensemble des icônes a pris vie dans After Effects sous forme de courtes micro-animations en boucle pour des moments clés de l’appli. Le lancer de carte est le motion vedette — les cartes bancaires KBC se retournent et filent le long d’un arc fluide avant de se reposer en place (Card Protection, Card Insights, Digital Wallet, Payment Terminal, Recurring Payments). Les pièces se lancent et culbutent le long du même arc, puis se posent (Savings Account, Currency Exchange, Investments). Le bouclier de protection entre en balayant et capte la lumière, signalant la sécurité (Data Security, Family Shield, Insurance Protection).

Communication & Collaboration — 3 icônes

Global & Operations — 3 icônes

25 icônes holographiques — un concept d’app de messagerie

Il s’agit d’un concept auto-initié : un système de 25 icônes conçu comme le langage visuel d’une application de messagerie sociale de nouvelle génération, couvrant toute la surface d’un produit de chat moderne — messagerie, appels, présence, réactions, capture média et actions sur les fichiers. L’esthétique — chrome irisé, verre, dégradés candy-neon — vise droit un public jeune, expressif et social-first. La direction phare est « Aura », une application de chat expressive pour la Gen-Z où l’expression de soi est la boucle centrale : thèmes holographiques, réactions, notes vocales, médias éphémères et réponses assistées par IA, avec le set d’icônes lui-même qui agit comme la marque, de la tuile de l’app-store à la barre d’outils en plein chat.

Les deux formes d’icône encodent deux rôles : les disques ronds sont des actions d’UI in-app (barre d’outils, onglets, boutons en ligne) ; les tuiles carrées sont des lanceurs d’app / de fonction (caméra, vidéo, voix, galerie). Cette séparation est la raison pour laquelle le set se lit comme un vrai produit, et non comme un pack de stickers

Chaque icône partage trois traits signature. Une peau en dégradé holographique — une irisation balayée rose → magenta → violet → bleu, comme une nappe d’huile ou la surface d’un CD, où deux angles ne donnent jamais la même couleur. Un glyphe blanc en relief — une forme blanche douce, mate et légèrement granuleuse pressée dans la surface, qui maintient une lisibilité élevée face au dégradé chargé. Et un rebord de verre avec de la profondeur — un bord translucide et réfractif qui capte la lumière et donne à chaque icône une vraie présence physique.

Messaging — 5 disques ronds ; la peau irisée se lit comme une seule famille à travers des rendus générés séparément

Les 25 icônes sont organisées en cinq sections, séparées d’abord par rôle (action d’UI vs lanceur de fonction = rond vs carré) puis par groupe de tâches : Messaging (5, rond), Calls & Presence (5, rond), Actions & Reactions (5, rond), Media & Capture (4, carré) et Compose & Manage (6, carré). Un lecteur voit d’un coup d’œil quelles icônes vont sur une barre d’outils et lesquelles vont sur une grille d’accueil.

Calls & Presence — 5 disques ronds

Media & Capture — 4 tuiles carrées

Compose & Manage — 6 tuiles carrées ; le support carré distingue les lanceurs de fonctions des actions d’UI rondes

Ni tout à la main, ni tout par l’IA

Deux options nettes étaient sur la table et je n’ai pris ni l’une ni l’autre. Modéliser les 66 icônes dans Cinema 4D aurait tenu le rendu et manqué le délai. Les générer toutes par IA aurait tenu le délai et perdu l’air de famille — 66 générations séparées au lieu d’un jeu. Le rendu a donc d’abord été verrouillé dans C4D, puis mis à l’échelle par IA à partir de ces références.

Puis le choix plus difficile : ancrer le jeu dans l’univers de marque public réel de KBC au lieu d’inventer une banque fictive neutre. Une identité inventée aurait été plus facile à satisfaire. Elle n’aurait rien prouvé non plus. Une marque réelle et reconnaissable est l’épreuve la plus dure pour un langage d’icônes, et le logo, les cartes bancaires de marque et les petites pièces bleues devaient tous revenir sans que le jeu ne glisse vers un pack 3D générique.

Avec un style holographique, le réflexe tentant est de générer librement puis de trier après coup. Je l’ai exclu tôt. Les surfaces holographiques deviennent vite chaotiques : éclairées différemment, 25 icônes se lisent comme 25 objets sans lien. Le matériau et l’éclairage ont d’abord été verrouillés en 3D, puis une passe de saturation uniforme de +40 % est venue par-dessus à la fin, pour que le néon reste franc sans que la famille ne se disloque.

La taxonomie relevait d’une décision, pas d’un réglage par défaut. Le jeu se divise d’abord par rôle et seulement ensuite par tâche : les actions d’interface sont rondes, les lanceurs de fonctionnalité carrés. Trier par sujet seul aurait produit une liste bien rangée et un langage de formes qui n’apprend rien à l’utilisateur sur ce que fait réellement un contrôle.

Trois marques, une seule façon de travailler

Le set commandé a été livré au client prêt pour la production, couvrant navigation, paiement, signaux de confiance, catégories de produits et campagnes saisonnières. Les deux concepts sont des systèmes complets, chacun avec son fichier Figma de livraison, mais personne ne les a commandés : ils montrent la même méthode au service d’une banque et d’une app de chat, et n’ont pas été testés dans un produit en ligne.

La convention de nommage Icon — [Nom] est compatible avec l’export Figma et triable par ordre alphabétique ; elle doit être respectée si le set est étendu par un autre designer. Tout nouveau brief d’icône devrait commencer par identifier à laquelle des huit sections elle appartient — si elle n’y rentre pas, c’est le signal qu’il faut soit étendre la taxonomie, soit se demander si l’icône est vraiment nécessaire.

La matière porte la marque et le glyphe porte le sens. Fixer les deux en 3D avant que l’IA ne les décline, c’est ce qui fait d’une série de générations un set