App bouwen in Adobe XD – Paddenstoelen

Introductie

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.

Gemiddeld duurt de opdracht 12-14 uur ±

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

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.

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

Voorbeeld van een wireframe:

Image by macrovector on Freepik

Lever jouw wireframe in als .AI en als .PDF bij de docent.

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.

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

Formulier maken met Html/Css

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je werken met een formulier maken in HTML, je leert over verschillende input values en ook hoe je deze kunt aflezen.

Flex-wrap

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je aan de slag met flex-wrap, afbeeldingen en hyperlinks die openen in een nieuw venster.

Aan het eind van deze opdracht snap- en kan je:
– Leren om te gaan met HTML/CSS
– Leren om te gaan met flex-wrap
– Met afbeeldingen leren om te gaan in HTML/CSS
– Leren ‘opstapelen’ in HTML/CSS

Strijp-s app in Adobe XD

Tijdens deze opdracht leer je hoe je in Adobe XD een app voor een telefoonscherm maakt.

Je leert een ontwerp (flowchart, wireframe en stijlkaart) maken aan de hand van gegeven productie eisen.
Je leert een prototype te maken in Adobe XD met een werkende navigatiestructuur, scrollende pagina’s en leer je hoe je pop-ups kunt maken.

De video tutorials die je kunt gebruiken staan op mvi-plein:

https://www.mvi-plein.nl/knowledge-base/strijp-s-app-aanmaken-in-adobe-xd/

Achtergrond in Html/Css

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je werken met afbeeldingen en achtergrond-afbeeldingen. Zo leer je Photoshop in te zetten om afbeeldingen te verkleinen voor web.

Leren om te gaan met HTML/CSS
De functie <meta> begrijpen in HTML
Leren werken met background-image
Leren werken met de waarden: EM

Wireframe

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je een ‘wireframe’ maken. Een wireframe is een overzicht van de verschillende onderdelen die op een webpagina komen.

Afbeeldingen toevoegen in Html/Css

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je afbeeldingen toevoegen. Je gaat ook aan de slag met HEX kleuren die je op de volgende website kan vinden: https://www.colorhexa.com/.

Buttons maken in html & CSS

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je aan de slag met buttons. Je gaat aan de slag met tekst-opmaak en HEX kleuren die je op de volgende website kan vinden: https://www.colorhexa.com/.

Homepagina ontwerpen

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je een gedeelte van een home pagina ontwerpen. Je gaat aan de slag met tekst-opmaak en HEX kleuren die je op de volgende website kan vinden: https://www.colorhexa.com/.

Een werkende navigatie maken.

In deze opdracht ga je aan de slag met HTML en CSS. In deze opdracht ga je een werkende navigatie maken. Je gaat ook leren hoe je meerdere pagina’s aan elkaar koppelt.