Wireframing is de eerste stap die veel webdesigners zetten bij het ontwerpen van een nieuwe website. Het proces omvat het creëren van een visuele schets van een site waarrond het eindproduct zal worden ontwikkeld.
Wireframing kan het beheer van een webdesignproject ongetwijfeld vergemakkelijken. Een ontwikkelaar kan bijvoorbeeld de goedkeuring van de klant krijgen voordat hij aan het werk gaat. Of, als u uw eigen website ontwerpt, helpt een wireframe u bij het formuleren van uw ideeën.
Maar wireframing kan soms ook het creatieve proces beperken. Daarom volgt hier een meer gedetailleerde uitleg over wat wireframing is en een bespreking van de voor- en nadelen van wireframing in webdesign.
De voor- en nadelen van wireframing van een webontwerp
Wat is een wireframe?
Een wireframe is een visuele basisweergave van de lay-out en structuur van een website. Het schetsontwerp kan worden opgesteld met behulp van wireline-tools, zoals Sketch of Adobe XD. Een wireframe kan ook worden gemaakt met een tekenprogramma, zoals MS Paint, of met de hand getekend op papier.
De schets van de site bevat geen branding, kleuren of afbeeldingen. In plaats daarvan is een wireframe een basisschets die laat zien waar onderdelen op de verschillende pagina’s komen te staan. En een wireframe is geen mock-up of prototype, zoals hieronder wordt uitgelegd.
Het verschil tussen wireframes, mock-ups en prototypen
De termen wireframe, mock-up en prototype worden vaak met elkaar verward. De drie methoden zijn echter heel verschillend.
Wireframes
Zoals hierboven vermeld, zijn wireframes visuele weergaven van de lay-outsite. Het is eerder een schets van het skelet van een website dan een prototype. Veel ontwikkelaars maken wireframes met pen en papier.
Mock-ups
Mock-ups worden doorgaans gebruikt om de visuele ontwerpkenmerken van de site weer te geven. Een mock-up demonstreert doorgaans de branding, typografie, kleurenpaletten en de algemene look & feel. Een mock-up is echter meestal geen functionele site.
Prototype
Een prototype is een voorproefje van de voorgestelde live site. Sommige van de uiteindelijke ontwerpelementen van de website kunnen ontbreken. En de websites zullen waarschijnlijk slechts gedeeltelijk afgewerkte functionaliteit en inhoud bevatten. Met een prototype kan een webdesigner echter een idee krijgen van hoe de uiteindelijke site eruit zal zien en zal werken.
De voor- en nadelen van wireframing van een site
Sommige webontwikkelaars beginnen een project altijd met een wireframe. Anderen duiken er liever meteen in en zien wel waar het project hen brengt. Wat zijn de voordelen van wireframes en wat zijn de nadelen? Hier volgen de voor- en nadelen van het starten van een webdesignproject met een wireframe.
De voordelen van wireframing
Wireframing maakt het mogelijk het skelet van de site in kaart te brengen vóór de productie. Deze aanpak kan helpen een project te beheren en de aandacht te richten op de fundamentele functies. Hier volgen enkele voordelen van wireframing.
betrekt klanten bij ontwerpproces
Bij het ontwerpen van een website voor een klant kan een wireframe helpen om de klant vanaf het begin bij het ontwerpproces te betrekken. Een wireframe helpt de klant de site te visualiseren voordat er aan de ontwikkeling wordt begonnen. En als u de goedkeuring van de klant krijgt voor het wireframe, kunt u voorkomen dat de omvang van het project toeneemt.
Bespaart tijd en geld
Alle projecten kunnen efficiënter worden opgeleverd met een plan. En een wireframe biedt een plan op hoofdlijnen voor het ontwerp van een nieuwe website. Wireframing kan dus een essentieel hulpmiddel zijn voor het beheer van een webdesignproject. En het kan dure en tijdrovende redesigns later in het project voorkomen. Wireframes kunnen ook helpen bij het delegeren van taken aan een team in een groter project.
Bepaal de functies voordat de ontwikkeling begint
Door vanaf het begin het skelet van de website te definiëren, kunt u de vereiste functies bepalen. En dit kan voorkomen dat later functies moeten worden aangepast. En zoals hierboven vermeld, kan wireframing ook helpen voorkomen dat een klant in de eindfase van een project om nieuwe functies vraagt.
Bepaal de responsiviteit van de website
Wireframing brengt responsiviteitsoverwegingen in de planningsfasen van een project. Zo kan al in een vroeg stadium van het project worden bekeken hoe de site eruit zal zien op verschillende apparaten. En dat kan tijd besparen ten opzichte van het alternatief van het achteraf aanbrengen van responsiviteit op een gedeeltelijk ontwikkelde site.
Prioriteert gebruikerservaring
Voorrang geven aan de gebruikerservaring is fundamenteel voor een goed webontwerp, en wireframing kan daarbij helpen. Het schetsen van gebruikersinteracties met de verschillende functies op de site kan helpen bij het bepalen van de beste lay-out en structuur van een website. Het minimalistische karakter van een wireframe kan ook helpen voorkomen dat een site onnodig complex wordt.
Dwingt vroege focus op inhoud
Wireframes omvatten niet de visuele toeters en bellen van een voltooide website. Er kan dus meer aandacht worden besteed aan de inhoud dan aan de visueel aantrekkelijke aspecten van het ontwerp. En de inhoud kan op maat van de site worden geschreven in plaats van de website rond de inhoud te ontwerpen. Zoals hieronder vermeld, kan dit aspect van wireframing echter ook als een nadeel worden gezien.
De nadelen van wireframing
Wireframing heeft dus zijn voordelen, met name op het gebied van projectbeheer. Er kleven echter ook enkele nadelen aan deze aanpak. Hier volgen enkele redenen waarom niet alle webdesigners grote fans zijn van wireframing.
Onnodige extra stap in het proces
Wireframing van een site kost tijd, waardoor een project langer kan duren. De vertraging door wireframing kan ook worden verergerd door lange discussies met een klant over het voorgestelde ontwerp van de site. Daarom slaan sommige ontwikkelaars de stap liever over en gaan ze meteen over tot de ontwikkeling van een prototype of mock-up.
Moeilijkheden bij het visualiseren van een site vanaf een wireframe
Wireframes zien eruit als een schets. Daarom kan het voor sommige mensen een uitdaging zijn om een site te visualiseren op basis van een schets. Dan is de enige manier om een concept te bewijzen een mock-up of prototype dat meer lijkt op het eindproduct.
Prioriteert vorm boven inhoud
Zoals hierboven vermeld, kan wireframing schrijvers dwingen inhoud te produceren die bij de site past. Voorstanders van de content-first benadering van webdesign zouden echter beweren dat dit de verkeerde weg is.
Beperkt creatieve vrijheid
Misschien wel de belangrijkste kritiek op wireframing is dat het te veel nadruk kan leggen op structureel ontwerp. En zodra er overeenstemming is bereikt over een wireframe, voelen sommige webdesigners zich beperkt door de contouren die moeten worden gevolgd. Sommige van de beste webdesigninspiraties komen immers tijdens het ontwikkelingsproces.
Conclusie
Kortom, wireframing kan een waardevol instrument zijn voor het beheer van een webdesignproject. Maar het proces kan beperkend zijn voor de meer creatieve ontwerpers. Toch beginnen de meeste mensen een ontwerpproject met een wireframe. Vaak is het wireframe echter slechts een schets van de achterkant. Dus wireframing belemmert de creativiteit alleen als u zich te rigide aan het wireframe houdt.
