5 redenen waarom u Adobe XD moet gebruiken voor UX-Design

UX-Design met Adobe XD

5 redenen waarom u Adobe XD moet gebruiken voor UX-Design

Adobe XD is een nieuw programma van Adobe, het creatieve bedrijf die de creatieve markt leidt op dit moment. Maar waarom zou u Adobe XD moeten gebruiken voor UX-Design? Ik geef in dit artikel vijf redenen voor.

Wat is Adobe XD?

Voordat ik mijn redenen ga geven over waarom u Adobe XD moet gebruiken wil ik eerst uitleggen wat Adobe XD precies is. Tijdens Adobe Max 2015, het jaarlijkse evenement van Adobe waarin de nieuwe ontwikkelingen vanuit het bedrijf kenbaar werden gemaakt, werd aangegeven dat ze een nieuw product op de markt zouden brengen. Dit werd dan ook in maart 2016 gedaan. Eerst werd het product genaamd Adobe Experience Design CC uitgerold voor Apple en later onder de naam Adobe XD voor de Windows computer. Het duurde echter nog één jaar (2017) dat de officiële release van het inmiddels Adobe XD uitkwam.

Met dit programma kunnen ontwerpers en UI-Designers aan de hand van vectoren (waar Adobe Illustrator onder meer mee werkt) prototypen maken voor bijvoorbeeld de vormgeving van een nieuwe website, een app, mediacampagne of voor een software wat gebruikt gaat worden. Dit kan bijvoorbeeld worden gerealiseerd door de verschillende formaten die gecreëerd kunnen worden, door de verschillende mediafuncties die aan het lay-out toegevoegd worden en aan de verschillende symbolen en tekens die gebruikt worden.

Aan de hand van deze prototypen kan er een concreet beeld worden gemaakt die doorgestuurd kan gaan worden aan de ontwikkelaar, denk bijvoorbeeld maar aan de websiteontwikkelaar die de website daadwerkelijk bouwt. Dit zorgt voor minder miscommunicatie en iedereen heeft eigenlijk een concreet beeld van wat ieder kan verwachten.

UX-Design met Adobe XD met uitwerking

Waarom zou u Adobe XD moeten gebruiken voor uw project?

Nu we weten wat Adobe XD is kunnen we verder gaan kijken. Waarom zou u dan Adobe XD moeten gebruiken voor uw komende project? Ik laat het u hieronder aan u zien!

Reden 1: Samenwerking tussen programma’s

Adobe staat bekend om haar verschillende programma’s. Denkt u bijvoorbeeld aan Adobe Photoshop, Adobe InDesign, Adobe Dreamweaver en aan Adobe Première Pro. Deze programma’s hebben op zichzelf staand verschillende doelen die gebruikt kunnen worden om content te produceren.

Eén van de voordelen die Adobe heeft is dat de bestanden in de meeste gevallen met elkaar geïntegreerd kunnen worden. Op deze manier kan uw grafische vormgever een illustratie maken in Adobe Illustrator (.ai of .eps bestand) en de fotograaf kan een foto bewerken in Adobe Photoshop (.psd bestand). Zonder deze bestanden eerst te hoeven te exporteren naar een afbeelding (bijvoorbeeld .png of .jpg) kunt u deze als UX-Designer of als UI-Designer gewoon importeren in Adobe XD.

Op deze manier scheelt het tijd om de export ervan te doen. Daarbij komt ook als voordeel, wanneer u in de Creative Cloud werkt met de documenten, dat de grafische vormgever of de fotograaf het bestand (.psd, .ai of .eps) gewoon kan updaten. Op deze manier hoeft u alleen de link te gaan updaten en het nieuwe vormgeving is up-to-date.

Reden 2: Google Material Design

Vroeger kon u er misschien nog er wel eromheen gaan. Maar tegenwoordig is het steeds belangrijker geworden. Google Material Design. Dit is een website (www.material.io) waar webontwikkelaars een handleiding lezen wat de beste manier is om bijvoorbeeld knoppen weer te geven in de website. Daarbij worden dan enkele verkeerde voorbeelden gegeven en enkele goede voorbeelden gegeven.

Omdat het steeds belangrijker wordt dat mensen weten wat iets precies is heeft Adobe en Google de integratie mogelijk gemaakt tussen de software en de Google Material Design UI kits. Op deze manier kunt u de elementen die u dan te zien krijgt makkelijk kopiëren en deze implementeren in uw eigen prototypen.

Zo heeft u uw eigen prototypen die u maakt voor uw eigen organisatie of voor de klant. Alle elementen die u vanuit deze kit (of bijvoorbeeld via de beschikbare Apple en Microsoft UI kits) inlaadt kunnen volledig qua kleur en functie aangepast worden. Zo voorkomt u dat u tegen blokkades aankomt waardoor u net niet datgene kunt ontwikkelen wat u graag had gewild

Reden 3: Makkelijker dan andere software

Voorheen, toen Adobe XD nog niet bestond, was het een stuk moeilijker om te vormgeven hoe uw website, app of systeem eruit zou moeten komen te zien. Vaak werd dit gedaan met Adobe Illustrator of met Adobe Photoshop. In de meeste gevallen ging dit wel goed, maar was vaak lastig om dingen te realiseren omdat alles handmatig gebouwd zou moeten worden.

Doordat Adobe het programma Adobe XD op de markt heeft gebracht is het een stuk eenvoudiger geworden om lay-outs te gaan maken. Dit komt omdat het programma de interactie begrijpt en standaard vele opties heeft die veelal door haar gebruikers wordt gebruikt. Denkt u daarbij maar aan knoppen en de verschillende formaten die u kunt maken (desktop, tablet en mobiel).

 

Reden 4: Hoeveelheid mogelijkheden

Met Adobe XD heeft u eigenlijk, zoals eerder in dit artikel beschreven, veel mogelijkheden om een prototype te realiseren. Denkt u bijvoorbeeld maar aan de beschikbare UI kits, aan de meest gebruikte elementen of door de verschillende vormen die gebruikt kunnen worden. Hieronder vindt u een kort overzicht wat u precies allemaal kunt doen:

    • Tekst toevoegen en bewerken zoals u dat gewend bent
    • Toevoegen van illustraties, afbeeldingen of video’s
    • Toevoegen van vormen zoals vierkanten, cirkels of strepen
    • Toevoegen van extra functionaliteiten door plug-ins
    • Het ordenen van uw lay-out aan de hand van de layers (lagen)
    • Het hergebruiken van een eerder gemaakte lay-out of assets

Deze bovenstaande functies zijn een kleine greep uit de mogelijkheden die u heeft met Adobe XD. Maar er is nog veel meer. Zo kunt u een button creëren die u kunt koppelen aan een andere pagina. Tijdens het testen van het prototypen kunt u deze button dan ook daadwerkelijk gebruiken zodat u naar de betreffende pagina gaat binnen uw prototypen. Daarbij kunt u ook gebruik maken van animaties en van bewegende elementen. Natuurlijk is het uiteraard ook mogelijk om het lettertype, letterkleur en andere kleuren te veranderen binnen Adobe XD.

Net zoals de andere producten van Adobe is het erg raadzaam om goed te kijken welke functionaliteiten aan de software is toegevoegd. Zo weet u welke functies er nieuw zijn die mogelijk erg handig voor u zijn bij het realiseren van uw prototypen. Wil u weten wat de laatste functionaliteiten zijn, dan kunt u een bezoek brengen aan de pagina Let’s XD: What’s new.

Reden 5: Overzicht

Als laatste reden, ondanks dat Adobe XD soms onoverzichtelijk op het gebied van functionaliteit heeft u ten alle tijden het overzicht. Het programma heeft niet de mogelijkheid om werktools of vakken naar een bepaalde kant te verslepen zoals u dat misschien wel gewend was in Adobe InDesign, Adobe Photoshop, Adobe Dreamweaver of in één van de andere programma’s van Adobe.

Aan de andere kant biedt dit ook wel weer het overzicht. Zo heeft u aan de linkerkant de tools, plug-ins, lay-outs en de mogelijkheid voor het bekijken van het prototype. Aan de rechterkant van het scherm heeft u de aanpassingen die kunnen worden uitgevoerd. Denkt u bijvoorbeeld aan het bijwerken van het lettertype, het aanpassen van de kleur of het delen van het prototype naar de Creative Cloud van Adobe. In het midden van het scherm vindt u het prototype die u aan de hand van uw muis kunt bijwerken.

Met de gratis versie van Adobe XD kunt u één prototype delen met uw klant of organisatie. Heeft u de betaalde variant van Adobe XD, dan kunt u zoveel mogelijk delen zoals u dat wil. Alle deelbare URL’s zijn vanuit het online beheersysteem makkelijk te managen die u ook ten alle tijden uit kunt schakelen.

Uiteindelijk heeft u in het beginscherm ook de mogelijkheid om meerdere pagina’s in hetzelfde document te creëren. Op deze manier hoeft u niet meerdere documenten aan te maken maar heeft u alles overzichtelijk in één en hetzelfde document. In datzelfde scherm, wanneer u linksboven op prototype klikt, kunt u goed zien, door het betreffende element te selecteren, wat allemaal met elkaar aan elkaar is gekoppeld.

Conclusie

Concluderend kunnen we dus zeggen dat Adobe XD de markt een boost heeft gegeven. Zo is het voor UX-Designers en UI-Designers makkelijker geworden om een prototype te maken die u kunt toepassen op uw project dat u uitvoert voor uw klant of voor uw eigen organisatie. Daarentegen is het voor de ontwikkelaar, bijvoorbeeld de webontwikkelaar, makkelijker geworden om goed te begrijpen wat u bedoelt met het lay-out. Dit gebeurt bijvoorbeeld door de integratie met de Google Material Design UI kit of de vele andere kits die aan eigen voorkeur aangepast kunnen worden. Uiteindelijk is het nog aan de klant om aan de leidinggevende om akkoord te geven. Dit wordt vereenvoudigd door de animatie mogelijkheden en door de mogelijkheid om door het lay-out heen te navigeren als een echte bezoeker.

Wil u nu meer informatie, tips of inzichten krijgen? Dan heb ik goed nieuws. Adobe heeft de website Let’s XD in het leven geroepen. Daarop vindt u handige en leerzame tips die u kunt toepassen op uw eigen project. U kunt ook mij gerust een bericht sturen via het contactformulier. Dan help ik u graag verder met u vraag, adviezen of het vormgeven van uw prototypen in Adobe XD.