De basis van het wireframe wordt bepaald door de usability en de user experience. De usability betekent dat er gekeken wordt naar de ervaring van de gemiddelde websitebezoeker op die specifieke pagina's. Kan de websitebezoeker makkelijk vinden wat hij of zij zoekt? De user experience draait om het grotere geheel. Brengen de pagina's van het wireframe de bezoeker betekenisvolle en relevante content? Kortom, is de ervaring optimaal voor de websitebezoeker?
In het wireframe wordt dit in de praktijk gebracht: waar komt welke knop en hoe wordt het menu ingedeeld? Vaak wordt een wireframe verward met een prototype. Deze verschillen wezenlijk van elkaar. Een prototype kan wel de uitwerking van de wireframes bevatten, maar beschikt altijd over werkende functionaliteiten. Een wireframe lijkt dus een "saai" onderdeel van een website project, omdat het in de kleuren zwart, wit en grijs schematisch weergeeft hoe de pagina's er uit komen te zien. Maar het is wel degelijk van belang, omdat je met het wireframe eigenlijk de ervaring en het gedrag van de toekomstige websitebezoeker kan sturen.
Lo-fi en Hi-fi wireframes
Er zijn twee verschillende soorten wireframes. Een lo-fi wireframe geeft een schets van wat er gemaakt gaat worden. Het geeft je antwoord op de vraag: wat komt waar? Het is dus echt puur gemaakt om je een idee te geven van het overzicht per pagina.
Een hi-fi wireframe geeft je meteen een goed beeld van het daadwerkelijke design van de website, zonder de werkende functionaliteiten uiteraard. Het is vergelijkbaar met een design zoals je deze in Photoshop kan maken.
Met welke programma's maak ik een wireframe?
Er zijn veel programma's op de markt om zelf een wireframe te maken. Elk programma heeft dan ook zijn voordelen en nadelen. Een aantal programma’s, inclusief de voor- en nadelen, bespreken we hieronder:
Figma
Figma heeft een lage learning curve. Het is gemakkelijk te gebruiken en heeft niet veel opties. Toch kun je qua design eigenlijk alles doen wat je maar wil. Daarnaast is het mogelijk om een wireframe klikbaar te maken. Hiermee maak je er dus een soort prototype van. Het grootste voordeel van Figma is dat het een gratis programma is.
Invision
Invision heeft, net als Figma, een lage learning curve. Het programma lijkt dan ook heel erg op Figma. Grote verschillen zijn dan ook niet meteen te spotten. Alleen de gebruikerservaring van de programma’s is verschillend. Het is dus maar net wat je zelf prettig vindt.
Axure
Met Axure kun je meer dan met Figma en Invision. Zo kun je er bijvoorbeeld een kleine database achter hangen, zodat je meteen een realistisch prototype kan bouwen. Het grote nadeel van Axure is dat het complexer is. De learning cure is dan ook hoog. Daarnaast is het maken van een ‘design’ veel moeilijker in Axure. Dat betekent natuurlijk niet dat het niet kan.
Hopelijk hebben je hiermee wat meer tekst en uitleg én voldoende handvaten gegeven om zelf te kunnen beginnen met het bouwen van een wireframe. Rest ons niet dan je succes te wensen met wireframen! (Nee, dat is absoluut geen werkwoord, maar het klinkt zo leuk😇)
