Efficiënter ontwerpen voor websites en apps met deze 4 prototyping tools

Voor een designer die werkt bij een digitaal creatief bureau is er niets leukers dan het ontwerpen van mooie en gebruiksvriendelijke producten. Onmisbaar bij het maken van een geslaagd product is prototyping. Met de opkomst van mobiel en technologische ontwikkelingen zijn de mogelijkheden voor het maken van een prototype eindeloos. Tegenwoordig zijn er talloze frameworks en tools te vinden die jou leven als designer steeds iets makkelijker maken. Prototyping tools bieden de oplossing als het gaat om het testen van je product en het simuleren van real-life interactie met het platform waarvoor je ontwerpt.

In dit artikel komen een aantal prototyping tools aan het licht die geschikt zijn voor het presenteren van projecten tijdens pitches of presentaties.

Wat zijn prototyping tools?

Prototyping tools zijn veelal webapplicaties die draaien in je browser, en voornamelijk bedoeld voor het testen van digitale producten en platformen. Zo zijn tools als Balsamiq en Axure bekende spelers als het gaat om het maken van interactieve wireframes. Persoonlijk kies ik in de beginfase van een project nog steeds pen en papier boven alle digitale tools. De reden is voornamelijk dat dit comfortabel en snel werkt. Dit is uiteraard voor iedere designer en developer verschillend.

Waar prototyping tools voor mij aantrekkelijk worden is bij het presenteren van het project aan de klant. Of dit nu gaat om een belangrijke pitch of de laatste stappen voor het project in development gaat. Het gevoel van animatie en interactie komt pas goed tot z’n recht wanneer het product is ontworpen. Wat is er leuker om je klanten uiteindelijk een uitgewerkt prototype te laten ervaren, in plaats van een wireframe zonder enige vorm van beleving? Daarbij speelt mee dat het project een stuk concreter en tastbaarder wordt als je het (soms letterlijk) in je handen hebt.

Een greep uit de talloze mogelijkheden

Er zijn tegenwoordig talloze mogelijkheden beschikbaar voor designers waarmee animatie en interactie kan worden toegevoegd aan statische ontwerpen. Tijdens het maken van prototypes heb ik een aantal tools geprobeerd, die ik hieronder kort zal behandelen:

• Flinto
• Marvel
• InVision
• Framer

1. Flinto

Flinto is gelanceerd in 2013 en werd direct positief ontvangen door het publiek. Flinto is een relatief kleine en simpele tool gemaakt door een tweekoppig team. Desalniettemin is het een tool die je makkelijk oppakt en jou als gebruiker op een visuele manier krachtige prototypes laat ontwikkelen. Je kunt Flinto overigens 30 dagen gratis proberen maar daarna is het een betaalde dienst.

Voordelen

• Aantrekkelijke en eenvoudige editor
• Prototypes eenvoudig te delen
• Snel

Nadelen

• Gestures werken niet op mobiele devices
• Beperkte animaties beschikbaar
• Alleen mobiele prototypes (dus niet voor websites)
• Betaald

2. Marvel

Marvel is de enige prototyping tool die volledig gebaseerd is op Dropbox. Alles wat je doet wordt vanuit Dropbox geregeld. Geen verkeerde keuze, aangezien de meeste designers en digitale bureau’s Dropbox gebruiken. Daarnaast is het ideaal tijdens het iteratie proces, vanwege het feit dat alle bestanden automatisch worden geupdate en je niet constant gedwongen wordt nieuwe schermen te uploaden.

Voordelen

• Groot aanbod van animaties
• Volledige Dropbox integratie
• Gratis te gebruiken

Nadelen

• Editor is niet altijd even duidelijk

Invison GIF

3. InVision

Waarschijnlijk de meest gebruikte prototyping tool voor veel designers. Naar eigen zeggen wordt Invision gebruikt door meer dan 300.000 designers wereldwijd. Adobe, AirBnB, Evernote en Ebay is een kleine greep uit de talloze bedrijven die Invision op haar lijst heeft staan. Na het testen van deze tool denk ik ook dat het meer dan terecht is. Deze prototyping tool biedt eigenlijk alles wat je nodig hebt voor het maken van vloeiende prototypes. Invision is gratis als je één project aanmaakt. Voor meerdere projecten zul je een abonnement aan moeten schaffen.

Voordelen

• Mogelijkheid tot LiveShare
• Timerfunctie beschikbaar
• Eenvoudige editor

Nadelen

• Beperkt aantal animaties
• Dropbox integraties vereist installatie van een app

4. Framer

Een andere leuke tool is Framer. De enige tool in deze lijst waarbij enige kennis vereist is van Javascript. Framer bestaat uit twee componenten, namelijk Framer.js en Framer Generator. Framer.js is het framework waar je de interactie en animatie definieert. Framer Generator is een desktop app die eenvoudig lagen uit Photoshop of Sketch importeert naar een Framer folder. Vanuit hier begin je met het toevoegen van animaties en interacties. Framer.js is volledig open source en open voor publiek. De ontwikkelaars hechten veel waarde aan het experimenteren met animatie en interactie.

Voordelen

• Geavanceerde animaties
• Open source
• Aantrekkelijk design

Nadelen

• Kennis van Javascript is nodig
• Lastig op te pakken
• Geen eenvoudige deelfunctie

Features

1. Editor

Alle prototyping tools maken gebruik van een zogehete ‘editor’, een omgeving waar je op een eenvoudige manier je prototype in elkaar kunt zetten. In de basis tonen alle editors veel gelijkenissen, op een enkele uitzondering na. Deze uitzonderingen wil ik graag even belichten.

• Flinto is zoals eerder gezegd de ‘kleinste’ tool, maar bevat wel de meest unieke en visuele editor. Flinto laat je namelijk op een visuele manier de schermen aan elkaar koppelen door het trekken van een lijn van het ene naar het andere scherm. Dit werkt in tegenstelling tot zijn concurrentie verbazingwekkend goed. Al met al een krachtige editor die je makkelijk oppakt.

• InVision heeft een gebruiksvriendelijke editor die net als haar concurrenten de mogelijkheid biedt om gestures, animaties en transities toe te voegen aan prototypes. Dit zorgt er voor dat je realistische prototypes kunt ontwikkelen die de werkelijkheid prima nabootsen. Een handige functionaliteit die ik wil belichten is dat InVision ook een timer optie heeft. Hiermee kun je aangeven dat na x-aantal seconden je prototype een animatie uitvoert. Erg handig voor bijvoorbeeld het nabootsen van een carrousel.

• Framer gebruikt als enige tool een editor waar je animaties en interactie toevoegt door middel van code. Zoals ik eerder beschreef is enige kennis van Javascript nodig om een prototype op te kunnen zetten. Dit maakt de editor ietwat gecompliceerd voor designers die geen ervaring hebben met code.

2. Gestures, animaties en transities

Alle tools bieden een redelijk aanbod voor het toevoegen van animaties en interactie. Toch heb ik na het gebruik het gevoel dat er nog genoeg winst valt te behalen. De grootste verbetering zou het toevoegen van ‘Layers’ zijn. In deze selectie biedt alleen Framer de mogelijkheid om bepaalde elementen los van elkaar te kunnen animeren. Dit zou echt een grote verbetering zijn voor alle andere prototyping tools, zeker met het oog op het nabootsen van de werkelijkheid.

3. Sharing

Eenmaal tevreden met je prototype is het natuurlijk ideaal deze te kunnen delen met klanten en/of collega’s. Op dit gebied wordt je door geen van de tools teleurgesteld. Het delen gebeurt vrijwel altijd via SMS of e-mail, waarna de desbetreffende persoon een link ontvangt. Persoonlijk heb ik geen problemen ondervonden met het delen van prototypes. Framer is de enige tool die geen gemakkelijke deelfunctie heeft in vergelijking met de alternatieve tools.

Conclusie

Voor het gebruik van deze prototypes was ik in het begin nogal sceptisch. Bij Pixelfarm maakten wij tot op heden weinig tot geen gebruik van interactieve prototypes. In veel gevallen werkten we met statische IA documenten, wat zeker in de beginfase erg handig is.

Nu we deze vorm van presenteren hebben ervaren, lijkt het er sterk op dat we in de toekomst meer gebruik gaan maken van deze mogelijkheid. Prototyping als presentatietool geeft een andere dimensie aan het product wat je hebt ontworpen. Het is een bepaalde mate van gevoel wat je als designer in het ontwerp stopt en dit ook zo goed mogelijk probeert over te brengen. Dit soort tools zijn uitermate geschikt om de klant hetzelfde gevoel te laten ervaren.