Een UX/UI design tool kiezen: Sketch vs. Adobe Xd

Digital designers gebruiken Sketch en Adobe Xd om wireframes, ontwerpen en prototypes te maken. Opdrachtgevers, maar ook developers, kunnen hiermee niet alleen het design bekijken, maar ook ervaren hoe een website of app in de praktijk zal werken.

Sketch, dat alleen beschikbaar is voor Mac OS, bestaat al meer dan tien jaar. In die jaren hebben ze zich ontwikkeld tot dé topaanbieder van UX/UI software. Het is niet voor niks dat steeds meer (grote) bedrijven Sketch volgen in het ontwikkelen van designtools en features. Zo ook Adobe, dat met Adobe Xd (onderdeel van Adobe Creative Cloud) een belangrijke concurrent is. Veel functies en mogelijkheden worden door Adobe Xd van Sketch overgenomen en in een eigen jasje gegoten.

Verschillen tussen Sketch en Adobe Xd

Dus, wat kun je precies met Sketch en Adobe Xd? En wat zijn de verschillen? We vergelijken de tools op het gebied van:

• UX/UI
• Artboards
• Plug-ins
• Prototyping
• Delen en exporteren
• Prijzen
• Updates en verbeteringen

UX/UI

Al bij het openen van Sketch en Adobe Xd zijn grote verschillen te zien. In bovenstaande afbeeldingen zie je de interface van de startschermen in Sketch en Adobe Xd. Het eerste dat opvalt zijn de themakleuren van de user interface.

Thema’s in Sketch

Wanneer je Sketch gebruikt, kun je verschillende soorten thema’s kiezen voor je interface. Zo heeft Sketch ook een donkere interface (dark mode). Dit is voor je ogen vaak een stuk rustiger en kijkt dus fijner.

Thema’s in Adobe

Vijf jaar na de release is het in Adobe Xd nog altijd niet mogelijk om de interface kleuren aan te passen. Dat is opvallend, omdat andere veelgebruikte applicaties zoals Photoshop en Illustrator deze functie wel hebben. Met een omweg via GitLab kun je dit door een script te downloaden alsnog zelf doen.

Artboards

Vanuit het startscherm van zowel Sketch als Adobe Xd kun je een nieuw document maken, template kiezen ofbestaand (recent) document openen. De volgorde en plaatsingsplek is wel wat anders. Een nieuw ontwerp maken, hoe makkelijk en snel gaat dat in Sketch en Adobe Xd?

Een artboard maken in Sketch

Om een nieuw artboard te maken in Sketch, klik je op de grote plus met de tekst ‘New document’. Er verschijnt dan een blanco canvas. Met de artboard tool aan de rechterzijde kies je de gewenste schermgrootte. In plaats van zelf de schermgrootte in te stellen, kun je aan de linkerkant ook templates bekijken. Hier kun je kiezen uit een de meest gebruikteschermformaten. Je bent dus al een aantal kliks verder voordat je echt kunt beginnen met ontwerpen.

Een artboard maken in Adobe Xd

In Adobe Xd krijg je in één klik alle opties te zien. In tegenstelling tot Sketch, selecteer je hier vooraf via een dropdown uit de meest gebruikte schermgroottes het formaat dat je nodig hebt. Of je voert je eigen schermgrootte in. Vanuit het startscherm kun je ook direct recent geopende documenten bekijken. Ook bij alle andere Adobe programma’s is deze gebruikerservaring zo opgezet. Extra fijn dus als je ook met andere Adobe software werkt.

Plug-ins

Met plug-ins zijn de mogelijkheden van beide programma’s nog groter. In dit geval gaat het om scripts die automatisch handelingen uitvoeren. Dat scheelt handmatig werk voor jou. Met plug-ins voer jij je werkzaamheden dus sneller en makkelijker uit. Hoe zit het met de plug-ins voor Sketch en Adobe Xd?

Omdat Sketch al een aantal jaar langer bestaat dan dan Adobe Xd, zijn er voor Sketch meer plug-ins beschikbaar. Het nadeel is dat je hier bij Sketch ook een ander programma voor nodig hebt: GitLab. Daar download je de scripts die je na installatie samen met Sketch kunt gebruiken. Bij Adobe Xd zijn de plug-ins beschikbaar in de software zelf.

Prototyping

Om de gebruiksvriendelijkheid van je ontwerp te testen, kun je in zowel Sketch als Adobe Xd prototypen uitwerken. Hiermee kun je o.a. knoppen, afbeeldingen en scrolacties tot leven brengen met animaties en interacties.

Vooral animaties spelen een steeds grotere rol op websites en in apps. Dit kan zo simpel zijn als een afbeelding die met een bepaalde beweging in beeld komt of een tekstblok dat langzaam vanuit het niets op het scherm verschijnt.

Animeren in Sketch

De animatiefunctie in Sketch is beperkt. Uitgebreide effecten ontbreken. Wel kun je een knop laten doorverwijzen naar een bepaalde pagina of naar een specifiek deel van een pagina laten scrollen.

Animeren in Adobe Xd

Adobe Xd doet dit stukken beter met een groot aantal mogelijke animaties. De speciale functie ‘auto-animate’ doet op basis van een slim algoritme een suggestie voor een animatie.

Delen en exporteren

Een ontwerp delen, hoe gaat dat in Sketch en Adobe Xd?

Delen vanuit Sketch

Bij Lemone exporteren we onze online prototypes vanuit Sketch naar InVision. Dit (extra) programma geeft onze klanten een goed beeld van de werking van de website, app of online omgeving.

Delen vanuit Adobe Xd

Bij Adobe Xd is het niet nodig om verschillende bestanden met je klanten en developers te delen. Ontwerpen zijn namelijk door beide te bekijken via de webbrowser. Het werkt daarom ook op alle (soorten) computers. Je hebt dus ook geen andere software of programma’s nodig, in tegenstelling tot Sketch.

Met Adobe Xd kun je designs delen op vier manieren:

• Design review: Voor feedback op je design of prototype
• Development: Deel je designs of prototype met developers
• Presentation: Optimaliseer je ontwerp voor presentatie
• User testing: Ideaal om je prototype te testen

Design review

Wil je feedback vragen op je ontwerp of prototype? Kies dan voor de design review functie. Je klant kan hiermee een specifiek onderdeel in het design markeren en er een opmerking bij plaatsen. Ook exporteer je jouw ontwerp simpel en snel als png.

Development

Deze functie heeft dezelfde mogelijkheden als de design review functie. En dan nog een aantal extra. Zo kun je de afstand / margins zien tussen twee elementen, de CSS van het element bekijken en kleurcodes kopiëren. Bovendien kunnen afbeeldingen gedownload worden in @2x, pdf en jpg formaat.

Presentation

In Adobe Xd staat veel relevante informatie over je ontwerp. Voor jou dan, maar niet voor je klant. De presentation functie is dan ook ideaal wanneer je jouw design of ideeën aan je klant wil presenteren. Overbodige elementen ontbreken en het ontwerp opent full-screen. Alle focus op jouw ontwerp dus.

User testing

Hiermee laat je de gebruiker je prototype in zijn geheel ervaren. Losse artboards bekijken is namelijk niet mogelijk. De gebruiker kan alleen met de knoppen in het prototype navigeren naar de artboards die jij eraan hebt gekoppeld. Met de feedback optimaliseer je de UX tot een ultieme gebruikerservaring.

Prijzen

Wat kosten Sketch en Adobe Xd? Hieronder zetten we de kosten op een rijtje.

Prijs Sketch

Een abonnement bij Sketch kost €7,50 per maand of €82,47 per jaar, inclusief btw. Bij een actief abonnement profiteer je van alle updates die worden uitgebracht en kun je je werk delen via Sketch Cloud. Ook wanneer je abonnement verlopen is, kun je Sketch in de basis blijven gebruiken. Je ontvangt dan geen updates meer en kunt geen gebruik meer maken van hun cloud diensten.

Prijs Adobe Xd

Adobe Xd heeft een gratis versie. Je krijgt hiermee toegang tot alle creatieve mogelijkheden. Wel heb je een kleinere cloudopslag (2GB) en kun je maar één prototype tegelijkertijd delen. Om een tweede link te kunnen delen, moet je overstappen naar de betaalde versie. Deze kost €12,09 per maand, of €120,- wanneer je voor een heel jaar betaalt. Ook kun je Adobe Xd gebruiken met een licentie als onderdeel van een compleet Adobe Creative Cloud pakket. Wanneer je Adobe Xd combineert met andere creatieve apps van Adobe zoals Photoshop, Illustrator en InDesign kun je beter voor een alles-in-één abonnement van Adobe Creative Cloud kiezen. Je betaalt dan €60,49 per maand of €725,85 per jaar voor 20+ creatieve apps, waaronder Adobe Xd. Alle prijzen zijn inclusief btw.

Het prijsverschil tussen Adobe Xd en Sketch is dus niet zo groot. Bij beide tools krijg je te maken met maandelijkse of jaarlijks terugkerende abonnementskosten. Zowel Adobe Xd als Sketch motiveren gebruikers vooral gebruik te maken van hun online diensten om je werk te kunnen presenteren – een grote stimulans voor een betaald abonnement.

Updates & verbeteringen

Hoe vaak komen beide tools met updates? En om wat voor verbeteringen gaat het?

Sketch updates

Bij Sketch kun je uitgaan van één tot drie updates elke maand. Dit zijn vooral bug en crash fixes. Aan de ene kant betekent dit dus dat er veel foutjes in zitten die moeten worden opgelost. Tegelijkertijd betekent het ook dat Sketch direct aan de slag gaat met de feedback van gebruikers om de kwaliteit van het product continu te verbeteren.

Adobe Xd updates

Ook Adobe Xd komt (minimaal) één keer per maand met een nieuwe update. Bijna altijd gaat het om de uitrol van nieuwe of verbeterde functies. Zo blijft Adobe Xd in ontwikkeling. Als gebruiker ga je echt uitkijken naar de updates van Adobe Xd.

Conclusie

Welke conclusie trekken we uit de vergelijking tussen Sketch en Adobe Xd?

Adobe Xd is het pakket dat je het aankomende jaar in de gaten moet houden. De tool komt in razendsnel tempo met updates waar je als designer echt wat aan hebt. Dat is ook niet zo heel gek: Adobe heeft veel slagkracht in huis omdat het stukken groter is dan de ontwikkelaar Sketch, voorheen bekend als Bohemian Code.

Aan de andere kant is er ook veel te zeggen voor Sketch als grondlegger van dit type creatieve tool. Het aantal gebruikers van Sketch ligt dan ook enorm hoog. Veel studio’s kennen Sketch van binnen en buiten en ook hun klanten zijn gewend aan deze manier van werken. Toch kunnen we uit de plannen van Sketch voor de komende jaren opmaken dat de ontwikkeling niet zo snel gaat als bij Adobe. Onze verklaring is dat dit komt doordat ze meer aandacht besteden aan het onderhouden van de app dan aan daadwerkelijke doorontwikkeling.

Als beginner is Adobe Xd makkelijker te begrijpen en erg gebruiksvriendelijk. Dat je met het gebruik van Adobe Xd ook meteen onderdeel wordt van het complete Adobe creatieve eco-systeem kan zowel als positief en negatief worden beschouwd. Toch kunnen we Adobe bestempelen als een onmiskenbaar handige tool.

Wanneer prijs belangrijk is, is Sketch de betere optie. Al zul je voor professionele prototypen een externe tool als InVision moeten inschakelen, waarvoor je ook apart betaalt.

Adobe Xd biedt juist een totaaloplossing, waarbij ook de mogelijkheid om goede online prototypes te ontwikkelen, is inbegrepen. Bovendien sluit Adobe Xd naadloos aan op de andere Adobe tools in de Creative Cloud. Ervaren Adobe gebruikers zullen hierdoor een kleinere leercurve ervaren.