Facebook pixel

 

 

Design & prototyping tools voor apps (deel 1)

  • zaterdag 23 januari 2016, geschreven door Marco

Soms wordt ons gevraagd wat iemand nodig heeft om een goede app te bouwen, welk 'programma' wij daarvoor gebruiken. Het belangrijkste ingrediënt voor een succesvolle app is een idee dat relevant en duidelijk van toegevoegde waarde is voor de gebruiker en de organisatie zelf. Uiteraard valt of staat het geheel met de executie, een goede app bouwer met veel ervaring en kennis is in ieder geval een goed startpunt. Daarnaast zijn er vele verschillende tools die op een bijdrage kunnen leveren aan het proces. In dit blog vertellen wij jullie meer over de tools die wij inzetten bij het bouwen van een app.

Dit is deel één 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) en teamcommunicatie, monitoring & analyse (deel 3).

Concept, een idee voor een app

Je hebt een goed idee voor een app - althans jij bent er van overtuigd dat het een goed idee is - maar dan is het raadzaam om toch eerst eens om je heen te gaan rondvragen en verifiëren of het ook werkelijk een goed idee is. Anders gezegd: een belangrijke stap in het proces is marktonderzoek. Hoe saai het ook klinkt, deze stap kan al bepalend zijn voor het succes van jouw app. Want stel dat jouw briljante idee echt briljant is, maar slechts interessant voor 150 mensen op onze planeet die maar € 1,99 voor de app over hebben? Toch best een uitdaging als de realisatie van jouw briljante idee wel begint bij zo'n € 25.000,- voor de ontwikkeling alleen. 

Kortom, vraag het aan de beoogde doelgroep. Een simpele eerste stap zou het uitzetten van een goede enquête kunnen zijn. Als wij een enquête maken of iets met formulieren doen gebruiken wij vaak een van de onderstaande oplossingen:

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 deze Typeform tutorial eens om een goede indruk te krijgen van Typeform.

met Typeform kun je gemakkelijk formulieren opstellen

Google Forms

Ook met Google Forms - of Google Formulieren - kun je eenvoudig en snel je eigen enquête opstellen en uitsturen. Na de nieuwe update zien de formulieren er op zowel desktop als mobiel goed uit en de tool werkt snel en simpel, zoals we van Google gewend zijn. De resultaten worden realtime verwerkt in een mooi visueel rapport. Uiteraard is ook deze data terug te vinden in een Google Spreadsheet.

Visueel ontwerp maken - wireframing & design

Gaaf zeg, jouw idee wordt beschouwd als het ei van Columbus en volgens jouw doelgroep moet dit idee echt 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 uitschetsen en dan op zoek gaan naar een partij die jouw idee en concept verder kan uitwerken, of je gaat zelf aan de slag. 

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.

Sketch maakt design en wireframes maken eenvoudig

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.

Prototyping

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 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 een 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).

Zelf een app laten ontwikkelen? Kom gerust eens langs voor een kop koffie of vraag geheel vrijblijvend een offerte aan.

Ook interessant om te lezen

webuildapps blog 2016 12 tech trends strategie 2017 webuildapps

De 10 strategische tech-trends van 2017

  • dinsdag 13 december 2016

Met de kerst achter ons staat inmiddels 2017 voor de deur te popelen om haar deuren te openen. Op het gebied van tech staan ons dan ook een paar gave ontwikkelingen te wachten. Zo kunnen wij straks …

webuildapps blog 2015 09 webuildapps app met toegevoegde waarde

Best practice: zo creëer je een succesvolle app

  • zaterdag 19 september 2015

​ Apps: voor veel mensen – meer wel dan niet – maken deze handige programmaatjes onderdeel uit van het dagelijks leven. Er valt een duidelijk onderscheid te maken tussen de toepassing van apps. En …

webuildapps blog 2015 07 webuildapps vr oculus rift

Virtual Reality met Oculus Rift Developer Kit 2

  • dinsdag 21 juli 2015

Het is alweer maanden geleden dat er een pakketje binnenkwam waar het team rijkhalzend naar uitkeek; Oculus Rift Developer Kit revision 2. Een virtual reality bril die de techniek van virtuele …

ZOEK JE EEN PROFESSIONELE APP BOUWER MET VERSTAND VAN TECHNIEK ÉN BUSINESS?

Wij luisteren naar jouw verhaal en samen gaan we aan de slag om waarde te creëeren voor jouw business. Vanaf de eerste gedachte tot ver voorbij de realisatie. Neem contact op voor een kennismaking of vraag direct een offerte aan!