De toekomst van UI design tools

Talent-Stijn-900x450

BLOG | Als User interface designer bij Van Spaendonck gebruik ik uiteenlopende user interface design tools (UI design tools) tijdens mijn werk. UI design tools kun je zien als het gereedschap van een digital designer. Het zijn onder andere programma’s die mij helpen tijdens verschillende stappen in het design proces. Met UI design tools ontwerp ik interfaces, prototypes en het helpt mij bij de overdracht van designs aan developers. Naast deze functionaliteiten gebruik ik UI design tools voor het maken van wireframes, gebruikerstesten, als feedback tool, en voor het maken en updaten van design systems en de documentatie hiervan.

Van Photoshop naar Sketch
In een ver verleden was Photoshop de applicatie voor UX en UI designers tot het moment dat Sketch aan de deur klopte in 2010. Nadat Sketch in 2012 een Apple Design award won is het hard gegaan met het programma van Nederlandse makelij. In 2015 ging Sketch Photoshop voorbij als meest gebruikte UI design tool. Tegenwoordig zijn er naast Sketch nog veel meer UI design tools die worden gebruikt door UX/UI designers. Een aantal voorbeelden hiervan zijn Figma, Adobe XD, Invision Studio en UXpin. Elk van deze UI tools hebben voor- en nadelen en iedere designer heeft zijn eigen voorkeur.

Beperkingen van UI design tools
Huidige (statische) UI design tools hebben allemaal verschillende mogelijkheden en functionaliteiten. Tom Johnson geeft hier in dit artikel een mooi overzicht van. Één van de belangrijkste limitaties is de output. Dit is een visuele weergaven van hoe het in de “echte” wereld zou moeten zijn. De echte wereld, dat zijn websites. Deze websites zijn opgebouwd aan de hand van het box model. Dit box model is de basis bouwsteen van iedere pagina en website. Elk element op de pagina wordt gedefinieerd aan de hand van hoe groot het moet zijn en hoe het zich moet gedragen ten opzichte van andere elementen op de pagina in een browser. Daarnaast bevat een element content. Dit kan bijvoorbeeld een stuk tekst of een afbeelding zijn. Wanneer er meer tekst wordt gebruikt wordt het element groter en alles wat ruimte in neemt duwt een ander element weer weg. Alle elementen bewegen dus in relatie tot elkaar. Dit is niet het geval bij de meeste UI design tools.

Toekomst
Om het bovenstaande probleem op te lossen kan je als designer samenwerken met een front-end developer die de productiecode maakt. Maar eigenlijk ben je dan nog steeds plaatjes aan het produceren die vervolgens in code worden omgezet door een ander. Om dit gat te dichten zijn er een aantal tools (in ontwikkeling) die de code als “the source of truth” gebruiken. Om dit werkbaar te maken voor designers maken deze tools gebruik van een meer visuele en designer vriendelijke interface. Dit is in mijn ogen een juiste insteek omdat de uiteindelijke gebruikers interactie hebben met de code en niet met een visuele representatie van een product. Een aantal (nieuwe) UI design tools die vanuit dit principe werken zijn Modulz, Webflow, SwiftUI, Interplay, Hadron, Framer X, Alva, Lona en Mason.

Als UX Designer verwacht ik in de toekomst een UI design tool die de code als “the source of truth” gebruikt in combinatie met het Google Docs model zoals Figma. Een real-time samenwerkingsplatform maakt het mogelijk om in elke fase van het design proces de juiste persoon (rol) toegang te geven tot het werkbestand. Als ik bijvoorbeeld een blogpagina ontwerp kan ik een content manager vragen om in hetzelfde bestand het aantal headings, alinea’s, afbeeldingen etcetera toe te voegen. Een volgende stap zou kunnen zijn dat er een visual designer wordt aangehaakt om de visuele uitwerking van mijn ontwerp te maken, vervolgens kan een developer uit hetzelfde bestand de productiecode halen om de pagina op te bouwen. Het grote voordeel hiervan is dat je niet op verschillende computers verschillende versies hebt rondslingeren. Iedereen in het team weet dat er vanuit 1 bestand wordt gewerkt en dat dit altijd de laatste versie is.

Ondanks dat tools belangrijk zijn in het werkproces van teams, zal iedereen altijd nauw moeten blijven samenwerken. Daarnaast is het voor designers belangrijk om zich niet vast te klampen aan één tool maar open te staan voor verandering wanneer dit bevorderlijk is voor het totale werkproces van een team.

Digital Design Talent Stijn

Stijn Schiphorst

LP’s | Voetbal | Hardlopen | Fotografie | Musea | Speciaalbier | Vintage design meubels