Wireframes: de eerste bouwtekening van jouw website of applicatie.

Waarom wireframes de perfecte tool zijn voor het ontwikkelen van jouw app of website.

 

Webdevelopers en designers gebruiken ze maar al te graag, ‘wireframes’. In deze blog vertellen we je wat wireframes zijn, waarom wij ze gebruiken, hoe je ze zelf gemakkelijk ontwikkelt en waarom ze essentieel zijn bij de ontwikkeling van een website of app!

vrouw tekent wireframe

Wat zijn wireframes?

 

Een wireframe is een schematische weergave van een website of applicatie. Het dient als een eerste bouwtekening die onze designers en webdevelopers gebruiken voor de verdere ontwikkeling van jouw website of applicatie!

Wat is het verschil tussen een wireframe en een prototype?

 

Vaak wordt een wireframe verward met een prototype terwijl ze toch echt van elkaar verschillen. Een wireframe is gefocust op functionaliteit en de content en dus niet op design.

 

In een wireframe zie je overzichtelijk de layout van de pagina’s binnen een website of applicatie zonder verdere grafische elementen. Dankzij zo’n wireframe wordt in één oogopslag duidelijk hoe de informatiestructuur, bijbehorende content en navigatiefuncties met elkaar samenhangen.

wireframe mobile app

Waarom gebruiken wij Wireframes?

 

Bij het ontwikkelen van een website of applicatie maken we wireframes voor alle pagina’s of schermen. Dit is de start van het ontwerpproces!

Zo weten we dat we hetzelfde bedoelen 

 

Door te werken met wireframes maken we je idee concreet. Een bijkomend voordeel is, dat een dergelijk document, ervoor zorgt dat we duidelijk kunnen communiceren met alle betrokkenen. Projectleiders, developers, designers en founders spreken niet altijd dezelfde taal. Aan de hand van een goed uitgewerkt wireframe creëren we op direct alignment.

Zo toetsen we je concept

 

Een ander voordeel aan werken met wireframes is dat we je concept gelijk toetsen. Niet alleen conceptueel maar ook op het gebied van gebruiksvriendelijkheid. Vaak zijn deze wireframes daarna gemakkelijk om te zetten naar een werkend (klikbaar) prototype, zo ontwikkelen we  op iteratieve wijze naar het eindproduct toe.

man draws checklist website

Hoe maak ik zelf een wireframe?  

 

Je hoeft geen volleerd designer te zijn om een wireframe te maken! Sterker nog als je een idee voor een website of app in je hoofd hebt is het absoluut aan te raden om dit visueel te maken. Om je een beetje op weg te helpen hebben we een aantal programma’s op een rijtje gezet waarmee jij zelf eenvoudig wireframes kunt ontwikkelen!

De 7 beste programma’s voor het ontwikkelen van je eigen wireframe

 

1. Balsamiq

 

Het voordeel aan Balsamiq is ook gelijk het grootste nadeel. De app is super simpel en daarom geweldig voor het maken van snelle schetsen en het samen werken in één bestand. Voor beginners werkt Balsamiq dan ook prima. Balsamiq kan geïntegreerd worden met Google Drive, Confluence en Jira.

 

Hoewel Balsamiq alle basisprincipes behandelt, is het niet zo diepgaand als zijn concurrenten wat betreft functies en functionaliteit. Wireframes worden geëxporteerd als statische bestanden in plaats van als dynamische bestanden.

 

Platform: MacOS, Windows, web browser

Prijs: vanaf $9 per maand

 

2. Miro

 

Met Miro creëer je gemakkelijk een hub waarin je samen met je team kunt werken. De tool bevat een aantal indrukwekkende features zoals:  een oneindig whiteboard, widgets en vooraf gebouwde sjablonen.

 

Het programma is lekker compleet. Zo kun je het niet alleen gebruiken voor het maken van wireframes maar ook voor user stories, customer journeys en het stroomlijnen van brainstorm processen.

 

Platform: MacOS, iOS, Windows

Prijs: vanaf freemium,  vanaf $8 per maand

 

3. Sketch

 

Sketch is al een van onze favoriete programma’s voor het maken van wireframes en dat is niet zonder reden. Alhoewel het programma geen kant-en-klare-UI-componenten bevat, zoals knoppen en selectievakjes kun je gemakkelijk je eigen onderdelen in de app ontwerpen. Deze kun je makkelijk hergebruiken dankzij de Symbols-functie. Wanneer je meer gedetailleerde wireframes wilt kun je altijd een extra UI-kit toevoegen.

 

Zoals de meeste desktop-apps, maakt Sketch samenwerking een beetje lastig, omdat er geen manier is om meerdere ontwerpers tegelijkertijd te laten werken binnen een ontwerpbestand. Maar extensies zoals Abstract, die ontwerpwijzigingen volgen en meerdere versies kunnen samenvoegen tot één bestand, kunnen samenwerking en versiebeheer een stuk eenvoudiger maken.

 

Toch is Sketch niet voor iedereen geschikt. Er is helaas geen windows versie van de software.

 

Platform: Mac IOS

Prijs: vanaf freemium, vanaf  $9 per maand

 

4. Adobe XD

 

Creatieve teams kunnen op grote schaal ontwerpen met de Adobe XD-toolkit. Deze bevat niet alleen wireframes maar eigenlijk alles. Zo kun je na het maken van een wireframe deze gemakkelijk door ontwikkelen naar een functioneel  prototype en zelfs testen met gebruikers.

 

Het wordt niet veel beter en functioneler dan de adobe software, alleen kunnen de vele functies voor beginners wellicht wat overweldigend zijn.

 

Gelukkig is Adobe koning in het maken van instructie video’s en tutorials. Zo leer je in een razend tempo hun programma’s kennen.

 

Platform: MacOS, iOS, Windows

Prijs: vanaf $9.99

 

5. InVision Studio

 

InVision is een cloudbased tool voor het ontwikkelen van wireframes. Door het handige drag en drop systeem kun je gelijk aan de slag. Je kunt de link eenvoudig delen met je team om direct feedback te ontvangen op het ontwerp.

 

Bij InVision valt gelijk op hoe goed er is nagedacht over het maken van een eenvoudig en responsief ontwerp.  Zo kun je bijvoorbeeld de positie en grootte van een object afzonderlijk bepalen, zodat je  precies kunt beheren wat er met een pictogram of tekstvak gebeurt wanneer de schermgrootte verandert van desktop naar mobiel.

 

Wel kan je slechts met één gebruiker tegelijk aan het werk maar dat mag de pret niet drukken. Verder is InVision een top tool!

 

Platform: web browser, IOS, Wndows

Prijs: freemium, vanaf $15 per maand

 

6.  Lucid Chart

 

Omdat het een webgebaseerde app is, zijn er geen downloads of installaties nodig en het werkt op elk apparaat, browser of besturingssysteem.

 

De prijs-kwaliteit maakt Lucid Chart een interessante tool.  De lage kosten per maand in combinatie met de overal te gebruiken browser-gehoste app maken dit een van de gemakkelijkste wireframing tools om mee te beginnen.

 

Hoewel we dol zijn op het gemak van een browser-gehoste tool, heb je pech als je een keer geen internet tot je beschikking hebt. De exacte beperkingen van de freemium-versie zijn ook een beetje moeilijk te doorgronden, wat betekent dat sommige gebruikers mogelijk tegen een betaalmuur aanlopen als ze het niet verwachten.

 

Platform: web browser

Prijs vanaf $4,95 per maand.

 

7.  Ouderwets pen en papier!

 

Geen zin om te werken met allerlei tools voor het ontwikkelen van je wireframes? Dat hoeft ook niet. Je kunt gewoon aan je tekentafel beginnen.

 

Zo hopelijk heb je zin gekregen in het ontwikkelen van je eigen wireframes, zo niet, no worries. Onze designers helpen je graag een eindje op weg met het vormgeven van je idee!

Online

Erik Odijk

Erik is onze Lead Designer, hij slaat elk idee zo plat als een dubbeltje, om vervolgens dat te maken wat écht nodig is