Adobe XD is sinds 2017 op de markt, en is langzamerhand de industry-standard aan het worden voor UX-design en prototypen. Desondanks is XD inmiddels berucht om de ontbrekende functies die voor veel ontwerpers als essentieel worden gezien. Toch timmert Adobe hard aan de weg en kwamen met update 24 veel langverwachte features eindelijk naar XD.
Adobe XD is onderdeel van de Adobe Suite en lijkt qua functionaliteit op Adobe Illustrator, maar dan uitgedund. Dat klinkt als een slecht excuus voor een programma, maar het heeft wel degelijk voordelen: in XD valt razendsnel te werken door de overzichtelijkheid en de focus op herhaling van elementen. Waar Illustrator zich uitstekend leent voor finesse en detailwerk, richt XD zich op het snel en efficiënt neerzetten van een concept.
Adobe XD vult een gat tussen het ontwerp en de development van een digitaal product.
Daarnaast voegt XD verschillende interactie-elementen toe, zoals “wireframing” en animaties. Zo kun je bijvoorbeeld interactieve mock-ups van websites en apps maken, iets wat met Illustrator zonder grote omweg niet mogelijk is. Om deze redenen is Adobe XD onmisbaar geworden in een ontwikkelproces en vult het een gat tussen het ontwerp en de development van een digitaal product.
Geef ons hover!
Voor lange tijd ging dat niet alleen maar over rozen. De feature request pagina van Adobe XD staat vol met ideeën van gebruikers die voor lange tijd onbeantwoord bleven of nog steeds zijn. Veel features die voor een programma zoals XD als vanzelfsprekend worden gezien zijn of bleven voor lange tijd onbeantwoord. Waaronder de infameuze hover state waarmee je een object andere eigenschappen kan geven wanneer een gebruiker met de muis er op gaat staan. Iets wat anno 2017, en al helemaal anno 2019 een essentieel onderdeel is van web- en UX-design.
En nu, in 2019, ruim twee jaar na de eerste release van XD, is het zo ver. Adobe heeft gehoor gegeven aan het noodlottige gesmeek van elke ontwerper op aarde: Adobe XD heeft een hoverfunctie toegevoegd als onderdeel van de feature object states.
Samen in de zandbak
De introductie van hover states ving de schijnwerpers in deze update, maar er is samen met hover states ook een feature geïntroduceerd die op de lange termijn veel meer impact gaat hebben: real-time collaboration. Dit betekent dat meerdere gebruikers vanaf hun eigen computers tegelijk aan hetzelfde XD-document in de cloud kunnen werken. Dit kennen we al van bijvoorbeeld Google Docs. Zie het bestand in de cloud als een zandbak waarin je met z’n allen aan één zandkasteel kunt bouwen. De functie is nog wel in bèta, dus wees voorzichtig. Het gebeurde mij en mijn collega al dat ik voor de grap in collaboration mode het hele canvas verwijderde, en plots werkte de undo functie niet meer. Daar zit je dan. Gelukkig hadden wij een back-up, dus zorg dat je altijd een terugvalbestand hebt wanneer je een bestand openstelt voor realtime collaboration.
Wat wij met Adobe XD doen
Bij Control F5 is XD een essentieel onderdeel van elke website die we ontwikkelen. Voordat we beginnen met het bouwen van een website ontwerpen we elk element en de lay-out van een website in XD. Zo kunnen we de klant tussentijds precies laten zien hoe de website er uit komt te zien en kunnen wij efficiënt over op de development fase. Zo kom je er op tijd achter als bepaalde elementen voor de opdrachtgever niet naar wens zijn en voorkom je dat de opdrachtgever voor verrassingen komt te staan wanneer de website afgeleverd wordt. Klopt, een programma als Adobe Illustrator kon dit ook al, maar Adobe XD zorgt er voor dat de opdrachtgever het ontwerp kan bekijken alsof het een functionele website is; de menu’s werken, hovers werken, alle elementen reageren net zoals de uiteindelijke website dat zou doen. Adobe XD scheelt ons als webdevelopers veel tijd en helpt ons opdrachtgevers te overtuigen van een ontwerp. Adobe XD helpt opdrachtgevers vervolgens om een ontwerp te begrijpen en te ervaren alsof het al een werkende app of website is.