Als UX designer gebruik je veel tools om van onderzoek tot ontwerp tot prototype te komen. Er zijn vele tools voor UI/UX design beschikbaar. Welke programma kan jij het beste kiezen?
Om te bepalen welke programma geschikt is voor jouw, hang het er vanaf voor welke doeleinde je het gaat gebruiken. Ben jij een individuele ontwerpen? Dan zijn Figma en Framer prima programma’s.
Werk jij als ontwerper in een groot team met bijvoorbeeld Front- en Back-end, dan zal het programma ook hiervoor opties moeten bieden. Programma’s die veel gebruikt worden in teamverband zijn Adobe XD en Sketch. We duiken verder in deze twee programma’s om jou een beeld te geven van de verschillen. Zo weet je welke programma het beste aansluit op jouw gebruik.
Waar we het over gaan hebben:
Wat is Sketch
Sketch is een standaard keuze geworden van veel UI/UX Designers. Zelf omschrijven zij zich als;
“to empower designers to share and collaborate on their designs and work better together”.
De voordelen
Plugins
Dankzij het installeren van plug-ins heeft Sketch erg veel mogelijkheden. Het geeft je de vrijheid om verschillende functies toe te passen die je werkflow als designer verbeteren. Hieronder enkele plug-ins die veel gebruikt worden.
Anima
Anima is een all-in-one plug-in gemaakt om creative responsive layouts met pins, stacks en paddings te maken. Hierdoor is het mogelijk om in hoge kwaliteit prototypes te ontwikkelen die zich naar elk formaat scherm aanpassen.
Color contrast analyser
Om ervoor te zorgen dat de website gebruiksvriendelijk is voor de gebruikers, moet er een zekere mate van contrast zijn tussen verschillende elementen (zoals achtergrond en hoofdtekst). Met deze plug-in zorg je dat het contrast altijd op orde is.
Craft
Craft zorgt ervoor dat je .sketch ontwerpen synchroniseren met de InVision web app. De meeste functies van Craft werken ook zonder het gebruik van InVision.
Symbolen
Het gebruik van symbolen heeft van Sketch een succes gemaakt. Symbolen zorgen ervoor dat elementen, bijvoorbeeld iconen en buttons, kant en klaar staan voor hergebruik in het ontwerp. Hierdoor kan je eenvoudig zorgen voor consistentie en bespaart dit veel tijd.
Gedeelde bibliotheek
In een project bouw je al snel een symbolen library op. Met Sketch kan je de gehele library of symbolen delen met het design team. De ontwikkelaars kunnen eenvoudig jouw ontwerpen overnemen.
Prototypen
Om voor Sketch een prototype te ontwikkelen, moet je een plug-in gebruiken. Een voorbeeld hiervan is de Craft plug-in van InVision. De ontwikkelaars zien zo onder andere de ontwerpafmetingen, kleuren, en character styles.
Klanten
Ontwerp je voor klanten, dan is het mogelijk om via Invision prototypen door de sturen naar de klant. Zij kunnen feedback leveren op het ontwerp door middel van comments.
Wat is Adobe XD
Sinds maart 2016 is Adobe Experience Design CC, of wel Adobe XD op de markt. Wanneer je XD opent is de eerste impressie dat dit programma veel weg heeft van Sketch, maar toch dat Adobe sausje heeft.
Ben jij al een Adobe CC gebruiker, dan is Adobe XD gratis te downloaden en komt elke maand komt adobe met een aantal updates voor XD.
De voordelen
Het grootste voordeel is dat je als Adobe gebruiker het programma snel onder de knie hebt. Veel functie zal je herkennen uit andere programma’s. Wat kan je zoal verwachten?
- Gebruikers kunnen photoshop en illustrator bestanden openen in XD en verder met het bouwen van prototypen
- Sketch bestanden kunnen in XD geopend worden
- Adobe XD bestanden kunnen in After Effects geopend worden om gecompliceerde animaties te kunnen creëren.
Updates
Adobe is een krachtig bedrijf met veel kennis en een community. Sinds de uitrol van de software heeft XD goed geluisterd naar zijn gebruikers en de software flink geüpdatet.
Symbolen en Asset panels
Adobe heeft hun symbolen ecosysteem flink verbeterd. Het is veel eenvoudiger om op de hoogte te blijven van wijzigingen wanneer symbolen uit één document worden gekopieerd en in prototypes worden geplakt. Wanneer er nu wijzigingen in het bronbestand plaatsvinden, kunt u updates in een ander bestand accepteren.
Sketch stond bekent om het fijne gebruik van ontwerpsystemen, maar met gekoppelde symbolen in XD heeft Adobe een nieuwe wereld geopend als het gaat om het beheren van ontwerpsystemen in XD. Deze nieuwe functie is eenvoudig te begrijpen en veel eenvoudiger in te stellen dan bij Sketch.
Plugins
Sinds eind 2019 heeft adobe de mogelijkheid gegeven om plug-ins te installeren zoals:
Repetor
Repetor is een perfecte plug-in voor gebruikers van de Repeat Grids. Met Repetor genereer en reorganiseer je content. Het geeft een grote bibliotheek weer van gratis afbeeldingen van Unsplash rechtstreeks in jouw shape object.
Stark
Om ervoor te zorgen dat de website gebruiksvriendelijk is voor de gebruikers, moet er een zekere mate van contrast zijn tussen verschillende elementen (zoals achtergrond en hoofdtekst). Stark controleert de accibillity wat betreft kleurenblindheid en meer.
Overflow
Deze plug-in voor Adobe XD synchroniseert je ontwerpen naar de Overflow app om dit vervolgens om te zetten naar een User flow Diagram.
Co-create
Werk samen met andere designer tegelijkertijd in hetzelfde bestand. Perfect voor designs teams op afstanden.
Share mode
Met de nieuwe share mode presenteer je het project direct met klanten. Daarnaast is het mogelijk om de ontwerpen direct te synchroniseren. Dit gaat verbazend snel in vergelijking tot Invision.
Share for development
Deze functie maakt het mogelijk voor ontwikkelaars om de code te inspecteren van het design. Dit gebeurt via een weblink, zonder dat de ontwikkelaar een copy van het Adobe XD bestand nodig heeft.
Prototype
Het maken van interactieve prototypes kan zonder plug-ins van derde partijen. Prototyping, design en animatie kan allemaal in één omgeving. Het Designproces gaat hierdoor soepel en snel.
Wanneer het prototype af is, kan het online bekeken worden op webformat of met de Adobe XD mobiele app.
Conclusie
Beide programma’s voldoen om tot professionele ontwerpen te komen. Welk programma geven wij de voorkeur aan?
Vergelijkingstabel
Wij hebben alle gegevens gevisualiseerd in onderstaande tabel. Zo heb je een eenvoudig en snel inzicht in de verschillen.
| Adobe XD | Sketch | |
|---|---|---|
| Beschikbaar op Windows | ja | Nee |
| Beschikbaar op Mac OS | Ja | Ja |
| Maandelijkse updates | Ja | Ja |
| Offline support | V | V |
| Asset Export | Ja | Ja |
| Vector ondersteuning | ja | ja |
| Prototyping | ja | Nee (wel via 3e partij plugins) |
| Online styleguide inspector | Ja | Nee, (wel via 3e partij plugins) |
| Plugins | X | V |
| Symbols en styles | Ja | Ja |
| Document grid | Ja | Ja (columns en meer opties) |
| Document columns | Ja | Ja |
| Prijs | Beta versie is gratis
Adobe ID account is wel vereist |
$99 voor een jaar met updates. Na een jaar |
En de winnaar is..
Zowel Sketch als Adobe XD zijn goede UI/UX programma’s. Sketch heeft door de jaren heen veel Designers voor zich gewonnen. Blijft dit zo?
Adobe XD kan dankzij de plug-ins gedurende de gehele ontwerp workflow ondersteunend zijn. Van ontwerp tot prototyping tot overdracht, Adobe XD zal waarschijnlijk de definitieve UX-ontwerptool zijn. Het Adobe systeem is groot en zal zich niet snel uit het veld laten slaan door kleineren concurrenten als Sketch en InVision. Sketch zal in de toekomst harder moeten werken om nog relevant te blijven.
