De realisatie van een nieuwe website start met het in kaart brengen van de doelen van de website, het bespreken van de doelgroep en het vastleggen van de huisstijl. Daarna zoekt de webdesigner de tekentafel op om de wensen van de klant visueel te maken en tot een webdesign te komen waar de klant enthousiast van wordt. In deze fase spelen wireframing, mockups en prototyping een belangrijke rol. Ik neem je in dit blogartikel mee in de rol van deze drie activiteiten, de verschillen tussen de definities en de voordelen voor het uiteindelijke eindresultaat.
De onderstaande afbeelding geeft grafisch het designproces weer. De Y-as laat de intensiteit van het contact met de klant zien en de X-as geeft een weergave van de tijd. Afhankelijk van het budget en de complexiteit van het project wordt iedere fase doorlopen, of worden een aantal fases overgeslagen. Bij een goede aanpak wordt er in ieder geval onderscheid gemaakt tussen de strategische onderdelen en de design activiteiten. Binnen deze laatste activiteiten spelen wireframes, mockups en prototypes een belangrijke rol om tot een definitief webdesign te komen.
Tijdens het maken van de wireframes staan de gebruikersgroepen centraal. Dit stelt de ontwerper in staat om de beste lay-out te bepalen binnen én tussen de pagina’s. Daarnaast besteedt de ontwerper aandacht aan verschillende contentblokken op de pagina om te voldoen aan de informatiebehoefte van de gebruikers. Wireframes zijn dus opgebouwd uit de belangrijkste elementen en is daarmee een platte weergave van de lay-out.
Je kunt de wireframes van een website zien als de bouwtekeningen van een huis; er wordt nog geen kleur gegeven aan het geheel en het is nog niet interactief. Het grote voordeel hiervan is dat de focus automatisch uitgaat naar de werking van de elementen. Doordat er nog geen verbindingen zijn tussen de elementen, is het eenvoudig om snel wijzigingen aan te brengen. We zetten wireframes dan ook vooral in als er sprake is van geavanceerde functionaliteiten.
Wireframes zijn vrij abstract en bevatten nog geen huisstijl elementen. De design elementen (kleuren, fonts en andere visuals) worden toegevoegd tijdens het maken van de mockups. In een mockup wordt de structuur en visuele weergave van de informatie duidelijk. Het eindresultaat is een visual design van de website.
Dit maakt een mockup geschikt voor een breder publiek dan de wireframes. Waar wireframes vooral waardevol zijn als communicatiemiddel voor het projectteam, is een mockup ook goed te interpreteren voor de eindgebruiker.
Bij minder complexe websites wordt er regelmatig alleen een mockup uitgewerkt. Bij DoubleWeb adviseren we dit alleen wanneer het concept al gevalideerd is en wanneer er geen uitgebreide functionaliteiten worden toegevoegd aan de website. Het volstaat dan om een mockup te maken en eventueel bij te schaven in één of twee feedbackrondes. Vervolgens wordt de mockup uitgewerkt tot een werkende WordPress website op maat.
Binnen een website is de werking van en interactie tussen functionaliteiten belangrijk. De wireframes en mockups gaan hier niet heel diep op in. Toch is het van belang om deze user interface (UI) te testen bij een testgroep voordat er gestart wordt met de bouw van de website. Dit kan met een prototype. Een prototype wordt vooral ingezet bij complexe concepten.
Omdat een prototype een simulatie is van het eindproduct, kan een prototype gebruikt worden om de werking en gebruiksvriendelijkheid van de applicatie te testen. Het testen van de interactie tussen de functionaliteiten is belangrijk voor de eindgebruiker en voor de ontwikkelaars. De ontwikkelaars kunnen met het prototype feedback geven op de werking en zijn met het prototype in staat om een betrouwbare en transparante berekening te geven van de ontwikkelingskosten. De designer gebruikt het prototype als het ware als communicatiemiddel naar het ontwikkelteam.
Met name wireframes en prototypes worden vaak onderschat in het designproces. Onterecht. Naar onze mening draagt het bij geavanceerde websites sterk bij aan het uiteindelijke resultaat en de user experience (UX). Je bouwt toch ook geen huis zonder een goede bouwtekening? Het maken van wireframes en prototypes scheelt vaak veel onnodige kosten. Het creëert in het voortraject al veel ruimte voor communicatie en conceptvalidatie. en de focus wordt gelegd op functie boven vorm.
