Design & prototyping tools voor apps (deel 1)

Dit is deel één in een serie van drie blogs over waardevolle tools bij het ontwikkelen van apps. Bekijk ook de andere delen: bouwtools en versiebeheer (deel 2) en teamcommunicatie, monitoring & analyse (deel 3).

Je hebt een goed idee en wil een app laten maken, althans jij bent er van overtuigd dat het een goed idee is. In deze fase is het raadzaam om eens rond te vragen of jouw idee ook door anderen als goed wordt ervaren. Zo kan je verifiëren of er interesse is en in welke mate.

Anders geformuleerd: een belangrijke stap in het proces van app realisatie is marktonderzoek. Deze stap kan bepalend zijn voor het uiteindelijke succes (of gebrek aan succes!). Als app ontwikkelaar helpen we je hier graag bij. Stel kritische vragen; het kan goed zijn dat jouw app idee daadwerkelijk briljant is, maar dat er wereldwijd slechts 150 mensen zijn die een klein bedrag voor jouw app willen neerleggen. Dat is een forse domper als de ontwikkeling van jouw app idee begint bij een prijskaartje van zo'n € 25.000,-.

Kortom, doe onderzoek bij je beoogde doelgroep. Een simpele eerste stap is bijvoorbeeld het uitzetten van een goede enquête. Zo kan je snel verschillende meningen verzamelen en aan de hand daarvan jouw idee bijstellen waar nodig. Wanneer we bij Webuildapps een enquête maken of iets met formulieren doen gebruiken wij vaak de onderstaande oplossing:

Typeform.com

Met Typeform kun je formulieren vormgeven die je kunt laten invullen door jouw doelgroep. De formulieren van Typeform zien er strak uit en werken prettig op bijna alle devices. Je kunt zelf eenvoudig een formulier opbouwen en vormgeven maar je kunt er ook voor kiezen om door te bouwen op de talloze templates die ze beschikbaar stellen.

De resultaten komen uiteindelijk in een handig rapport terecht en uiteraard is alle data naar een spreadsheet te exporteren. Bekijk ook dit Typeform tutorial eens om een goede indruk te krijgen van Typeform.

Je hebt jouw marktonderzoek achter de rug en volgens jouw doelgroep moet dit idee écht op de markt komen. Je weet ongeveer hoe de app eruit moet komen te zien en dus wordt het tijd om deze eens verder uit te gaan schetsen en vormgeven.

Een goed startpunt is op papier de belangrijkste schermen uittekenen en dan op zoek gaan naar een partij die jouw idee en concept verder kan uitwerken, of zelf aan de slag gaan.

De eerste stap is het maken van wireframes en een ontwerp van de app. Voor het wireframen en ontwerpen van de app kun je talloze tools gebruiken, onderstaand enkele van onze favorieten:

Sketch - Sketchapp.com

Wij zijn fan van Sketch omdat - na wat experimenteren - iedereen met Sketch aan de slag kan om te designen en wireframes te maken. Geen overbodige functionaliteit en to-the-point aan de slag met wat je wilt doen.

Om het nog makkelijker te maken bestaat Sketch app sources als community waar je gratis veel goede basismaterialen kunt vinden als kickstart voor jouw project. Ook via UI8 kun je (tegen een minimale vergoeding) veel resources vinden.

Adobe Creative Cloud (Adobe Illustrator & Photoshop)

Zeker voor de wat meer ervaren ontwerpers is Creative Cloud zeer geschikt. Bijna iedereen kent de tools van Adobe wel omdat zij al jaren een van de meest gebruikte softwareleveranciers ter wereld zijn. Zeer krachtige tools maar wel met iets van een leercurve en een prijskaartje.

Kijk ook zeker eens bij Axure, Balsamiq of Justinmind voor laagdrempelige wireframing.

Gaaf, jouw idee krijgt steeds meer vorm en kleur nu zodat je er al een gevoel bij krijgt. Maar om jezelf tijd en geld te besparen tijdens de app ontwikkeling en afronding raden wij aan om een klikbaar prototype te maken. Met een prototype kun je verifiëren of het ontwerp klopt en de workflow (UI) en ervaring van de gebruiker (UX) al goed testen.

Wij werken graag volgens het principe 'think-create-test-improve' en prototyping is daarin een methode die ons helpt om in weinig tijd veel informatie te verzamelen over de app.

Bij prototyping visualiseren we een smartphone en maken we de ontworpen schermen klikbaar. Waarnodig voegen we invulbare velden en animaties toe zodat we alle aspecten van de app kunnen testen zonder dat we deze echt bouwen. Dit prototype testen we samen met de doelgroep om te verifiëren of het idee en de uitvoering goed bij elkaar aansluiten zodat we met zekerheid aan de slag kunnen tijdens de echte bouwfase.

Dit zijn de tools die wij bij het prototypen gebruiken:

Invision app

Eigenlijk is Invision zoveel meer dan alleen een prototyping tool. Invision focust zich volledig op het ontwerp en het verbeteren hiervan samen met collega's en klanten, maar ook met jouw doelgroep. Ideaal om continu feedback te kunnen krijgen op het ontwerp en prototype.

Invision heeft een goede integratie met Sketch en via Invision Sync of Dropbox kun je een snelle - bijna realtime - workflow opbouwen die automatisch het protoype update zodat iedereen naar de actuele versie kijkt.

Adobe Experience Design (Adobe XD)

Ook Adobe heeft een fijne tool voor ontwerpen en prototypen van interfaces. Adobe XD. Met name voor de moderne UI/UX designers die goed bekend zijn met het gamma aan producten van Adobe is XD een fijne tool. XD is nog volop in ontwikkeling maar door de snelheid verbetert het pakket in hoog tempo en is het op dit moment misschien wel een van de fijnste tools voor prototyping.

Flinto

Met Flinto kun je eenvoudig de gemaakte ontwerpen in de app plaatsen, de verbindingen tussen verschillende knoppen en schermen opzetten en het resultaat makkelijk testen op je smartphone. Ideaal om snel een gevoel bij de ontwerpen te kunnen krijgen en daarmee een goede test voor de app zelf zonder te programmeren.

Voor het prototypen zijn ook Axure en Justinmind zeker het proberen waard. Belangrijk is dat je op een prettige (en snelle) manier tot concrete resultaten kunt komen die je bij een opdrachtgever kunt presenteren. Een afbeelding zegt meer dan een 1000 woorden maar een interactieve beleving is onbetaalbaar én bespaart geld.

Naast bovenstaande tools raad ik aan om ook zeker eens bij Framer.js, Prott of Fluid UI te kijken.

Dit is deel 1 in een serie van drie blogs over waardevolle tools bij het ontwikkelen van apps. Bekijk de ook de andere delen: bouwtools en versiebeheer (deel 2), of teamcommunicatie, monitoring & analyse (deel 3).