Adobe eXperience Design XD

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

3579
Functionaliteit. De gevraagde schermenJe hebt de opdracht niet doorgenomen of begrepenMet wat goede wil is het een invulling van de opdrachtJuich toevoegen en Lijst van Juichs heb je in 2 of 3 schermenJe hebt de dunne balans gevonden tussen niet teveel en ook niet te weinig
HTML ExportWat?Die deed het niet / niet goedSchermen werken redelijk en zien er redelijk uit in de HTML exportJe 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 gehoudenJe hebt je ontwerp getoetst aan de 4 Golden RulesJe ontwerp voldoet aan de Golden Rules zonder extra aanpassing (natuurtalent)
Online PresentatieJe 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 klasJe 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.

Wat moet er in de presentatie?

  • Doel van de opdracht (dat jij het ook snapt)
  • Je ontwerp / functionaliteit
  • De HTML Export
  • De 4 golden rules of UI design (1 voor 1 bespreken)
  • Conclusie (leg uit dat je nu aan de opdracht hebt voldaan

pro tip: zelfde design ppt als de app

Eloquent Architect 161

Eloquent Architect 161