Een eerste navigatie

In deze opdracht ga je aan de slag met HTML en CSS. HTML staat voor Hyper Text Markup Language, Een programmeertaal die wordt gebruikt voor het schrijven van webpagina’s. Hoewel HTML ook deels de vormgeving en styling kan verzorgen, doen we dit meestal met een andere taal: CSS (Cascading Style Sheet).

Thuisbezorgd app ontwerpen in Adobe XD

Steeds meer van ons leven speelt online af, nu we door corona niet meer naar fysieke winkels kunnen. Dit heeft ervoor gezorgd dat er een heleboel bezorgplatformen zijn ontstaan. Hun enige concurrentiemiddel? Hoe goed en hoe mooi de app werkt! Jij als ontwerper bent dus heel belangrijk, want jouw ontwerpen zorgen ervoor dat de apps makkelijk en aantrekkelijk zijn om te gebruiken. Beter design = meer geld!

Voor deze les is ook een video-tutorial gemaakt te vinden op mvi-plein.nl en youtube:

https://youtube.com/playlist?list=PLGE6DeW2Kdyo0NcPCilsWVXgWS2GTYQz1

https://mvi-plein.nl/knowledge-base/thuisbezorging-app-ontwerpen/

Je gaat in duo’s een app-prototype à la thuisbezorgd ontwerpen. In deze lessenserie ontwerp je jouw eigen thuisbezorgd geïnspireerde app en leer je de basics van Adobe XD.

Interactief storyboard maken met de Auto-Animate functie in Adobe XD

In Adobe XD zit een fantastische animatie functie die je kan gebruiken om prototypes van interactieve producten te maken. Deze mini-les is bedoeld om te integreren in grotere lessen waarbij leerlingen bezig gaan met het produceren van interactieve producten. De mini-les is te combineren met de uitleg op MVI-plein.nl, de tekst is ook te gebruiken om hem om te bouwen naar jouw eigen les waarin je iets interactief wil maken.

Wat is Auto-Animate?

Het is super simpel: de functie ‘auto-animate’ herkent vormen die voorkomen op meerdere schermen. Als Adobe XD deze zelfde vormen herkent zal XD een tween-animatie tussen maken.

De tween start op positie van het object op scherm 1 en eindigt op de positie en vorm zoals op scherm op scherm 2. Deze animatie kan je zelfs op meerdere manieren laten triggeren. Onder andere door het klikken op een object (afbeelding onderaan).

Inspiratie

De opdracht is geinspireerd op het tweenen in Animate. Het tweenen in Animate werkt met ‘keyframes’, waar Animate een beginpositie en een eindpositie nodig heeft. Je kan met een auto-animatie in Adobe XD weliswaar minder geavanceerde tween-bewegingen maken, maar het is wel een stuk gebruiksvriendelijker.

Tutorial

De bijhorende tutorial staat op mvi-plein.nl

Interactief storyboard animatie maken in Adobe XD

Interactieve nieuwsbrief

In de drukwereld bestaan veer verschillende soorten docuemnten. Denk aan producten die uitgeprint worden zoals flyers en posters. Maar ook documenten die je op je computer of tablet kunt bekijken, zoals epub’s. Er is nog een soort: interactieve pdf. Bij drukwerk maak je een pdf met afbeeldingen en tekst. Bij een interactieve pdf kun je ook hyperlinks, filmpjes en geluid toevoegen. In deze opdracht ga je individueel een interactieve pdf maken over een zelfgekozen onderwerp.

Inspiratie Schrijf hier welke inspiratie de opdracht op gebaseerd is…

Alternatieven programma’s: Je zou deze opdracht kunnen maken met Adobe Indesign, Microsoft Powerpoint, Apple Keynote, Adobe XD (zonder video), Tumult Hype, Adobe Spark en Adobe Muse.

Doel: Het doel van een nieuwsbrief is mensen informeren en overtuigen over een onderwerp. Er worden meerdere, kleine artikelen geplaatst en voorzien van koppen. Dit onderzoek ga jij zelf doen! Zorg ervoor dat je ontwerp gebruiksvriendelijk, interactief is en er visueel aantrekkelijk uit ziet.

Filmposter animeren tot Motion Poster als interactieve PDF

Hoe zouden filmposters in de toekomst er uit zien? Ken je de kranten uit Harry Potter nog waar de advertenties bewogen? In deze opdracht ga je zoiets zelf maken!

Opdracht:

Animeer jouw favoriete filmposter en maak hem interactief. Je gaat jouw filmposter bewerken in een beeldbewerkingsprogramma. Je knipt de poster op in verschillende stukken. Deze stukken ga je vervolgens weer bij elkaar brengen en animeren. Je kan zelfs hem interactief maken door verschillende acties en animaties in te stellen die moeten afspelen als je met jouw muis er over geen gaat!

Inspiratie:

Deze lessenserie is geïnspireerd op de expositie ‘De Poster is Dood’

‘We worden omringd door plaatjes: reclames vechten overal om onze aandacht. Maar waar posters vroeger stil stonden, wordt onze blik nu steeds vaker getrokken door bewegende beelden. De traditionele grafische vormgeving op papier wordt zo langzaamaan vervangen door motion design op schermen. In de tentoonstelling ‘De poster is dood’ presenteert Design Museum Den Bosch het werk van acht ontwerpbureaus die een rol spelen in de opkomst van de digitale reclamevormgeving in de buitenruimte.’

Varianten:

Geen zin in een filmposter? Je kan ook een natuurlijk een (netflix) serie poster maken, een gamecover-art animeren, muziekalbumhoes animeren, postkaart animeren, bureaublad-achtergrond, etc.

Eindresultaat:

Aan het eind van deze opdracht lever je de volgende producten in:

Jouw geanimeerde Poster geëxporteerd als een interactieve PDF.

Inhoud:
De motion poster bevat minimaal 4 bewegende elementen op het voorplan, 1 bewegend element op het middenplan en 1 element op het achterplan.

Interactief
De motion poster bevat interactieve elementen die reageren op aanraking/klikken of muisbeweging.

Verzorgd
De motion poster ziet er verzorgd uit. De beeldelementen zijn netjes vrijstaand gemaakt en de kleuren zijn op elkaar afgestemd om de sfeer van de originele filmposter te bewaren. De poster is volgens de docent aangewezen wijze ingeleverd met juiste naamgeving.

 

Interactieve chat-app ontwerpen met Adobe XD

Leerlingen ontwerpen en prototypen in duo’s een chat app. Ze bedenken hoe deze app moet werken en op welke wijze er zal worden gecommuniceerd in deze app. Ze doen onderzoek naar de doelgroep en het thema van de app middels het maken van een moodboard. Dit moodboard baseren ze op de apps die ze zelf gebruiken.

Het concept van de app beschrijven ze in een tekstverwerker. De flowchart zal worden uitgewerkt op gestippeld -prototyping papier. Het prototype van de app zal worden uitgewerkt en interactief gemaakt worden in Adobe XD. In Adobe XD zullen de leerlingen experimenteren met de visuele stijl van de app, ze maken zelf keuzes voor typografie; lettertype, kleur, plaatsing gebaseerd op hun moodboard.

Deze visuele elementen worden omgezet in herbruikbare elementen die vervolgens gebruikt worden om de app om te zetten naar twee schermformaten. Waar de leerlingen een interactieve navigatie gaan aanbrengen, welke getest zal worden door klasgenoten.

Ten slotte presenteren de leerlingen hun app in maximaal 2 minuten om de doelgroep te overtuigen van de functie van hun app.

App maken

Leerlingen maken in een informatie app over MVI (Media, Vormgeving, ICT) in een online ontwerpomgeving. Het vak MVI bestaat uit een aantal profielvakken en verschillende keuzevakken. De bedoeling is dat de gebruiker met deze app heel gemakkelijk kan zien wat die verschillende vakken zijn en wat voor producten hierbij gemaakt worden. Daarnaast geeft de app voorbeelden van mogelijke vervolgopleidingen en beroepen.  

De opdracht start met een onderzoek naar de inhoud en functionaliteiten van de app en door middel van een brainstorm ontwikkelen leerlingen een idee voor een eigen app. De opdracht is verdeeld in twee fases waarbinnen verschillende kleine opdrachten worden gemaakt. Na het doorlopen van dit ontwerpproces leveren leerlingen een werkende app in. De opbouw van de opdracht ziet er als volgt uit: 

1. Concept ontwikkelen en plan maken (Inhoud en functies bepalen, Technisch ontwerp, Wireframe, Plan van aanpak) 

1. Uitwerken, testen en documenteren (Applicatie uitwerken, Testen en feedback, Verbeteren, Documenteren in een dossier)