Adobe Xd: Ontwerp de userinterfaces van morgen

Sinds jaar en dag is Adobe een vaste waarde in het grafisch landschap. Op 20 jaar tijd heeft het een ijzersterk portfolio uitgebouwd met krachtige softwareoplossingen die voldoen aan de noden van bijna elke grafische vormgever en multimediadesigner. Ook voor creatievelingen die bezig zijn met UX/UI design breidde Adobe haar softwareportfolio uit.

Creatievelingen die een Adobe CC-abonnement hebben, kunnen tot op de dag van vandaag rekenen op een waaier van tools en programma’s, die een oplossing kunnen bieden op de meest veeleisende wensen van een designer, klant of communicatieafdeling. Of het nu voor print, web of video is, oplossingen van Adobe zorgen voor een professioneel resultaat, zonder in te boeten op gebruiksvriendelijkheid.

Ondanks het grote aanbod aan apps, merkte Adobe enkele jaren geleden de groeiende nood aan betere oplossingen die het UX (User experience design) en UI (Userinterface) ontwerp proces ondersteunen. Dat dit marktsegment een enorm potentieel heeft, is nog een understatement te noemen. De periode dat een website, app, portal, kiosk,… een opsomming is van data en functies, is al even achter ons. De toepassingen van vandaag vragen niet minder dan een verbluffende interface, waarvan de weergave perfect aansluit op de huisstijl van de onderneming. Een mooie interface schept vertrouwen en is een representatie van de professionaliteit van het bedrijf. Maar niet alleen het ontwerp moet goed zitten. Functioneel moet de toepassing ook logisch en intuïtief zijn opgebouwd.

Gebruikers willen snel en eenvoudig toegang krijgen tot de informatie en de oplossing die ze nodig hebben. Ze willen op een vertrouwde en natuurlijke manier ondersteund worden in het gebruik, zonder eerst de help-functie of de handleiding te moeten doornemen. Zowel de UX als de UI moet perfect aansluiten bij de doelgroep waarvoor het bedoeld is. Dit alles is minder eenvoudig dan het lijkt.

Adobe probeert met het programma Adobe XD een oplossing aan te bieden voor heel het creatieve proces. Adobe is zeker niet de enige die op dit idee kwam. Het bewijs hiervan is terug te vinden in het dozijn aan gratis en betalende alternatieven, die ook hun plekje proberen te veroveren in dit segment. Maar Adobe zou Adobe niet zijn, mochten ze hiervoor geen gepast antwoord hebben. Niet alleen is het programma gratis te downloaden. Een uitgebreide versie behoort standaard tot het Creative Cloud abonnement. In tegenstelling tot sommige alternatieven, is Adobe XD super toegankelijk voor zowel beginners als gevorderden. Geen drukke of complexe interface, maar een eenvoudige en rustige omgeving die de designer ondersteunt in het creatieve proces. Het programma is licht in omvang maar bevat alle noodzakelijke instrumenten. Met enkele muisklikken wordt een nieuw project gestart, zonder een moeilijke en complexe setup procedure te doorlopen. 

Enkele krachtige features bewijzen dat Adobe XD één van de meest voor de hand liggende keuzes is. Verschillende werkruimtes zijn beschikbaar die deze stelling ondersteunen.

De ‘Design’ omgeving in Adobe XD

In deze omgeving kunnen we professioneel en snel designs realiseren. En dit is niet beperkt tot 1 toepassing. In één werkruimte kan je in een mum van de tijd alle projecten voor smartphone, tablet, kiosk …  op elkaar afstemmen. Afbeeldingen kunnen we rechtstreeks toevoegen door te slepen vanuit Adobe Stock, eventuele externe beeldbanken, gedeelde Adobe Cloud bibliotheken of gewoonweg vanaf de eigen harde schijf of netwerk locatie.

Verschillende mogelijkheden waar we reeds vertrouwd mee zijn in andere Adobe pakketten, kunnen we ook terugvinden binnen Adobe XD. Zo kunnen we werken met ‘Character styles’, ‘Global colors’ (swatches) en ‘symbols’. Op sommige punten is Adobe XD zelfs pionier in het Adobe gamma. Zo kunnen we gebruik maken van een niet-destructieve pathfinder, een functie die ook in Adobe Illustrator een prima aanvulling zou zijn. Voor wie reeds voorbereidende werken heeft uitgevoerd in Adobe Photoshop of Adobe Illustrator, kunnen de respectievelijke bestanden ook prima worden geopend binnen Adobe XD, met behoud van lagen en effecten. De beschikbaarheid van ‘UI-kits’ voor de verschillende doelplatformen, laten toe om heel snel alle beschikbare systeemelementen te integreren in het ontwerp. Repeating grids zorgen ervoor dat we snel foto’s en teksten kunnen weergeven op een visueel aantrekkelijke manier. Via copy/paste appearance kunnen we vlot visuele kenmerken overbrengen tussen verschillende UI-elementen. In de laatste versies wordt nu ook rekening gehouden met responsive gedrag. Zoals je kan lezen, bevat deze omgeving een mooie collectie aan nuttige tools.

De ‘prototype’ omgeving

In de ‘prototype’ omgeving gaan we aan de slag wanneer we de interactie tussen de verschillende knoppen en schermen willen toevoegen. Zonder één letter te programmeren kunnen we schermen koppelen en swipe- en clickgestures toevoegen. Het volstaat om te klikken en te slepen om het gewenste resultaat te bekomen. Het animeren gebeurt automatisch zonder dat we manueel werk moeten verrichten op respectievelijke tijdslijnen.

Het eindresultaat kunnen we interactief testen door gebruik te maken van de preview functionaliteit. Als je de Adobe XD app installeert op je mobiele apparaten, dan heb je de mogelijkheid om ook hierop je project grondig te testen.

Collaboratie

Door het ter beschikking stellen van een online reviewplatform dacht Adobe ook aan het verwerken van feedback. Zo heeft de klant niet alleen de mogelijkheid de toepassing te testen, maar ook om opmerkingen toe te voegen. Een superhandige feature! En mocht dit niet volstaan, dan kan er ook nog een video worden opgenomen die de functionaliteit demonstreert. Tot slot kan het eindresultaat eventueel worden geëxporteerd naar een Adobe After Effects project, om hiermee verder aan de slag te gaan.

Ook de communicatie naar de softwareontwikkelaars, die na de goedkeuring van de klant aan de slag gaan, werd voorzien. Via de functie ‘share for development’ kan ons project online gedeeld worden waarbij de developers onmiddellijk toegang krijgen tot alle visuele eigenschappen van een ontwerp. Hierdoor wordt heel wat opzoekwerk vermeden.

What else?

Wie de creatieve mogelijkheden van zijn of haar Adobe XD projecten nog wil uitbreiden, kan rekenen op verschillende externe applicaties die ondertussen ook dit formaat ondersteunen. Zo kan je bijvoorbeeld met het programma ProtoPie aan de slag om nog visueel aanvullende designfeatures toe te voegen. Het toevoegen van verbluffende animaties wordt hiermee kinderspel. Net zoals in sommige andere Adobe pakketten, kunnen we hierbij gebruikmaken van meerdere tijdslijnen om de visuele eigenschappen van de verschillende elementen individueel aan te passen in de tijd.

En zo wordt Adobe XD een onderdeel van een veel grotere design workflow.

It’s not all pink

Ondanks dat we onder de indruk zijn van deze mooie tool, kunnen we niet onder stoelen of banken steken dat er nog ruimte voor verbetering is. Doordat Adobe XD nog een relatief jong programma is, en er door Adobe nog duchtig wordt gesleuteld aan de motor, is er bijna elke maand een nieuwe update.

Verschillende functies kunnen nog wat extra aandacht gebruiken. Het gebruik van CC Libraries is voorlopig nog een eenrichtingsverhaal, waarbij het niet mogelijk is om vanuit Adobe XD wijzigingen aan te brengen. Ook de ondersteuning voor meertalige applicaties kan heel wat beter.

Geen onbelangrijke factor is het feit dat de resultaten van Adobe XD betoverend mooi kunnen zijn, soms zelfs te mooi. Adobe XD houdt te weinig rekening met wat technisch realiseerbaar is door een softwareontwikkelaar. Dit kan soms wel voor een teleurstelling zorgen.

Net bij die technische uitvoering ligt naar onze persoonlijke mening nog een andere grotere uitdaging. Wat Adobe XD oplevert, blijft nog steeds een simulatie van wat een softwareontwikkelaar opnieuw moet bouwen. Adobe XD beschikt niet over de mogelijkheid om gecompileerde (gebruiksklare) applicaties voor de verschillende platformen te bouwen. Ook de bestaande exportmogelijkheden zijn hierin beperkt. De output vergt nog heel wat werk van een ervaren programmeur. In één van de laatste updates werd het Adobe XD plug-in systeem geïntroduceerd. Bijkomende (externe) plug-ins geven de mogelijkheid om bijkomende functionaliteiten toe te voegen. Een aanvullende store geeft een mooi overzicht van nieuwe uitbreidingen, die vaak gratis te downloaden zijn. Naar we vernomen hebben heeft Adobe hierin 10.000.000 dollar geïnvesteerd om dit tot een succesverhaal te brengen. Maar ondanks deze mooie aanvullingen blijven de mogelijkheden om tot kant en klare programmeercode te komen beperkt. We hopen van harte dat het in de toekomst mogelijk zal worden te exporteren naar een developer-ready JavaFx, JSF, C#, Asp.net, Android, Objective-c, PHP of React project.

Het verdict

Adobe XD is zonder twijfel een prima aanvulling in het aanbod aan bestaande Adobe applicaties. Een rustige gebruikersinterface in combinatie met krachtige functies zorgen ervoor dat dit programma misschien wel de uitgelezen toepassing is om snel professionele interfaces te ontwerpen die voldoen aan de hedendaagse noden. Wel belangrijk is dat de designer samen met de opdrachtgever een grondige analyse uitvoert, om samen tot een storyboard te komen. Die zou een perfect weergave moeten zijn van de scope van het project. Het streven naar een optimale gebruikservaren mag deze stap niet overslaan. Pas daarna kan er gestart worden met het creatieve proces. Adobe XD is hiervoor prima geschikt. Adobe slaagt er hiermee in opnieuw een juiste oplossing aan te bieden voor de uitdagingen van morgen.