Holografische iconenset — social messaging-app

Een systeem van 25 iconen in een glanzende, holografische 3D-stijl, ontworpen als visuele taal voor een social messaging-app van de nieuwe generatie. Elk icoon is een gerenderd 3D-object met een iriserende gradiënthuid en een zacht reliëf-wit glyph — gebouwd om premium, tactiel en onmiskenbaar Gen-Z aan te voelen

Rol
Solo — concept, creatieve directie, 3D-art-direction, AI-ondersteunde productie, oplevering in Figma
Klant
Concept — zelfgeïnitieerd portfoliowerk (geen klant, geen NDA)
Disciplines
3D-designIconontwerpAI-ondersteunde workflowArt directionCinema 4D
Links
Kort
  • Probleem — Messaging-apps grijpen naar dezelfde platte, monochrome lijniconen — de iconografie is UI-meubilair, nooit een merkmiddel dat een nieuwe social app herkenbaar maakt
  • Inzicht — Splits de twee taken: een holografische gradiënthuid draagt de merkemotie terwijl een reliëf-wit glyph de functie draagt — luid en leesbaar tegelijk
  • Oplossing — Een holografisch systeem van 25 iconen voor een Gen-Z-chatconcept: hero-iconen gemodelleerd in Cinema 4D, de rest AI-gegenereerd om te matchen, genormaliseerd naar een uniforme saturatie en geleverd op 4096 px
  • Resultaat — Een compleet, op rollen gestructureerd systeem — ronde schijven voor UI-acties, vierkante tegels voor feature launchers — georganiseerd in een opleverbestand in Figma; zelfgeïnitieerd, geen klant

Voor welke app is dit? — een jong, expressief, social-first chatproduct

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

Een holografische gradiënthuid + een reliëf-wit glyph

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.

Twee dragers, één taal: ronde schijven zijn glanzende pucks voor UI-acties; afgeronde vierkanten zijn glazen app-tegels voor mediafuncties. Alle renders zijn genormaliseerd naar een uniforme +40% saturatie zodat de set leest als één samenhangende familie in plaats van 25 afzonderlijk belichte generaties — het neon blijft krachtig maar consistent over elk icoon. De holografische huid draagt de merkemotie; het reliëf-witte glyph draagt de functie. Het splitsen van die twee taken is wat de iconen tegelijk luid en leesbaar laat zijn.

Messaging — 5 ronde schijven; de iriserende huid leest als één familie over afzonderlijk gegenereerde renders

Leg de look vast in Cinema 4D, schaal op met AI, lijm met een saturatiepass

Een paar hero-iconen werden gemodelleerd in Cinema 4D om de look vast te leggen — het glasmateriaal, de iriserende shader, de reliëf-glyph-diepte en een zachte studio-belichtingsopstelling. 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 de gradiënt, glasrand en glyph-behandeling consistent bleven. Elke render werd vervolgens genormaliseerd naar een uniforme +40% saturatie en geëxporteerd op 4096 × 4096 px PNG op een neutrale achtergrond.

Het materiaal en de belichting eerst in 3D vastleggen is wat een holografische, snel chaotische stijl onder controle hield — de gedeelde saturatiepass is de finale lijm die 25 iconen laat aanvoelen alsof ze uit hetzelfde blok zijn gefreesd

Actions & Reactions — 5 ronde schijven; gradiënt, glasrand en glyph-behandeling consistent gehouden

25 iconen, vijf categorieën, twee vormen voor twee rollen

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

Elk iconframe heet Icon — [Naam] voor export met één klik. Omdat deze iconen op gekleurde chatachtergronden leven, telt een variant met transparante achtergrond hier zwaarder dan bij een platte iconenset — de moeite waard om vooraf te genereren zodat het devteam ze nooit opnieuw hoeft uit te snijden. Aanbevolen oplevering: 3× / 2× / 1× PNG afgeschaald van de 4096-master, WebP in de buildpijplijn voor gewicht, plus de transparante variant voor donkere chatoppervlakken.

Een systeem, geen 25 iconen — een identiteit die een nieuwe app herkenbaar maakt in een drukke store

Het resultaat is een compleet, op rollen gestructureerd iconensysteem dat een heel messaging-product een eigen gezicht zou kunnen geven — van de app-store-tegel tot de inline “typing…”-indicator — in één enkele, eigen holografische stijl.

De strategische waarde zit niet in de 25 iconen; het zit in het systeem. Een consistente 3D-taal over elk touchpoint is het soort identiteit dat een nieuwe social app meteen herkenbaar maakt in een drukke App Store — precies daar waar messaging-producten winnen of verliezen
Volgend project
eBay Social