3.2 Beeldscherm

DESIGN LAB

Pixels op je beeldscherm

Iedere dag gebruik je tientallen schermen. Je kijkt op je telefoon, gebruikt apps, bezoekt websites en werkt op een laptop of tablet. Maar heb je er weleens bij stilgestaan waarom sommige schermen prettig werken en andere juist niet?

In dit thema ontdek je hoe een mediavormgever ontwerpt voor verschillende beeldschermen. Je leert denken in pixels in plaats van papier, werkt met Figma en ontwerpt stap voor stap een gebruiksvriendelijke interface voor smartphone, tablet en desktop. Je ontdekt dat een goed digitaal ontwerp niet alleen mooi is, maar vooral duidelijk, logisch en prettig in gebruik.

WEEK 1. VAN PAPIER NAAR PIXELS

"Denk jij in pixels?"

Wat ga je leren?

Een scherm is geen digitaal A4. Dezelfde informatie moet op een smartwatch, smartphone, tablet en desktop/laptop steeds anders worden geordend.

Je leert:

denken in schermformaten
informatie selecteren en ordenen
rekening houden met de gebruiker
snelle wireframes schetsen
verschillen tussen apparaten herkennen

THEORIE

DOE-OPDRACHT

Je gaat voor 1 bedrijf/instelling/merk een digitaal product ontwerpen. Dit product moet op verschillende schermen werken. Vandaag ga je nadenken en schetsen maken voor deze verschillende schermen, waarbij je rekening moet houden met welke informatie het meest belangrijk is en goed zichtbaar moet zijn. Voor deze opdracht heb je circa 90 minuten de tijd.

Benodigdheden

A3-papier
potlood en gum
liniaal
werkblad met vier schermformaten

Stap 1: Kies een onderwerp

Kies één onderwerp voor je digitale product. In de voorbeelden laten we een restaurant zien. Kies dus wat anders (tenzij je echt koos inspiratieloos bent).

Bijvoorbeeld:

festival
museum
dierenasiel
sportschool
webshop
snackbar
bibliotheek

Geef je product een naam.

Stap 2: Bepaal de gebruiker

Schrijf kort op:

Wie gebruikt jouw website of app?
Wat wil deze persoon kunnen doen?
Welke informatie zoekt deze persoon als eerste?

Voorbeeld: Een bezoeker wil snel het menu bekijken en een tafel reserveren.

Stap 3: Kies de inhoud

Maak een lijst van maximaal tien onderdelen.

Bijvoorbeeld voor een restaurant:

logo
naam
grote afbeelding
korte introductie
openingstijden
menu
reserveerknop
locatie
reviews
contact

Nummer de onderdelen van belangrijk naar minder belangrijk.

Stap 4: Schets een smartwatch

Teken alleen wat echt noodzakelijk is. Vraag jezelf af:

Wat moet direct zichtbaar zijn?
Welke informatie kan weg?
Welke actie is het belangrijkst?

Gebruik maximaal drie onderdelen.

Stap 5: Schets een smartphone

Maak een eenvoudige verticale indeling.

Verwerk minimaal:

naam of logo
titel
korte tekst
afbeelding
belangrijke knop
navigatie

Denk ook na over wat de gebruiker pas ziet na het scrollen.

Stap 6: Schets een tablet

Gebruik dezelfde informatie, maar maak een andere compositie.

Onderzoek bijvoorbeeld:

twee kolommen
grotere afbeeldingen
tekst en beeld naast elkaar
extra navigatiemogelijkheden

Stap 7: Schets een desktop

Maak een brede schermindeling. Denk na over:

horizontale navigatie
meerdere kolommen
meer witruimte
wat direct zichtbaar is zonder te scrollen

Vul de extra ruimte niet automatisch met meer informatie.

Stap 8: Vergelijk de schermen

Schrijf bij ieder scherm één korte conclusie.

Bijvoorbeeld: Op de smartwatch blijft alleen de belangrijkste actie over.

Stap 9: Details

Ben jij al klaar? Werk dan je schetsen al verder uit. Denk aan kleurgebruik, typografie, beeldgebruik.

UX-check

Laat je vier ontwerpen kort aan een klasgenoot zien.

Vraag:

Wat zag je als eerste?
Wat denk je dat je hier kunt doen?
Waar zou je als eerste op klikken?

Komt dit overeen met wat jij had bedacht? Dan werkt je informatiehiërarchie.

WEEK 2.LOGO'S VOOR BEELDSCHERMEN

"Past jouw logo in een vierkantje van 32 pixels?"

Wat ga je leren?

Een logo wordt op een beeldscherm op allerlei manieren gebruikt. Groot bovenaan een website, klein in een navigatiebalk en soms piepklein als app-icoon of favicon.

Daarom bestaat een goede digitale huisstijl vaak niet uit één logo, maar uit verschillende logo-variaties.

Je leert:

verschillende soorten logo's herkennen
een logo vereenvoudigen
een woordmerk en beeldmerk maken
horizontale en compacte logovariaties ontwerpen
rekening houden met schaalbaarheid
een herkenbare visuele identiteit behouden

DOE-OPDRACHT

Voor deze opdracht ontwerp je verschillende logovariaties voor het digitale product dat je in week 1 hebt bedacht.

Het doel is niet om vijf verschillende logo's te maken. Je maakt één visuele identiteit die in verschillende vormen blijft werken.

Benodigdheden

schetspapier
potlood
fineliner
computer
Figma (voor de snelle jelle)

Stap 1: Onderzoek verschillende soorten logo's

Bekijk voorbeelden van:

woordmerken
lettermerken / monogrammen
beeldmerken
combinatie-logo's
emblemen

Zoek minimaal drie logo's waarvan jij vindt dat ze goed werken op een beeldscherm.

Kijk vooral naar wat er gebeurt wanneer het logo kleiner wordt.

Stap 2: Maak snelle schetsen

Maak minimaal 5 kleine logoschetsen voor jouw onderwerp.

Werk klein en snel.

Onderzoek verschillende mogelijkheden met:

letters
initialen
vormen
symbolen
woord + beeld

Besteed nog niet te veel tijd aan details.

Stap 3: Kies één richting

Kies je beste ontwerp.

Vraag jezelf af:

Past het bij mijn onderwerp?
Is het herkenbaar?
Is de vorm eenvoudig genoeg?
Werkt het ook klein?
Kan ik hier verschillende varianten van maken?

Werk deze richting verder uit.

Stap 4: Maak een volledig logo

Maak eerst de meest uitgebreide versie van je logo.

Deze kan bijvoorbeeld bestaan uit:

beeldmerk + naam

Deze versie kan gebruikt worden wanneer er voldoende ruimte beschikbaar is.

Bijvoorbeeld op een desktopwebsite.

Stap 5: Maak een horizontale variant

Maak een versie die goed past in een smalle websiteheader.

Denk bijvoorbeeld aan:

beeldmerk | naam

Controleer of het logo niet te hoog wordt.

Stap 6: Maak een compacte variant

Maak een versie voor plekken waar minder ruimte beschikbaar is.

Gebruik bijvoorbeeld:

alleen het beeldmerk
initialen
een monogram
een sterk vereenvoudigde vorm

De gebruiker moet nog steeds kunnen herkennen dat deze variant bij hetzelfde merk hoort.

Stap 7: Maak een app-icoon / favicon

Plaats je meest compacte logo in een vierkant.

Test het vervolgens steeds kleiner.

Controleer:

blijven de belangrijkste vormen zichtbaar?
zijn dunne lijnen nog te zien?
zijn kleine letters nog leesbaar?
blijft het logo herkenbaar?

Een logo dat alleen groot werkt, is voor beeldschermen niet flexibel genoeg.

Stap 8: Maak een overzicht

Plaats je varianten naast elkaar:

volledig logo
horizontaal logo
compact logo
beeldmerk / app-icoon

Zorg dat duidelijk zichtbaar is dat ze allemaal bij hetzelfde merk horen.

Stap 9: Digitaliseer je logo

Ben je nou al klaar met je schetsen? Open dan figma en werk je logo's daarin uit. Ook in figma werk je, net als in illustrator, met vectoren, dus dit is prima geschikt om je logo in te digitaliseren.

UX-check

Laat een klasgenoot vijf seconden kijken.

Vraag daarna:

Waar verwacht je dat je op het logo kunt klikken?
Welk logo zou je gebruiken op een smartphone?
Welk logo zou je gebruiken als app-icoon?
Herken je in alle varianten hetzelfde merk?

Pas je logo's aan wanneer de herkenbaarheid verdwijnt.

WEEK 3. Van schets naar figma

"Wat is de meerwaarde van beweging in een grafisch ontwerp?"

Wat ga je leren?

Je vertaalt je papieren wireframe naar een digitaal ontwerp in Figma. Je werkt nog zonder kleur en fotografie, zodat je je volledig kunt richten op de structuur.

Je leert:

een Figma-bestand aanmaken
werken met Frames
ontwerpen in pixels
tekst en vormen plaatsen
onderdelen uitlijnen
lagen ordenen
een ontwerp logisch opbouwen

DOE-OPDRACHT

Voor deze opdracht vertaal je één van je schetsen uit week 1 naar Figma. Voor deze opdracht heb je circa 90 minuten de tijd.

Heb je les 1 gemist?

Kies zelf een onderwerp voor een smartphonescherm. Maak eerst in tien minuten een eenvoudige smartphoneschets met:

header
afbeelding
titel
tekst
knop
navigatie

Daarna kun je direct verder.

Stap 1: Maak een Figma-bestand

Open Figma en maak een nieuw Design File. Geef het bestand een duidelijke naam: Voornaam_Achternaam_DesignLab

Stap 2: Maak een smartphone-Frame

Kies het smartphoneformaat van iphone 16 & 17pro van 440 × 956 pixels

Geef het Frame de naam: Home – Mobile

Stap 3: Maak een grid

Zet aan alle zijden een hulplijn op 24px. Plaats vervolgens 4 lichtgroene rechthoeken met een gutter van 16px. Selecteer de 4 rechthoeken en lock deze. Nu heb je een handig grid gemaakt om de volgende stap goed uit te voeren

Stap 3: Plaats de hoofdonderdelen

Bouw je schets na met eenvoudige grijze vlakken.

Plaats:

header
logo of naam
afbeeldingvlak
hoofdtitel
korte tekst
belangrijke knop
onderste navigatie

Gebruik nog geen echte foto’s.

Stap 4: Maak tekstblokken

Gebruik tijdelijke tekst of korte voorbeeldteksten. Maak verschil tussen:

titel
tussenkop
gewone tekst
knoptekst

De typografie wordt in les 4 verder uitgewerkt.

Stap 5: Lijn alles uit

Controleer:

staan onderdelen op dezelfde lijn?
zijn de marges links en rechts gelijk?
is er voldoende ruimte tussen onderdelen?
staat niets per ongeluk scheef?

Stap 6: Orden je lagen

Geef onderdelen duidelijke namen, bijvoorbeeld:

Header
Hero Image
H1
Body Text
CTA Button
Bottom Navigation

Stap 7: Vergelijk met je schets

Leg je papieren ontwerp naast je Figma-ontwerp.

Schrijf kort op:

wat heb je veranderd?
waarom heb je dat veranderd?
wat werkt digitaal beter?

Stap 8: Maak een desktopvariant

Maak een tweede Frame van ongeveer: 1440 × 1024 pixels

Kopieer niet alleen je mobiele ontwerp. Pas de compositie aan de bredere ruimte aan. Je hoeft niet alles volledig uit te werken. Een eenvoudig desktop-wireframe is voldoende.

UX-check

Laat je smartphoneontwerp aan een klasgenoot zien.

Vraag:

"Waar zou jij klikken als je..."

Vul zelf een belangrijke actie in.

Bijvoorbeeld:

een product wilt kopen
een tafel wilt reserveren
openingstijden wilt vinden
een kaartje wilt bestellen

Wijst je klasgenoot direct het juiste onderdeel aan? Dan helpt jouw compositie de gebruiker!

WEEK 4. Typografie op je scherm

"Waarom is lettergrootte belangrijk?"

Wat ga je leren?

Typografie op een beeldscherm hoeft niet saai te zijn.

Met letters kun je sfeer, ritme, contrast en karakter aan een ontwerp geven. Een grote kop kan bijna een afbeelding worden. Een opvallend lettertype kan de sfeer van een merk bepalen. En door te spelen met grootte en positie kun je de aandacht van de gebruiker sturen.

Maar: het moet wel leesbaar en bruikbaar blijven.

Je leert:

een typeface kiezen die bij de sfeer van je ontwerp past
experimenteren met schaal en contrast
tekst gebruiken als onderdeel van je compositie
verschillende font weights combineren
typografische hiërarchie ontwerpen
typografie combineren met beeld
creatieve keuzes maken zonder de leesbaarheid te verliezen

DOE-OPDRACHT

Vandaag ga je niet meteen je definitieve website ontwerpen.

Je gaat eerst experimenteren met typografie.

Je maakt drie totaal verschillende typografische ontwerpen voor hetzelfde smartphonescherm.

Daarna kies je de sterkste richting en pas je die toe op je ontwerp uit week 3.

Stap 1: Kies drie woorden

Kijk naar het onderwerp dat je voor je website hebt gekozen. Bedenk drie woorden die bij de uitstraling passen.

Bijvoorbeeld:

brutaal – jong – energiek

of:

rustig – natuurlijk – vriendelijk

of:

exclusief – minimalistisch – elegant

Deze woorden worden het uitgangspunt voor je typografie.

Stap 2: Doe een TYPE HUNT

Ga op zoek naar typefaces die bij jouw drie woorden passen.

Maak in Figma een vlak met daarop steeds dezelfde tekst:

'JOUW TITEL'

Test minimaal 6 verschillende typefaces.

Kijk niet alleen naar: "Vind ik dit lettertype mooi?"

Maar vooral: "Wat straalt dit lettertype uit?"

Zet bij ieder typeface één woord.

Bijvoorbeeld:

Anton → krachtig

DM Sans → modern

Playfair Display → elegant

Space Grotesk → technisch

Bebas Neue → sportief

Lora → vriendelijk / redactioneel

Kies daarna één of twee typefaces waarmee je verder wilt.

Stap 3: Maak het extreem

Maak een nieuw smartphoneframe. Gebruik alleen:

één grote titel

één korte tekst

één button

Nu ga je overdrijven. Maak de titel bijvoorbeeld ENORM

Misschien zelfs zo groot dat een deel buiten het scherm valt.

Probeer:

60 px
80 px
100 px
120 px

Wat gebeurt er met je compositie?

Vraag jezelf af:

Wanneer is de tekst nog informatie? En wanneer wordt de tekst beeld?

Stap 4: Speel met contrast

Maak verschil. Niet:

32 px titel
28 px tussenkop
24 px tekst

Alles lijkt dan ongeveer even belangrijk. Probeer juist:

80 px tegenover: 16 px

Of: BOLD tegenover: Regular

Of: GROOT tegenover: klein.

Stap 5: Maak 3 typografische composities

Gebruik steeds precies dezelfde tekst. Maar ontwerp drie compleet verschillende schermen.

ONTWERP A = RUSTIG

Denk aan:

veel witruimte
links uitlijnen
rustige typeface
duidelijke hiërarchie
weinig verschillende groottes

ONTWERP B = EXPRESSIEF

Experimenteer.

Denk aan:

extreem grote letters
woorden die buiten het scherm vallen
tekst over een afbeelding
sterke verschillen in grootte
onverwachte compositie

ONTWERP C = EIGEN STIJL

Doe wat jij zelf interessant vindt. Combineer bijvoorbeeld:

serif + sans serif
kapitalen + onderkast
grote cijfers
verticale tekst
verschillende weights
tekst en fotografie
typografie als grafische vorm

Voorwaarde: De gebruiker moet nog steeds begrijpen: Waar gaat dit over? en: Wat kan ik hier doen?

Stap 6: Combineer type met beeld

Voeg nu één afbeelding toe. Onderzoek minimaal drie mogelijkheden.

1. Tekst boven beeld Veilig en duidelijk.

2. Tekst over beeld Meer spanning. Let goed op contrast en leesbaarheid.

3. Tekst en beeld als één compositie Laat bijvoorbeeld een groot woord achter een persoon of voorwerp verdwijnen. Of laat een foto aansluiten op de vorm van je letters.

Laat tekst en beeld samenwerken. Plak niet simpelweg een tekstvak boven een foto.

Stap 7: Maak het bruikbaar

Je creatieve experiment moet ook een echte interface kunnen worden.

Controleer daarom met de Cheatsheet Typografie voor beeldscherm:

Is bodytekst minimaal ongeveer 16 px?
Is langere tekst prettig leesbaar?
Is de regelafstand goed?
Is er voldoende contrast?
Is buttontekst duidelijk?
Zijn lange tekstregels niet te breed?
Zijn H1, H2 en body duidelijk van elkaar te onderscheiden?

Pas alleen aan wat nodig is.

Stap 8: Pas de stijl toe

Neem de typografische stijl die je hebt ontwikkeld en pas hem toe op het scherm uit week 3. Maak vaste Figma Text Styles voor:

Display / Hero

Body

Small

Button

Nu heb je niet alleen een technisch correcte interface.

Je hebt een interface met een eigen typografische identiteit.

UX-CHECK

Laat je ontwerp 3 seconden aan iemand zien. Haal het daarna weg.

Vraag:

Waar ging de pagina over?

Wat zag je als eerste?

Wat was de belangrijkste knop?

Kon je de tekst makkelijk lezen?

Komt het antwoord niet overeen met wat jij belangrijk vond?

Pas je typografische hiërarchie aan.

WEEK 5 Kleurtjes op je beeldscherm

"Kan ik niet gewoon een leuk kleurtje kiezen?"

Wat ga je leren?

Je geeft je interface een herkenbare uitstraling. Je leert kleur en beeld gebruiken zonder dat de leesbaarheid of gebruiksvriendelijkheid verdwijnt.

Je leert:

een beperkt kleurenpalet kiezen
contrast gebruiken
geschikte beelden selecteren
iconen consequent toepassen
een kleine digitale styleguide maken

DOE-OPDRACHT

Heb je eerdere lessen gemist?

Gebruik het startbestand met een smartphone-wireframe. Voeg eerst een H1, H2, bodytekst en knop toe. Daarna kun je met deze les beginnen.

Stap 1: Bepaal de gewenste uitstraling

Kies drie woorden die bij je onderwerp passen.

Bijvoorbeeld:

modern
warm
energiek
rustig
exclusief
speels
betrouwbaar

Deze woorden helpen bij het kiezen van kleur en beeld.

Stap 2: Maak een kleurenpalet

Kies maximaal:

één hoofdkleur
één accentkleur
één lichte achtergrondkleur
één donkere tekstkleur

Noteer de HEX- of RGB-codes.

Stap 3: Controleer het contrast

Controleer of tekst goed leesbaar is op de achtergrond.

Let vooral op:

tekst op gekleurde vlakken
knoptekst
kleine tekst
lichte kleuren

Stap 4: Kies passende afbeeldingen

Kies beelden die:

hetzelfde onderwerp laten zien
dezelfde sfeer hebben
voldoende kwaliteit hebben
ruimte bieden voor tekst wanneer dat nodig is

Gebruik niet automatisch de eerste afbeelding die je vindt.

Stap 5: Voeg iconen toe

Gebruik alleen iconen wanneer ze een functie hebben.

Bijvoorbeeld:

menu
zoeken
locatie
profiel
favoriet

Gebruik iconen uit één visuele stijl.

Stap 6: Maak een mini-styleguide

Plaats naast je ontwerp:

kleurvlakken met codes
gekozen typeface
H1-, H2- en bodystijl
knopstijl
twee of drie iconen
voorbeeld van fotografie

Stap 7: Pas de stijl toe

Werk je smartphone-homepage visueel uit. Controleer of:

de stijl consequent is
de belangrijkste knop opvalt
tekst leesbaar blijft
afbeeldingen het ontwerp versterken

Stap 8: Controleer je ontwerp zonder kleur

Bekijk je ontwerp tijdelijk in grijstinten. Blijft de hiërarchie duidelijk? Zo niet, dan leunt het ontwerp te veel op kleur.

TUTORIAL

Als je niet weet hoe je de techniek achter deze opdracht aanpakt, volg dan onderstaande tutorial.

INSPIRATIE

...

FEEDBACK

BEOORDELING

WEEK 6

Wat ga je leren?

Je rondt je digitale product af. Je test het ontwerp, verwerkt feedback en presenteert je keuzes alsof je het ontwerp aan een opdrachtgever laat zien.

Je leert:

een prototype gericht testen
bruikbare feedback verzamelen
ontwerpkeuzes toelichten
verbeteringen verwerken
je werk professioneel presenteren

DOE-OPDRACHT

Heb je eerdere lessen gemist?

Gebruik het beschikbare voorbeeldprototype. Analyseer en verbeter dit ontwerp alsof het je eigen project is. Beschrijf duidelijk welke keuzes je hebt aangepast.

Stap 1: Controleer je bestand

Controleer of je bestand bevat:

smartphone-interface
minimaal één groter schermformaat
mini-styleguide
drie tot vijf prototypeschermen
werkende koppelingen
duidelijke namen voor Frames en lagen

Stap 2: Bereid een gebruikerstest voor

Schrijf één concrete taak voor de tester. Bijvoorbeeld: Zoek de openingstijden en plan daarna een bezoek.

Maak drie observatievragen:

Waar begon de tester?
Waar twijfelde de tester?
Werd de taak voltooid?

Stap 3: Voer de test uit

Laat een klasgenoot het prototype gebruiken. Niet helpen en niet uitleggen. Maak korte aantekeningen.

Stap 4: Kies drie verbeterpunten

Kies alleen verbeteringen die echt invloed hebben op:

duidelijkheid
leesbaarheid
navigatie
hiërarchie
gebruiksgemak

Stap 5: Verbeter je prototype

Verwerk de drie verbeterpunten. Controleer daarna opnieuw of het prototype werkt.

Page updated

Google Sites

Report abuse