3D-iconensystemen
Drie 3D-iconensystemen, samen 112 iconen: een set in opdracht voor een e-commerceplatform voor kinderen en twee concepten op eigen initiatief, voor mobiel bankieren en een sociale berichtenapp. Eén werkwijze liep door alle drie: de look vastleggen in Cinema 4D, opschalen met AI, opleveren als Figma-bibliotheek
- Probleem — Vlakke, monochrome stockiconen laten elk product op elk ander lijken: een speelgoedwinkel, een bank en een chatapp grijpen allemaal naar dezelfde lijniconen
- Inzicht — Geef elk icoon twee taken en houd ze uit elkaar: een materiaal dat het merk draagt (speelgoedplastic, blauw glas, een holografische huid) en een glyph die de functie draagt
- Oplossing — Eén werkwijze voor drie stijlen: hero-iconen gemodelleerd in Cinema 4D leggen de look vast, AI genereert de rest op basis van die referenties, een Figma-bibliotheek bevat de oplevering
- Resultaat — 112 iconen: 66 opgeleverd aan een kinderwinkel in ongeveer drie weken (klant niet genoemd), 21 voor een bankconcept voor KBC met motion in After Effects, 25 voor een concept voor een berichtenapp; de twee concepten zijn op eigen initiatief
Eén werkwijze, drie materialen
Alle drie de sets zijn op dezelfde manier gemaakt. Een paar hero-iconen werden in Cinema 4D gemodelleerd om het materiaal, het licht en de diepte van de glyph vast te leggen, en die renders werden het doel. De rest van elke set werd met AI gegenereerd (een diffusiepipeline van Hugging Face), verankerd aan die referenties, daarna opgeschoond, genormaliseerd en geëxporteerd op 2048 of 4096 px, en opgeleverd als Figma-bibliotheek met één frame per icoon voor export in één klik. Wat van set tot set verschilt, is het materiaal, en in het materiaal zit het merk.
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
De 3D-referenties zijn de reden waarom de AI-output overkomt als één familie en niet als 66 losse generaties
66 iconen die aanvoelen als speelgoed — een e-commerceplatform voor kinderen
Een online kinderretailer gaf de opdracht voor een 3D-iconensysteem op maat, ter vervanging van de vlakke, emotieloze stockiconografie op zijn e-commerceplatform. Twee problemen: de categorie-iconen waren functioneel maar koud, en de promotionele iconen (sale, retours, getrouwheid) zagen er net zo uit als bij elke andere webshop op het internet. De briefing vroeg om 66 iconen verdeeld over acht functionele categorieën — navigatie, afrekenen, seizoenscampagnes, babyverzorging — die werken op thumbnailformaat (64–128 px op het scherm), zonder dat het marketingteam ook maar iets van vectorbewerking onder de knie hoeft te hebben. Naam van klant en platform blijven vertrouwelijk, op hun verzoek.
Elk icoon deelt twee kenmerkende elementen. Wiebeloogjes — uitpuilend, halftransparant, lichtjes asymmetrisch — geven elk object een eigen karakter zonder een gezicht toe te voegen dat de identiteit van het object zelf in de weg zit. Aan elk object hangt een klein stoffen labeltje met één woord in kleine letters als omschrijving (Cart, Dream, Roar). Dat labeltje is tegelijk een toegankelijkheidshulp en een merkdetail. Door me vroeg vast te leggen op dit systeem werd elk nieuw icoon een variatie op een opgelost probleem in plaats van een nieuwe ontwerpbeslissing.
Palet en oppervlaktetaal — warm getinte schaduwen, geen zwarte vlakken, glanzende opgeblazen vormen
De definitieve assets werden bijgesneden tot 2048 × 2048 px op een neutrale achtergrond en opgeleverd als PNG. Totale doorlooptijd: ongeveer drie weken van begin tot eind. Een iconensysteem van 66 stuks op dit niveau is normaal gezien een bureauproject; de pipeline van twee tools (C4D + AI) maakte het in mijn eentje haalbaar.
Alle 66 iconen zijn geordend in acht secties in het Figma-opleverbestand, die rechtstreeks aansluiten op de navigatiehiërarchie van het platform: Navigatie & UI (7), Winkelen & Levering (13), Baby & Pasgeborene (11), Speelgoed & Spel (10), Onderwijs & Creativiteit (8), Kleding & Accessoires (7), Gezondheid & Verzorging (4), Seizoenen & Feestdagen (6). Elk frame is benoemd volgens de conventie Icon — [Naam], zodat assets makkelijk te exporteren zijn.
21 glazen iconen en hun beweging — een bankconcept voor KBC
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.
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.
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.
Analytics & Growth — 5 iconen; de glashuid en de terugkerende KBC-kaart- / muntmotieven houden de familie samen
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).
Kaartworp, tuimelende munten en schildveeg — de loopende micro-animaties, geëxporteerd als MP4 voor in-app- en marketinggebruik
Communication & Collaboration — 3 iconen
Global & Operations — 3 iconen
25 holografische iconen — een concept voor een berichtenapp
Dit is een zelfgeïnitieerd concept: een systeem van 25 iconen ontworpen als visuele taal voor een social messaging-app van de nieuwe generatie, dat het volledige oppervlak van een modern chatproduct bestrijkt — berichten, oproepen, aanwezigheid, reacties, media-opname en bestandsacties. De esthetiek — iriserend chroom, glas, candy-neon-gradiënten — wijst recht op een jong, expressief, social-first publiek. De leidende richting is “Aura”, een expressieve chat-app voor Gen-Z waarin zelfexpressie de kernloop vormt: holografische thema’s, reacties, spraakberichten, verdwijnende media en AI-ondersteunde antwoorden, waarbij de iconenset zelf fungeert als het merk, van de app-store-tegel tot de in-chat-werkbalk.
De twee iconvormen coderen twee rollen: ronde schijven zijn in-app UI-acties (werkbalk, tabs, inline knoppen); vierkante tegels zijn app- / feature launchers (camera, video, voice, gallery). Die splitsing is de reden dat de set leest als een echt product, niet als een stickerpakket
Elk icoon deelt drie kenmerkende eigenschappen. Een holografische gradiënthuid — een vloeiende iriserende roze → magenta → violet → blauw, als een olievlek of cd-oppervlak, waar geen twee hoeken dezelfde kleur tonen. Een reliëf-wit glyph — een zachte, matte, licht korrelige witte vorm in het oppervlak gedrukt, die de leesbaarheid hoog houdt tegen de drukke gradiënt. En een glasrand met diepte — een doorschijnende, brekende rand die het licht vangt en elk icoon echte fysieke aanwezigheid geeft.
Messaging — 5 ronde schijven; de iriserende huid leest als één familie over afzonderlijk gegenereerde renders
De 25 iconen zijn georganiseerd in vijf secties, eerst gesplitst op rol (UI-actie vs feature launcher = rond vs vierkant) en daarna op taakgroep: Messaging (5, rond), Calls & Presence (5, rond), Actions & Reactions (5, rond), Media & Capture (4, vierkant) en Compose & Manage (6, vierkant). Een lezer kan in één oogopslag zien welke iconen op een werkbalk thuishoren en welke op een homepagina-raster.
Calls & Presence — 5 ronde schijven
Media & Capture — 4 vierkante tegels
Compose & Manage — 6 vierkante tegels; de vierkante drager onderscheidt feature launchers van ronde UI-acties
Niet alles met de hand, niet alles met AI
Er lagen twee schone opties op tafel en ik nam er geen van beide. Alle 66 iconen in Cinema 4D modelleren had de look vastgehouden en de deadline gemist. Alle 66 met AI genereren had de deadline gehaald en de familiegelijkenis verloren — 66 losse generaties in plaats van één set. Dus werd de look eerst in C4D vastgezet en daarna met AI opgeschaald tegen die referenties.
Dan de lastigere keuze: de set verankeren in de echte publieke merkwereld van KBC in plaats van een neutrale, fictieve bank te verzinnen. Een verzonnen identiteit was makkelijker tevreden te stellen geweest. Het had ook niets bewezen. Een echt, herkenbaar merk is de zwaarste test voor een icoontaal, en het logo, de merkkaarten en de kleine blauwe munten moesten allemaal terugkeren zonder dat de set afgleed naar een generieke 3D-pack.
Bij een holografische stijl is de verleidelijke werkwijze om vrij te genereren en achteraf te selecteren. Ik sloot dat vroeg uit. Holografische oppervlakken worden snel chaotisch: anders belicht lezen 25 iconen als 25 losse objecten. Materiaal en belichting zijn eerst in 3D vastgezet, daarna ging er aan het eind een uniforme saturatiepas van +40% overheen, zodat het neon fel blijft zonder dat de familie uiteenvalt.
De taxonomie was een beslissing, geen standaard. De set splitst eerst op rol en pas daarna op taak: UI-acties zijn rond, feature-launchers vierkant. Alleen op onderwerp sorteren had een nette lijst opgeleverd en een vormtaal die de gebruiker niets vertelt over wat een besturingselement werkelijk doet.
Drie merken, één manier van werken
De set in opdracht werd klaar voor productie opgeleverd aan de klant, met navigatie, afrekenen, vertrouwenssignalen, productcategorieën en seizoenscampagnes. De twee concepten zijn volledige systemen met elk een Figma-bestand voor oplevering, maar niemand heeft ze besteld: ze tonen dezelfde werkwijze voor een bank en een chatapp, en ze zijn niet getest in een product dat live staat.
De naamgevingsconventie Icon — [Naam] is exportvriendelijk in Figma en alfabetisch sorteerbaar, en moet aangehouden worden als de set door een andere ontwerper wordt uitgebreid. Elke nieuwe iconenbriefing zou moeten beginnen met de vraag in welke van de acht secties het hoort — past het er niet in, dan is dat een signaal om ofwel de taxonomie uit te breiden, ofwel je af te vragen of het icoon überhaupt nodig is.
Het materiaal draagt het merk en de glyph draagt de betekenis. Beide in 3D vastleggen voor AI ze opschaalt, maakt van een reeks generaties een set
