Een merk dat zichzelf uitbreidt
Voor dertien trainingen: een kleurenwaaier, een fotoset met AI in één vaste stijl en kaarten die uit de agenda komen.
- Merk en identiteit
- Generatieve media
- Design systems
- Opdrachtgever
- Website
- Platform
- Jaar
MindCollege geeft trainingen in NLP, emotionele intelligentie, communicatie en leiderschap. Je volgt er bijvoorbeeld de NLP Driedaagse, Familieopstellingen of Leiderschap in de Praktijk. In 2023 maakten wij het merk en de site. Toen het aanbod in 2026 groeide naar dertien trainingen, bouwden we het merk om tot een systeem. Een nieuwe training krijgt daarin een kleur, een foto en een kaart, zonder nieuw ontwerp.
- Figma
- Gemini
- WordPress
- Salient
- PHP-shortcode
- CSS custom properties
In het kort
- 13
- 5
- 4
- 3
- 6
Wat er lag
In september 2026 kwamen er bij MindCollege vijf trainingen bij, op de acht die er al stonden. Moest dat een nieuw ontwerp worden, of een uitbreiding? Op een palet van losse kleuren krijgen trainingen dan dezelfde kleur. Of je verzint er een die nergens bij hoort. Ook staan alle trainingen in een agenda van een andere ontwikkelaar, en daar komen wij niet aan. Gevraagd was een merk dat elke nieuwe training opvangt zonder dat iemand aan het ontwerp hoeft.
Drie details die het verschil maken
Probeer het zelf
Bedenk een nieuwe training. Het thema komt uit de naam, en de kleur is de plek tussen de trainingen ernaast op de waaier. Een nieuw ontwerp is er niet voor nodig.
Het product in vier schermen
De trainingenpagina: zes thema's als knoppen, elk met een stip in zijn kleur, en de kaarten eronder op volgorde van de waaier. 
Het filter op Communicatie: de knoppen komen uit de trainingen die er zijn, dus een thema zonder training staat er niet. 
De keuzehulp: zeven zinnen zoals iemand ze zelf zou zeggen, met de trainingen die erbij passen in hun eigen kleur. 
Een trainingspagina: dezelfde foto als op de kaart, nu als kop, met de waaier als dunne balk boven de navigatie.
Een kleur, een foto en een kaart voor elke training
Dertien trainingen op één verloop
Zoek je nu op mindcollege.nl een training in communicatie, dan tik je op de knop Communicatie. Er blijven twee kaarten over, Effectieve Communicatie en Communicatie & Invloed. Op de ene praat een duo met elkaar, op de andere maakt een vrouw een open gebaar. Allebei staan ze voor paars papier, in twee kleuren die op de waaier buren zijn.
Dat gaat terug op april 2023. Het merk kreeg toen vijf kleuren, van geel naar paars, en die legden we vast als één verloop. Dat bleek later het belangrijkste besluit van de hele opdracht, want op een verloop kies je een plek.
De dertien trainingen van nu staan op één lijn, van geel via oranje en roze naar lila, paars en diepblauw. Trainingen met hetzelfde thema liggen naast elkaar: drie keer NLP in het geel, systemisch werk in het roze en leiderschap aan het donkere eind. De vijf kleuren van 2023 staan er nog tussen, waar ze stonden.
In de code is het één variabele per training. Elke kaart en elke kolom draagt een klasse met de naam van de training, en die zet --mc-color. De streep onder de foto, de stip in het filter en het label op de kaart lezen allemaal die ene waarde.
Een nieuwe training krijgt een plek tussen twee buren op de waaier.
Vier vaste blokken in elke fotoprompt
De kaartfoto's kwamen eerst uit verschillende shoots, elk met eigen licht en een eigen achtergrond. Voor dertien trainingen wilden we één set, alsof één fotograaf op één trainingsdag iedereen voor hetzelfde papieren doek zette. Die fotograaf bestaat niet. Alle foto's zijn met AI gemaakt, met Gemini, en dat zeggen we er gewoon bij.
Elke prompt heeft vier blokken in dezelfde volgorde. Eerst de context: een reportage van echte deelnemers tijdens een oefening, met de camera op borsthoogte. Daarna het moment, het enige creatieve deel. Het derde blok is kleding en uitsnede: alleen kleuren uit de waaier plus spijkerstof, afgesneden net boven de knie.
Het laatste blok, achtergrond en licht, staat woord voor woord in elke prompt. Alleen de kleurcode van de training wisselt. Zo staat elke foto op papier in de kleur van zijn plek op de waaier, en blijven dertien foto's één set.
Het moment is per training een echte oefening. Bij de NLP Driedaagse spiegelen twee mensen elkaars houding en merken ze het net. Familieopstellingen toont moeder en dochter op hun plek, en bij Effectieve Communicatie vat de een samen op haar vingers terwijl de ander knikt.
Eén shortcode voor raster, carrousel en lijst
De trainingen staan in een agenda-plugin van een andere ontwikkelaar. Elke training is daar een trainingstype, met velden als de duur, de kleur en de kaartfoto. Eén shortcode, een korte code in een WordPress-pagina, leest die trainingstypen. Hij maakt er een raster van op de trainingenpagina en een carrousel op de homepage. Een nieuwe training verschijnt dus op beide plekken tegelijk.
Boven het raster staat per thema een knop, met een stip in de kleur van de eerste training in dat thema. Het thema komt uit de titel, dus de agenda hoefde er geen veld bij te krijgen. Ernaast schakel je tussen kaarten en een lijst.
Zo komt de volgende training erbij
Een nieuwe training vraagt nu drie dingen: een kleur op de waaier, een foto uit hetzelfde promptsysteem en een trainingstype in de agenda. Daarvoor hoeft niemand aan het ontwerp. Heet de volgende training iets met communicatie, dan verschijnt hij vanzelf als je op Communicatie tikt, bij de twee paarse.
Wat we eruit hebben geleerd
- 01
Een merk groeit mee als je de regel vastlegt. In 2023 hadden we vijf kleuren, en dat hadden vijf losse kleuren kunnen blijven. We legden ze vast als verloop, met elke training op een plek in dat verloop. Daardoor was de dertiende training alleen nog de vraag tussen welke twee kleuren hij komt. Daar is geen ontwerpronde voor nodig.
- 02
Bij beeld met AI zit de stijl vooral in wat je verbiedt. De eerste foto's kwamen terug met een zacht vignet, een spotlicht of een mintgroene trui. Vaak zat de oorzaak in één woord in de prompt, of juist in een woord dat er niet stond. Nu staat het woord verloop nergens meer, staat er letterlijk bij welke kleuren de kleding niet mag hebben en gaat er een referentiefoto mee. Eén blok dat in elke prompt woord voor woord gelijk is, houdt de set bij elkaar. De rest mag per foto verschillen.
- 03
Bouw op de data van een ander zonder erin te gaan zitten. De agenda is van een andere ontwikkelaar, en dat blijft zo. We lezen zijn velden, leiden het thema af uit de titel en slaan een training zonder gepubliceerde pagina over. Zo werkt hij zijn plugin bij zonder dat onze kaarten stukgaan. En wij veranderen de kaarten zonder aan zijn agenda te komen.
Letters en kleuren
- Koppen, knoppen en kaarttitels
- ABC Ginto Nord
- Lopende tekst
- Systeemletter
- #F3E463het begin van de waaier: NLP Driedaagse
- #F4A755Drijfverentraining
- #D57789Familieopstellingen, het begin van systemisch werk
- #AB73E2Emotionele Intelligentie
- #7B14C3Effectieve Communicatie
- #2A1A99het eind van de waaier: Leiderschap in de Praktijk
- #101A24koppen en de zwarte knoppen
- #D9D9D9de rand van elke kaart
- De huisstijl van 2023 had vijf kleuren: geel, oranje, roze, lila en paars. De waaier van 2026 heeft er dertien, met de oude vijf op hun plek en de nieuwe ertussen en erachter.
- De balk boven de navigatie is hetzelfde verloop in zes kleurvlakken, van #F3E463 tot #3D1EAE.
- Kleuren uit Figma en uit de CSS van de site, letters uit de huisstijlframes in Figma. Nagelopen op 30 september 2026.
Onder de motorkap
- Merk
- Figma
- ABC Ginto Nord
- Waaier van 13 kleuren
- Beeld
- Gemini
- Promptsysteem in 4 blokken
- Referentiefoto
- Site
- WordPress
- Salient
- WPBakery
- Kaarten
- PHP-shortcode
- Trainingstypen uit de agenda
- 7 metavelden
- Stijl
- --mc-color
- Klasse t-<slug>
- localStorage
Voor wie verder wil lezen
Hoe het precies werkt
De kaarten zijn één shortcode, [mc_trainingen], met acht instellingen.
De kaarten zijn één shortcode, [mc_trainingen], met acht instellingen. Je kiest de weergave (raster, carrousel of lijst), een maximum, een eigen selectie en wat je uitsluit, op nummer of titel. Daarnaast zijn er de schakelaar tussen kaarten en lijst, het themafilter en een kop boven de carrousel.
Per trainingstype leest de shortcode de gekoppelde pagina, de duur, de locatie, de kleur, de kaartfoto en de volgorde. De kaarttekst komt uit de samenvatting, met een vaste tekst als terugval als die leeg is.
Salient, het thema onder de site, had een paar eigenaardigheden die tijd kostten. De wrapper om een afbeelding heet in het thema zelf .img-with-aniamtion-wrap, met een typefout. De streep onder de foto hoort op de laag daarbinnen, anders staat hij vijftien pixels te laag. En de CSS uit de shortcode laadt in de footer en wint daardoor van de rest. De regels voor de telefoon hebben dus een hogere specificiteit nodig.
Wat er open staat
De oude kleurklassen van voor de waaier, zoals img-yellow en img-purple, doen nog mee als alias en staan nog op een paar pagina's.
De oude kleurklassen van voor de waaier, zoals img-yellow en img-purple, doen nog mee als alias en staan nog op een paar pagina's. Zodra ze nergens meer staan, kunnen ze weg. Dan is de kleurvariabele per training echt de enige plek waar een kleur woont.
De trainingen verwijzen nog niet naar elkaar. Wie de NLP Driedaagse heeft gedaan, zou onderaan moeten zien welke training daarna past. De teksten daarvoor liggen klaar.
Wat deed Ideelab voor MindCollege?
Ideelab maakte in 2023 het merk en de site van MindCollege. In 2026 kwam daar een systeem bij voor dertien trainingen. Dat is een kleurenwaaier, een fotoset met AI in één vaste stijl, en kaarten, een filter en een keuzehulp op de data uit de agenda.
Zijn de foto's op de site van MindCollege echt?
Nee. Elke kaartfoto op mindcollege.nl is met AI gemaakt, met Gemini, in één vaste stijl. Je ziet mensen in een trainingsoefening voor een papieren achtergrond in de kleur van de training, met het licht altijd van linksboven.
Wat gebeurt er op de site van MindCollege als er een training bijkomt?
De nieuwe training krijgt een trainingstype in de agenda, met een kleur uit de waaier en een foto uit de set. De kaarten op de homepage en de trainingenpagina, het filter en de volgorde lopen daarna vanzelf mee.
Heeft Ideelab de agenda van MindCollege gebouwd?
Nee, de agenda-plugin van MindCollege is van een andere ontwikkelaar. Ideelab bouwde de kaarten, het filter, de keuzehulp en de stijl op de data uit die agenda.
Waarom heeft MindCollege een kleurenwaaier en geen vast palet?
Een vast palet raakt op als er meer trainingen zijn dan kleuren. Een waaier heeft altijd een plek tussen twee kleuren, dus een nieuwe training wordt een nieuwe stap in hetzelfde verloop.
