Skip to content
Atelierby nealvdv
WorkbenchStart free

Preferences

Back to the Map

Craft · Shape

Kleur, type & merk

Zien, kiezen en vormgeven tot een merk dat klopt, licht en donker.

  • 10 modules
  • 294 study hours

Start this craft for free

Workshop scheduleModules and indicative study hours per rank
RankModulesHours
Apprentice474
Compagnon4150
Master270
Total10294

The learning content on this page is only in Dutch for now.

Why this craft

Een site die technisch perfect is maar op elke andere site lijkt, laat een klant niets na. In dit ambacht leer je kijken, kleuren en letters kiezen met een reden, een logo netjes overtekenen en een merk bouwen dat op elk scherm, in elke modus en voor elke bezoeker werkt. Elke klant krijgt een eigen gezicht, geen sjabloon.

What you need before you start

Niets. Wie al met HTML en CSS gewerkt heeft (ambacht Web) haalt meer uit de modules over tokens en dark mode.

The curriculum

Modules per rank

Each module has lessons and one assignment with a result someone else can check. The hours are indicative.

Your progress

You tick off modules on this device; nothing goes to a server. On the Workbench you keep your path in an account, hand in your assignments and get the hallmark from Neal.

Apprentice

The basics. These modules and a Compagnon test make you a Compagnon.

4 modules · 74 h

  1. Leren zien: compositie en hiërarchie

    16 study hours

    Voor je iets ontwerpt, leer je kijken: waarom het oog ergens eerst naartoe gaat, wat rust geeft en wat schreeuwt. Je bouwt een woordenschat om ontwerp te bespreken zonder 'mooi' of 'lelijk'.

    • Papier en stift
    • Figma
    • Penpot
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Benoemen waarom een pagina rustig of druk aanvoelt, met termen als contrast, nabijheid en witruimte
    • Een visuele hiërarchie opbouwen zodat de belangrijkste boodschap eerst gelezen wordt
    • Een bestaande pagina analyseren en drie concrete verbeteringen onderbouwen
    • Schetsen op papier gebruiken om snel varianten te vergelijken
    Lessons
    1. Kijken voor je maakt: het oog volgen
    2. Contrast, herhaling, uitlijning en nabijheid
    3. Witruimte als bouwmateriaal
    4. Hiërarchie: één ding tegelijk belangrijk
    5. Gestaltprincipes in gewone interfaces
    6. Schetsen in vijf minuten: dertig duimnagels
    7. Ontwerp bespreken zonder smaakoordeel
    The assignment

    Kies de homepage van een bakkerij in je buurt. Maak een geannoteerde screenshot met wat het oog eerst, tweede en derde ziet, en schets drie alternatieve indelingen op papier. Een medeleerling moet aan je annotaties kunnen zien welke principes je toepaste.

  2. Kleur, contrast en OKLCH

    20 study hours

    Je leert hoe kleur werkt op een scherm en hoe je een palet bouwt dat leesbaar is voor iedereen, in licht én donker. OKLCH helpt je kleuren te kiezen die even helder ogen.

    • oklch.com
    • WebAIM Contrast Checker
    • Figma
    • CSS custom properties
    • Chrome DevTools (kleurenblindheid-emulatie)
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Een kleurpalet opbouwen met een merkkleur, neutrale tinten en signaalkleuren
    • Contrast meten volgens WCAG 2.2 en een palet aanpassen tot het slaagt
    • Kleuren uitdrukken in OKLCH en uitleggen waarom dat voorspelbaarder is dan HSL
    • Een donkere variant van een palet maken die geen simpele omkering is
    • Kleurgebruik controleren op kleurenblindheid
    Lessons
    1. Kleur op een scherm: RGB, hex, HSL
    2. Kleurharmonie zonder kleurenwiel-dogma
    3. WCAG-contrast: tekst, grote tekst en interface-onderdelen
    4. OKLCH: lichtheid, chroma en tint
    5. Neutrale tinten met een vleugje merkkleur
    6. Dark mode: diepte, verzadiging en schaduwen
    7. Kleurenblindheid en betekenis niet alleen via kleur
    The assignment

    Bouw voor een fictief café in Gent een palet in OKLCH met een licht en een donker thema (minstens tien tokens per thema). Lever een tabel met elke tekst-achtergrondcombinatie en de gemeten contrastratio. Iemand anders moet elke ratio kunnen narekenen met een contrastchecker.

  3. Typografie: letters kiezen en combineren

    20 study hours

    Letters dragen meer karakter dan kleur. Je leert lettertypes kiezen en combineren, licenties lezen en fonts snel en privacyvriendelijk laden.

    • Google Fonts
    • Fontsource
    • Wakamai Fondue
    • glyphhanger
    • CSS @font-face
    • Chrome DevTools
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Een lettertype kiezen dat past bij de toon van een klant en dat keuze uitleggen
    • Twee lettertypes combineren met genoeg contrast en genoeg verwantschap
    • Een typografische schaal opstellen voor koppen, broodtekst en kleine tekst
    • Een fontlicentie lezen en zeggen of web, app en logo-gebruik toegestaan zijn
    • Fonts zelf hosten met variabele fonts en subsets in plaats van ze bij een derde te laden
    Lessons
    1. Anatomie van een letter en waarom dat ertoe doet
    2. Serif, schreefloos, slab, display: karakter en context
    3. Combineren: contrast en verwantschap
    4. Typografische schaal, regelhoogte en regellengte
    5. Licenties: OFL, commerciële licenties en logo-gebruik
    6. Variabele fonts en subsets
    7. Google Fonts versus zelf hosten (en waarom privacy meetelt)
    8. Leesbaarheid in vier talen, met accenten en lange Duitse woorden
    The assignment

    Kies voor een garage in Halle en voor een kapsalon in Leuven elk een lettertypecombinatie. Lever per klant een specimenpagina in HTML met zelf gehoste fonts, een typografische schaal en de licentie-info. Controleer dat de pagina geen enkele request naar een externe fontserver doet; een medeleerling verifieert dat in het netwerkpaneel.

  4. Layout, grids en responsief ontwerp

    18 study hours

    Je leert ruimte verdelen: grids, ritme en hoe een ontwerp zich gedraagt van gsm tot breed scherm. Je denkt in componenten en tussenruimtes, niet in pixels per pagina.

    • Figma
    • Penpot
    • CSS Grid
    • Flexbox
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Een grid en een spatiëringsschaal opzetten en consequent toepassen
    • Een pagina ontwerpen voor gsm eerst en daarna laten groeien
    • Schaduwen en lagen gebruiken om diepte te geven in plaats van lijnen en randen
    • Een ontwerp opbouwen uit herbruikbare blokken
    Lessons
    1. Grids: kolommen, goten en marges
    2. Een spatiëringsschaal en verticaal ritme
    3. Mobiel eerst en breekpunten met reden
    4. Diepte en tactiliteit: schaduwen in plaats van randen
    5. Componenten en patronen die terugkomen
    6. Auto layout in Figma
    The assignment

    Ontwerp in Figma de homepage van een voetbalclub in drie breedtes (gsm, tablet, desktop) met auto layout, een vaste spatiëringsschaal en schaduwlagen voor kaarten. Een medeleerling controleert dat elke tussenruimte uit je schaal komt.

Compagnon

Mastering the craft: larger projects, reviewed at every milestone.

4 modules · 150 h

  1. Logo's ontwerpen en overtekenen naar SVG

    30 study hours

    Veel klanten hebben al een logo, maar enkel als wazige foto van het uithangbord. Je leert dat logo trouw overtekenen naar een propere SVG, en een nieuw logo ontwerpen als het moet.

    • Inkscape
    • Adobe Illustrator
    • Affinity Designer
    • Figma
    • SVGO
    • RealFaviconGenerator
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Een bestaand logo van een foto of uithangbord met de hand overtekenen naar een propere, lichte SVG
    • Een logo opbouwen in varianten: volledig, compact, beeldmerk, één kleur
    • Een logo laten werken op lichte en donkere achtergrond
    • Een nieuw logo ontwikkelen van brief over schetsen tot eindbestand
    • Een logo exporteren als SVG, favicon en sociale-media-avatar
    Lessons
    1. Wat een logo is en wat het niet hoeft te doen
    2. Bronmateriaal verzamelen: foto's van uithangbord, bestelwagen, menukaart
    3. Overtekenen met de pentool: punten, curves, symmetrie
    4. Waarom automatisch vectoriseren zelden volstaat
    5. Letters in een logo: bestaand font of eigen lettering
    6. Varianten en vrije ruimte
    7. SVG opschonen en optimaliseren
    8. Favicons, app-iconen en een logo in dark mode
    The assignment

    Fotografeer het uithangbord van een lokale zaak (frituur, schoenmaker, café) en teken het logo over naar SVG. Lever de foto, de SVG, een éénkleurige versie, een versie voor donkere achtergrond en een favicon. Een Meester legt je SVG over de rechtgezette foto en beoordeelt trouw, aantal punten en properheid van de code.

  2. Merkidentiteit en brand book

    40 study hours

    Een merk is meer dan een logo: het is een stem, een palet, letters, beeld en regels. Je leert een identiteit opbouwen en vastleggen zodat iemand anders ze juist kan gebruiken.

    • Figma
    • Penpot
    • Adobe InDesign
    • Affinity Publisher
    • Google Fonts
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Een merkintake voeren en de persoonlijkheid van een zaak in woorden vatten
    • Een palet en lettertypes kiezen die je eerst toetst aan je andere klanten, zodat elk merk uniek blijft
    • Een brand book schrijven met logo-gebruik, kleuren, type, beeld en toon
    • Een merk toepassen op site, menukaart, visitekaartje en sociale media
    Lessons
    1. De merkintake: wie, voor wie, waarom anders
    2. Van woorden naar beeld: moodboards met reden
    3. Uniek blijven: je portfolio als controlelijst
    4. Kleur en type als merkdragers
    5. Toon en stem, in vier talen
    6. Het brand book: wat erin moet en wat niet
    7. Toepassingen: drukwerk, signalisatie, digitaal
    The assignment

    Werk voor een bestaande Belgische vzw of club (met toestemming) een merkidentiteit uit: intake-verslag, moodboard, palet licht en donker, lettertypes met licentie, logo-varianten en een brand book van maximaal twintig pagina's. Een medeleerling krijgt enkel het brand book en moet er een correcte flyer mee maken.

  3. UI-ontwerp, design tokens en designsystemen

    40 study hours

    Je ontwerpt interfaces die consistent blijven als ze groeien. Je legt keuzes vast in tokens die ontwerp en code delen, met licht en donker als gelijkwaardige thema's.

    • Figma (variables)
    • Tokens Studio
    • Style Dictionary
    • CSS custom properties
    • Storybook
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Design tokens definiëren voor kleur, type, ruimte, radius en schaduw
    • Een componentenbibliotheek bouwen in Figma met varianten en toestanden
    • Tokens vertalen naar CSS custom properties voor licht en donker
    • Toegankelijke componenten ontwerpen met focusstijlen, toestanden en aanraakgroottes
    • Een designsysteem documenteren zodat een ontwikkelaar het zonder jou gebruikt
    Lessons
    1. Wat een designsysteem is, en wanneer het overdreven is
    2. Tokens: primitief, semantisch, component
    3. Thema's: licht, donker en hoog contrast
    4. Componenten, varianten en toestanden
    5. Focus, hover, actief, uitgeschakeld en fout
    6. Van Figma naar code: variabelen en export
    7. Documentatie die gelezen wordt
    The assignment

    Bouw voor een fictieve reservatie-app van een tennisclub een klein designsysteem: tokens in JSON, CSS-variabelen voor licht en donker, en twaalf componenten in Figma met alle toestanden. Een ontwikkelaar uit het ambacht Web bouwt er een scherm mee; elk verschil tussen ontwerp en resultaat wordt besproken.

  4. UX: onderzoek, flows, wireframes en gebruikstesten

    40 study hours

    Goed ontwerp begint bij wat mensen proberen te doen. Je leert praten met gebruikers, flows tekenen, wireframen en testen met echte mensen, ook mensen die moeilijker zien of klikken.

    • Figma
    • Penpot
    • Miro
    • Lookback
    • Google Forms
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Een gebruikersinterview voorbereiden en afnemen zonder sturende vragen
    • Een taakflow uittekenen van eerste bezoek tot afgeronde actie
    • Wireframes en een klikbaar prototype maken
    • Een gebruikstest met vijf personen houden en de bevindingen prioriteren
    • Toegankelijkheid meenemen in onderzoek en ontwerp
    Lessons
    1. Wat UX is, en wat niet
    2. Interviews: luisteren, doorvragen, niet verkopen
    3. Persona's en taken zonder clichés
    4. Flows en informatiearchitectuur
    5. Wireframes: laag detail met opzet
    6. Klikbare prototypes
    7. Gebruikstesten: opzet, afname, rapport
    8. Toegankelijkheid als ontwerpvoorwaarde
    The assignment

    Onderzoek hoe klanten bij een slagerij of bakkerij een bestelling voor zondag plaatsen. Interview drie klanten, teken de huidige en de gewenste flow, maak een klikbaar prototype en test het met vijf personen. Lever een rapport van maximaal vijf pagina's met video-fragmenten of notities als bewijs.

Master

What a Master must be able to do alone, in preparation for the masterpiece.

2 modules · 70 h

  1. Beweging, illustratie, iconen en fotografie

    45 study hours

    Je geeft een merk leven: beweging die iets betekent, iconen en illustraties in één stijl, en beeldregie zodat foto's van de klant passen bij de rest. Altijd met respect voor wie minder beweging wil.

    • Adobe Lightroom
    • darktable
    • Squoosh
    • Lottie
    • Rive
    • CSS animations
    • Figma
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Micro-interacties ontwerpen die feedback geven en reduced motion respecteren
    • Een iconenset in één consistente stijl tekenen of kiezen en aanvullen
    • Een beeldbrief schrijven en een fotoshoot bij een klant regisseren
    • Foto's bewerken naar één look en optimaliseren voor het web
    • Licenties voor beeld, iconen en illustraties correct afhandelen
    Lessons
    1. Beweging met een doel: feedback, oriëntatie, karakter
    2. Timing, easing en prefers-reduced-motion
    3. Iconen: raster, lijndikte en optische correctie
    4. Illustratie als merkdrager
    5. Beeldregie: een shotlist en een brief
    6. Fotobewerking en een consistente look
    7. Beeldformaten, compressie en art direction op het web
    8. Licenties en toestemming van wie in beeld komt
    The assignment

    Regisseer en maak een fotoreeks van vijftien beelden voor een echte lokale zaak, met shotlist, schriftelijke toestemming van wie herkenbaar in beeld komt, een bewerkingspreset en webversies in AVIF en WebP. Voeg vijf merkiconen en één micro-animatie toe die uitvalt bij reduced motion. Neal beoordeelt samenhang met het brand book.

  2. Creatieve leiding en ontwerpkritiek

    25 study hours

    Als Meester bewaak je de kwaliteit van het werk van anderen. Je leert ontwerpkritiek geven, keuzes verdedigen bij een klant en een studio-standaard onderhouden over al je projecten heen.

    • Figma (comments)
    • Loom
    • Een gedeelde kwaliteitschecklist
    Lessons, assignment and what you can do afterwards
    What you can do afterwards
    • Een ontwerpkritiek leiden die concreet, eerlijk en bruikbaar is
    • Ontwerpkeuzes presenteren en verdedigen bij een klant, met argumenten in plaats van smaak
    • Een checklist onderhouden die elk opgeleverd merk toetst op uniciteit, contrast, dark mode en vier talen
    • Een Compagnon begeleiden van brief tot oplevering
    Lessons
    1. Kritiek geven en ontvangen
    2. Presenteren aan een klant: het verhaal achter de keuzes
    3. Omgaan met 'kan het logo groter?'
    4. Kwaliteitsbewaking over projecten heen
    5. Begeleiden zonder over te nemen
    The assignment

    Begeleid een Compagnon bij een merkopdracht voor een echte klant. Leid twee kritieksessies, houd een logboek van je feedback en schrijf een korte evaluatie. De Compagnon en een tweede Meester beoordelen of je feedback concreet en bruikbaar was.

The masterpiece

How you become a Master in this craft

Je ontwikkelt voor een echte Belgische klant een volledig merk en de bijhorende interface: merkintake, logo (overgetekend van het bestaande uithangbord of nieuw ontworpen), palet in OKLCH voor licht en donker met gemeten WCAG-contrast, lettertypes met gecontroleerde licenties en zelf gehost, een designsysteem met tokens, een getest prototype en een brand book. Het merk mag op geen enkel ander project van jou of de gilde lijken. Neal beoordeelt het werk, het onderzoek en je presentatie aan de klant.

Real work, judged by Neal. You are a Master per craft, not in the whole trade at once.

For clients

What you can do for clients with this

What a client can ask of you once you've mastered this craft, and from which rank. Durations are indicative.

  • From Compagnon

    Logo overtekenen en opfrissen

    Je hebt een logo, maar enkel als foto of wazige afbeelding. Wij tekenen het trouw over zodat het scherp is op je site, je bestelwagen en je drukwerk.

    What you deliver

    • Logo in SVG, PDF en PNG
    • Eénkleurige versie en versie voor donkere achtergrond
    • Favicon en avatar voor sociale media
    • Korte gebruiksfiche
    Duration
    1 tot 3 dagen
    For whom
    Lokale zaken met een bestaand logo zonder bruikbare bestanden: cafés, garages, bakkers, clubs

  • From Master

    Merkidentiteit met brand book

    Een eigen gezicht voor je zaak: kleuren, letters, logo en regels, zodat alles wat je maakt herkenbaar is als van jou.

    What you deliver

    • Merkintake en moodboard
    • Logo en varianten
    • Kleurpalet voor licht en donker met contrastcontrole
    • Lettertypes met licentie
    • Brand book
    Duration
    2 tot 4 weken
    For whom
    Starters, zaken die heropenen of een verouderd imago hebben

  • From Master

    Designsysteem en design tokens

    Je site of app ziet er overal hetzelfde uit en nieuwe schermen bouwen gaat sneller, omdat ontwerp en code dezelfde bouwstenen delen.

    What you deliver

    • Tokens voor kleur, type, ruimte en schaduw
    • Componentenbibliotheek in Figma
    • CSS-variabelen voor licht en donker
    • Documentatie voor ontwikkelaars
    Duration
    2 tot 6 weken
    For whom
    Kmo's en organisaties met een groeiende site of app en meer dan één ontwikkelaar

  • From Compagnon

    Gebruikersonderzoek en gebruikstest

    We kijken mee met echte klanten terwijl ze je site of app gebruiken, en vertellen je eerlijk waar ze vastlopen en wat je eerst moet oplossen.

    What you deliver

    • Testplan met taken
    • Vijf tot acht testsessies
    • Rapport met geprioriteerde bevindingen
    • Voorstel voor aangepaste flows of wireframes
    Duration
    1 tot 2 weken
    For whom
    Webshops, boekingssites en apps die bezoekers verliezen zonder te weten waarom

  • From Compagnon

    Kleur-, type- en contrastaudit

    Je huidige site leesbaar en toegankelijk maken voor iedereen, ook in dark mode, zonder je merk te verliezen.

    What you deliver

    • Meting van alle kleurcombinaties tegen WCAG 2.2
    • Aangepast palet voor licht en donker
    • Advies over lettertypes en laadsnelheid
    • Lijst met concrete CSS-aanpassingen
    Duration
    2 tot 4 dagen
    For whom
    Bestaande sites die moeilijk leesbaar zijn of geen dark mode hebben

  • From Master

    Beeldregie en fotoshoot

    Foto's van je eigen zaak, mensen en producten die bij je merk passen, klaar voor je site en sociale media.

    What you deliver

    • Beeldbrief en shotlist
    • Fotoshoot ter plaatse
    • Bewerkte reeks met vaste look
    • Webversies in moderne formaten
    • Toestemmingsformulieren voor wie in beeld komt
    Duration
    1 tot 2 weken
    For whom
    Horeca, winkels, ambachtslui en verenigingen die nu stockfoto's gebruiken
What you can do after the Atelier

Work

Jobs on the Belgian market

These are the job titles this craft leads to. Training is no job guarantee: your portfolio and your work make the difference.

  • Grafisch vormgever
  • Webdesigner
  • UI-designer
  • UX-designer
  • Product designer
  • Brand designer
  • Visual designer
  • Art director
  • Design system designer

Certifications

Certifications the modules prepare you for

Real certifications, awarded by the issuer itself. We don't award them: you sit the exam with the issuer. Always check the current content and price with the issuer.

  • Google UX Design Professional Certificate

    IssuerGoogle (via Coursera)

    Online programma dat aansluit bij de UX-module: onderzoek, wireframes, prototypes en gebruikstesten.

  • UX Certification

    IssuerNielsen Norman Group

    Certificaat op basis van gevolgde NN/g-cursussen en examens; nuttig als verdieping na de UX-module.

  • Adobe Certified Professional

    IssuerAdobe

    Per programma (onder meer Illustrator, Photoshop, InDesign); handig als een klant of werkgever Adobe-vaardigheid vraagt.

  • CPACC (Certified Professional in Accessibility Core Competencies)

    IssuerIAAP (International Association of Accessibility Professionals)

    Breed certificaat over toegankelijkheid; sluit aan bij de contrast-, UI- en UX-modules.

Reading comfort

Make the site easier to read. Your choice is kept on this device.

Text size

Prefer your device's own settings (zoom, screen reader, dark mode)? They work here too.