Hoe maken wij een website?

wireframes_pencil

In deze blogpost leggen we uit welke stappen we allemaal nemen om een goede website te maken. Geen paniek, het is geen al te technisch verhaal.

De bezoeker voorop

Bij de realisatie van een website zijn we niet enkel uitvoerder maar hebben we ook een adviserende rol. Zo zullen we er steeds over waken dat de site gemaakt wordt voor de hoofdrolspeler in het hele verhaal: de bezoeker en gebruiker van de site. De inhoud is het belangrijkst, de website zelf dient die zo goed mogelijk over te brengen. De uitdrukking 'form follows function' is hier zeker op zijn plaats.

Uitgebreid projectdossier en/of agile approach

De meeste websites hebben een vrij stevig voortraject. Bij de meeste projecten start het programmeren pas wanneer precies is vastgelegd wat we gaan maken.

In sommige gevallen is een andere aanpak aangeraden, met de name de 'agile approach'. Hierbij gaan we telkens kleine doelen vastleggen, deze uitwerken, evalueren met de klant en daarna nieuwe doelen voorop stellen. In de meeste gevallen staan de meeste wensen vooraf al vast, al is dat soms ook niet zo (bijvoorbeeld indien het om experimentele functionaliteit gaat). Er zijn verschillende reden om agile te werken:  als we een bestaand project overnemen, indien de doelstellingen nog niet vastliggen, indien het project zo omvangrijk is dat het niet mogelijk is om alles tot in de puntjes vast te leggen, ...

De verschillende fase's op een rijtje

Tijdslijn voor het ontwikkelen van een site

De uitwerking verloopt in verschillende fases, de inhoud en het aantal fases kunnen verschillen naargelang de grootte van het project. Sommige stappen kunnen elkaar geheel of gedeeltelijk overlappen.

  • Kick-off meeting
  • Gedetailleerde analyse
    • functionele analyse
    • navigatiestructuur
    • wireframes
    • technische analyse
    • opstellen planning
  • Opstellen projectdossier
  • Ontwerp
  • Copywriting
  • Ontwikkeling
  • Testen en kwaliteitscontrole
  • Opleiding en documentatie
  • Invullen van de website
  • Oplevering
  • Garantie en ondersteuning

In samenwerking met vaste partners kunnen wij u ook bijstaan voor zoekmachine optimalisatie, zoekmachine positionering en andere diensten. Deze diensten zijn niet minder belangrijk dan wat we hierboven opsommen maar in deze blogpost willen we ons vooral toespitsen op de meest zichtbare aspecten van de bouw van uw website.

Kick-off meeting

De kick-off meeting is, zoals de naam laat vermoeden, de echte start van het project. Tijdens deze meeting overlopen we opnieuw de wensen van de klant en nemen we de nodige notities om de functionele analyse uit te werken. We polsen ook naar de gewenste (grafische) stijl zodat we nadien snel op één lijn zitten bij het uitwerken van de eerste ontwerpen.

Analysefase

In deze fase leggen we de wensen en de doelen van het project zo gedetailleerd mogelijk vast. Dit gaat gepaard met veel communicatie met de klant, maar ook intern. We zoeken uit met welke aanpak we het beste resultaat kunnen bereiken, of het technisch haalbaar is, toetsen alles met het budget, maken een planning op, enzomeer.

  • Functionele analyse: Vastleggen van de functionaliteit van de site. Een beschrijving van wat op welke pagina staat, wat de algehele werking is.
  • Navigatiestructuur: Bepalen van de ideale navigatiestructuur, deze wordt vaak afgestemd met usability-specialisten. Alhoewel de menustructuur bij de meeste sites beheerbaar is, is het toch belangrijk deze zo veel als mogelijk vooraf te bepalen. De indeling heeft een grote invloed op hoe de bezoeker de site ervaart en hoe wij dit best grafisch aanpakken.
  • Wireframes: Wireframes zijn als het ware 'schetsen' van de site. Elke belangrijke pagina wordt getekend maar van grafische opmaak is nog geen sprake. De wireframes geven weer welke informatie op welke pagina staat en wat het onderlinge verband is.
  • Technische analyse: Dit is een technisch document en beschrijft hoe alles uitgewerkt wordt. Alle mogelijke inhoudstypes, veldjes, blokjes etc. worden beschreven. Aan de hand van dit document wordt de website geprogrammeerd.
  • Planning: Na het aanmaken van alle bovengaande elementen wordt de planning opnieuw onder de loep genomen en bekijken we de haalbaarheid. 

Wireframes van een website

Het projectdossier is een dossier dat voorgaande elementen bundelt. Dit wordt overhandigd of gedeeld met de klant.

Ontwerp & Copywriting

De ontwerper baseert zich op het projectdossier, de wireframes en de feedback van de klant om een ontwerp op maat te maken. In de meeste gevallen maken we eerst een ontwerp dat de stijl bepaalt en elementen bevat die op verschillende delen van de website voorkomen. Op basis van de feedback van de klant wordt dit ontwerp bijgeschaafd.

Niet zelden kiezen we voor een 'mobile-first approach'. We ontwerpen eerst de mobiele versie omdat de beperkingen van mobiele toestellen ons dwingen grondig na te denken over de de vorm en plaatsing van alle elementen.

Indien mogelijk start de copywriting samen met het ontwerp, ook de teksten zijn een belangrijk stijlelement dat bepalend is voor het karakter van de site.

Ontwikkeling

De grondige analysefase zorgt ervoor dat de ontwikkeling vlot en voorspelbaar verloopt. Afhankelijk van de omvang van het project wordt dit uitgewerkt door één of meerder programmeurs. Zelfs wanneer het project grotendeels door één programmeur uitgewerkt wordt zal deze op regelmatige basis zijn voortgang met andere programmeurs bespreken. Op deze manier zorgen we er voor dat er meerdere ogen over dezelfde code gegaan zijn en dat we kwaliteit kunnen garanderen.

Ontwikkeling valt in te delen in back-end ontwikkeling en front-end ontwikkeling. Back-end ontwikkeling is de uitwerking van de algemene functionaliteit, opbouwen van de database, gebruikersrollen, ... Front-end ontwikkeling spits zich toe op het zichtbare gedeelte van de website. Deze taken worden steeds door gespecialiseerde mensen uitgevoerd.

Bij grote projecten wordt de uitwerking in stukken verdeeld. Na ieder afgewerkt stuk wordt het resultaat samen met de klant bekeken zodat er indien nodig snel kan bijgestuurd worden.

Testen en kwaliteitscontrole

De testen en de kwaliteitscontrole worden doorgaans uitgevoerd door een persoon die niet bij de ontwikkeling van het project betrokken is. Het verkregen resultaat wordt vergeleken met het projectdossier en getoetst met de eisen van de klant. Bij sommige projecten worden ook automatische testen uitgeschreven. Dit kan handig zijn om na te gaan of de website bestand is tegen de omstandigeheden waarvoor hij gemaakt is.

Enkele voorbeelden:

  • Stel dat de site een inschrijvingsformulier voor een evenement bevat, dan zullen wij testen of deze duizenden gelijktijdige bezoekers aankan.
  • Bij een webshop zullen we controleren dat er geen negatief getal kan ingevuld worden bij het aantal bestelde producten. 

Opleiding en documentatie: het beheren van uw website

Wij maken uitsluitend site die u zelf kan beheren, het is dus de bedoeling dat u (of iemand die hiervoor aangesteld is) aan de slag kan gaan met de site. Al is de bouw van een website een vrij technisch verhaal, de definitie van wat we best maken is dat niet. Daarbij verliezen we het comfort niet uit het oog. Het beheer en onderhoud van uw site wordt zo door ons afgestemd dat die taak vlot en aangenaam verloopt.

De mensen die betrokken zullen worden bij het invullen en opvolgen van de site krijgen een opleiding en een beheersaccount afgestemd op hun taak. Elke website bevat 'rollen', dat is een set van beheersrechten. De hoofbeheerder kan nieuwe gebruikers aanmaken en deze de juiste rol toekennen.

Een handleiding op maat voor het project wordt uitgewerkt en overhandigd aan de klant.

Vaak kan de invulling reeds starten als het project nog niet volledig is afgerond. Zo kunnen we meteen ingrijpen indien er opmerkingen of vragen die opduiken bij het invullen van de site. 

Indien gewenst kunnen wij mensen inschakelen om uw site in te vullen, u te begeleiden of de nodige correcties uit te voeren. Op deze manier kunnen we ervoor zorgen dat de teksten grammaticaal correct zijn, de stijl goed zit en de site een goede score kan halen in zoekmachines.

En wat als mijn site af is?

Na oplevering start een garantieperiode van 3 maanden. Tijdens deze periode zullen wij het resultaat evalueren, indien nodig fouten oplossen en u bijstaan waar nodig. De meeste klanten kiezen er voor om de garantieperiode uit te breiden door een onderhoudscontract te nemen. Wanneer de site gedekt is door een onderhoudscontract zorgen we voor regelmatige updates, controle van de veiligheid, ondersteuning, enzomeer.

Screenshot statistieken website SKEPP

Wij voorzien bij elke site een basisoptimalisatie voor zoekmachines, dewelke kan uitgebreid worden met een SEO contract. Samen met onze partner zal de site dan op geregelde tijdstippen gescreend en getest worden en sturen we deze bij waar nodig (of geven we u het nodige advies).

Indien gekozen werd voor een SEA (Search Engine Advertising - Zoekmachine Advertentiecampagne) dan start deze na afronding van de site. Deze campagnes vereisen een continue opvolging. Dit kan u uitbesteden aan één van onze parters, of u kan er voor kiezen om hiervoor opgeleid te worden.

Een goede site is nooit volledig af, maar steeds in beweging.