Adobe XD - een introductie

Sinds kort is er een nieuw design-programma op de markt – Adobe XD (eXperience Designer). Dit programma onderscheid zich van andere ontwerpprogramma’s omdat het compleet gericht is op het maken van interactieve prototypes. Niet langer maak je pixel perfecte ontwerpen in Photoshop voor één resolutie of moet je met de ingewikkelde tools van Illustrator werken – Adobe combineert het beste van verschillende design- en prototypingprogramma’s om de software te bieden waar UX ontwerpers al jarenlang op hebben moeten wachten. In dit blogartikel geef ik een korte introductie over Adobe XD. Hopelijk ben je na het lezen van dit blogartikel net zo enthousiast over deze software als ik. Laten we beginnen met het creëren van een nieuw bestand.

De basisprincipes

Het eerste wat opvalt als je het programma opent is dat het een hele overzichtelijke interface heeft - er zijn geen overbodige tools, alles is zo ingericht dat je snel kunt beginnen met het uitwerken van je ideeën. Aan de bovenzijde bevinden zich logischerwijs de algemene functionaliteiten waaronder opslaan, laden, exporteren en importeren. Ook kan makkelijk gewisseld worden tussen design- en prototypemodus. In de designmodus kun je tekenen, in de prototypemodus kun je je ontwerp interactief maken. Aan de linkerzijde van het scherm bevinden zich de gereedschappen om te tekenen, aan de rechterzijde staat meer informatie over het object dat geselecteerd is. Het lijkt dus redelijk op Photoshop, maar dan gestroomlijnd voor het maken van interactieve draadmodellen.

Je kunt in XD gemakkelijk kleuren en lettertypes opslaan door simpelweg op een voorbeeldobject te klikken en op het plusje te klikken bij het onderdeel dat wilt opslaan. Deze functionaliteit is erg handig om consistentie toe te brengen aan je ontwerp. Ook kun je snel verschillende kleurpaletten testen om zo de beste vormgeving te vinden.

Met zogenaamde symbols kun je patronen maken die je in het hele ontwerp kunt hergebruiken. Je kunt ze op één plek bewerken in je document, waarna alle wijzigingen op alle symbolen in het document worden doorgevoerd. Dit is makkelijk voor onder andere logo's, modulaire elementen, headers, footers en formulieren. Deze symbols kun je tevens ook halen uit zogenaamde sticker sheets. Dit zijn template-documenten van bijvoorbeeld Google of Microsoft om zo makkelijk bestaande interface-elementen te plaatsen in je ontwerp.

Tekenen

Het programma is net zoals Adobe Illustrator vector-based, wat inhoud dat niet zo zeer pixeldata wordt opgeslagen maar punten en lijnen. Dit zorgt er voor dat je makkelijk met iconen, tekst en simpele illustraties kan werken. Ook kunnen elementen makkelijk groter of kleiner gemaakt worden zonder pixeldata te verliezen. Het uitlijnen van elementen is zeer gemakkelijk omdat het programma zeer intuïtieve snapping toepast op die punten en uitrekent waar je het beste een element kan plaatsen.

Alle schermformaten worden ondersteund en kunnen in het zelfde document geplaatst worden, waardoor het zeer eenvoudig wordt om ook voor tablets en mobiele telefoons te ontwerpen. Symbols kunnen in alle schermresoluties gebruikt worden, en tekst blijft consistent. Hierdoor mis je nooit een interface-element waarvan je een mobiele versie moet ontwerpen.

Voor de rest zitten er ook een aantal welvertrouwde vectorgereedschappen uit Adobe Illustrator in – denk aan het pengereedschap, lagen en pathfinding (combineren en uitstansen van figuren).

Een prototype maken en het delen van je ontwerp met stakeholders

In prototypemodus kun je van je wireframes een interactief prototype maken. Deze kun je in preview-modus direct testen op het doelapparaat. De interactieve prototypes zijn compleet klikbaar en je kunt zelfs animaties tussen schermen toevoegen.

Je kunt ook je prototype online zetten, waardoor je je ontwerp op het daadwerkelijke apparaat kan testen. Ook kun je dit prototype delen met de opdrachtgever, die er opmerkingen bij kan plaatsen.

Sinds kort heeft Adobe XD ook een functionaliteit om een designspecificatie te exporteren – dit zorgt er voor dat ontwikkelaars die met je ontwerp aan de slag gaan pixel perfect designs kunnen creëren.

De conclusie

Als UX designer bij Sigma Solutions gebruik ik Adobe XD om mooie wireframes en visual designs te maken. Het laat mij snel en iteratief werken, terwijl de ontwerpen altijd overzichtelijk en netjes zijn. De mogelijkheid om mijn ontwerp makkelijk te delen met opdrachtgevers zorgt er voor dat Adobe XD ook een goed communicatiemiddel is voor ontwikkelaars en projectmanagers. Adobe XD is voor mij dus een onmisbaar programma!