Je leert een interface-ontwerp te maken, te variëren en te testen, en daarbij je taken als web- en app-ontwerper snel en doordacht uit te voeren, in de vorm van het opzetten en aanleveren van ideeën, wireframes, mock-ups, prototypes en technische specificaties en materialen voor developers.

‍Als moderne UX-designer of visual designer ben je méér dan een zelfstandige ontwerper die in zijn eentje aan een fraai ontwerp werkt. Je neemt deel aan een continue wisselwerking tussen marketeers, managers, developers, testers en gebruikers. Je taken sluiten aan bij allerlei stadia van het proces, dus je tools moeten net zo flexibel inzetbaar zijn. Adobe XD stelt je daartoe in staat. Het is een relatief nieuw programma uit de Adobe-stal, voor het ontwerpen van schermen, interfaces en flows, voor websites en apps.

Allereerst leer je een schetsmatige opzet te maken van wat de 'flow' wordt van een website of app. Welke onderdelen en/of functies gaat de website of app aan de gebruikers bieden? Hoe verloopt de navigatie? In dat stadium wordt er nog weinig gepraat over vormgeving, maar leer je wireframes te maken en te delen die helpen om alle ideeën en gedachten gestalte te geven.

Gaandeweg dat proces groeit dan de behoefte aan een visueel concept, waarbij de ontwerpmatige stijl duidelijker wordt. Je leert er allerlei decoratieve en functionele elementen aan toe te voegen, zoals logo's, iconen, knoppen, achtergronden en andere beelden. Maar je gaat ook beseffen hoe teksten, typografie en wijze van animatie een belangrijke rol spelen in UX-design.

Je kan met Adobe XD beginnen met de schetsmatige fase van grove wireframes en eenvoudige navigaties, of een fraaie mock-up uitvoeren tot een werkend prototype met interactie en animaties. Daarmee test je het gebruik en verfijn je het ontwerp, totdat iedereen zeker weet wat het moet gaan worden. Adobe XD laat je de ontwerpen ook makkelijk testen, delen en bespreken met anderen.

De training laat je kennis maken met al deze fasen en aspecten. Bijna spelenderwijs rol je in dit nieuwe vakgebied en leer je de ontwerp-stadia van een website of app in wording én de dynamiek van teamwork. Want een website of app bedenk, ontwerp en bouw je niet in je eentje.

Omdat je nauw samenwerkt met anderen, is het snel kunnen delen, bespreken en aanpassen van je ontwerpen essentieel. En uiteindelijk leer je hoe je van je ontwerp de materialen en specificaties overdraagt aan developers, zodat deze kunnen worden verwerkt tot een technisch werkende website of app.​

In de cursus komen bepaalde principes en (on)mogelijkheden van HTML, CSS en JavaScript af en toe ter sprake, maar er wordt géén aandacht besteed aan het coderen of programmeren ervan.

‍

Inleiding

• Kennismaking met de anders dan gebruikelijke werkomgeving
• Opzetten van Artboards; de tabbladen Design, Prototype, Share
• Een eenvoudig voorbeeld (wireframe, rapid-prototyping, testen)

Vormgeving en interactie

• Indeling a.h.v. een Layout Grid (kolommen en marges), Guides
• Invoegen van vormen (lijnen en vlakken) en beelden (maskers)
• Vectorische vormen tekenen met Pen; PathFinder; Convert Path
• Gebruiken van populaire UI-elementen (iOS, Android, Windows)
• Kleuren (vulling en lijn), pipet, verlopen, schaduw, vervaging, 3D
• Teksten toevoegen (punt- en vlakteksten) en typografie instellen
• Objecten uitlijnen en groeperen, Padding, Stacking, Responsive
• Layers, Assets (Components, Styles, Colors), Repeat Grid, Scrolls
• Automatisch meerdere formaten aanmaken (Responsive Resize)
• Navigaties, interacties, transities en (micro)animaties instellen
• Speciale interacties zoals Overlays, States (Hovers) en spraak

Delen en samenwerken

• Integratie met andere populaire Adobe apps en CC Libraries
• Gebruik maken van templates, UI-kits en plug-ins van derden
• Live preview of video, online of op mobile, met hotspot-hints
• Publiceren, feedback verzamelen, ook via andere platformen
• Exporteer artboards, materialen, design-specs voor developer

De training is een constante afwisseling tussen wat uitleg, een voorbeeld bekijken, begrijpen en dan zelf gaan doen. Uiteraard is er altijd gelegenheid tot het stellen van vragen en andere verzoeken. En afhankelijk van de beschikbare tijd, kan er méér aandacht worden gegeven aan extra uitleg, meer voorbeelden en nog meer oefeningen.

Zowel fysiek als online te volgen.

Deze training is op veel manieren in te richten:

• in een klas met andere deelnemers (fysiek of online);
• één-op-één of in een groep met één of meer collega's;
• binnen een bedrijf of met andere ZZP-ers, of een mix;
• in een vergaderruimte op de (thuis)werkplek, of online.

Het meest voor de hand liggend is de klassikale vorm, waarbij je fysiek of online aanwezig bent, samen met andere deelnemers. Maar neem gerust contact op met mij of een van mijn partners voor meer informatie over andere mogelijkheden.

Deze training is schaalbaar van een halve dag (1 dagdeel) tot twee dagen (4 dagdelen), afhankelijk van je eigen niveau, tempo, de gewenste diepgang en mate waarin je onderwerpen wil oefenen.

Deze training kan je bij een van mijn vaste trainingpartners in Amsterdam, Utrecht, Rotterdam of Breda volgen.

De training kan ook op je eigen locatie (in een vergaderruimte, op je werkplek of bij je thuis) of elders worden georganiseerd, bijvoorbeeld in een Seats2meet-vestiging. Neem daarvoor contact met mij op.

Ervaring of affiniteit met andere grafische software is vereist.

Er is géén kennis of ervaring met coderen of programmeren vereist.

NB: de training wordt in het Nederlands gegeven, maar houd er wel rekening mee dat de software en veel jargon Engelstalig is, en naar veel Engelstalig studiemateriaal wordt verwezen.

Bij de meeste opleidingscentra staat een Mac of PC voor je klaar. Maar als je je eigen desktop of laptop gaat gebruiken of meenemen (thuis, in-company, online of fysiek), houd dan even rekening met onderstaande:

Voor deze software en training is een goede computer (desktop of laptop) nodig, liefst met een groot of extra scherm, zodat je voldoende ruimte hebt voor het overzien van alle vensters en bestanden (en eventueel de presentatie als je de training online volgt).

Installeer vooraf de meeste recente versie van de software (indien mogelijk) en test of deze naar behoren kan opstarten. Zorg ervoor dat je je Adobe ID en wachtwoord weet, voor als je moet inloggen vanwege online-voorzieningen zoals extra lettertypen, Adobe Creative Cloud-bibliotheken en bepaalde nieuwe features.

Projecten uit Adobe XD kun je direct testen op mobiele apparaten, dus houd je smartphone en/of tablet bij de hand en zorg ervoor dat je ook de wachtwoorden van je App Store(s) weet.

Je ontvangt een hand-out van de getoonde slides (voor je aantekeningen), en er wordt veelvuldig verwezen naar allerlei publicaties, diverse artikelen en blogs.

Verder worden o.a. Adobe-tutorials en andere (ook Nederlandstalige) online hulpbronnen gebruikt, waaronder de officiële Adobe Help-website, zodat je later veel onderwerpen online kunt nalazen en herhalen.

Bij sommige training-aanbieders ontvang je een handboek, bijvoorbeeld uit Adobe's eigen "Classroom in a Book" serie.

Na afloop van de training ontvang je een certificaat van deelname.

Wil je je (foto)beelden beter voorbereiden en/of nauwkeuriger leren werken aan (vector)illustraties, dan kan je ervoor kiezen om vooraf of nadien nog een training Adobe Photoshop en/of Illustrator te doen. Maar beide zijn niet essentieel voor het (leren) werken met Adobe XD.

Heb je interesse in UX Design in het algemeen, dan kan je talloze andere trainingen volgen die hier prima op aansluiten, bijvoorbeeld alle trainingen die met UX of UI of digital/visual design te maken hebben. Of de UX Workshops, waarin je leert wat er aan een visueel ontwerp vooraf gaat.

Tot slot kan de training in HTML, CSS en JavaScript heel nuttig zijn, voor als je wat meer begrip wilt krijgen van web-technieken.