- Hulp & contact
- Winkelwagen
- Login
- Menu
Welke prototyping tools passen het beste bij jouw webproject?
In de conceptuele fase van webprojecten zijn mock-ups en wireframes waardevolle methoden om conceptideeën vorm te geven. Het op een schetsmatige manier visualiseren van het traject maakt het veel gemakkelijker voor het ontwikkelaarsteam om een idee te krijgen hoe het eindproduct moet werken en hoe het eruit moet komen te zien. Tegelijkertijd maken mock-ups en wireframes het ontwerp- en programmeerproces al in een vroeg stadium inzichtelijk voor klanten, waardoor eventuele feedback en gewenste aanpassingen direct kunnen worden meegenomen, nog voordat er met het design van de website of de bouw begonnen wordt.
Wireframe vs. mock-up
Zowel wireframes als mock-ups worden gebruikt in de beginfase van een webproject om ideeën te visualiseren. Toch zit er weldegelijk een verschil in de functie van de twee methodes. Wireframes worden voornamelijk gebruikt om het User Experience Design van het eindproduct in kaart te brengen. Het gaat hierbij niet om het grafisch ontwerp, maar om de structuur van het product en of deze logisch is. Anders gezegd: niet de kleur van de button is belangrijk, maar de plek waar de button wordt geplaatst.
Een mock-up kan, nadat de wireframes zijn uitgewerkt en goedgekeurd, worden gezien als de volgende stap in het traject. In deze fase wordt er gekeken naar de vormgeving. Een mock-up is een eerste, globale uitwerking van het grafisch ontwerp. In deze stap worden de kleuren, typografie en andere grafische elementen bepaald. Het kan vooral helpen om tijdens klantbesprekingen al een idee van de look en feel van het eindproduct te geven.
Voor het maken van een mock-up of wireframe zijn verschillende tools beschikbaar die helpen bij het visualiseren van het concept. Sommige van deze tools zijn alleen geschikt voor wireframes of richten zich exclusief op mock-ups, maar er zijn ook prototyping tools die een geschikt hulpmiddel zijn voor beide methoden.
Balsamiq
Balsamiq is een van de bekendste prototyping tools op de markt, met een focus op het maken van wireframes. Gebruikers profiteren van een groot aanbod van basiselementen. Naast navigatie-elementen, beschikt deze wireframe-tool onder andere over placeholders voor beeld en video, tekstblokken en formulieren, om zo de structuur van een website of applicatie te visualiseren. Met een drag-and-dropsysteem kunnen de elementen naar de juiste plek worden gesleept. Het eenvoudige ontwerp van Balsamiq zorgt voor een goed overzicht, zonder overbodige details, en is dus een zeer geschikte oplossing voor de vroege ontwikkelingsfase.
Balsamiq wordt beschouwd als een eenvoudig te gebruiken wireframe-tool met een duidelijke interface en begrijpelijke categorisatie van de afzonderlijke elementen. Ook zijn alle bouwstenen voorzien van commentaarvelden, om uitleg toe te kunnen voegen. Er kunnen tevens meerdere tabbladen aan elkaar gekoppeld worden, al is er helaas nauwelijks een mogelijkheid om interacties in het prototype op te nemen.
Balsamiq Studios biedt twee versies van de wireframing-tool aan: een desktop-applicatie genaamd Mockups 3, te downloaden voor Windows, Mac en Linux, en de cloud-based webapplicatie myBalsamiq. Na registratie kan er dertig dagen lang een gratis versie gebruikt worden. Hierna worden de licentiekosten in rekening gebracht, en dit bedrag is afhankelijk van het aantal gebruikers en projecten. Wie zijn wireframe alleen online in de webapp wilt maken, kan maximaal 3 actieve projecten uitvoeren in de myBalsamiq basisversie.
Axure
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.
Pencil
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
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.
Mockingbird
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
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.
Tijd besparen met mock-up- en wireframe-tools
Om te voorkomen dat onnodig veel tijd wordt besteed aan de ontwikkeling en handmatige implementatie van een ontwerp, is het gebruik van wireframes en mock-up-tools een goede, tijdbesparende oplossing. Ze zorgen voor meer efficiëntie in alle ontwikkelingsstadia. Niet alleen is de eerste versie van het ontwerp sneller uitgewerkt, maar er zijn ook meer mogelijkheden om in een vroeg stadium (klanten)feedback te implementeren. Last but not least zorgt een professionele prototyping tool voor een heldere presentatie van conceptuele ideeën, inhoud en functies, voordat er verder wordt gegaan met het uitwerken van de ontwerpelementen in templates. Vooral degenen die in een team werken, profiteren van de talrijke voordelen van de aangeboden tools.