Set d’icônes 3D — plateforme e‑commerce pour enfants

Les icônes devaient avoir l’air de jouets — physiques, tactiles, quelque chose qu’un enfant aurait envie d’attraper

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.

Poser le problème en termes émotionnels plutôt que fonctionnels était le bon point de départ. La contrainte « on dirait un jouet » a donné à tout le projet un cap créatif limpide

Yeux mobiles + étiquette cousue : un moteur de cohérence en deux éléments

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 de couleurs : des primaires chaudes et saturées avec des accents pastel, sans aplats noirs — les ombres sont toujours teintées de chaud, en écho aux grandes marques de jouets pour enfants classiques : rouge primaire, bleu ciel, jaune tournesol, menthe, lavande, corail. Langage de surface : très brillant, gonflé, arrondi — qui évoque les jouets en caoutchouc à presser et les plastiques Fisher-Price des années 1990. Chaque objet paraît doux, même à l’écran.

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

Figer le rendu dans Cinema 4D d’abord, puis décliner avec l’IA

Une poignée d’icônes hero ont été modélisées dans Cinema 4D — biseaux arrondis, proportions gonflées, un éclairage trois points chaud réglé pour imiter la photographie produit. Cela a fixé la cible visuelle : brillance de surface, style des yeux, ombres teintées de chaud, registre jouet d’ensemble. Une fois ce rendu figé, le reste des 66 icônes a été généré par IA (pipeline de diffusion Hugging Face), ancré aux références Cinema 4D pour que les silhouettes, les matériaux et l’éclairage restent cohérents sur tout le set.

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

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.

Icônes hero modélisées dans Cinema 4D pour figer la cible visuelle

Sorties IA ancrées aux références C4D — une seule famille visuelle

66 icônes, huit catégories, un seul fichier de livraison Figma

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.

Réglages d’export remis à l’équipe de développement : PNG 2× (1024 × 1024 px) pour les écrans standard, PNG 1× (512 × 512 px) pour les miniatures et le mobile, avec une conversion WebP recommandée dans le pipeline de build pour les performances. La partie supérieure du fichier Figma conserve les rendus bruts du pipeline à titre de référence ; les sections organisées commencent à y ≥ 30 000, avec des icônes à 2048 × 2048 px, 200 px d’espacement et 400 px de marge de section.

Prêt pour la production à la livraison ; le set définit le registre émotionnel de toute la plateforme

Le client a reçu un set d’icônes entièrement structuré et prêt pour la production, qui couvre tous les points de contact e-commerce essentiels — navigation, paiement, signaux de confiance, catégories de produits et campagnes saisonnières. Du point de vue des design systems, le set d’icônes pose le registre émotionnel de toute l’identité visuelle : chaque futur ajout à l’interface devrait passer le test de la question « est-ce que ça a l’air d’appartenir à la même boîte à jouets ? »

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.

Un système de 66 icônes à ce niveau de finition relève d’habitude d’un projet d’agence. Le livrer avec un pipeline à deux outils en trois semaines montre ce qu’une praticienne solo peut accomplir quand le brief est bien défini et que la direction créative est figée tôt