Wat is Adobe XD?

Adobe XD is een geweldig intuitief programma voor het maken van wireframes en prototypes voor websites, presentaties, lesmodellen etc. Dit nieuwe platform voor het testen van User Experiences, werkt zo snel als je denken kunt. Integratie met Photoshop en Illustrator is bijzonder soepel en daarmee kun je in samenwerking met Adobe XD, je ontwerpen interactief testen, Online Publiceren en met andere ontwerpers of developers delen.

In deze twee daagse cursus leren we je omgaan met het programma, maar ook, als uitdaging, je Design en Prototype omzetten naar een werkende website via het programma Dreamweaver of een andere webeditor.

Voor wie geschikt?

Adobe XD is onmisbaar voor Grafisch Ontwerpers, Webdesigners, Product Designers, Docenten…iedereen die te maken krijgt met het ontwerpen of bouwen van Interactieve User Interfaces. Denk bijvoorbeeld aan een website voor desktop of mobile, een bedieningspaneel van een apparaat, een interactief lesprogramma, allemaal zaken waarbij een gebruiker via visuele informatie bepaalde handelingen zou moeten verrichten om het product te bedienen en gebruiken. Stuur een werkend testmodel naar je opdrachtgever of naar de developer en krijg onmiddelijke feedback op je prototype…Handige templates, UI-kits en zelf te bouwen libraries, gekoppelde symbolen en elementen die makkelijk te vermenigvuldigen zijn, maar ook nog eens individueel aan te passen, zorgen ervoor dat je vrijwel zonder frustraties door je design kunt vliegen…

Interface en Artboards

Na een korte introductie over waarvoor je nu wel en waarvoor je nu niet Adobe XD kunt gebruiken, verkennen we de Interface van het programma. Je leert Tekengebieden maken en Artboard Templates voor tablets en mobile telefoons gebruiken en aanpassen alsook slim navigeren door vele artboards.

UI kits

Apple, Google en Microsoft leveren professionele UI ( user Interface) kits, Wireframe en User-Interface templates, die je in Adobe XD kunt gebruiken en aanpassen voor je eigen ontwerpen.

Grids, lagen en inhoud slim plaatsen en bewerken

Leer werken met het Square grid en wat “pixel precies” betekent en gebruik layout grids om snel met grafische elementen bv. een desktop interface in elkaar te zetten. Ontdek hoe je met selecteren bij de eigenschappen en de lagen van elementen kunt komen, zodat je ze slim kunt aanpassen. Het importeren en bijsnijden van foto’s en  bitmaps wordt aangevuld met masker technieken.

Vectoren

Leer vectoren tekenen en bewerken, vectorafbeeldingen importeren en wijzigen, hoeken afronden, een slagschaduw toevoegen en snel iconen maken door middel van Boolean operaties.

Photoshop en illustrator gebruiken

Hoe krijg je Photoshop en Illustrator bestanden in XD? Hoe kun je ze gekoppeld laten en bewerken? Leer werken met het Assets panel, zodat je elk element slim kunt hergebruiken. Vooraf opgemaakt teksten in een keer snel plaatsen, punt en alinea tekst gebruiken, tekststijlen maken en opslaan en last but not least het “Repeater grid” gebruiken. Waarom hebben ze dat niet eerder bedacht?

Door het leren omgaan met symbolen, kun je elementen vaak hergebruiken en slim overschrijven. Ook delen van bijgeleverde Templates en UI kits leer je integreren en slim gebruiken.

Prototypes interactief maken, delen en testen

Naast het snel en intuitief ontwerpen in Design Mode is het heel makkelijk om elementen aan elkaar te linken via Prototype mode zodat je je ontwerp kunt omzetten in een echt werkend interactief prototype. Door het maken van klikgebieden en het gebruiken van op mobile bekende overgangen of transities is het voor de gebruiker een “net echt”ervaring, waardoor jij weer goede feedback kunt krijgen op je interactieve ontwerp.

Via het maken van een preview kun je ook zelf direct testen op het web en op een aangesloten mobiel apparaat.

Prototype omzetten naar een werkende website

Vanuit Adobe XD kun je exporteren als PNG, SVG, PDF of JPG. Uiteindelijk ga je je eigen ontwerp op basis van een gegeven web-template in Adobe XD maken, testen, exporteren en bouwen in Dreamweaver of een andere webeditor.

Studieprogramma Adobe XD

Basisvaardigheden Adobe XD

  • Introductie XD
  • Interface en navigatie
  • Templates voor mobile en tablets
  • Werken in Design Mode
  • Bitmap en vector gebruiken
  • Iconen maken
  • Asssets panel en repeater grid
  • Werken in Prototype Mode
  • Interactief maken en testen
  • Publiceren op web en mobile

Toepassen

  • Prototype van website ontwerpen
  • Prototype van website bouwen
  • Prototype van website testen
  • Exporteren van Assets
  • Prototype omzetten naar werkende website