Hoe ziet een wireframe eruit?

Een wireframe kan op meerdere niveaus. Je hebt een wireframe voor een website, maar ook voor individuele pagina’s. Het is een schematisch overzicht van hoe de website of pagina in elkaar steekt. Er worden zo min mogelijk afleidingen in verwerkt waardoor alleen de functionaliteiten en structuur overblijven.

Door het achterwege laten van de opmaak worden de navigatiemogelijkheden door de website zeer duidelijk. Je kunt het vergelijken met een blauwdruk of bouwtekening. Omdat het zo simpel op te zetten is kost het niet veel tijd om te maken. Tegelijkertijd geeft het wel veel inzicht en voorkom je dat je fouten later in het proces maakt. Zeker de moeite waard dus.

Waarvoor dient een wireframe?

Een wireframe is het eerste moment dat de ideeën over het bouwen van een website op papier komen. Het is de eerste schets die niet rekening houdt met de schoonheid van het ontwerp. Op dit moment gaat het nog puur om het uittekenen van alle pagina’s. Hoe ze ten opzichte van elkaar liggen, maar ook welke knoppen er belangrijk zijn.

Het is bedoeld om een eerste indruk te geven. Eventuele conceptuele fouten zijn nu nog snel op te lossen. Daarom is het goed dat het van tevoren door een keuringsproces gaat van iedereen die erbij betrokken is. Zet deze stap ook zeker samen met de klant, dan weet je zeker dat je de juiste koers vaart. De klant heeft als voordeel dat hij meer vertrouwen krijgt in het project.

Om simpel te beginnen kun je je focussen op wat belangrijk is. Meestal worden mensen te snel afgeleid door alle details die erbij komen kijken. Met een wireframe richt je je puur op de plaatsing van alle onderdelen en in welke verhouding ze met elkaar staan.

Wanneer zet je een wireframe in?

Een wireframe doe je helemaal aan het begin van het project, vlak nadat de eerste besproken concepten zijn goedgekeurd. Door het zo vroeg mogelijk in te zetten krijg je meteen een duidelijk beeld van hoe de website eruit zal komen te zien. Niet qua grafisch ontwerp, maar qua structuur.

Dit geeft jou en de klant voldoende informatie om verder te sparren. Omdat er nog niets ontwikkeld wordt is het makkelijk om van traject te wisselen. Het is dus een goed idee om niet één maar meerdere structuren uit te tekenen. Samen met de klant kies je de beste uit. Eventuele feedback kan nog direct verwerkt worden.

Als je op deze manier te werk gaat zul je merken dat de rest van het project eigenlijk vanzelf gaat. Het is een kwestie van bouwen, communicatie houden en de opmaak implementeren.

Voorbeelden van tools om een wireframe te maken

Natuurlijk, pen en papier ligt het meest voor de hand om een wireframe te tekenen. Je kunt meteen aan de slag en een schets is al snel gemaakt. Toch is het verstandig om na de eerste concepten over te stappen naar een digitale versie. Niet alleen wordt met de hand tekenen op de lange duur chaotisch, maar aanpassingen kun je ook makkelijker digitaal verwerken. Denk maar aan hoe snel je bent als je blokken kunt verslepen, kopiëren en plakken. Om je op weg te helpen geven we hier nog een aantal tools om een wireframe mee te maken.

Figma

Figma is een applicatie die zich goed leent voor het maken van een wireframe. Door de cloud diensten kun je hier overal mee werken. Het voordeel is dat je naast een bouwtekening ook het design ermee kunt maken.

Sketch

Sketch zoals de naam al doet suggereren is uitstekend voor het maken van deze wireframe schetsen. Het is een gratis tool aangeboden voor je Mac waarmee je snel aan de slag kan. Ook beginners kunnen hiermee werken omdat het vrij simpel van opzet is, met voldoende ondersteuning om te leren. De uitgebreide bibliotheek stelt je in staat om elementen eruit te plukken die je wilt hebben. Dit scheelt in de hoeveelheid tijd die je bezig bent met het schetsen.

Adobe XD

Adobe is een welbekend merk. Ze hebben onder andere het bewerken van foto’s toegankelijk gemaakt voor veel mensen. Zo hebben ze ook een tool voor het maken van wireframes. Adobe XD versnelt het proces van ontwerpen maken voor je gehele team. Dankzij de vele koppelingen met andere tools binnen Adobe krijg je een overvloed aan opties. Daarnaast is de support afdeling van XD op een professioneel niveau waardoor je altijd de ondersteuning krijgt die je nodig hebt.

Lucidchart

Met Lucidchart heb je genoeg opties wanneer het aankomt op het maken van wireframes. Het is een webapplicatie waarmee het maken van overzichten of lay-outs erg gemakkelijk gaat. Met de mogelijkheid om met meerdere personen tegelijk aan hetzelfde project te werken ga je snel door de ontwikkelfase van een website heen. Je werkt immers parallel in plaats van in serie.

Microsoft Visio

Microsoft heeft Visio gecreëerd als tool om onderlinge relaties aan te geven. Aan de hand van modellen en hoe elk element zich verhoudt tot een ander krijg je een duidelijk beeld. Het voordeel is dat het programma Visio nog verder gaat dan alleen wireframes maken. Mocht je dus extra overzichten willen maken of alvast beginnen aan de volgende stap in het ontwikkelproces dan kun je hiermee ook uit de voeten.

Balsamiq

Wil je het echt bij een schets houden dan is Balsamiq de tool die je nodig hebt. Dankzij de simpele functies zal je het altijd houden bij een eerste indruk en niets meer. In dit geval is dat juist een voordeel, omdat je hiermee veel overbodige gesprekken over de invulling van de opmaak of stijl uit de weg gaat.