Sommige mensen zijn gek op verrassingen. Ze duiken graag ergens meteen in zonder enig vooropgezet plan en zien wel hoe het afloopt.
Dat kan best goed uitpakken als je een reis om de wereld maakt of de dag wil plukken, maar als het voor één ding niet werkt dan is het wel voor het maken van een website.
Zelfs de eenvoudigste website heeft al heel wat bewegende onderdelen. Als deze of andere onderdelen van je site te ingewikkeld zijn, zullen je klanten bijna meteen afhaken, met omzetverlies als gevolg en een gemiste kans om contact te leggen met potentiële klanten.
Een goede manier om je site klantvriendelijk te maken is met een website wireframe-tool.
Als je met een team werkt aan het ontwerpen van een website, app of zelfs een afzonderlijke webpagina, kan een wireframe ook fungeren als een methode om precies aan te geven hoe je site eruit moet laten zien zonder alle rompslomp die komt kijken bij het coderen van een prototype.
Als je met een wireframe begint, kan dat uiteindelijk uren werk aan de backend-zijde schelen. En je wint er het meeste mee doordat je de bezoekers van je site de best mogelijke gebruikerservaring biedt.
Het mooie is dat je geen ontwikkelaar hoeft te zijn om een site te bouwen. Bovendien hoef je niet een hoop geld uit te geven aan fancy software om er een te maken. Er zijn namelijk aardig wat gratis website wireframe-systemen te vinden. Hieronder kan je met enkele van die kosteloze opties kennis maken.
7 gratis en open source website wireframe-tools
De hier beschreven gratis wireframe-tools en open source wireframe tools hebben stuk voor stuk een “altijd gratis”-optie, dus er zijn geen kosten aan verbonden, ook niet in de toekomst.
Zoals bij de meeste gratis systemen betekent dit wel dat je een beperkte versie van een betaald systeem krijgt, dus proberen wij aan te geven waar dat voor hindernissen kan zorgen.
De systemen worden vermeld in volgorde van het aantal gebruikersreviews op Capterra op het moment van publicatie, van hoog naar laag.
1.
(932 reviews, 4.5 sterren op Capterra)
Lucidchart is een diagramtool om flowcharts en org. charts te tekenen, maar het programma heeft ook een volledig uitgeruste, gratis website wireframe-builder voor UI-ontwerp. Er kan gemakkelijk worden samengewerkt aan wireframes, waardoor meerdere mensen op hetzelfde moment aan dezelfde wireframe kunnen werken. De tool heeft ook een add-on voor Chrome zodat je gemakkelijk een Lucidchart-diagram kunt toevoegen aan Google Documenten of Spreadsheets, als dat de plek is waar je team meestal aan het werk is. De ontwerpen kunnen geëxporteerd worden in verschillende formaten zoals PDF, PNG en JPG. Lucidchart biedt mobiele apps voor Android- en iOS-apparaten.
Wat Capterra-reviewers zeggen: Reviewers melden als pluspunten dat het systeem cloudgebaseerd is, integreert met veel andere veelgebruikte producten en dat ze kunnen samenwerken aan wireframes en prototypes met een onbeperkt aantal belanghebbenden. Als minpunten vermelden gebruikers dat ze zijn niet in staat zijn om een diagram te maken dat gedeeld kan worden door een klant én zichtbaar is voor iedereen in het team. Daarnaast vermelden sommige recensenten dat Lucidchart niet veel ruimte biedt om documenten op te slaan, tenzij ze upgraden naar een betaalde account.
Beperkingen van de gratis versie:
- beperkte opslagruimte
- 5 documenten
- Projecten beperkt tot 60 objecten
Tarieven voor upgrades: Het laagst geprijsde Lucidchart-abonnement begint vanaf € 9,95 per maand, voor één gebruiker. Teamabonnementen vanaf € 20 per maand voor 3 gebruikers.
2.
(500 reviews, 4.6 sterren op Capterra)
Met de cloudoplossing van InVision kun je mobiele apps en desktopsites met wireframes ontwerpen. Bovendien kun je architectuurdocumentatie samenstellen en navigatiestromen visualiseren. Met de ingebouwde samenwerkingstools kun je feedback van je teamgenoten ontvangen en met de interactieve prototypes kunnen testers je app of webpagina op een realistische manier doorlopen.
Wat Capterra-reviewers zeggen: Gebruikers waarderen de strakke en intuïtieve interface van InVision. Ze zijn ook positief over de mogelijkheid om professioneel ogende, hoogwaardige prototypes te maken, waarvan wordt gemeld dat ze uitstekend voldoen voor presentaties aan klanten, en over het gemak waarmee gebruikers feedback kunnen geven en bekijken. Gebruikers melden wel dat eeen Mouse/over mist in de prototype versie en zouden de animatiemogelijkheden van het systeem verbetering behoeven.
Beperkingen van de gratis versie:
- Eén prototype
- Eén gebruiker
Tarieven voor upgrades: Het goedkoopste InVision-abonnement kost circa 13,50 per maand en biedt ruimte aan drie prototypes.
3.
(19 reviews, 4.5 sterren op Capterra)
Moqup is ook een cloudoplossing en is uitgerust met een uitgebreide bibliotheek van modelvormen en pictogrammen. In Moqup kun je de afbeeldingen importeren die je gebruikt als huisstijl van je site. Met de drag-and-drop editor kan je team op intuïtieve wijze wireframes van sites, stroomdiagrammen en storyboards ontwerpen.
Wat Capterra-reviewers zeggen: Gebruikers waarderen de handige drag-and-drop functionaliteit, de duidelijke en intuïtieve interface en het gemak waarmee ze ontwerpen kunnen delen met ontwikkelaars en klanten. Wel zouden ze uit meer objecten willen kiezen en zouden graag zien dat het bedrijf in de toekomst een offline versie uitbrengt.
Beperkingen van de gratis versie:
- Eén project
- Beperkt tot 300 objecten
- 5 MB opslag
Tarieven voor upgrades: Het laagst geprijsde Moqups-abonnement kost € 13 per maand, voor één gebruiker en een onbeperkt aantal projecten.
4.
(16 reviews, 4,2 sterren op Capterra)
Pencil Projects is de enige website wireframe-tool in deze lijst die op desktops draait. De tool is open source, wat betekent dat alle functies gratis beschikbaar zijn voor alle gebruikers. De software is apart app beschikbaar en als extensie van Firefox.
Je kunt met het systeem wireframes van meerdere pagina’s maken met links tussen de pagina’s. En er is een bonus voor je webmaster: wanneer je je wireframes naar een HTML-webpagina exporteert, houdt Pencil de links intact zodat je volledige app- of websitemodellen met gekoppelde pagina’s kunt delen. Pencil bevat ook een aantal sjablonen, een bibliotheek met vormen en biedt de mogelijkheid om externe objecten te importeren. Bovendien kun je de Android- en iOS-modelvormen gebruiken om ontwerpen voor een mobiele interface te maken.
Wat Capterra-reviewers zeggen: klanten zijn tevreden over bibliotheek van vormen en iconen waarmee ze snel wireframe modellen en interfaces te maken. Gebruikers vinden Pencil Projects makkelijk te gebruiken en zijn blij met de compatibiliteit met verschillende besturingssystemen, zoals Mac, Windows en Linux. Anderzijds hebben gebruikers het gevoel dat de software vertraagt wanneer grafische elementen in meerdere vellen van een document worden ingevoegd.
Beperkingen van de gratis versie:
- Omdat Pencil een open source tool is, bevat de gratis versie alle functies.
(9 reviews, 4 sterren op Capterra)
MockFlow is voorzien van een uitgebreide ontwerpbibliotheek met sjablonen waarmee je blauwdrukken voor website- en app-interfaces, sitemaps, enzovoort, kunt maken. Je kunt ook kiezen uit sjablonen, lay-outs en componenten van derden. De verzamelingen met afbeeldingen en componenten bevatten formulieren, navigatie-elementen, vormen en pictogrammen, waarmee je je modellen en wireframes van de nodige onderdelen kunt voorzien.
Wat Capterra-reviewers zeggen: Volgens gebruikers is het een makkelijke tool met een korte leercurve. De gratis versie van MockFlow heeft al heel wat functionaliteit te bieden en kan naar PNG-formaat worden geëxporteerd. Als minpunten vermelden gebruikers de kopieer en plakfunctie die niet snel werkt en beperkte voorgebouwde drop-down menu opties.
Beperkingen van de gratis versie:
- Eén IU-project
- Maximaal twee gebruikers
- Beperkte toegang tot bibliotheek en integraties met oplossingen van derden
Tarieven voor upgrades: Betaalde abonnementen van MockFlow vanaf € 12,60 per maand, voor één gebruiker en een onbeperkt aantal projecten.
(8 reviews, 4,2 sterren op Capterra)
Wireframe.cc is een prima optie voor degenen die een eenvoudige en overzichtelijke gebruikersinterface willen. In plaats van werkbalken biedt Wireframe.cc opties die worden weergegeven wanneer je ze nodig hebt en verborgen blijven als dat niet het geval is. Je kunt live wireframes met je team delen om er samen aan te werken en iedereen met een link kan opmerkingen bij een wireframe plaatsen. Voor die laatste optie is wel een upgrade vereist.
Wat Capterra-reviewers zeggen: Gebruikers vinden de minimalistisch uitgevoerde UI prima voor het maken van eenvoudige modellen, maar als je meer wilt dan dat, is de gratis versie van Wireframe.cc wellicht niet wat je zoekt. Gebruikers zouden ook graag meer tutorials online willen hebben die laten zien hoe je het beste met het systeem kunt beginnen.
Beperkingen van de gratis versie:
- Geen gebruikersaccounts
- Al je wireframes zijn openbaar beschikbaar
- Wireframes zijn beperkt tot één pagina
Tarieven voor upgrades: Premium-versies van Wireframe.cc vanaf circa € 14,40 per maand voor één gebruiker en een onbeperkt aantal projecten.
7.
(1 review, 5 sterren op Capterra)
De cloudoplossing voor wireframes van Fluid UI biedt ontwerpers een bibliotheek met meer dan 2000 elementen. Je kunt interactieve prototypes en pagina-animaties maken om een beter idee te krijgen van hoe het uiteindelijke product eruit komt te zien. Je kunt ook de Android- en iOS-app van Fluid UI gebruiken om een voorbeeld van je prototypes te bekijken op mobiele interfaces.
Wat Capterra-reviewers zeggen: Er is één review over Fluid UI waarin de gebruiker het programma prijst om de mogelijkheid om secties met elkaar te verbinden en een hele applicatiestroom te creëren. Als minpunt vermeldt de gebruiker dat het soms moeilijk is om onderdelen te verplaatsen zonder andere elementen te bewegen.
Beperkingen van de gratis versie:
- Eén project
- Tien pagina’s
- Geen mogelijkheid om te uploaden
- Beperkt tot de bibliotheek met wireframes
- Teamleden kunnen geen opmerkingen of feedback achterlaten
Tarieven voor upgrades: Upgraden naar het goedkoopste Fluid Ui-abonnement kost circa € 13,50 per maand en biedt toegang tot geavanceerdere ontwerpfuncties zoals overgangen met animatie
Er zijn dus aardig wat kosteloze digitale website wireframe tools te krijgen waarmee je wireframes kunt maken en feedback in real-time kunt ontvangen.
