De termen UX en UI design zijn bijzonder populair. Het blijft nog steeds een stijgende trend. Voor UX en UI designers zijn robuuste UX design tools onmisbaar geworden en daar zien we nu twee grote spelers het voortouw nemen: Adobe XD en Sketch.
UX design staat voor “User Experience Design”. Dit betekent niet meer of niet minder dan voor bezoekers een logische flow creëren in je website of applicatie. Een UX designer maakt een stappenplan op, over hoe gebruikers in een toepassing of applicatie gemakkelijk hun weg zullen vinden zonder enige frustraties of obstakels.
UI design staat voor “User Interface Design”. Dit gaat over het visuele aspect van de website of applicatie. Naast de gebruiksvriendelijkheid is de visuele aantrekkelijkheid van een website of app minstens even belangrijk en hiervoor worden grafische elementen gebruikt, of gekeken naar de lay-out.
Voor de opkomst van deze tools maakten veel designers gebruik van Adobe Photoshop voor het bouwen van mockups van websites en apps, maar het was niet de meest uitgelezen oplossing. Na verloop van tijd werden bestanden te zwaar en werd het alsmaar moeilijker om verder te werken aan designs.
De twee tools bij uitstek zijn Sketch en Adobe XD. Vroeger was Sketch dé voorkeursoplossing. Nu is Adobe XD een volwaardig alternatief geworden.
Het team achter Sketch zag dat veel designers gebruik maakte van Adobe Photoshop en dat dit niet de ideale omgeving was. Als marktleider zorgden ze voor het kunnen hergebruiken van symbolen, snellere workflows en dat ontwerpen slim en efficiënt kunnen worden vormgeven. Maar de werkelijke kracht van Sketch zit hem in zijn plug-ins. Eventuele features die Sketch niet aanbiedt, kan je zelf toevoegen d.m.v. plug-ins, waarbij je als gebruikers zelf de ideale tools kan toevoegen.
De Adobe design community liet van zich horen en stuurde een duidelijke noodkreet naar Adobe. Er was een grote nood aan een volwaardige UX/UI design tool.
Adobe antwoordde hierop met ‘Project Comet’ dat na zijn bèta versie hernoemd werd naar Adobe XD. De insteek was dat designers kunnen designen aan “de snelheid van hun gedachten”.
De echte aandachtstrekker was de ‘repeat-grid’ functie: een grid die je snel kan dupliceren en van plaats kan wisselen. De ideale oplossing dus om snel je designs aan te passen, zonder dat dit veel werk vergt. Sinds de aankondiging op Adobe MAX 2018 heeft ook Adobe XD toegang tot heel wat plug-ins die de gebruiker kan instellen en positioneert het zich hierdoor als volwaardig alternatief voor Sketch.
Welke functies Adobe XD nog heeft, lees je in onze blog hier.
Sketch en Adobe XD delen een gelijkaardige interface en ook voor Adobe veteranen is de interface van Adobe XD iets waarin ze snel hun weg in zullen terugvinden. Echter, Adobe XD moet het stellen zonder de bekende toolbar bovenaan.
De grootste aandachtstrekker in Adobe XD is de ‘repeat grid’ functie. Een tool die er voor zorgt dat er veel tijd kan worden bespaard. Zo kan je eventueel bepaalde elementen snel laten herhalen, in de stijl die je verkiest.
Het prototype is een visuele weergave van de website of applicatie die de klant kan bekijken om een indicatie te krijgen van de status van het project. Adobe XD heeft zijn eigen web sharing functie, waardoor je je ontwerp snel kan bekijken. Bij Sketch moet je hiervoor een plug-in aanspreken.
Met Adobe XD heb je ook de mogelijkheid om te kiezen voor functies zoals ‘auto animate’ (waar je vroeger 30 minuten tijd nodig had om iets te animeren, doe je dat nu op 5 seconden) en ‘voice prototyping’ waarmee je voice commando’s ontwerpt voor Siri, Alexa, handicap, …
Wat betreft het samenwerken met andere tools heeft Adobe XD ook een grote voorsprong. Zo werkt Adobe XD uiteraard met (bijna) alle programma’s binnen de Creative Cloud suite en Adobe Photoshop gebruikers kunnen zelfs hun interface in Adobe XD importeren.
Adobe XD | Sketch | |
Prototyping (het testen van je website/app) | Ja (inclusief “auto animatie” en “voice prototype”) | Nee (met plug-ins) |
Vector afbeeldingen | Ja (werkt ook samen met Adobe Illustrator) | Ja |
Foto’s bewerken (geavanceerd) | Nee (werkt wel samen met Adobe Photoshop) | Ja |
Plug-ins | Ja | Ja (groter aanbod) |
Repeat grid | Ja | Nee (met plug-ins) |
Exporteren van assets | Ja | Ja |
MacOS versie | Ja | Ja |
Windows versie | Ja | Nee |
Testen? | XD Starter Plan: Gratis | Gratis proefversie 30 dagen |
Openen van files | .sketch, .ai, .psd, … | .sketch |
Op vlak van functionaliteit, komen beide toepassingen heel dicht bij elkaar in de buurt. De leercurve voor beide programma’s is niet zo hoog en het overstappen van de ene tool naar de andere is eenvoudig. De gelijkenissen zijn treffend.
Klaar om jouw grafische skills naar een hoger level te tillen? Praat gerust eens met Geerte.
Let’s talk!