Log inGet started
Kiezen voor de juiste UX/UI design tool

Kiezen voor de juiste UX/UI design tool

category
Arn Houthooft, 2019/11/06

Een essentiële fase in de productie van een website is de design fase, waarin een prototype wordt gebouwd van de website. De keuze voor de juiste tool is bepalend voor het verdere verloop van het project.

De fases van een productieproces

Traditioneel verloopt het productieproces in een aantal opeenvolgende fases:

  1. Intake en briefing
  2. Design fase
  3. Development fase
  4. Feedback

In de eerste fase zal een communicatie- of marketingbureau luisteren bij de klant. Met behulp van voorbeelden, referentiesites en checklists wordt er een duidelijke briefing opgesteld. Deze briefing omvat niet alleen de voorkeuren van de klant, maar ook de ruwe structuur, sitemap, content plan, design elementen, kleurenschema, etc.

De tweede fase is minstens even belangrijk. In de design fase wordt er een web ontwerp uitgewerkt aan de hand van de briefing. Er wordt een prototype uitgetekend van hoe de website er uit zal komen te zien. In deze fase wordt alles zeer concreet. De klant krijgt een goed beeld van wat hij of zij kan verwachten. Belangrijk is dat de klant in deze fase alle nodige onderdelen, componenten of functionaliteiten aangeeft.

In de derde fase wordt het design omgezet in front-end code. Een web designer of developer zal het prototype gaan uitbouwen tot een volledig functionele website waarop bezoekers terecht kunnen. De developer zal het prototype ook moeten interpreteren. Een formulier bijvoorbeeld kan worden wegschrijven naar een CRM of worden verstuurd per email. Visueel zal zo'n formulier er hetzelfde uitzien, dus het komt aan op de interpretatie door de developer.

De laatste fase is de feedback fase. In deze fase kunnen de opdrachtgevers bepaalde correcties of wijzigingen vragen. Deze fase is voor agencies en web development bedrijven de meest frustrerende. Soms blijkt in de feedback fase dat de klant bepaalde verwachtingen had die niet werden ingewilligd. Of dat de klant ondertussen van idee veranderd is.

Door een goede keuze van design tool kunnen heel wat van deze frustraties worden vermeden. Door het bouwen van een uitgebreid prototype kan de klant namelijk beter inschatten welke opdracht hij of zij geeft aan de ontwikkelaar.

Welke UX/UI design tool kies je?

Hieronder bekijken we de voor- en nadelen van een aantal populaire design tools.

Figma

Figma is een design tool die je kan gebruiken in de webbrowser of kan downloaden. De design tool is cloud-based wat het bijzonder eenvoudig maakt om met collega's of klanten samen te werken. Daarnaast weet je dus ook zeker dat iedereen aan het werken is in het bestand dat het meest up-to-date is.

Figma heeft als grote voordeel dat een developer op een eenvoudige manier inforamtie zoals marges, afbeeldingen, fonts, font sizes, uit Figma kan halen. Daarnaast is het voor designers bijzonder intuïtief en gebruiksvriendelijke tool dat bovendien gratis is om mee aan de slag te gaan.

Voordelen van Figma:

  • Figma maakt het mogelijk om samen met anderen te werken aan hetzelfde project in de cloud. Via live collaboration kan je het werk van de designer in real-time volgen.
  • Je kan gewoon vanuit de browser werken.
  • De tool heeft een gratis versie.
  • Je kan het dynamische prototype delen met je klant of collega's via een link.
  • Developers kunnen alle informatie uit Figma halen (marges, afbeeldingen, …)
  • Het programma is bijzonder gebruiksvriendelijk.

Adobe XD

XD is een UX/UI design tool uit het ecosysteem van Adobe. Met Adobe XD kan je prototypes gaan bouwen voor websites, apps, enzovoorts. Het voordeel van deze tool is dat het feilloos samenwerkt met andere tools van Adobe zoals Photoshop en Illustrator.

Via Adobe XD heb je ook toegang tot templates die ervoor zorgen dat je niet van scratch moet beginnen. Deze templates kan je vervolgens heel eenvoudig gaan aanpassen waardoor je al snel over een uniek design beschikt.

De voordelen van Adobe XD:

  • Het behoort tot het ecosysteem van Adobe, waardoor het makkelijk samenwerkt met Photoshop en Illustrator.
  • Er zijn veel templates beschikbaar
  • De tool heeft een gratis versie.
  • Je kan het dynamische prototype delen met je klant of collega's via een link.

InVision

InVision is eveneens een krachtige prototyping tool voor websites, apps, en online toepassingen met gelijkaardige mogelijkheden zoals Figma en Adobe XD.

InVision is echter uitsluitend beschikbaar voor Mac. Het grootste voordeel van InVision ten opzichte van de andere tools is dat er een mogelijkheid is om ook animaties te gaan designen.

De voordelen van InVision:

  • Cloud-based waardoor het prototype beschikbaar is voor iedereen en dat er previews kunnen getoond worden aan klanten.
  • Door de gebruiksvriendelijke editor kan je makkelijk gestures, animaties en transities toevoegen aan prototypes. Hierdoor kan je realistische prototypes ontwikkelen die de klant een goed beeld geven van het ontwerp.

Sketch

Sketch is een designprogramma dat zich voornamelijk focust op ontwerp van online projecten. Net zoals InVision is het enkel beschikbaar op Mac.

Een aantal jaren geleden was Sketch een revolutionaire design tool, al lijken ze ondertussen ingehaald te zijn door hun concurrenten.

Voordelen van Sketch:

  • Uitgebreide bibliotheek met design resources die je kan gebruiken in jouw ontwerpen.
  • Cloud-based waardoor alles online wordt bijgehouden.
  • Alles wat je in Sketch maakt kan bijzonder snel geëxporteerd worden naar verschillende bestandsformaten.

De design tool bepaalt jouw productieproces

De design fase is een essentiële fase in het productieproces. Door een uitgebreid prototype te ontwikkelen met behulp van een UX/UI design tool, wordt de briefing naar de developer kristalhelder en krijgt de klant een goed beeld van wat hij of zij kan verwachten.

Ready to grow together?

Join the community of web design professionals who believe that time saving cloud technology enables to scale their web design business.
Get started