Maak digitale ideeën die echt werken

Elke dag gebruik je interaction design zonder dat je het misschien doorhebt. Denk aan apps, websites, zelfscankassa’s of interactieve schermen. Waarom werkt een app fijn? Waarom weet je meteen waar je moet klikken? Daeze vragen hebben allemaal te maken met interaction design.

In deze lessenserie maak je voor het eerst kennis met interaction design. Je ontdekt hoe digitale producten worden bedacht, ontworpen en getest. Je gaat van alles een beetje uitproberen: onderzoeken, ontwerpen, interactieve prototypes maken en testen.

Deze lessenserie is een eerste introductie in interaction design. Je hoeft dus nog geen expert te zijn. Het doel is vooral ontdekken, experimenteren en ervaren wat er allemaal mogelijk is binnen dit vakgebied.

Na deze korte lessenserie kun je tijdens de specialisatie dieper ingaan op verschillende onderdelen van interaction design en jezelf verder ontwikkelen als interaction designer.

Maak het klikbaar!

Elke dag gebruik je apps, websites en digitale schermen. Je klikt, scrolt, swipet en verwacht dat alles meteen werkt. Maar heb je je ooit afgevraagd wie dat allemaal bedenkt? In deze opdracht ga jij dat zelf ontdekken.

Je werkt in een reeks korte opdrachten toe naar één eindproduct: een interactief ontwerp dat jij zelf bedenkt, ontwerpt en presenteerbaar maakt. Je leert stap voor stap hoe je van een idee naar een werkend digitaal concept gaat.

1.1 Welke apps gebruik je dagelijk?

Wat Schrijf op welke apps, websites en andere soorten interactieve  producten die je op een schooldag allemaal gebruikt. Vanaf dat je opstaat tot je weer naar bed gaat.

Hoe Maak in Word een tabel en voer hier alle schermen van een dag in en geef een uitleg waar je het voor gebruikt.

1.2  Wat kan je nog herinneren?

Wat Kies vier van de apps die je hebt gebruikt. Schets zonder dat je het gaat opzoeken; 

1. •  het logo van deze app

   • het start- of inlogscherm

   • het eerste scherm dat je daarna ziet. 



Het gaat er niet om dat je het goed hebt maar wat je kan herinneren!

Hoe Vul per app 1 A4 met digitale of analoge schetsen.
Uiteindelijk heb je dan 4 vellen uitgewerkt. Download hier de schetsvellen 

1.3. Welke mening heb jij?

Wat Wat vind je goed werken aan de vier interactieve producten en wat vind je niet goed werken? Waar kan wat jou betreft verbetert worden?

Hoe Vul je mening in over de vier apps in op het opdrachtvel. Download hier het opdrachtvel.

2.1 Wat zie je in Figma

1. Canvas: Het grote werkvlak waarop je ontwerpt.
2. Frame: Een scherm van een website of app.
3. Layers: Een overzicht van alle onderdelen van je ontwerp.
4. Properties: Hier kun je kleuren, afmetingen en teksten aanpassen.

2.2 Een UI template downloaden.

Je gaat een bestaande User Interface gebruiken en aanpassen. Je kunt via deze link het ontwerp van de Interface van Spotify downloaden naar je eigen Figma account >> Spotify - Mobile UI Kit  

Je kunt via de community heel veel van deze bestaande UI Kits downloaden en gebruiken. 

2.3 Wat is een Frame?

Een Frame kun je vergelijken met een scherm van een app. Elke pagina die je ziet in de Spotify-app is meestal één Frame.

Zoek in je bestand:

• Home

• Playlist

• Album

• Player

Klik steeds op een ander scherm. Kun je ontdekken hoeveel schermen er in jouw template zitten?

3.1 Welk probleem ga jij oplossen?

Wat  Kies één van de ideeën hierboven of bedenk zelf een product. Bedenk hoe jouw interactieve product werkt en een probleem oplost. Beantwoord vragen over het probleem, de gebruiker, de oplossing, de interactie en welke schermen je nodig hebt. 

Hoe Vul de vragen zo uitgebreid mogelijk in op het opdrachtvel Welk probleem? Download deze hier.

3.2 Schets jouw idee

Wat Maak schetsen van jouw product.
Schets minimaal:

• Het uiterlijk van het product
  (bijv. apparaat, scherm en omgeving)

• Minimaal 2 interactiemomenten
  (bijv. knop indrukken, scherm dat verandert, feedback)

Hoe Maak 5 schetsen (digitaal of op papier, daarna scherp gefotografeerd). Gebruik pijlen en korte tekst om uit te leggen wat er gebeurt. Dit worden ook wel wireframes genoemd. 

Wireframes zijn handig om te zien hoe je navigeert door de verschillende schermen. Dus wat er gebeurd als je een app opent of op een knop drukt of als je scrollt. 

4.1 Maak je eerste scherm

Wat  Ontwerp het eerste scherm van jouw product. Bijvoorbeeld: 

• startscherm bestelzuil

• beginscherm van een app 

• scherm van een apparaat (zoals een prullenbak of spiegel) 

Hoe 

• Maak een nieuwe pagina in Figma aan in het document dat je voor deel 2 hebt gemaakt en noem deze: Design. Start hier met je eerste eerste scherm door een frame aan te maken. 

• Gebruik vormen, tekst, afbeeldingen en kleuren.

• Houd het overzichtelijk (niet te druk).
   

4.2  Werk je ontwerp verder uit

Wat  Vul je eerste scherm aan met vijf ontwerpen en zorg dat je de volgende schermen hebt verwerkt:

1. Startscherm
   (waar de gebruiker begint)

2. Intro / uitleg
   (wat kan je hier doen?)

3. Dashboard
   (overzicht van de app, website etc.)

4. Product pagina
   (gebruiker maakt een keuze voor product, meer uitleg, koopt iets etc. )

5. Error scherm
   (wat gebeurd er als de gebruiker een fout maakt?)

6. Eindscherm (bevestiging of afronding)

Hoe Werk je schermen uit in je Design pagina in figma door middel van de frames.

!! Als het je niet lukt om in Figma je ontwerp te maken. Dan kan je dit doen in illustrator. Uiteindelijk kan je deze ontwerpen in Figma kopieëren.

4.3 Maak je ontwerp klikbaar

Wat  Zorg dat je door alle schermen kunt klikken

Hoe 

• Als je stap voor stap wilt zien hoe je een Figma school account aanmaakt kun je dat via deze tutorial volgen.