Belangrijke mock-up- en wireframe-tools: een overzicht

De Axure mock-up- en wireframe-tool is geschikt voor zowel simpele wireframes als meer gedetailleerde prototypes. Met een zeer uitgebreid arsenaal aan gebruikersfuncties, behoort Axure tot de professionelere prototyping tools. Als beginner is het aan te raden een aantal trainingsuren in te plannen om alle functies door te nemen, voor een goed overzicht van de mogelijkheden.

De mock-up-tool van Axure biedt een ruime keuze aan kant-en-klare elementen, die allemaal aan te passen zijn. Aangezien Axure ook de mogelijkheid geeft om eenvoudige interactieve elementen te installeren in de vorm van tooltips, flyout-navigatie en lightboxes, is deze prototyping tool een goed alternatief voor de zogenaamde clickdummy. De uitleg die met de commentaarfunctie wordt toegevoegd aan de mock-up kan als CSV of PDF geëxporteerd worden. Dit biedt een ideale basis voor het geschreven concept. Ook kan je met Axure gebruikmaken van het programma Teamwork; meerdere gebruikers kunnen tegelijkertijd aan het prototype werken, zonder de gemaakte aanpassingen te overschrijven.

Ook bij Axure kan gebruik gemaakt worden van een proefperiode van 30 dagen. Naast de verschillende aanbiedingen voor de Pro, Team en Enterprise versies, is het gebruik van Axure voor studenten gratis.

De mock-up-tool Pencil is een opensource-project en de enige volledig gratis desktopversie in onze lijst. Hoewel het programma licentievrij kan worden gebruikt, bevat het alle belangrijke functies die nodig zijn om een professionele mock-up te creëren. Ook Pencil beschikt over een enorme selectie sjablonen. In totaal zijn er meer dan 300 elementen te vinden – meer dan in de andere prototyping tools. Op de website van Pencil zijn nog vele andere bouwstenen te vinden. Naast de elementen en vector-gebaseerde clipart-iconen, is het ook mogelijk om diagrammen en schema’s direct in het programmavenster te maken.

Ondanks het grote aantal functies, zijn gebruikers snel wegwijs met de duidelijke gebruikersinterface. Het intuïtieve ontwerp en een handige drag-and-dropeditor zorgen voor een snelle introductie. Door meerdere pagina's te maken en aan elkaar te koppelen, creëer je eenvoudig een prototype van de toekomstige website of applicatie.

Als opensource mock-up-tool is Pencil gratis, maar hierdoor is een betrouwbare, continue ontwikkeling helaas niet gegarandeerd. Sinds 2013 zijn er geen updates of nieuwe versies meer beschikbaar gesteld. Ondanks dit nadeel en de minder goede documentatie, blijft Pencil een goed alternatief voor betaalde mock-up- en wireframing-tools. De gratis desktop-applicatie is beschikbaar voor Windows, Mac en Linux. Daarnaast is er een browserextensie voor Mozilla Firefox.

Moqups is een van de meest populaire mock-up-tools en alleen beschikbaar als webapplicatie. Met Moqups creëer je op een snelle en effectieve manier een mock-up in een online omgeving. Wanneer je de HTML5-app opent, kun je direct aan de slag. Ook hier maak je je dankzij een duidelijk menu, een overzichtelijke structuur en een drag-and-dropeditor het programma snel eigen.

Vanuit een selectie van kant-en-klare frames en sjablonen selecteert de gebruiker passende elementen en organiseert en configureert deze naar wens. Moqups valt op door de zeer uitgebreide configuratiemogelijkheden. Dankzij de vele functies, extensies en designmogelijkheden, is zowel het ontwerp van losse elementen als het creëren van volledige mockups mogelijk. De mock-up-tool biedt minder standaard elementen dan andere vergelijkbare applicaties, maar heeft daarentegen wel weer veel aanpasbare functies. Ook in Moqups is het mogelijk om meerdere parallelle pagina's te maken en deze aan elkaar te koppelen, en dit maakt de tool zeer geschikt voor het maken van eenvoudige clickdummies van het website design.

De prototyping tool Mockingbird is ook alleen beschikbaar als webapp. Het is een ideaal programma voor beginners, maar net zo goed geschikt voor geavanceerde mockups.

Met Mockingbird sleep je eenvoudig bestaande elementen naar de juiste plek voor het creëren van een mock-up. In totaal zijn er 90 verschillende modules en elementen beschikbaar. Mockingbird overtuigt door een helder ontwerp en een duidelijke, logische structuur. Daarnaast beschikt de mock-up-tool over een praktische zoekfunctie. De gebruiker kan meerdere pagina's aanmaken, maar helaas is het niet mogelijk deze te verbinden of te koppelen.

De Mockingbird-tool beschikt over een interessante feature: een grid-systeem. Dit raster wordt over alle gemaakte pagina’s geplaatst, om snel en eenvoudig eenzelfde structuur aan te houden voor alle pagina’s. Door dit al in een vroeg stadium toe te passen, kun je tijdens de uitwerking van de lay-out veel tijd besparen. Mockingbird is verkrijgbaar in een gratis versie. Echter, net zoals bij Moqups, zijn veel belangrijke kenmerken – zoals opslag en export – alleen beschikbaar in de betaalde versie. In het basispakket kan maximaal aan drie projecten gewerkt worden.

Wireframe.cc is een relatief minimalistisch hulpmiddel voor het maken van solide, heldere wireframes. In vergelijking met de andere wireframing-tools in onze lijst, is Wireframe.cc vrij beperkt. Vandaar dat deze tool meer geschikt is voor een ongecompliceerd prototype. Je kunt in een mum van tijd overzichtelijke pagina’s maken, zonder te hoeven kiezen uit een grote selectie bestaande elementen.

Met Wireframe.cc sleept de gebruiker eenvoudig een placeholder in de gewenste grootte en vorm naar de juiste plek. In het keuzemenu dat verschijnt, selecteer je het juiste elementtype, bijvoorbeeld een slider, tekstveld of beeldelement. Dankzij de mogelijkheid om tussen verschillende pagina's te kiezen, kun je wireframes maken voor zowel desktop als mobiele apparaten. De wireframe-tool neemt gebruikers min of meer aan de hand tijdens het creatieproces; ook voor het aanpassen van elementen selecteer je uit een lijst met bijpassende opties, die door de tool worden voorgesteld. Door zijn beperkte aanbod aan functies en designopties, ligt bij Wireframe.cc de focus op de functionaliteit van een pagina. Het delen van de gemaakte pagina’s is gemakkelijk; de wireframes hebben elk een eigen URL en kunnen eenvoudig worden opgeslagen en verzonden.

De prototyping tool is als basisversie gratis beschikbaar. Aan de premiumversie zijn kosten verbonden en deze bevat extra functies voor mogelijkheden tot interactie, toevoegen van protocollen, workflows en een eenvoudige export. De testfase is 7 dagen en ook bij Wireframe.cc stijgen de pakketprijzen naargelang het aantal gebruikers en de benodigde capaciteit.