Ieder nieuw product wordt pas ontwikkeld nadat er een gedegen plan van aanpak is opgesteld. Of je nu een huis bouwt, een voetbalwedstrijd speelt of scriptie moet inleveren. Ieder team werkt volgens een plan. Als je een mobiele app ontwikkelt is juist deze voorbereidende fase, waarin je de structuur bepaalt, erg belangrijk. En met structuur bedoelen we een eenvoudig overzicht van alle content en elementen die je app bevat.
Het bepalen van de structuur van je app kan best tijdrovend zijn, maar met de juiste tool bespaar je jezelf veel tijd. Daarom worden wireframing en mockup tools steeds populairder. Mobile app wireframes besparen je niet alleen tijd en geld, ze zorgen er ook voor dat developers de user experience niet uit het oog verliezen.
Wat maakt een goede wireframe of mockup tool?
Goeie vraag! Er is namelijk niet een pasklare oplossing als het om wireframing gaat. Ieder team werkt met een eigen ontwerpproces en mobiele app, dus hoe weet je wat je nodig hebt voor jouw app? Voor starters is het belangrijk om voor software te gaan die up-to-date is, geen zorgen, in ons overzicht staan alleen betrouwbare en up-to-date tools. Daarnaast is het belangrijk dat de software een UI kit heeft of de mogelijkheid je UI kit te uploaden.
Gratis Whitepaper: OPTIMALISEER DE MOBILE EXPERIENCE MET IN-APP FEEDBACK
Een handige gids over in-app feedback voor mobile product owners en mobile marketeers.
Hieronder vind je onze top 15 favoriete Mobile App Wireframing & Mockup Tools. Kijk en vergelijk en ontdek zo welke tool bij je past.
1. Justinmind
Justinmind is een alles-in-één tool waarmee je uitgebreide wireframes en prototypes van apps maakt. Het richt zich meer op het ontwerp van mobiele apps dan de meeste design tools op de markt. Je krijgt handige tips terwijl je bezig bent en er komt geen programmeerwerk aan te pas. Je kunt makkelijk interactieve wireframes maken door animaties toe te voegen. Er zijn enkele standaard templates die je aan kunt passen met de drag-and-drop interface en je kunt online je wireframes met anderen delen.
Prijzen: Vanaf $19/maand.
Website: www.justinmind.com
2. Mockplus
Met deze desktop applicatie maak je snel en eenvoudig een prototype van je mobiele app. Mockplus is gebruiksvriendelijk en je hoeft geen expert te zijn om hiermee te kunnen werken. Je vindt hier templates voor Android, iPad en iPhone, zodat je met de juiste formaten en specificaties werkt. Je kunt kiezen uit meer dan 200 elementen en meer dan 3000 iconen en dankzij de simpele drag-and-drop builder heb je in een handomdraai een prototype ontwikkeld.
Prijzen: $199 (Pro) per jaar/ $399 (onbeperkt) per gebruiker voor altijd.
Website: www.mockplus.com
3. Balsamiq
Balsamiq Wireframes is een populaire wireframing tool voor mobiele apps en maakt ook gebruik van een drag-and-drop editor. Ook kun je sketches maken tijdens het brainstormen en kun je hier de mooiste presentatie van je wireframes mee maken. Je kunt deze tool 30 dagen gratis proberen, voordat je een abonnement afsluit. Als je een flexibele, handige en snelle tool zoekt voor je wireframes kan dit zomaar eens de beste oplossing zijn.
Prijzen: $9 (2 projecten) / $ 49 (20 projecten) / $199 (200 projecten) per maand.
Website: www.balsamiq.com
4. Miro
Miro is een gebruiksvriendelijke tool, gericht op het remote samenwerken. Het is een whiteboard waarop je samen aan mooie producten werkt. In de wireframe template zie je alle elementen van een mobiele app en kun je de structuur en functionaliteit van je app verder uitwerken. Je kunt het standaard template volledig aanpassen en naar eigen wens inrichten. Zoek je een tool die de samenwerking met je team makkelijker maakt, dan is Miro geschikt voor jou.
Prijzen: Verschillende plannen; van gratis tot $8 of $16 per gebruiker per maand of een op maat gemaakt enterprise plan.
Website: www.miro.com
5. Moqups
Moqups is een op webgebaseerd platform waar je wireframes mee maakt voor zowel web als mobiele apps. Het grootste voordeel van deze tool is dat je het overal ter wereld kunt gebruiken. Moqups was in eerste instantie gratis voor developers. Het is een handige tool om wireframes en mockups mee te maken en als je er nog niet zo in thuis bent, zijn er templates die je direct kunt gebruiken. Je betaalt afhankelijk van het aantal gebruikers.
Prijzen: $20 (voor 3 gebruikers, $7 per extra gebruiker)/ $13 (per losse gebruiker)/ Custom (enterprise) per maand, jaarlijks gefactureerd.
Website: www.moqups.com
6. InVision
InVision is een geweldige tool voor designers. Maak je graag wireframes op een whiteboard zodat je team makkelijk mee kan kijken en je er samen aan kunt werken? Dan is dit een handige tool voor jou. Je maakt eenvoudig interactieve mockups en als je ze met je team deelt, kunnen ze direct tips en opmerkingen achterlaten. Je kunt real-time to-do lijstjes bijwerken en met anderen samenwerken.
Prijzen:: Gratis.
Website: www.invisionapp.com
7. Fluid UI
Fluid UI is een toonaangevende en populaire wireframing en mockup tool. Deze tool maakt gebruik van de laatste technologieën, zoals HTML5, JavaScript en CSS. Je ontwerpt een lay-out door de elementen uit de library naar de juiste plek te slepen. Maak je projecten visueel aantrekkelijk en interactief door links en grafieken toe te voegen. Wat deze tool uniek maakt is dat je als gebruiker direct aan het UI design kunt werken vanaf je mobiel, tablets of desktop.
Prijzen: $8.25 (individueel) / $19.08 (pro) / $41.58 (team) per maand.
Website: www.fluidui.com
8. Pidoco
Pidoco is cloud-based software met handige templates, interactieve elementen en sketch opties zodat je makkelijk wireframes kunt maken. Deel je wirefreames met je teamleden en met hun aanpassingen werk je snel naar het beste resultaat toe. Je kunt Pidoco integreren met Jira, Planio en nog meer handige tools via hun API’s.
Prijzen: Gratis met beperkte opties / $9.99 (Basic)/ $59 (Pro)/ $199 (onbeperkt) per maand.
Website: www.pidoco.com
9. Protoshare
ProtoShare is een op webgebaseerd wireframing en mockup tool. Maak interactieve wireframes voor mobiele apps en websites en gebruik custom CSS om je eigen elementen toe te voegen. Ontwerp je eigen templates en gebruik deze dan voor meerdere pagina’s of projecten.
Prijzen: $29 (standaard) / $49 (professional) / $59 (business) per persoon per maand.
Website: www.protoshare.com
10. Framer
Framer is een tool mockup tool waarmee je interactieve designs voor je website of mobiele app maakt. Vervolgens kun je van het ontwerp ook een prototype maken zodat je een goed beeld krijgt van hoe het straks zal werken. Creëer de mooiste designs met de elementen en eindeloze mogelijkheden die Framer biedt, boots na wat er gebeurt als iemand op een button drukt en deel je ontwerpen eenvoudig met je team.
Prijzen: Gratis / Pro $19 per editor/maand / Enterprise op aanvraag.
Website: www.wireframe.cc
11. Axure
Axure is een wireframing en mockup tool gericht op enterprise bedrijven. Met leuke features als animaties en aangepaste views kun je een user experience flow opzetten. Maakt notities bij de wireframes en bewaar deze notities ook in je projecten. Zoek je een tool voor wireframing, prototyping en schematische weergaven dan is dit een goede keus.
Prijzen: $29 (pro) / $49 (team) $99 (enterprise) per gebruiker per maand.
Website: www.axure.com
12. UXPin
UXPin is een wireframing, UX design en mockup tool met handige features zodat je het werk makkelijk kunt delen, reviewen of opmerkingen kunt achterlaten. Ook kun je taken toekennen, om toestemming vragen en e-mail of Slacknotificaties instellen. Zo kun je zo goed mogelijk samenwerken. Sleep je iconen, custom UI-elementen en afbeeldingen naar je wireframe. Als administrator bepaal je wie welke taken mag vervullen welke rechten iemand over een bepaald project heeft.
Prijzen: Gratis/ $29 (Pro)/ $49 (Team)/ Custom (Enterprise, maandelijks gefactureerd).
Website: www.uxpin.com
13. Mockflow
Brainstorm over de UI op het whiteboard en breng concepten tot leven met de handige editor. Met deze tool ontwerp je wireframes, werk je eenvoudig samen met andere teams en maak je een handige styleguide zodat de UI van je merk vastligt. Je kunt gebruik maken van de standaard templates en losse elementen die beschikbaar zijn.
Prijzen: Gratis (starter)/ $14 (premium)/ $30 (TeamPack) / $160 (Enterprise).
Website: www.mockflow.co
14. Sketch
Sketch is een geweldige design tool om samen met je team aan vectorbestanden en prototypes te werken. De tool heeft een designtoolkit met verschillende elementen om een app mee te bouwen. Je kunt de iconen direct gebruiken en je resultaten handig delen binnen je community. Ook kun je data aan je design toevoegen, zodat je een goed beeld krijgt van de user flow.
Prijzen: Voor persoonlijk gebruik, gebruikers betalen $99/jaar. Of per device (grote licentie) voor $89/jaar/device.
Website: www.sketch.com
15. MarvelApp
Als laatste lichten we de MarvelApp uit. Dit is een multifunctioneel design platform waar je wireframes voor je mobiele app of andere devices mee maakt. Met de drag-and-drop feature kost het geen enkele moeite een design te maken en je kunt je prototypes helemaal echt laten overkomen door triggers, hoovers, swipen en klikken toe te voegen.
Prijzen: Vanaf $12/maand (Pro pakket).
Website: www.marvelapp.com
Extra tip voor handige tools
Ben je groot fan van Photoshop of gebruik je Adobe InDesign als publishing tool? Dan kun je deze ook gebruiken als wireframing of mockup tool. Photoshop is misschien niet speciaal ontwikkeld om wireframes mee te maken, maar dat wil niet zeggen dat het niet kan. Met de verschillende lagen en handige koppeling met andere tools kun je hier prima mee uit de voeten. En InDesign richt zich al lang niet meer alleen op print, je kunt er ook interactieve PDF’s en UI-graphics mee maken.
Begin vandaag nog met wireframing!
Alles draait om de user experience bij het ontwerpen van een mobiele app. Als de UX niet optimaal is zul je niet opvallen tussen alle andere, miljoenen apps die matig functioneren en presteren. En dat wil je natuurlijk niet. Gebruik daarom tijdens het designproces de juiste tools om de wireframes van de app te creëren. Er is niet één goede oplossing of tool en je kunt ook prima met meerdere tools werken. Misschien begin je wel met een op webgebaseerde app en stap je later over op een cloud-based app voor meer gedetailleerde wireframes en iteraties.
Is je mobiele app helemaal klaar? Dan is het tijd om de user experience te verbeteren. De UX van je mobiele is constant in ontwikkeling. Door in-app feedback te verzamelen, krijg je inzicht in waar je staat en wat er verbeterd moet worden. Door consequent feedback te verzamelen met bijvoorbeeld Mopinions platform krijg je inzicht in wat je klanten nodig hebben en verwachten.
Meer over Mopinion
Mopinion is een alles-in-een user feedback software, waar je dus niet alleen feedback mee verzamelt, maar ook mee analyseert en opvolgt. Dankzij het real-time dashboard zie je in de grafieken en overzichten wat de gebruikers van je digitale kanalen (website, mobiele apps and e-mail campagnes) vinden.
Handig om te weten. Wat biedt Mopinion software?
- Feedbackformulieren (passieve en actieve) voor alle digitale kanalen
- Visuele feedback
- Routing. Het antwoord bepaalt de vervolgvraag.
- Diepteanalyses, zoals text analytics, sentiment analytics, smart labeling etc.
- Uitgebreide data visualisatie, aanpasbare dashboards en filteropties in de charts.
- Naadloos data doorzoeken
- Uitgebreide opties voor taakbeheer
Klaar om Mopinion in actie te zien?
Wil je meer weten over hoe je feedback verzamelt en analyseert met onze feedback tool? Probeer het 14 dagen gratis! Op zoek naar wat meer persoonlijke begeleiding? Plan dan een online demo in met één van onze feedback specialisten.
