Zum Inhalt
Atelierby nealvdv
WerkbankKostenlos starten

Einstellungen

Zurück zur Karte

Handwerk · Gestalten

Kleur, type & merk

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

  • 10 Module
  • 294 Lernstunden

Mit diesem Handwerk kostenlos starten

WerkstattplanModule und Richtwerte für Lernstunden pro Rang
RangModuleStunden
Lehrling474
Compagnon4150
Meister270
Gesamt10294

Die Lerninhalte auf dieser Seite gibt es vorerst nur auf Niederländisch.

Warum dieses Handwerk

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.

Was du vorher brauchst

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

Der Lehrplan

Module pro Rang

Jedes Modul hat Lektionen und eine Aufgabe mit einem Ergebnis, das jemand anderes prüfen kann. Die Stunden sind Richtwerte.

Dein Fortschritt

Du hakst Module auf diesem Gerät ab; nichts geht an einen Server. Auf der Werkbank speicherst du deinen Weg in einem Konto, reichst deine Aufgaben ein und bekommst das Meisterzeichen von Neal.

Lehrling

Die Grundlagen. Mit diesen Modulen und einer Compagnon-Prüfung wirst du Compagnon.

4 Module · 74 Std.

  1. Leren zien: compositie en hiërarchie

    16 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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)
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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

Das Handwerk beherrschen: größere Projekte, mit Review bei jedem Meilenstein.

4 Module · 150 Std.

  1. Logo's ontwerpen en overtekenen naar SVG

    30 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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.

Meister

Was ein Meister selbstständig können muss, als Vorbereitung auf das Meisterstück.

2 Module · 70 Std.

  1. Beweging, illustratie, iconen en fotografie

    45 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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 Lernstunden

    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
    Lektionen, Aufgabe und was du danach kannst
    Was du danach kannst
    • 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
    Lektionen
    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
    Die Aufgabe

    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.

Das Meisterstück

So wirst du Meister in diesem Handwerk

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.

Echte Arbeit, beurteilt von Neal. Meister bist du pro Handwerk, nicht in der ganzen IT auf einmal.

Für Kunden

Was du damit für Kunden tun kannst

Was ein Kunde von dir verlangen kann, sobald du dieses Handwerk beherrschst, und ab welchem Rang. Die Dauer ist ein Richtwert.

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

    Was du lieferst

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

  • Ab Meister

    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.

    Was du lieferst

    • Merkintake en moodboard
    • Logo en varianten
    • Kleurpalet voor licht en donker met contrastcontrole
    • Lettertypes met licentie
    • Brand book
    Dauer
    2 tot 4 weken
    Für wen
    Starters, zaken die heropenen of een verouderd imago hebben

  • Ab Meister

    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.

    Was du lieferst

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

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

    Was du lieferst

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

  • Ab Compagnon

    Kleur-, type- en contrastaudit

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

    Was du lieferst

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

  • Ab Meister

    Beeldregie en fotoshoot

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

    Was du lieferst

    • Beeldbrief en shotlist
    • Fotoshoot ter plaatse
    • Bewerkte reeks met vaste look
    • Webversies in moderne formaten
    • Toestemmingsformulieren voor wie in beeld komt
    Dauer
    1 tot 2 weken
    Für wen
    Horeca, winkels, ambachtslui en verenigingen die nu stockfoto's gebruiken
Was du nach dem Atelier machen kannst

Arbeit

Berufe auf dem belgischen Markt

So heißen die Jobs, zu denen dieses Handwerk führt. Eine Ausbildung ist keine Jobgarantie: Dein Portfolio und deine Arbeit machen den Unterschied.

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

Zertifikate

Zertifikate, auf die die Module vorbereiten

Echte Zertifikate, ausgestellt vom Anbieter selbst. Wir stellen sie nicht aus: Die Prüfung legst du beim Anbieter ab. Prüf den aktuellen Inhalt und Preis immer beim Anbieter.

  • Google UX Design Professional Certificate

    AnbieterGoogle (via Coursera)

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

  • UX Certification

    AnbieterNielsen Norman Group

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

  • Adobe Certified Professional

    AnbieterAdobe

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

  • CPACC (Certified Professional in Accessibility Core Competencies)

    AnbieterIAAP (International Association of Accessibility Professionals)

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

Lesekomfort

Mach die Website leichter lesbar. Deine Wahl bleibt auf diesem Gerät gespeichert.

Textgröße

Lieber die Einstellungen deines Geräts (Zoom, Screenreader, Dunkelmodus)? Die funktionieren hier auch.