Wat zijn de lesdoelen voor het project Interaction Design wat je deze week gaat ontdekken?

• Je ontwikkel een begrip van wat het keuzedeel Interaction Design inhoudt en welke vaardigheden en kennis daarbij horen.

• Je onderzoekt verschillende aspecten van Interaction Design, zoals wireframing, ontwerpen en prototyping

• Je reflecteert op persoonlijke interesses, vaardigheden en doelen om te bepalen of het keuzedeel Interaction Design geschikt is als verdere studierichting.

• Je maakt een geïnformeerde beslissing over deelname aan het keuzedeel Interaction Design op basis van de verkregen kennis en persoonlijke overwegingen.

Uiteindelijk gaat het er om dat je een weloverwogen beslissing neemt over jouw interesse in het keuzedeel Interaction Design en of het past bij jouw toekomstige loopbaanplannen.

1: ONDERZOEK + CONCEPT

Voordat je kunt gaan starten ga je eerst een klein beetje onderzoek doen. Dit onderzoek gaat je helpen in het ontwerpen van een interface voor een bestelpaal bij de lokale Buurtsuper.

ONDERZOEK
Pak je telefoon erbij en ga eens 3 apps bekijken die je hebt geinstalleerd en die je zouden kunnen helpen met het bedenken van een bestelinterface:

• Welke app is het? Naam + screenshot van de app

• Voor welke doelgroep is de app? Wees specifiek.

• Schrijf 2 á 3 punten op die je heel goed vind uitgevoerd. Dit kan van alles zijn, navigatie, kleuren, tekstgrootte etc.

• Schrijf 2 á 3 punten op die je juist heel slecht vind uitgevoerd.

CONCEPT
Na je onderzoek ge je starten met het maken van een concept, gebruik hiervoor de aantekeningen die je hebt gemaakt bij je onderzoek.

• Schrijf je idee uit, wie is je doelgroep?

• Welke kleuren ga je gebruiken? (de Buurtsuper heeft al 2 vaste kleuren, daar mag je nog een 3e kleur bij verzinnen)

• Welk lettertype werkt het beste bij je app? (je hoeft niet het lettertype uit het logo te gebruiken)

• Welke icoontjes ga je gebruiken?

Plaats dit allemaal in een document, dit is je styleguide. Een stylguide is een handboek waarin wordt uitgelegd hoe je als vormgever mag omgaan met de huisstijl. En de huisstijl voor deze opdracht bestaat in dit geval uit: Een logo, je lettertypes, je kleuren en de beelden die je gaat gebruiken.

2: WIREFRAMES
We gaan 5 schermen bedenken voor je applicatie. Belangrijk om te weten is het formaat van deze applicatie.

• Formaat: 2732x2048 pixels - landscape/liggend

Nu gaan we eerst schetsen op papier. Dit zijn je wireframes. Weet je die goede punten nog die je hebt opgeschreven? Probeer er een aantal in je schetsen te verwerken! Je begint met een homescreen, en vanuit de homescreen moet je naar 4 andere screens kunnen doorgaan.

Probeer met lijnen en pijlen aan te geven hoe de navigatie tussen schermen verloopt. Ben je klaar, vraag dan feedback aan je docent om te kijken of je op de goede weg bent!

4: PROTOTYPE

We gaan nu de ontwerpen omzetten naar een prototype. Dit gaan we doen met Figma. Dit is een online prototyping tool. Het mooie van Figma is, dat je zowel online in de browers kan werken aan je prototypes, maar ook een standalone player kunt downloaden en je geen browser nodig hebt. Hij slaat je projecten altijd online op en neemt dus geen ruimte in beslag op je computer.

Voordat je aan de slag kunt, moet je eerst een account aanmaken bij Figma. Doe dit met je schoolaccount. Ga naar HTTPS://WWW.FIGMA.COM

Nadat je je account hebt aangemaakt kun je hem laten valideren als studentaccount. Dat doe je via deze link:
https://www.figma.com/education/

Zodra je dit hebt gedaan zal je eerst een projectteam aan moeten maken. Dan klik je daarna op project team en kun je kiezen voor New Design File.

Zet nu al je beeldschermen in het juiste frame. Zorg ervoor dat ze allemaal op het juiste formaat zijn. Nu moeten we ervoor gaan zorgen dat de knoppen die je hebt gemaakt ook gebruikt kunnen worden. Dit gaan we doen door vlakken te maken over je bestaande buttons. Kies onderin voor Rectangle.

Nu kun je een kader trekken over je button. Kies wel een button die naar een andere pagina moet doorklikken. Nu staat er alleen een heel lelijk grijs vlak over je button. Dit lossen we op door het vlak transparant te maken. Dit doe je aan de rechterkant bij Fill. Zet deze op 0%.

Zorg ervoor dat al de buttons op elke frame die naar een andere pagina door moeten klikken een transparant grijs vlak krijgen.

PROTOTYPE

Nu gaan we ervoor zorgen dat als je op een button klikt je doorgaat naar de volgende pagina. Dit doen we door rechts op prototype te

klikken. Door op de button te klikken die naar een andere pagina moet gaan (mocht het niet lukken dan kun je altijd bij je layers op de rectangle klikken om hem zo te selecteren) krijg je als je met je muis erover heen hovered een rond bolletje te zien. Zodra je over dat ronde bolletje heen gaat verandert deze in een plusje.

Door op het plusje te klikken en meteen te slepen naar het juiste frame zie je een lijn met een pijl te voorschijn komen. Zodra je bij het juiste frame bent aangekomen kun je loslaten. Nu heb je een connectie gemaakt tussen de button en je frame. Je krijgt meteen ook een venster te zien waar je opties kunt aanpassen. Zoals hoe moet je met de button interacten om naar een volgend scherm te gaan. Hij staat altijd standaard op On tap.

Kijk zelf even bij alle opties wat je precies wilt en wat het beste bij jouw media-uiting past. Zorg ervoor dat alles wat clickable is in je

document naar de jusite pagina linked. Nu kun je hem eerst zelf nog bekijken voordat je een sharelink gaat inleveren. Zorg ervoor dat je bij device aan de rechterkant iPad Pro 12.9" hebt staan en dat hij op landscape staat. Nu kun je bovenin op het pijltje klikken en zal hij starten op het scherm dat geselecteerd staat. Wil je dus vanaf het begin afspelen, selecteer dan je eerste frame.

Om je bestand nu te delen, klik je bovenin op de blauwe share knop en opent zich een nieuw venster. Onderin vindt je een knopje met Copy prototype link, daar klik je op en dan opent er een nieuw venster. Bovin vindt je dan de Copy link knop, deze klik je en lever je in op je Adobe Express page.

Op jouw Adobe Express Page etaleer je jouw materiaal dat je deze vier weken hebt gemaakt. Onderaan de pagina vertel je in een reflectie wat je vindt van de opdracht, de opleiding en of je wellicht deze richting wilt doen.

Op jouw Adobe Express Page staan tenminste:

• Je onderzoek + Styleguide

• Wireframes + uiteindelijk ontwerp

• De link naar je prototype

• Reflectie

Compleetheid: 

Welke onderdelen moeten er ingeleverd worden? 

• onderzoek_eigennaam.pdf

• styleguide_eigennaam.pdf

• Foto of scan van wireframes

• ontwerp_eigennaam.ai

• 5 jpg van je ontwerp

• Public share link vanuit Figma

Opdrachteisen: 

Aan welke opdrachteisen moet de opdracht voldoen? (formaat, kleurgebruik, programma’s e.d.) 

• ONDERZOEK: 3 apps onderzocht en vragen beantwoord

• STYLEGUIDE: Idee + doelgroep, logo, kleuren, lettertype & Icoontjes

• WIREFRAMES: 5 schermen geschects op papier

• ONTWERP: In Illustrator 5 schermen ontworpen met het juiste formaat

• 5 JPG VAN JE ONTWERP: Export voor screens gebruikt in Illustrator 

• PROTOTYPE: Een prototype gemaakt in Figma en daar een sharelink gemaakt

Kwaliteitsniveau: 

Wat zijn belangrijke punten voor de specialisatie? Bijvoorbeeld: Netheid van werken, diepgang concept, beeldend vermogen/tekenvaardigheid, (software)technische vaardigheden?

• ONDERZOEK: Je hebt goed gekeken naar aandere apps en daar je conclusie uitgehaald

• CONCEPT: Je hebt je onderzoek gebruikt om een helder concept weg te zetten

• ONTWERP: Je denkt goed na over kleurgebruik, lettertype, icoon gebruik en gebruiksvriendelijkheid (wie is je doelgroep?)

• PROTOTYPE: Je hebt een werkende prototype in elkaar weten te zetten en deze weten te delen

Onvoldoende
Incompleet, niet voldaan aan opdrachteisen, kwaliteitsniveau laat te wensen over. 

Voldoende
Compleet, voldaan aan opdrachteisen, op basis van het kwaliteitsniveau adviseren we je wel een ander keuzedeel. 

Goed
Compleet, voldaan aan opdrachteisen, voldoet aan kwaliteitsniveau.