Adobe XD

Experience Design

foto UX Indonesia

Eindopdracht Klas 3 | Opdracht Klas 4

Pro Skill 1 | Pro Skill 2 | Pro Skill 3

Skill 1: Wat is Adobe XD

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 UX Design en wat is UI Design?

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

Wat is Adobe XD

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.

Jesse Showalter: Top 10 Things to know when getting started with Adobe XD

Vind antwoord op al je vragen in de Adobe XD User Guide

Skill 2: Design

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.

1 Design

artboards
repeat grid
interactiviteit
colors and styles,
horizontal scroll

Leer nu werken met de tekst tool

Zie ook Monica's XD Design

Skill 3: Prototype

Leerdoelen

Je kan artboards animeren

Werkwijze

Iedereen maakt de stappen 1 en 2
KB maakt ook stap 3, en TGL maakt ook stap 4

Micro Interacties

2 Prototype

wire artboards,
auto animation transitions,
KB: drag gestures,
TGL: overlays, voice triggers

Skill 4: Componenten

Leerdoelen

Je kan micro interacties zoals knoppen met een hover status maken

Werkwijze

Voer stap 1 en 2 uit

Micro Interacties

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.

Zie UX Designs. Voorbeelden van micro interactions in XD: zie Adobe XD

3 Componenten

Maak componenten (components) en voorzie ze van verschillende standen (states).

Maak een nieuw ontwerp met iPad afmetingen. Voeg toe:

drie verschillende hover buttons
bewaar je document als iPad XD.

1 Super simpel hover button

2 Create a hover button

3 Create a hover button

Opdracht Interactief storyboard maken met Adobe 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.

Opdracht: hyperlinks en Video, plus verdieping Components

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

Skill 5: Micro interactions in XD (vervolg)

Leerdoelen

Je weet dat je een micro interactie in XD met behulp van Component States kan maken.

Werkwijze

Skill 6: Responsive Website

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

Verdieping

App Design Tips: Mastering Responsive Resize in Adobe XD
WebDesignGeek: Build a Responsive Website
XOPixel: Responsive Website Design in Adobe XD
Adobe | Dani Beaumont: Resize components to fit a variety of screens & Responsive resize
Adobe: Design layout tips and tricks
Adobe User Guide | responsive website: XD user guide
Evato Tuts+: Responsive Design

Skill 7: Samenwerken

Leerdoelen

Werkwijze

`4 Samenwerken

Publish

Skill 8: XD uitleg video's uit het boek van Vertoog

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

Productivity Tips | Adobe XD

Eindopdracht Klas 3: Ontwerp een Responsive Website

Vijf opdrachten voor het ontwerpen van een website, en een pagina met tips en tricks voor layouts

Adobe: How to design en prototype een website in XD
Maak de drie opdrachten van Media College Amsterdam Online
Caler Edwards: Website design 1 and 2

Opdracht Klas 4

Pro Skill 1

Verdieping

Adobe XD

Get more from every feature verdiepings opdrachten.
Best Practices for Form Design: Structure, Inputs, Labels and Actions

Pro Skill 2

Pro Skill 3

Google Sites

Report abuse