App bouwen in Adobe XD - Paddenstoelen

In deze opdracht doorloop je verschillende onderdelen. Je gaat kennismaken met Adobe XD, je gaat aan de slag met Adobe Illustrator en je bouwt uiteindelijk een app. De opdracht bestaat uit meerdere delen. Let op dat je de bestanden download die je nodig hebt.

Leerdoelen

De leerling leert de basis van Adobe XD
De leerling leert een wireframe te ontwerpen
De leerling leert interactie en animatie in Adobe XD
De leerling leert werk zorgvuldig op te slaan in Adobe XD
De leerling leert iconen te ontwikkelen voor een app
De leerling leert rollovers te maken met afbeeldingen en iconen
De leerling leert afbeeldingen plaatsen in Adobe XD
De leerling leert aangeleverde tekst te implementeren in een app

Bekijk als eerst de intro video, het thema is paddenstoelen

Image bij macrovector on Freepik

Maak jouw eigen website met JouwWeb

Wat ga je uiteindelijk ongeveer maken

Deel 1 – Kennis maken met Adobe XD

In deze opdracht ga je aan de slag in Adobe XD. Je gaat leren hoe je een app maakt en deze op de juiste manier exporteert en opslaat. Je kunt op alle blauw gedrukte dingen klikken, dit zijn links.

Opslaan

Heb je alle stappen doorlopen? Zorg ervoor dat je jouw bestand goed opslaat. In de volgende video wordt uitgelegd hoe je dat doet. Lever het bestand in bij de docent.

Deel 2 – Thema & Wireframe

Je gaat in deze opdracht aan de slag met een wireframe. In de video wordt getoond hoe je hiermee aan de slag gaat. Hieronder zie je ook nog een voorbeeld van een wireframe. Let op! Je gaat nog twee functies aan jouw app toevoegen. We gaan samen het homescreen maken en een functiepagina wat er gebeurt als je op een afbeelding klikt. Je gaat nu nog twee functies zelf bedenken. Denk bijvoorbeeld aan een pagina met al jouw favoriete paddenstoelen of een locatie van paddenstoelen-pagina, denk zelf na over wat je wilt laten zien. Lever jouw wireframe in als .AI en als .PDF bij de docent.

Bekijk als eerst de intro video, het thema is paddenstoelen en zie hiernaar een voorbeeld van een Wireframe.

Wireframe

Deel 3 – App bouwen in Adobe XD

Je hebt als het goed is een wireframe gemaakt. Je gaat dit wireframe omzetten naar een werkende app in Adobe XD. Kijk de video mee om het begin te maken. Vervolgens ga je de andere pagina’s zelf vormgeven.

Deel 4 – Interactie in Adobe XD

In dit onderdeel ga je verder met jouw app. Ook ga je jouw zelf bedachten pagina’s maken, dit doe je zelfstandig.

Je hebt in jouw wireframe 2 pagina’s bedacht. Deze twee pagina’s ga je nu toevoegen in jouw app. Ben je helemaal klaar? Kijk dan nog een keer naar de uitleg hoe je het opslaat.

Opslaan

Lever jouw app in als .XD bestand bij de docent.

TOP