Aller au contenu
Atelierby nealvdv
ÉtabliCommencer gratuitement

Préférences

Retour à la carte

Métier · Concevoir

Kleur, type & merk

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

  • 10 modules
  • 294 heures d’étude

Commencer gratuitement ce métier

Planning d’atelierModules et heures d’étude indicatives par rang
RangModulesHeures
Apprenti474
Compagnon4150
Maître270
Total10294

Le contenu pédagogique de cette page n’existe pour l’instant qu’en néerlandais.

Pourquoi ce métier

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.

Ce qu’il vous faut avant de commencer

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

Le programme

Les modules par rang

Chaque module comprend des leçons et un exercice dont quelqu’un d’autre peut vérifier le résultat. Les heures sont indicatives.

Votre progression

Vous cochez les modules sur cet appareil ; rien n’est envoyé à un serveur. Sur l’Établi, vous gardez votre parcours dans un compte, déposez vos travaux et recevez le poinçon de Neal.

Apprenti

Les bases. Avec ces modules et une épreuve de compagnon, vous devenez Compagnon.

4 modules · 74 h

  1. Leren zien: compositie en hiërarchie

    16 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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 heures d’étude

    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)
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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

Maîtriser le métier : des projets plus grands, relus à chaque étape.

4 modules · 150 h

  1. Logo's ontwerpen en overtekenen naar SVG

    30 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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.

Maître

Ce qu’un Maître doit savoir faire seul, en préparation du chef-d’œuvre.

2 modules · 70 h

  1. Beweging, illustratie, iconen en fotografie

    45 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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 heures d’étude

    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
    Leçons, exercice et ce que vous saurez faire ensuite
    Ce que vous saurez faire ensuite
    • 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
    Leçons
    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
    L’exercice

    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.

Le chef-d’œuvre

Devenir Maître dans ce métier

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.

Un vrai travail, évalué par Neal. On est Maître par métier, pas dans toute l’informatique à la fois.

Pour les clients

Ce que vous pouvez faire avec ce métier pour des clients

Ce qu’un client peut vous demander dès que vous maîtrisez ce métier, et à partir de quel rang. La durée est indicative.

  • À partir de 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.

    Ce que vous livrez

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

  • À partir de Maître

    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.

    Ce que vous livrez

    • Merkintake en moodboard
    • Logo en varianten
    • Kleurpalet voor licht en donker met contrastcontrole
    • Lettertypes met licentie
    • Brand book
    Durée
    2 tot 4 weken
    Pour qui
    Starters, zaken die heropenen of een verouderd imago hebben

  • À partir de Maître

    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.

    Ce que vous livrez

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

  • À partir de 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.

    Ce que vous livrez

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

  • À partir de Compagnon

    Kleur-, type- en contrastaudit

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

    Ce que vous livrez

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

  • À partir de Maître

    Beeldregie en fotoshoot

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

    Ce que vous livrez

    • Beeldbrief en shotlist
    • Fotoshoot ter plaatse
    • Bewerkte reeks met vaste look
    • Webversies in moderne formaten
    • Toestemmingsformulieren voor wie in beeld komt
    Durée
    1 tot 2 weken
    Pour qui
    Horeca, winkels, ambachtslui en verenigingen die nu stockfoto's gebruiken
Ce que vous pouvez faire après l’Atelier

Emploi

Métiers sur le marché belge

Voici comment s’appellent les emplois auxquels ce métier mène. Une formation n’est pas une garantie d’emploi : votre portfolio et votre travail font la différence.

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

Certifications

Les certifications auxquelles les modules préparent

De vraies certifications, délivrées par l’organisme lui-même. Nous ne les délivrons pas : vous passez l’examen auprès de l’organisme. Vérifiez toujours le contenu et le prix actuels chez lui.

  • Google UX Design Professional Certificate

    OrganismeGoogle (via Coursera)

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

  • UX Certification

    OrganismeNielsen Norman Group

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

  • Adobe Certified Professional

    OrganismeAdobe

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

  • CPACC (Certified Professional in Accessibility Core Competencies)

    OrganismeIAAP (International Association of Accessibility Professionals)

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

Confort de lecture

Rendez le site plus facile à lire. Votre choix est gardé sur cet appareil.

Taille du texte

Vous préférez les réglages de votre appareil (zoom, lecteur d'écran, mode sombre) ? Ils fonctionnent ici aussi.