Benodigdheden

• A3-papier;

• potlood en gum;

• liniaal;

• werkblad met vier schermformaten.

Stap 1 – Kies een onderwerp

Kies één onderwerp voor je digitale product.

Bijvoorbeeld:

• restaurant;

• 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:

• 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 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 een smartphoneformaat van ongeveer: 390 × 844 pixels

Geef het Frame de naam: Home – Mobile

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 3 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.

Stap 1 – Kies één typeface

Kies één goed leesbare typeface. Gebruik binnen die typeface verschillende:

• groottes;

• gewichten;

• stijlen.

Gebruik vandaag niet meerdere typefaces door elkaar.

Stap 2 – Maak een H1

De H1 is de belangrijkste kop van het scherm. Controleer:

• valt deze als eerste op?

• is de kop kort?

• is hij goed leesbaar?

• past hij zonder problemen op het scherm?

Stap 3 – Maak een H2

Gebruik een H2 voor een tussenkop of tweede informatieniveau. 

De H2 moet duidelijk kleiner of lichter zijn dan de H1.

Stap 4 – Voeg bodytekst toe

Schrijf een korte tekst van ongeveer twee tot vier regels.

Let op:

• niet te klein;

• niet te breed;

• voldoende regelafstand;

• korte zinnen.

Stap 5 – Ontwerp de knoptekst

Gebruik een korte en duidelijke actie. Bijvoorbeeld:

• Reserveer;

• Bekijk programma;

• Koop ticket;

• Lees meer;

• Bekijk collectie.

Vermijd lange knopteksten.

Stap 6 – Maak een vaste hiërarchie

Gebruik in je hele ontwerp steeds dezelfde tekststijlen:

• H1;

• H2;

• Body;

• Button.

Controleer of hetzelfde type tekst steeds dezelfde vormgeving heeft.

Stap 7 – Verbeter de witruimte

Kijk naar de afstanden tussen:

• titel en tekst;

• tekst en knop;

• verschillende onderdelen;

• tekst en de rand van het scherm.

Witruimte is geen lege plek. Het helpt om informatie te ordenen.

Stap 8 – Doe de drie-seconden-test

Laat je scherm drie seconden aan een klasgenoot zien. Vraag daarna:

• Wat zag je als eerste?

• Waar ging het scherm over?

• Welke knop viel op?

Pas je ontwerp aan wanneer de antwoorden niet overeenkomen met je bedoeling.

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.

...

Stap 1 – Kies één gebruikersdoel

Bepaal wat de gebruiker in jouw prototype moet kunnen doen.

Bijvoorbeeld:

• een tafel reserveren;

• een kaartje kopen;

• een product bekijken;

• openingstijden opzoeken;

• contact opnemen.

Kies één duidelijke taak.

Stap 2 – Teken een user flow

Schrijf of teken de route.

Bijvoorbeeld: Home → Menu → Gerecht → Reserveren → Bevestiging

Gebruik minimaal drie en maximaal vijf schermen.

Stap 3 – Maak de benodigde schermen

Dupliceer je bestaande Frame en pas ieder scherm aan.

Geef de Frames duidelijke namen, bijvoorbeeld:

• 01 Home;

• 02 Overzicht;

• 03 Detail;

• 04 Formulier;

• 05 Bevestiging.

Stap 4 – Maak duidelijke knoppen

Zorg dat een gebruiker begrijpt:

• waar hij kan klikken;

• wat de knop doet;

• hoe hij terug kan;

• hoe hij verder kan.

Stap 5 – Verbind de schermen

Ga in Figma naar Prototype.

Koppel:

• knoppen;

• navigatie;

• terugknoppen;

• belangrijke afbeeldingen of kaarten.

Stap 6 – Stel het startscherm in

Kies welk scherm als eerste wordt geopend. Test zelf of alle koppelingen werken.

Stap 7 – Laat een klasgenoot testen

Geef alleen een opdracht. Bijvoorbeeld: Zoek een vegetarisch gerecht en probeer een tafel te reserveren.

Geef tijdens de test geen uitleg.

Observeer:

• waar klikt de gebruiker?

• waar twijfelt hij?

• welke knop wordt niet gezien?

• gaat hij de verkeerde kant op?

Stap 8 – Verwerk minimaal twee verbeteringen

Pas je prototype aan op basis van de test.

Schrijf kort op:

• wat ging mis?

• wat heb je veranderd?

• waarom is het nu beter?