Adobe eXperience Design XD

Bericht auteur:Eloquent Architect 161
Bericht gepubliceerd op:16 maart 2021
Berichtcategorie:Front-End

Download ‘m voor thuis via adobe.com en het staat op de laptops in H201.

Heb je een apple en zegt adobe.com bij XD: Niet Compatibel, dan moet je eerst je OSX upgraden naar Big Sur. Dat kan via de app store. Altijd eerst overleggen met ouders / beheerders en maak je backups. Natuurlijk 99/100 gaat het goed, maar als het mis gaat is het je eigen keuze, niet mijn schuld….

Je hebt nu al wat ervaring met ontwerpen en nu komen we bij de laatste fase: het ontwerpen van User Interface / User Experience.

Met de kennis die je hier opdoet moet je het keuzedomein UI/UX zien af te ronden.

Gare Computer? Licentie gezever?

Probeer https://www.fluidui.com/ Wil je zelf je tutorials bij elkaar zoeken?

Basis Tutorials

In Design Mode

Maak tenminste 3 screens voor een super eenvoudige app. Je kunt een voorbeeld nadoen.

PS: CMD => CTRL

tutorial “prototyping” zoeken.

In Prototype Mode

Wire items from atrboard to artboard. Maak tenminte 3 screens in Design Mode en wire ze heen en weer.

Je prototype tot live versie maken (met back-enders sharen)

Je moet zien uit te vinden hoe je je design sharet met bck-end developers

4 Golden Rules of UI Design

Dit zijn de 4 regels. Wat houdt dat in?

Place users in control of the interface
Make it comfortable to interact with a product
Reduce cognitive load
Make user interfaces consistent

Zie: The 4 golden rules of UI Design by Adobe. Anders maar hetzelfde: 10 Rules of Thumb for User Interface Design

Toets je eindopdracht aan elk van deze 4 regels

De Opdracht

Mini Web App: Juichen. Web app voor pc & mobi, zo simpel mogelijk.
Use Case:
- Het delen van manieren om te juichen.
- Juicht er iemand, dan moet je dat snel kunnen vangen en delen. Een foto of film of alleen een tekst / uitroep (tekst). Datum, naam, plaats. Insta voor juichs. Zonder de user accounts / volgers etc, dat allemaal niet.
- Het kan ook alleen de uitroep of een foto zijn.
Nu maak je een prototype: alleen de screens die niet echt werken
Functies:
- Nieuwe juich toevoegen
- Lijst van de juichs
UI Design Rules: Toets je ontwerp zelf aan deze design rules. Dus: het mag fout (dat kost geen punten). Maar je moet ze wel checken (dat kost wel punten).

Music Off Please

Rubrics

	3	5	7	9
Functionaliteit. De gevraagde schermen	Je hebt de opdracht niet doorgenomen of begrepen	Met wat goede wil is het een invulling van de opdracht	Juich toevoegen en Lijst van Juichs heb je in 2 of 3 schermen	Je hebt de dunne balans gevonden tussen niet teveel en ook niet te weinig
HTML Export	Wat?	Die deed het niet / niet goed	Schermen werken redelijk en zien er redelijk uit in de HTML export	Je hebt er zichtbaar extra moeite in gestopt om de HTML export perfect te krijgen
UI Design (golden rules)	Huh?	Je hebt niet alle golden rules naast je ontwerp gehouden	Je hebt je ontwerp getoetst aan de 4 Golden Rules	Je ontwerp voldoet aan de Golden Rules zonder extra aanpassing (natuurtalent)
Online Presentatie	Je bent wel op het kanaal maar de techniek moet je nog leren beheersen.	Je hebt wel een presentatie maar die weet je niet te presenteren qua stem en muis.	Je kunt je werkstuk voldoende belichten om te laten zien dat het aan de opdracht voldoet, maar er is nog een en ander te verbeteren (bediening / voorbereiding, stem)	Een vlekkeloze presentatie, duidelijke lichaamstaal en een stemgebruik met bewuste intonatie, tempo en volume.
Presentatie voor de klas	Je staat wel bij de TV maar je weet je niet hoe te presenteren qua stem en lichaamstaal en hulpmiddelen.	Je hebt wel een presentatie maar die weet je niet te presenteren qua stem en lichaamstaal	Je kunt je werkstuk voldoende belichten om te laten zien dat het aan de opdracht voldoet, maar er is nog een en ander te verbeteren (bediening / voorbereiding, stem, lichaamstaal)	Een vlekkeloze presentatie, duidelijke lichaamstaal en een stemgebruik met bewuste intonatie, tempo en volume.