Naar de inhoud
Atelierby nealvdv
WerkbankBegin gratis

Voorkeuren

Terug naar De Kaart

Ambacht · Vormgeven

Kleur, type & merk

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

  • 10 modules
  • 294 studie-uren

Begin gratis met dit ambacht

WerkroosterModules en indicatieve studie-uren per rang
RangModulesUren
Leerling474
Compagnon4150
Meester270
Samen10294

Waarom dit ambacht

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.

Wat je vooraf nodig hebt

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

Het leerplan

Modules per rang

Elke module heeft lessen en één opdracht met een resultaat dat iemand anders kan nakijken. De uren zijn indicatief.

Je voortgang

Je vinkt modules af op dit toestel; er gaat niets naar een server. Op de Werkbank bewaar je je pad in een account, dien je je opdrachten in en krijg je het meesterteken van Neal.

Leerling

De basis. Met deze modules en een compagnonsproef word je Compagnon.

4 modules · 74 u

  1. Leren zien: compositie en hiërarchie

    16 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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 studie-uren

    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)
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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

Het vak beheersen: grotere projecten, met nalezing per mijlpaal.

4 modules · 150 u

  1. Logo's ontwerpen en overtekenen naar SVG

    30 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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.

Meester

Wat een Meester zelfstandig moet kunnen, als voorbereiding op de meesterproef.

2 modules · 70 u

  1. Beweging, illustratie, iconen en fotografie

    45 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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 studie-uren

    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
    Lessen, opdracht en wat je daarna kunt
    Wat je daarna kunt
    • 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
    Lessen
    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
    De opdracht

    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.

De Meesterproef

Zo word je Meester in dit ambacht

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.

Echt werk, beoordeeld door Neal. Je bent Meester per ambacht, niet in heel het vak tegelijk.

Voor klanten

Wat je hiermee voor klanten kunt doen

Wat een klant van je kan vragen zodra je dit ambacht beheerst, en vanaf welke rang. De duur is indicatief.

  • Vanaf 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.

    Wat je oplevert

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

  • Vanaf Meester

    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.

    Wat je oplevert

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

  • Vanaf Meester

    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.

    Wat je oplevert

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

  • Vanaf 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.

    Wat je oplevert

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

  • Vanaf Compagnon

    Kleur-, type- en contrastaudit

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

    Wat je oplevert

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

  • Vanaf Meester

    Beeldregie en fotoshoot

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

    Wat je oplevert

    • Beeldbrief en shotlist
    • Fotoshoot ter plaatse
    • Bewerkte reeks met vaste look
    • Webversies in moderne formaten
    • Toestemmingsformulieren voor wie in beeld komt
    Duur
    1 tot 2 weken
    Voor wie
    Horeca, winkels, ambachtslui en verenigingen die nu stockfoto's gebruiken
Wat je na het Atelier kunt doen

Werk

Beroepen op de Belgische markt

Zo heten de jobs waar dit ambacht naartoe leidt. Een opleiding is geen jobgarantie: je portfolio en je werk maken het verschil.

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

Certificaten

Certificaten waar de modules op voorbereiden

Echte certificaten, uitgereikt door de uitgever zelf. Wij reiken ze niet uit: het examen leg je af bij de uitgever. Kijk de actuele inhoud en prijs altijd bij de uitgever na.

  • Google UX Design Professional Certificate

    UitgeverGoogle (via Coursera)

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

  • UX Certification

    UitgeverNielsen Norman Group

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

  • Adobe Certified Professional

    UitgeverAdobe

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

  • CPACC (Certified Professional in Accessibility Core Competencies)

    UitgeverIAAP (International Association of Accessibility Professionals)

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

Leesgemak

Maak de site makkelijker om te lezen. Je keuze blijft bewaard op dit toestel.

Tekstgrootte

Gebruik je liever de instellingen van je toestel (zoom, schermlezer, donkere modus)? Die werken hier ook gewoon.