Leerdoelen
Je weet waar je XD voor kan gebruiken
Werkwijze
Bekijk de genoemde Adobe site en zoek uit wat je zoals met XD kan doen
Bekijk de video (20 min) van Jesse Showalter over de XD Basics
Wat is: Experience Design,
of te wel: UX Design
Research
User Persona
Wireframing
Prototyping
User Testing
Wat is: User Interface Design,
of te wel UI Design:
Look & Feel
Visual Design
Interaction Design
Waar gebruik je Adobe XD voor?
Web design, App design, Brand design en Game design
Adobe eXperience Design
Zie Adobe site:
Digital is the new default. Everything happens on a screen.
Vind antwoord op al je vragen in de Adobe XD User Guide
Leerdoelen
Je kan artboards van de juiste afmetingen maken
Je kan een horizontale scroll functie toepassen
Werkwijze
Ga naar de genoemde Adobe XD website
Download je oefenmateriaal
Voer de opdrachten van stap 1 tot en met 5 uit
Als oefenmateriaal gebruiken we Adobe XD: Get started with our step-by-step guide.
Deze guide bestaat uit de volgende 4 hoofdstukjes:
1 Design, 2 Prototype, 3 Components en 4 Collaboration.
Let op: bij ieder hoofdstuk moet je eerst je oefenmateriaal downloaden.
Leerdoelen
Je kan artboards animeren
Werkwijze
Iedereen maakt de stappen 1 en 2
KB maakt ook stap 3, en TGL maakt ook stap 4
wire artboards,
auto animation transitions,
KB: drag gestures,
TGL: overlays, voice triggers
Leerdoelen
Je kan micro interacties zoals knoppen met een hover status maken
Werkwijze
Voer stap 1 en 2 uit
Wat zijn Micro Interacties? De gebruiker van je app of website, bedient je app via kleine handelingen, micro interacties. Denk aan het klikken op een like knop of aan het swipen van e-mails om een e-mail te verwijderen.
In XD kan je met componenten micro interacties maken.
Maak een nieuw ontwerp met iPad afmetingen. Voeg toe:
drie verschillende hover buttons
bewaar je document als iPad XD.
Maak de opdracht op MVI-plein.nl
Je moet zelf opzoek naar bestanden voor het station, de trein, enzo.
Misschien kan dit bestand (downloaden) je al vast wat op weg helpen.
Open je iPad XD doc en voeg toe: twee hyperlinks (een voor een tekst veld en een voor een plaatje) en een video.
Hyperlinks
Video en Lottie files
Maddy Beard: How to use components in Adobe Xd
Tutorial with examples
zie ook Adobe XD User Guide
Components
Leerdoelen
Je weet dat je een micro interactie in XD met behulp van Component States kan maken.
Werkwijze
Leerdoelen
Je weet hoe en waarom je een responsive website maakt
Werkwijze
Ontwerp een responsive webdesign.
Je website moet twee layouts hebben: een voor mobiele telefoons en een voor PC's
App Design Tips: Mastering Responsive Resize in Adobe XD
WebDesignGeek: Build a Responsive Website
Adobe | Dani Beaumont: Resize components to fit a variety of screens & Responsive resize
Adobe User Guide | responsive website: XD user guide
Evato Tuts+: Responsive Design
Leerdoelen
Werkwijze
Leerdoelen
Werkwijze
De basis van XD
Pagina's koppelen
Afbeeldingen scrollen
Paginaovergangen
Call to action button
Button met geluid
Web banner maken
Web banner koppelen aan website
Vijf opdrachten voor het ontwerpen van een website, en een pagina met tips en tricks voor layouts
Maak de drie opdrachten van Media College Amsterdam Online
Adobe XD
Get more from every feature verdiepings opdrachten.
Best Practices for Form Design: Structure, Inputs, Labels and Actions