Adobe XD-tutorial - Ervaringsontwerp en prototyping.

Hartelijk welkom bij de grote Adobe XD-tutorial. In deze introductie stel ik me voor als jouw trainer.

Wat is het verschil tussen gebruikerservaring (UX) en gebruikersinterface (UI)? Welke soorten level design bestaan er en waar wordt Adobe XD het best voor gebruikt? Het antwoord vind je hier!

De eerste keer dat Adobe XD is geopend - en er zijn al tal van mogelijkheden om uit te kiezen. Deze video biedt een kleine introductie tot Adobe XD, een overzicht van het programma en een kennismaking met het splash screen van XD en de functies ervan.

Artboards (tekengebieden) kunnen in een handomdraai in Adobe XD worden gemaakt voor verschillende resoluties en apparaten. Welke bijzonderheden daarbij moeten worden overwogen, leer je in deze tutorial.

Verschillende rasterinstellingen vergemakkelijken het schone ordenen van elementen en objecten onderling. Hiervoor hebben we een rechthoekig grid en een kolomverdeling voor kolommen tot onze beschikking.

Google, Apple en Microsoft bieden handige UI-kits aan voor een snelle start. Deze vooraf gemaakte artboards helpen ons enorm bij het latere ontwerp van prototypes voor verschillende platformen.

Kleuren spelen in bijna elk ontwerp een uiterst belangrijke rol - in deze video leer je hoe je met kleuren kunt werken in Adobe XD, hoe je ze importeert en welke handige bronnen er zijn om kant-en-klare kleurharmonieën te verzamelen.

Er zijn tal van methoden om assets zoals afbeeldingen, bestanden, tekstbestanden, enz. in Adobe XD te importeren. In deze video presenteer ik enkele procedures. Maar aangezien XD deel uitmaakt van de Creative Cloud van Adobe, kunt u natuurlijk uiterst comfortabel en gemakkelijk werken met bibliotheken.

Het onderwerp lettertypen en typografie is een belangrijke pijler in onze reis door Adobe XD. In deze video leer je hoe je op de juiste en efficiënte manier met lettertypen omgaat.

Vormen kunnen ofwel heel eenvoudig worden geïmporteerd in Adobe XD, ofwel zelf worden gemaakt met het padgereedschap. Als een object meer dan twee keer wordt gebruikt, is het ook aan te raden om het als symbool in de assets-lijst op te nemen.

Ontwerpen heeft veel te maken met inspiratie en input van buitenaf. Hieronder vallen de analoge omgeving en ook de digitale wereld. Hier introduceer ik enkele websites die ik graag bezoek.

Laten we beginnen met een klein en fijn praktijkproject. In deze tutorial en de twee komende video's zullen we een Onepager maken.

Het herhalingsraster is een van de belangrijkste functies van Adobe XD. Het helpt ons om eenmaal gemaakte groepen objecten naar wens te schalen en individueel te vullen.

In het laatste deel van de opmaak van de Onepager zorgen we voor de footer en een gedeelte voor de referenties. Hier maken we gebruik van handige SVG-bestanden en leren we meer ontwerptechnieken.

In deze les gaan we in op de vraag hoe individuele artboards interactief met elkaar kunnen worden verbonden. Welke mogelijkheden er zijn voor de keuze van de overgang (transition) en welke verdere aanpassingen we kunnen maken aan het prototype, zullen we hier toelichten.

Elke website heeft een ankerpunt nodig voor navigatie. In deze video zullen we ons alleen bezighouden met het maken van een hoofdnavigatie in de header en het interactief verbinden ervan.

Deze training bouwt voort op het voorgaande hoofdstuk en laat zien hoe we het gemaakte desktopmenu aanpassen voor een smartphone. Het hamburgerpictogram en de menu-items worden verbeterd met interessante animaties.

Een van de krachtigste tools voor de best mogelijke visualisatie is de Auto-Animate-functie van Adobe XD. In dit voorbeeld leg ik uit hoe je het principe van de Auto-Animate-functie adaptief kunt aanpassen voor elk denkbaar scenario.

In de volgende video's leren we hoe we een prototype voor een online winkel kunnen maken. Hierbij leren we manieren om van eenvoudige artboards aantrekkelijke high-fidelity-prototypes te maken. Deel 1 van 4.

In het tweede deel richten we ons op de weergave van de gedetailleerde beschrijvingen, voegen we sliders toe voor de afbeeldingen en koppelen we de artboards aan elkaar.

De Overlay-functie voor interactief prototypen biedt ons spannende mogelijkheden, zoals het direct tonen en verbergen van informatie.

Een goed usability design geeft de gebruiker altijd feedback over de systeemstatus. Dit feedback zullen we aan het einde van het project in een mooie animatie integreren.

Adobe XD beheerst in zijn prototypingproces ook de interactie per spraakopdracht. Verbale commando's leiden dus tot systeemacties die we zelf kunnen definiëren. Hoe dat werkt, laat ik zien in deze tutorial.

Bij de samenwerking met andere afdelingen en betrokken personen is de audiocommentaar een waardevolle functie om de projectstatus duidelijk uit te leggen.

Een prototype testen in een virtuele omgeving is één ding - het live op een eindapparaat weergeven is iets heel anders. En precies dat kan gemakkelijk worden opgelost via Adobe XD, ofwel via USB-verbinding of via Creative Cloud-koppeling. Hiervoor gebruiken we de Adobe XD-app uit de App Store.

Tijdens de samenwerking is het essentieel om met andere afdelingen te communiceren over de status van het project. Met de Publiceren-functie kan het prototype worden vrijgegeven, zodat reviewers, ontwikkelaars en opdrachtgevers visuele indrukken van het project kunnen ontvangen. Op dit punt begint dan ook de bewerkingscyclus tussen de vakafdelingen om het project tot volwassenheid te brengen.

Adobe XD verandert als nog steeds erg jong programma met elke update steeds meer: In deze video leg ik uit welke vernieuwingen zich hebben voorgedaan bij de overstap van versie 18 naar versie 19, hoe de functies worden gebruikt en in welke situaties ze nuttig zijn. Dit omvat: componenten in plaats van symbolen, Responsive Resize, hulplijnen, polygoon gereedschap, meer opties voor tekst opmaak en nog veel meer. Veel plezier!