Een mogelijke nieuwe stap in het UI design proces bij Coffee IT

Stel. Wij ontwikkelen een app voor onze klanten. Dan start vrijwel elk project met het ontwikkelen van een klikbaar prototype. Het ontwerpen van een klikbaar prototype is als het ware het fundament van de app waarop belangrijke beslissingen gemaakt worden. Deze beslissingen hebben alles te maken met de uiteindelijke gebruiksvriendelijkheid van de app en de bijbehorende functies. Dit is ons design-proces geweest in de afgelopen jaren en is geperfectioneerd door ons design team.

Onze designs worden ontworpen met het programma Sketch, en daarna klikbaar gemaakt en opgeleverd in InVision. Dit is de afgelopen jaren een werkwijze geweest die perfect aansloot op de behoeftes van onze klanten. Het geeft een zo duidelijk mogelijk beeld van het eindproduct. Toch gaan we misschien een nieuwe weg inslaan. Als innovatieve ontwikkelaars én app-designers staan we vooraan wanneer er nieuwe tools beschikbaar zijn. Dit keer is er een new kid on the block voor het design team van Coffee IT. Wij exploreren daarom met de UI design tool: Figma. 

Voordat wij ingaan op onze nieuwe mogelijke ontwerp tool, is het goed even kort toe te lichten hoe ons designproces eruit ziet. Al ruim vijf jaar ontwerpt ons team van designers de meest uiteenlopende designs. Doordat wij apps maken voor een breed scala aan diverse klanten en industrieën, moet ons design team over een goede dosis creativiteit en inlevingsvermogen bezitten. Al tijdens de ontwerpfase beginnen wij met het inventariseren en integreren van de huisstijl, logo’s, kernwaarden en alle bijbehorende zaken die de klant wilt uitstralen met de app. Door onze specialisatie in app ontwikkeling kennen wij de vereisten van een onderscheidend en succesvol app design. Daarnaast wordt het design van de app getest met user tests en verder geoptimaliseerd.

Globaal kent het design proces van een app er zo uit:

1: De schetsen (conceptvorming)
2: Prototypes en stijlimpressie
3: Final design (release time!)

De schetsen

Onder de schetsfase valt de inventarisatie van de wensen van de klant en de behoeften van de eindgebruiker van de app. Op basis van de eerste gesprekken worden schetsen gemaakt in de designtool Sketch*. Tijdens deze fase wordt de nadruk gelegd op de algehele toon van de app en gekeken of alle elementen logisch zijn opgebouwd voor de gebruiker. Ook is dit een goed moment om na te gaan of wij de visie van de opdrachtgever goed hebben begrepen, en die visie kunnen vertalen naar een succesvolle app.

*Wist je dat Sketch is opgericht in 2010 door een Nederlands bedrijf genaamd: Bohemian Coding. In 2013 won het de Apple Design Awards. Het is nog steeds een van de meest gebruikte design toolkit door UX en UI designers.

De prototypes en stijlimpressie

Dit is het gedeelte waar onze designers pas echt alle creativiteit los kunnen laten. De eerste prototypes worden gemaakt aan de hand van de schetsen in Sketch. Na wat over en weer contact met de opdrachtgever wordt het idee van de app zichtbaar in klikbaar gemaakt in InVision. De opdrachtgever heeft ook toegang tot de prototypes en wireframes, dus er kan snel worden geschakeld. Op basis van de huisstijl, documentatie en branding wordt de stijl bepaald.

Final design

De puntjes worden op de i gezet en de champagne is in zicht. Een volledig en klikbaar ontwerp laat zien hoe de app er straks uitziet. Het uiteindelijke design kan worden getest, door het team en door gebruikers. Het resultaat: een zo goed als kant en klare visie van het eindproduct in een klikbaar prototype.

Niet alleen wij als app ontwikkelaar innoveren, het technische veld waarin wij werken veranderd minstens zo snel. Door de jaren heen is er veel veranderd aan het ontwikkelproces. InVision en Sketch zijn niet op alle punten snel genoeg mee gegaan met al deze veranderingen wat ons betreft. Zo is er geen support om Dark Mode te ontwerpen zoals het ook door onze programmeurs geïmplementeerd moet worden. Daarnaast kunnen we in deze tools geen animaties en scherm overgangen ontwerpen om de programmeurs en klanten een nog duidelijker beeld te geven van de visie van het design team.

Het prototype InVision wordt door de app ontwikkelaars gebruikt als informatiebron. Zo kunnen ze de lettertypen/fonts, kleuren en afstanden zien die zij uiteindelijk in de app moeten bouwen. Echter, doordat Sketch en InVision niet optimaal met elkaar communiceren is dit niet altijd mogelijk. Wanneer Sketch bijvoorbeeld een nieuwe functionaliteit toevoegt, dan is InVision hier niet altijd op ingericht. Al snel kwam de vraag vanuit ons ontwikkelteam of er niet een efficiëntere tool was voor de overdracht, omdat InVision steeds vaker onduidelijkheden gaf over informatie die voor het ontwikkelteam cruciaal is. Ook onze UX en UI designers zijn gebaat bij een programma met meer functies. Zowel Sketch als InVision hebben de laatste jaren wat stil gestaan met nieuwe innovaties, terwijl de concurrentie ze heeft ingehaald.

Het is tijd om iets nieuws te proberen. We hebben een tool gevonden die Sketch en InVision samenvoegt in één product: Figma. Deze interactive UI design tool combineert design, prototyping en oplevering naar het developersteam in één. Dit maakt deze tool wellicht efficiënter voor zowel ons interne app ontwikkelproces als naar onze klant. 

Er zijn meerdere voordelen van Figma:

• Alle designs staan in de cloud
• Meerdere designers kunnen tegelijkertijd aan een design werken
• De klikbare prototypes kunnen animaties hebben
• Ondersteuning voor dark mode in een design
• Het ontwikkelteam heeft toegang tot het volledige design
• Het werkt ook op Windows en niet alleen om Mac zoals Sketch
• Design schermen kunnen door het team en door klanten aan Jira issues worden toegevoegd voor meer duidelijkheid

Sketch versus Figma, welk programma is nu het meest geschikt als UI design toolkit? De strijd is hevig gaande tussen de designers en er zijn voorstanders voor beide kampen. En terecht, beide programma’s zijn uitstekende tools voor designers om mee te exploreren en gebruiksvriendelijke ontwerpen te maken. Het echte onderscheid tussen de twee komt wat ons betreft pas tot zijn recht als we het hebben over het ontwerpen van complexe wireframes en designs.

Figma is in 2015 ontstaan en is een vector-based design software die het mogelijk maakt voor designers én ontwerpers om tegelijkertijd aan een project te werken. Dit is wat ons betreft de voornaamste reden om over te stappen op Figma als ons hoofd UI design tool en Sketch te vervangen. Daarnaast is het niet enkel voor de Apple gebruikers toegankelijk. Elementen waar Figma sterk in is zijn:

• Graphic design
• Prototyping
• UI & UX design
• Templates
• Wireframing

Combineer dit samen met ons eerder genoemde argument: het samenwerken, de snelle werkflow en de ruimte besparing op je harde schijf (UX en UI designers kennen dit probleem), en je hebt een slimme design tool. Een klein minpuntje van Figma: het aantal aangeboden plugins van Figma is erg gelimiteerd ten opzichte van bijvoorbeeld Sketch.

Sketch daarentegen is niet voor niets genomineerd voor beste design app door Apple en staat al even bekend als ’the digital design tool’. De design resources van Sketch zijn gigantisch. De library van Sketch maakt het mogelijk om gemakkelijk en snel programma’s of projecten op te starten, zonder dat je helemaal bij het begin moet beginnen. Daarnaast heeft Sketch een enorme community, cloud support en eindeloos materiaal aan inspiratie.

We stappen niet direct over van ons huidige werkproces met Sketch en InVision naar Figma. We zullen eerst testen of Figma daadwerkelijk efficiënter is voor ons en onze klanten Ons huidige werkproces heeft zich bewezen als een goede en gevalideerde methode. Als blijkt dat de nieuwe design tool Figma te weinig voordelen geeft dan blijven wij bij ons huidige werkwijze. Onze UX en UI designers zullen dus eerst een trial uitproberen met de nieuwe tool voordat we definitief overstappen.

Grote kans dat je zo geïnspireerd geraakt ben na het lezen van dit artikel dat je zelf met Figma aan de slag wilt. Je kunt Figma gratis downloaden voor een proefperiode via deze link. Wil je meer weten over ons design- en app ontwikkel proces of kan jouw app wel een update gebruiken? Neem dan vrijblijvend contact op met ons team, wij helpen je graag verder.