3D-iconenset — KBC Mobile Banking
Een systeem van 21 iconen voor een mobiele bankapp, gerenderd in een glanzende, doorschijnend-blauwe glasstijl en verankerd in de merkwereld van KBC — een eigen concept dat gewone UI-elementen omtovert tot een merkasset. De hero-iconen zijn gemodelleerd in Cinema 4D, de set werd geschaald met AI en afgewerkt als loopende motion in After Effects
- Probleem — Retailbankapps grijpen bijna allemaal naar dezelfde platte, monochrome iconen — helder maar koud, waardoor een financieel product aanvoelt als een nutsvoorziening
- Inzicht — Splits de twee taken: een doorschijnend-blauwe glashuid draagt de merkemotie (premium, betrouwbaar) terwijl een zacht wit glyph de functie draagt
- Oplossing — Een glassysteem van 21 iconen in vijf categorieën, verankerd aan het logo, de kaarten en munten van KBC; hero-iconen vastgelegd in Cinema 4D, geschaald met AI, geanimeerd in After Effects
- Resultaat — Een volledige, rolgestructureerde set — masters van 2048 px plus MP4-motion — opgeleverd als een Figma-bibliotheek met export in één klik; concept, niet in opdracht van KBC
Waarom 3D voor een bank? — vertrouwen uitgedrukt via vakmanschap, niet via decoratie
Bankinterfaces hebben tegelijk een warmteprobleem en een vertrouwensprobleem. Platte, monochrome iconen zijn helder maar koud; ze laten een financieel product aanvoelen als een nutsvoorziening in plaats van een dienst die iemand graag gebruikt. Dit eigen concept beantwoordt één brief: geef een bankapp een warmere, premiumere visuele stem zonder de helderheid op te offeren. De iconen moesten meteen leesbaar zijn op kleine formaten (een tabbalk of lijstrij van 24–48 px), consistent aanvoelen over alle 21 assets zodat de app er nooit samengeraapt uit voorraadmateriaal uitziet, onmiskenbaar KBC blijven — het merkblauw, het logo, de kaart- en muntmotieven — en herbruikbaar zijn voor een marketingteam zonder 3D-vaardigheden.
Het doel kaderen als vertrouwen uitgedrukt via vakmanschap — in plaats van “maak de iconen mooier” — gaf de set zijn noorderster: elk icoon moet er gebouwd uitzien, niet versierd
Een opmerking over de scope: dit is een merkverkenning, geen project in opdracht. KBC heeft het niet gebriefd of goedgekeurd; ik gebruikte de publieke merkwereld van de bank net als beperking omdat een echte, herkenbare identiteit de zwaarste test is voor een iconentaal.
Doorschijnend-blauwe glashuid + een zacht wit glyph: een systeem met twee taken
Elk icoon deelt drie kenmerkende eigenschappen. Een doorschijnend blauwe glashuid — een navy-naar-cyaan palet in een matglanzend, lichtbrekend materiaal waarvan de rand het licht opvangt en elk object echte fysieke diepte geeft. Een zacht wit glyph gekoppeld aan effen matte navy-volumes, zodat het functionele symbool leesbaar blijft tegen de glasachtige highlights. En KBC-merkankers — het logo, bankkaarten in de KBC-huisstijl en kleine blauwe munten keren overal terug en koppelen elk icoon terug aan de bank in plaats van het te laten lezen als een generieke 3D-pack.
Alle renders gebruiken één zachte studiolichtopstelling op een neutrale achtergrond en hetzelfde blauwe materiaalbereik, zodat 21 apart gegenereerde iconen lezen als één familie in plaats van als 21 ongerelateerde objecten. De glashuid draagt de merkemotie; het witte glyph en de matte navy dragen de functie. Die twee taken gescheiden houden is wat de iconen tegelijk rijk en leesbaar laat zijn.
Analytics & Growth — 5 iconen; de glashuid en de terugkerende KBC-kaart- / muntmotieven houden de familie samen
Leg de look vast in Cinema 4D, schaal daarna met AI
Een paar hero-iconen werden gemodelleerd in Cinema 4D om de look vast te leggen — het glasmateriaal, de blauwe shader, de diepte van het ingeperste glyph en een zachte studiolichtopstelling. Deze referenties bepaalden het doel dat de rest van de set moest evenaren. Met de look vastgelegd, werden de overige iconen gegenereerd met AI (een Hugging Face-diffusiepijplijn), verankerd aan de Cinema 4D-referenties zodat het palet, de glasrand en de glyph-behandeling consistent bleven. Elke render werd vervolgens opgeschoond, waar nodig herkleurd naar het KBC-blauwbereik, en geëxporteerd als 2048 × 2048 px PNG op een neutrale achtergrond.
Het materiaal en de belichting eerst in 3D vastleggen is wat een glanzende, snel-inconsistente stijl onder controle hield — de Cinema 4D-referenties zijn de reden dat de AI-output als één set leest, niet als 21 aparte generaties
Cinema 4D — de hero-iconen modelleren om het glasmateriaal, de shader en de belichting vast te leggen
Cinema 4D — hoek en belichting verfijnen op dezelfde scène
Financial Management — 5 iconen; consistente silhouetten, materialen en belichting over apart gegenereerde renders
After Effects — dezelfde render die in een lijstrij zit, animeert op een successcherm
Een deel van de iconen werd in After Effects tot leven gebracht als korte, loopende micro-animaties voor sleutelmomenten in de app. Card toss is de hero-motion — KBC-bankkaarten flippen omhoog en zeilen langs een vloeiende boog voordat ze terug op hun plaats vallen (Card Protection, Card Insights, Digital Wallet, Payment Terminal, Recurring Payments). Munten tuimelen langs dezelfde boog en komen dan tot rust (Savings Account, Currency Exchange, Investments). Het beschermschild veegt binnen en vangt het licht, als signaal van veiligheid (Data Security, Family Shield, Insurance Protection).
De animaties werden kort gehouden (1–2 s), met easing en loop-veilig, en daarna geëxporteerd als MP4 voor afspelen in de app en voor marketing- / app-store-assets — bedoeld voor onboarding, lege toestanden en succesmomenten, de weinige plekken waar een bankapp zich een moment van plezier kan permitteren. Motion is waar een 3D-set zijn meerwaarde bewijst tegenover platte SVG: een geanimeerde MP4 leveren naast de statische PNG geeft het engineeringteam beide gratis.
Kaartworp, tuimelende munten en schildveeg — de loopende micro-animaties, geëxporteerd als MP4 voor in-app- en marketinggebruik
After Effects — de compositie kbc_animation: kaart, munten en schild geanimeerd op één tijdlijn
Security & Protection — 5 iconen; de schildveeg is een van de drie loopende motion-behandelingen
21 iconen, vijf categorieën, één Figma-opleveringsbestand
De 21 iconen zijn georganiseerd in vijf secties die aansluiten op hoe een bankapp werkelijk wordt genavigeerd — Analytics & Growth (5), Security & Protection (5), Financial Management (5), Communication & Collaboration (3) en Global & Operations (3). Elk icoon staat op zijn eigen frame van 2048 × 2048 px, benoemd met zijn gewone iconnaam voor export in één klik, naast een georganiseerd catalogusbord dat de set overdraagt als één beoordeelbaar artefact.
Communication & Collaboration — 3 iconen
Global & Operations — 3 iconen
Oplevering aan engineering: 2× / 1× PNG verkleind vanaf de master, WebP in de build-pijplijn voor het gewicht, MP4 voor de geanimeerde iconen met een statische PNG als fallback, en een variant met transparante achtergrond om iconen op gekleurde oppervlakken te plaatsen. Elk frame benoemen met zijn kale iconnaam houdt het exportpaneel één klik en alfabetisch sorteerbaar — en zou afgedwongen moeten worden als de set ooit door een andere ontwerper wordt uitgebreid.
Een systeem, geen 21 iconen — één glastaal die een bankmerk van begin tot eind kan dragen
Het resultaat is een volledig, rolgestructureerd iconensysteem dat een bankmerk over zijn hele productoppervlak kan dragen — van de app-store-tegel en de onboarding, via het home-dashboard, tot de inline melding bij een transactie. In statische vorm verwarmt het de UI; in motion voegt het momenten van plezier toe zonder ooit onserieus aan te voelen.
De waarde zit niet in de 21 iconen — ze zit in het systeem: één consistente 3D-taal, verankerd aan het merk, gemaakt via een compacte pijplijn (Cinema 4D + AI, afgewerkt in After Effects) die toont hoe een solo-ontwerper snel merkassets van bureauniveau kan afleveren
