De 8 fases van een website project

Nog voordat een website project van start gaat, hebben we allerlei grootse ideeën over hoe alle website-elementen met elkaar moeten samenhangen. We brainstormen over termen als wireframes, content management en lastige API-koppelingen die haarfijn op elkaar moeten zijn afgestemd. Graphics moeten een eenduidige boodschap uitstralen en de sociale media zijn het verlengstuk van de website. Oftewel, alles moet tot in de kleinste detail kloppen. Of dat in de praktijk altijd zo uitpakt? Niet helemaal. Dat komt in veel gevallen omdat we alles tegelijk willen doen en zo het overzicht verliezen. Een goede projectplanning is het devies. Uit onze ervaring verloopt elk succesvolle website project in 8 fases.

1. Projectafbakening

Het webdesign proces is niet heel anders dan alle andere marketing-en communicatie processen. Met de website wordt immers voorzien in een communicatiebehoefte waarin criteria als doelen en doelgroepen altijd de leidraad vormen. Het zal je dan ook niet verbazen dat de eerste stap is; het project afbakenen zodat er vanaf moment één duidelijkheid is bij alle betrokkenen. Grof gezien bestaat deze afbakening uit het bepalen van de website elementen, functionaliteiten, de doelen, concurrentie voorbeelden en content invulling. Het meeste daarvan zal wel tot de verbeelding spreken, maar wat betreft de concurrentie hebben we over sites van concurrenten die je als inspiratiebron kan (en eigenlijk moet) gebruiken. Je wilt je immers onderscheiden van de concurrentie, toch?

2. Projectomvang

Het definiëren van de projectomvang is één van de belangrijkste stappen. Waarom? Omdat we vaak té veel willen. Dat betekent te gedetailleerde eisen of te hoge verwachtingen van de nieuwe website. Daardoor wordt het project, logischerwijs, te omvangrijk. Het is daarom zaak om zo vroeg mogelijk te bepalen wat de doelen zijn, wie daarvoor verantwoordelijk zijn, en binnen hoeveel tijd de oplevering moet plaatsvinden. Ook is het belangrijk dat er genoeg besef is bij alle betrokken dat zijn of haar taak een spil is in het web. Oftewel, alle taken hangen met elkaar samen en om verder te kunnen moet er snel worden geleverd.

Tip: Gebruik het MoSCoW model om te bepalen welke website elementen prioriteit hebben. Zo voorkom je dat je website project een eindeloze proces wordt.

3. Wireframes en site-architectuur

Een fatsoenlijke website structuur bevat ook een sitemap en wireframes. De sitemap zorgt ervoor dat er een visueel beeld bestaat over de site-navigatie. In één oogopslag moet duidelijk zijn hoe de website structuur eruit ziet en wat de onderlinge relatie is tussen de pagina’s. Wirefames zijn schetsen die het bouwplan van een website vormen. Het verschil met een sitemap is dat wireframes zich meer richten op het design. Wireframes omvatten daarom ook alle andere processen die van invloed zijn op het functioneren van de website.

4. Visueel ontwerp

Zodra de blauwdruk met behulp van de sitemap en de wireframes is gedefinieerd is het tijd om aan het visuele gedeelte te werken. Alle theorie staat immers op papier en het is tijd voor de plaatjes. Hoe de graphics eruit zien ligt voor elke organisatie anders. Waarschijnlijk heb je al een huisstijl waarop de website kan worden afgestemd. Het merk en het imago spelen een belangrijke rol en het is belangrijk om met het visuele design voor herkenning te zorgen.

5. Website-ontwikkeling

We weten nu wat we willen en hoe dat eruit moet zien. Het is daarom tijd voor de volgende stap: de website-ontwikkeling zelf. Dat betekent dat alles HTML en CSS-professionals aan de slag kunnen met de invulling van de website. De ‘plaatjes’ worden nu omgetoverd naar een echt werkende website. De pagina’s worden ontwikkeld en ingevuld met alle teksten, video’s, afbeeldingen en andere media.

Tip: Doe goed onderzoek naar een geschikte CMS (Content beheer systeem). Zo bouwen wij bijvoorbeeld het liefst onze websites in WordPress, omdat deze gebruiksvriendelijk en in de basis Google-vriendelijk is.

6. Testfase

Natuurlijk moet er nog eerst worden getest, want alleen in een perfecte wereld werkt alles vanaf het eerste moment. Je doet er daarom goed aan om de site eerst op een testserver te plaatsen en zoveel mogelijk te testen. Dat betekent niet alleen kijken of de pagina’s er zoals gewenst uitzien, maar vooral hoe het met de functionaliteit is gesteld. Pak alle formulieren er maar eens bij en probeer om een contactformulier te verzenden, een reservering te maken, of een product te bestellen. Hoe de website er visueel uitziet is nog met het blote oog vast te stellen, maar of de website daadwerkelijk werkt is een kwestie van uitvoerig testen.

Tip: Test ook uitvoerig op verschillende mobiele apparaten. Wij merken dat de meeste mensen zich verkijken door alleen op hun desktop te testen, terwijl je meeste klanten je website bezoeken vanuit hun mobieltje.

7. Lancering

De grote dag is daar. Als het goed is heb je zo’n beetje elke denkbare functionaliteit getest, beoordeeld en goedgekeurd. Het is tijd om de site te lanceren en dat biedt een hoop voldoening. Meerdere mensen hebben een rol gespeeld in het website-ontwerp, maak er een leuke happening van!

Tip: Let op dat alles goed gaat bij de migratie van je oude naar de nieuwe site. Zorg met redirects ervoor dat je bezoekers, die ‘oude’ pagina-linkjes gebruiken, niet eindigen op een 404-pagina. Dat is slecht voor de bezoekerservaring en slecht voor je SEO (vindbaarheid in Google).

8. Website onderhoud

Toch betekent dat niet dat het werk er nu op zit. Alles behalve. We mogen dan wel over een project spreken, maar we hebben het hier wel over een doorlopend proces. Wees dus in de hoogste staat van alertheid. Je zult het de komende tijd nog wel even druk hebben met je website. Je site is nog piepjong en heeft constante zorg nodig. Zorg er daarom voor dat je dit project zoveel mogelijk eigen maakt. We hebben het hier immers over je digitale kindje. Denk aan de volgende zaken:

• Ben ik posities verloren in Google? Zo ja, schakel je SEO expert in om snel actie te ondernemen.
• Krijgt mijn nieuwe website genoeg zichtbaarheid? Voorkom een anti-climax: Draai campagnes, stuur nieuwsbrieven, post op social media etc.
• Wat zeggen de eerste website statistieken? Waar haken je bezoekers af, en welke pagina’s hebben een te hoge bounce-percentage?
• Aan welke volgende website elementen kunnen we beginnen? Je website kan altijd beter. Pak je MoSCoW document erbij 🙂

Neem gerust contact op met een van onze webdesigners. Bekijk hier al onze webdesign diensten.