App design in Adobe Xd

In deze lessenserie leer je de eerste beginselen van het ontwerpen van een app. Je maakt dus een prototype van een app, waarbij je kijkt naar de opbouw, het uiterlijk en de navigatie binnen de app.

Hiervoor moet je nog wel het programma Adobe Xd op je laptop zetten. Dit kan met je schooladobeaccount. Dit kan best lang duren om het te installeren, dus daar moet je even de tijd voor nemen.

Ook hier is het weer de bedoeling dat je voor je Portfolio, na iedere opdracht, een duidelijke afbeelding maakt met het knipprogramma. Plaats deze dan in de pagina ‘Webdesig’, met titel en onderschrift.

Uiteindelijk zal het totale resultaat via een link in je portfolio komen te staan.

De basis voor een app-ontwerp

De volgende 5 onderdelen komen achtereen volgens aan de orde:

 

1. Het maken van het beginscherm

Bedenk hoe jouw beginscherm er ongeveer uit zal moeten zien en maak een schetsje. Wat moet er allemaal op komen, zodat duidelijk is waarover het gaat. Zet ook jouw naam ergens in het beginscherm. Maak daarna je beginscherm aan de hand van onderstaande tutorial.

https://youtu.be/7Bl4eF3l1ig

 

2. Het toevoegen van de achterliggende schermen

Achter jouw beginscherm zitten de schermen waar je wil laten zien waarover de app gaat. Daarvoor verzamel je alle afbeeldingen die je toe wil voegen, zodat je die kunt toevoegen op het moment dat je zover bent. Denk goed na over de verdeling van je onderwerpen. Volg onderstaande tutorial weer om jouw idee uit te werken.

https://youtu.be/O-G-YCBb2Fo

 

3. Het maken van de verbindingen tussen de schermen

Losse schermen hebben natuurlijk geen zin, dus moet je ze slim verbinden. Dat gaan we in de volgende tutorial uitleggen.

https://youtu.be/4owNwzBvSlQ

 

4. Het publiceren van je app

Als je jouw app gemaakt hebt, is het handig om deze door anderen eerst uit te laten proberen. Iets wat je zelf hebt gemaakt is altijd lastig door jezelf te controleren. Als jij weet wat er staat is het lastig in te schatten of een ander het ook kan lezen, qua kleur, lettergrootte, duidelijkheid van de tekst. Maar ook hoe je door je app navigeert. Hoe je dat doet staat in onderstaande tutorial.

https://youtu.be/1a910UyvL00

 

5. Het beveiligen van je app

Als je een app maakt wil je natuurlijk niet dat iedereen daarin kan kijken. Daarom zouden we er een inlogcode op kunnen zetten. In de onderstaande video gaan we dit uitleggen.

https://youtu.be/J1Q3-mBq36s