Als je een huis bouwt, begin je niet meteen met het uitzoeken van de keuken of de kleur op de muur. Eerst moet de fundering gelegd worden. Niet het spannendste onderdeel van het bouwproces, maar wel het deel dat bepaalt of alles wat daarop gebouwd wordt stevig blijft staan.
Voor een website geldt precies hetzelfde. Natuurlijk wordt iedereen enthousiast van een mooi ontwerp. En terecht. Maar voordat een designer aan de slag gaat of een ontwikkelaar de eerste regel code begint te tiepen, moet eerst helemaal duidelijk zijn wat de website eigenlijk moet doen. Voor wie is de website straks bedoeld? Met welk doel? En hoe zorgen we ervoor dat bezoekers er straks gemakkelijk hun weg vinden? Daar komt het functioneel ontwerp om de hoek kijken.
Wat is een functioneel ontwerp eigenlijk?
Zie het als de blauwdruk van een website. Net zoals een architect eerst een bouwtekening maakt voordat de eerste steen wordt gelegd, brengen wij eerst de structuur van een website in kaart. We bepalen welke pagina’s nodig zijn, welke informatie daarop komt, hoe bezoekers navigeren en welke functionaliteiten aanwezig moeten zijn.
Dat doen we niet in tekst alleen, maar vooral visueel. Met wireframes maken we een eerste versie van de website waarin alle belangrijke onderdelen al zichtbaar zijn. Zonder kleur, zonder foto’s, zonder afleiding. Alleen de structuur en functionaliteit.
Hoe pakket we dat aan?
Stap 1: Een uitgebreide kick-off
Een goed functioneel ontwerp begint niet in ons ontwerpprogramma Figma, maar aan tafel. Tijdens een kick-off sessie nemen we uitgebreid de tijd om jullie organisatie of bedrijf, doelgroepen en ambities te leren kennen.
Vragen die dan vaak voorbij komen:
- Wat moeten bezoekers straks kunnen doen?
- Welke informatie is het belangrijkst?
- Welke vragen krijgen jullie nu vaak?
- Welke processen willen jullie digitaliseren?
- Welke systemen moeten gekoppeld worden?
- Wat moet de website opleveren?
Juist in deze fase komen vaak inzichten naar boven die later bepalend zijn voor het succes van de website.
Stap 2: Wireframes maken
Op basis van de gesprekken werken we de eerste wireframes uit. Dat zijn schematische ontwerpen waarin de structuur van de website en de belangrijkste functionaliteiten zichtbaar worden. Nog zonder kleuren, foto’s of een uitgewerkt design. Zo kunnen we ons namelijk volledig richten op de inhoud en gebruiksvriendelijkheid.
Misschien lijkt het wireframe hieronder op het eerste gezicht niet meer dan een verzameling grijze vlakken. Maar schijn bedriegt! Juist in deze fase worden de belangrijkste keuzes gemaakt. Waar komt welke informatie? Welke route leggen bezoekers af? En hoe zorgen we ervoor dat ze intuïtief hun weg vinden?
Hieronder zie je een stukje van het wireframe van onze nieuwe website. (Dus ja, wij volgen ons eigen advies. Eerst een doordacht functioneel ontwerp, daarna pas het design!)
Meestal ontwikkelen we tussen de vijf en acht verschillende templates die later voor meerdere pagina’s binnen de website gebruikt kunnen worden. Denk bijvoorbeeld aan:
- Homepage
- Overzichtspagina
- Detailpagina
- Contactpagina
- Vacaturepagina
- Cases of projecten
Op deze manier ontstaat een compleet beeld van hoe de website straks gaat functioneren!
Voorbeeld: SFA Architecten
Voor SFA Architecten werkten we eerst de volledige websitestructuur uit in wireframes. Omdat het een vrij complexe website was met veel informatie, was het belangrijk om vooraf goed na te denken over de balans tussen documenten, referenties en achtergrondinformatie. In de wireframes zie je hoe die structuur stap voor stap vorm krijgt voordat er ook maar één ontwerpkeuze wordt gemaakt.
Zo konden we al vroeg testen of bezoekers eenvoudig de juiste projecten konden vinden en of de belangrijkste informatie voldoende aandacht kreeg.
Stap 3: Feedback verwerken voordat er gebouwd wordt
Een van de grootste voordelen van wireframes is dat wijzigingen snel doorgevoerd kunnen worden. Tijdens feedbackrondes bespreken we samen de structuur en functionaliteiten. Opmerkingen van opdrachtgevers verwerken we direct in de wireframes. Dat is veel efficiënter dan wanneer aanpassingen pas tijdens de ontwikkeling of na oplevering worden ontdekt. Wanneer iedereen tevreden is over de opzet, ligt er een stevig fundament voor de volgende fase: het visuele ontwerp!
Voorbeeld: Movida
Bij Movida lag de situatie net iets anders. Hier werd een stijlgids aangeleverd, maar nog geen volledig websiteontwerp. Vanuit die visuele basis hebben wij de website verder ontworpen en uitgewerkt. Juist dan zijn wireframes extra waardevol. Ze zorgen ervoor dat eerst de inhoud, structuur en gebruikerservaring kloppen voordat het visuele ontwerp verder wordt ingevuld. Daardoor ontstaat niet alleen een mooie website, maar ook een website die logisch werkt voor bezoekers.
Waarom besteden we hier zoveel aandacht aan?
Omdat we in de praktijk zien dat een goed functioneel ontwerp vrijwel altijd leidt tot een beter eindresultaat! En uiteindelijk komt het erop neer dat het ontwikkelen van een website hierdoor veel doordachter en efficiënter verloopt.
Het zorgt voor:
- Meer duidelijkheid tijdens het project
- Betere afstemming tussen opdrachtgever en ontwikkelteam
- Minder verrassingen tijdens de bouw
- Slimmere gebruikerservaringen
- Een website die makkelijker uitbreidbaar is
Of het nu gaat om een WordPress website, een maatwerk website of een compleet digitaal platform: een sterke fundering maakt het verschil.
Ook een website laten maken?
Ben je bezig met een nieuwe website, een redesign of een digitaal platform? Dan denken we graag -vanaf het begin al!- met je mee.
Tijdens een eerste gesprek kijken we niet alleen naar hoe een website eruit moet zien, maar vooral naar wat hij moet bereiken. Want de mooiste websites beginnen vaak niet met een ontwerp, maar met een goed plan.
Geen reacties