Een wireframe is een schema, een soort blauwdruk van een website. Het gaat alleen om het functionele gedeelte en de interface maar nog niet om de vormgeving.
Waarvoor is een wireframe bedoeld?
De wireframe is bedoeld om gemakkelijker gezamenlijk te kunnen nadenken en overleggen over de structuur en functionaliteit van de website die je aan het bouwen bent. Een schetsmatige opzet dus, om ervoor te zorgen dat iedereen over hetzelfde praat.
Vergelijk het met de bouwtekening voor een huis. Wie een huis laat bouwen zegt ook niet tegen de architect en de aannemer: ‘Doe mij iets wat ik in kan wonen met 4 personen.’ Daar komen op zijn minst een bouwtekening en een technische tekening aan te pas.
Lees onze blog over Het vernieuwen van je website; hoe doe je dat? om te hoe jij dat kan doen!
Andere benamingen
Wireframes worden ook wel mockups of mocks genoemd.
Wireframes zijn een hulpmiddel bij het ontwikkelen van een website of applicatie. In de schetsmatige opzet wordt de structuur vastgelegd. Denk hierbij aan navigatie, inhoud en indeling. Een grafisch ontwerp is er nog niet. Het gaat puur om de functionele weergave van de verschillende onderdelen. Hierdoor kun je je zuiver op de inhoud richten en het vormgevingsaspect nog even terzijde laten.
Voor iedereen begrijpelijk
Het handige van wireframes is dat je goed met elkaar kunt communiceren, ook al komt iedereen vanuit een andere discipline. Een wireframe is begrijpelijk voor zowel klant, programmeur, zoekmachine specialist, enzovoorts. Het is ook niet een heel ingewikkeld technisch ontwerp. Het is vaak mogelijk om de wireframe om te zetten naar een prototype dat ook echt functioneert. Hiermee kan dan worden getest, voordat het concept wordt uitgewerkt in een visueel ontwerp.
De beste interface structuur
Hetzelfde scherm kan op veel verschillende manieren worden gebouwd. Maar niet allemaal zullen ze je boodschap correct overbrengen en de meest gebruiksvriendelijke website opleveren. Het vastleggen van een goede interface structuur is dus heel belangrijk, het is misschien wel het belangrijkste deel van het ontwerpproces van je website. Het kan dus geen kwaad om hier, aan de hand van een wireframe, ruim de tijd aan te besteden. Dit betaalt zich in een latere fase dubbel en dwars terug.
Wanneer maak je een wireframe?
Het ligt voor de hand, maar het moment om dit te doen is vóórdat er code is geschreven en ook vóórdat (er ook maar iets van) het visuele ontwerp is. Op deze manier wordt veel tijdverlies en aanpassingswerk voorkomen.
Voordelen van een wireframe
Wat is het voordeel van een wireframe ten opzichte van een concept- of proefversie van de website?
-Duidelijkheid
Wireframes maken het duidelijk dat ze nog geen versie van het definitieve ontwerp zijn. Je kijkt duidelijk naar een onaf product en dat bevordert de vrije communicatie.
Niemand zal denken dat het wireframe het definitieve ontwerp is. De lage resolutie en het hoekige uiterlijk dwingen je om naar de structuur te kijken in plaats van naar de details. Later zal er nog volop de tijd zijn voor de visuele kant. Eerst moet de structuur worden afgerond.
-Iedereen op één lijn
Een wireframe bevordert samenwerking en zorgt er ook voor, dat alle betrokkenen het over hetzelfde hebben. Dit voorkomt misverstanden
-Discussie en feedback aangemoedigd
Door de ruwe uitvoering wordt discussie en feedback aangemoedigd. The wireframe nodigt uit tot het geven van bijdragen. Het zal duidelijk zijn dat niemand zich beledigd hoeft te voelen als er kritiek is op onderdelen van de wireframe, of zelfs op het gehele concept. Het is te zien dat er niet heel veel tijd is gaan zitten in het bouwen ervan. Het uiteindelijke doel, gebruikersgemak door een goede interface, kan op deze manier sneller en soepeler bereikt worden.
Wireframe software en -tools gebruiken om webpagina’s te ontwerpen
Met wireframes kunnen ontwerpers dus snel en effectief het ontwerp van een website zo nabootsen.
Voor het maken van wireframes bestaat handige software en diverse tools. Dit maakt het gemakkelijk om een ontwerp snel op te zetten. Ook het aanbrengen van wijzigingen en het toevoegen van (standaard) functionaliteiten is daarmee heel gemakkelijk te doen. Ontwerpers en andere teamleden kunnen tijdelijke aanduidingen slepen en neerzetten. Afhankelijk van de ontwerpers, de aard van het project en van de complexiteit van de website zijn er eenvoudige en meer uitvoerige tools.
Bekende tools en programma’s voor het ontwerpen van websites middels een wireframe:
Soorten wireframes
Wireframes kunnen verschillende verschijningsvormen hebben. Gemeenschappelijk kenmerk is dat ze precies zijn in structuur maar nog onafgewerkt in de invulling en details. Zoals gezegd, vergemakkelijkt dat aanpassingen, zonder dat er een heleboel code opnieuw geschreven moet worden. The wireframe is pas overbodig als de structuur van de website geheel is uitgewerkt en goedgekeurd. Daarna kunnen de volgende fases van het ontwerpproces beginnen. Wireframes besparen dus tijd en kosten en, niet te vergeten, een heleboel ergernis.
In feite is een wireframe met pen en papier te creëren. Maar dat werkt natuurlijk niet echt handig en Daarom zijn er volop digitale mogelijkheden om een wireframe te maken. Allerlei functionaliteiten zijn in deze software standaard aanwezig. Dit maakt het heel gemakkelijk om snel een opzet te maken en om te zetten naar een prototype.
Tips bij het ontwikkelen van wireframes:
Wees consequent en verval niet in herhalingen. Als iets eenmaal In de basis is aangegeven dan hoeft het niet elders nog een keer herhaald te worden, dat werkt Alleen maar verwarring.
– Maak het niet te mooi in grafische zin. Hiermee voorkom je dat de discussie gaat over de vorm in plaats van over de inhoud. Zaken als uitlijnen kun je dus beter zo min mogelijk doen.
– Houd het interactief en zorg dat alle partijen de vrijheid hebben om hun bijdrage te leveren en feedback te geven.
Minder tijdverlies en minder frustratie
Hoewel het lijkt alsof wireframes een extra stap In het proces vormen, leveren ze in werkelijkheid juist tijd- en kostenbesparing op. Het scheelt veel frustratie en werk als de opzet vanaf het begin duidelijk is en ook door alle partijen gedragen wordt. Een ander voordeel is dat Iedereen, dankzij gelijkwaardige input en betrokkenheid, meer feeling met het project heeft.
