Jeu d’icônes 3D — KBC Mobile Banking

Pourquoi de la 3D pour une banque ? — la confiance exprimée par le savoir-faire, pas par la décoration

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.

Formuler l’objectif comme la confiance exprimée par le savoir-faire — plutôt que « rendre les icônes plus jolies » — a donné au jeu son étoile polaire : chaque icône devait paraître conçue, et non décorée

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.

Peau de verre bleu translucide + un glyphe blanc doux : un système à deux rôles

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.

Tous les rendus utilisent un même dispositif d’éclairage studio doux sur fond neutre et la même gamme de matériaux bleus, pour que 21 icônes générées séparément se lisent comme une seule famille plutôt que comme 21 objets sans rapport. La peau de verre porte l’émotion de marque ; le glyphe blanc et le marine mat portent la fonction. Garder ces deux rôles distincts est ce qui permet aux icônes d’être à la fois riches et lisibles.

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

Verrouiller le look dans Cinema 4D, puis étendre à l’IA

Quelques icônes vedettes ont été modélisées dans Cinema 4D pour verrouiller le look — le matériau verre, le shader bleu, la profondeur du glyphe en relief et un dispositif d’éclairage studio doux. Ces références ont défini la cible que le reste du jeu devait atteindre. Le look une fois établi, les icônes restantes ont été générées avec l’IA (un pipeline de diffusion Hugging Face), ancrées aux références Cinema 4D pour que la palette, le bord de verre et le traitement du glyphe restent cohérents. Chaque rendu a ensuite été nettoyé, recoloré dans la gamme bleue KBC là où c’était nécessaire, et exporté en PNG 2048 × 2048 px sur fond neutre.

Verrouiller d’abord le matériau et l’éclairage en 3D est ce qui a gardé sous contrôle un style brillant et facilement incohérent — les références Cinema 4D sont la raison pour laquelle la sortie IA se lit comme un seul jeu, et non comme 21 générations distinctes

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

Financial Management — 5 icônes ; silhouettes, matériaux et éclairage cohérents sur des rendus générés séparément

After Effects — le même rendu qui se trouve dans une ligne de liste s’anime sur un écran de réussite

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).

Les animations ont été gardées courtes (1–2 s), avec accélération douce et bouclent proprement, puis exportées en MP4 pour la lecture in-app et pour les actifs marketing / app-store — destinées à l’onboarding, aux états vides et aux moments de réussite, les rares endroits où une appli bancaire peut se permettre un instant de plaisir. Le motion est l’endroit où un jeu 3D justifie son intérêt face au SVG plat : livrer un MP4 animé aux côtés du PNG statique offre les deux à l’équipe d’ingénierie sans frais supplémentaire.

After Effects — la composition kbc_animation : carte, pièces et bouclier animés sur une seule timeline

Security & Protection — 5 icônes ; le balayage du bouclier est l’un des trois traitements de motion en boucle

21 icônes, cinq catégories, un seul fichier de livraison Figma

Les 21 icônes sont organisées en cinq sections qui correspondent à la façon dont une appli bancaire est réellement parcourue — Analytics & Growth (5), Security & Protection (5), Financial Management (5), Communication & Collaboration (3) et Global & Operations (3). Chaque icône occupe son propre cadre de 2048 × 2048 px, nommé par son nom d’icône simple pour un export en un clic, aux côtés d’un tableau de catalogue organisé qui remet le jeu sous forme d’un seul document consultable.

Communication & Collaboration — 3 icônes

Global & Operations — 3 icônes

Livraison à l’ingénierie : PNG 2× / 1× réduits depuis le master, WebP dans le pipeline de build pour le poids, MP4 pour les icônes animées avec un PNG statique en repli, et une variante à fond transparent pour placer les icônes sur des surfaces colorées. Nommer chaque cadre par son simple nom d’icône garde le panneau d’export en un clic et triable par ordre alphabétique — et devrait être imposé si le jeu est un jour étendu par un autre designer.

Un système, pas 21 icônes — un langage de verre unique capable de porter une marque bancaire de bout en bout

Le résultat est un système d’icônes complet et structuré par rôle, capable de porter une marque bancaire sur toute la surface de son produit — de la vignette d’app-store et de l’onboarding, au tableau de bord d’accueil, jusqu’à l’alerte en ligne sur une transaction. En version statique, il réchauffe l’interface ; en motion, il ajoute des moments de plaisir sans jamais paraître peu sérieux.

La valeur n’est pas dans les 21 icônes — c’est dans le système : un langage 3D cohérent, ancré à la marque, réalisé par un pipeline compact (Cinema 4D + IA, finalisé dans After Effects) qui montre comment une designer en solo peut produire rapidement des actifs de marque de niveau agence