3D-iconenset — e‑commerceplatform voor kinderen

De iconen moesten aanvoelen als speelgoed — fysiek, tastbaar, iets wat een kind wil vastpakken

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.

Het probleem benaderen als iets emotioneels in plaats van iets functioneels was het juiste vertrekpunt. De voorwaarde “voelt aan als speelgoed” gaf het hele project een helder creatief kompas

Wiebeloogjes + een gestikt labeltje: een consistentiemotor van twee elementen

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.

Kleurenpalet: warme, verzadigde primaire kleuren met pastelaccenten, geen zwarte vlakken — schaduwen zijn altijd warm getint, geïnspireerd op klassieke kinderspeelgoedmerken: primair rood, hemelsblauw, zonnebloemgeel, mint, lavendel, koraal. Oppervlaktetaal: hoogglanzend, opgeblazen, afgerond — doet denken aan rubberen knijpspeeltjes en het Fisher-Price-plastic uit de jaren negentig. Elk object oogt zacht, zelfs op een scherm.

Palet en oppervlaktetaal — warm getinte schaduwen, geen zwarte vlakken, glanzende opgeblazen vormen

Eerst de look vastzetten in Cinema 4D, daarna opschalen met AI

Een handvol hero-iconen werd gemodelleerd in Cinema 4D — afgeronde vlakken, opgeblazen verhoudingen, een warme driepuntsbelichting afgestemd op productfotografie. Daarmee lag het visuele doel vast: oppervlakteglans, oogstijl, warm getinte schaduwen, het algemene speelgoedkarakter. Met die look op zak werden de overige iconen van de 66 gegenereerd met AI (Hugging Face diffusion pipeline), telkens verankerd aan de Cinema 4D-referenties zodat silhouetten, materialen en belichting consistent bleven over de hele set.

De 3D-referenties zijn de reden waarom de AI-output overkomt als één familie en niet als 66 losse generaties

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.

Hero-iconen gemodelleerd in Cinema 4D om het visuele doel vast te zetten

AI-output verankerd aan de C4D-referenties — één visuele familie

66 iconen, acht categorieën, één Figma-opleverbestand

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.

Exportinstellingen meegegeven aan het ontwikkelteam: 2× PNG (1024 × 1024 px) voor standaardschermen, 1× PNG (512 × 512 px) voor thumbnails en mobiel, met WebP-conversie als aanbeveling in de buildpipeline voor de performantie. Het bovenste gedeelte van het Figma-bestand bewaart de ruwe renders uit de pipeline ter referentie; de geordende secties beginnen bij y ≥ 30.000, met iconen van 2048 × 2048 px, 200 px tussenruimte en 400 px sectiemarge.

Productieklaar bij oplevering; de set bepaalt het emotionele register voor het hele platform

De klant kreeg een volledig gestructureerde, productieklare iconenset die elk belangrijk e-commercecontactpunt afdekt — navigatie, afrekenen, vertrouwenssignalen, productcategorieën en seizoenscampagnes. Vanuit het oogpunt van design systems legt de iconenset het emotionele register vast voor de hele visuele identiteit: bij elke toekomstige toevoeging aan de UI hoort de vraag “past dit nog in dezelfde speelgoeddoos?”

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.

Een iconensysteem van 66 stuks op dit niveau is normaal gezien een bureauproject. Het opleveren met een pipeline van twee tools in drie weken toont wat je in je eentje kunt bereiken wanneer de briefing scherp is en de creatieve richting vroeg vastligt