Website ontwikkeling stappenplan

Een webdesign start
met een uitgewerkt concept

De ontwikkeling van een website doorloopt bij TPF.NU een vijftal stappen. In gemiddeld 6 tot 10 weken gaan we van concept naar een website die voldoet aan het gewenste eindresultaat. In deze periode zitten we waarschijnlijk meerdere malen met je om tafel om de voortgang van het project te bespreken of om je goedkeuring te vragen. We maken een aantal afspraken na goedkeuring van de investeringskosten en het concept. Dan hebben we immers inzicht in de grootte van het project en je persoonlijke wensen.

Ook na oplevering blijven we graag betrokken bij je nieuwe website zodat wij je onder andere kunnen ondersteunen bij het algemene onderhoud. Daarnaast gaan de ontwikkelingen van het internet zeer snel waardoor technologische aanpassingen noodzakelijk zijn om te blijven voldoen aan de veranderende eisen van onder andere web-browsers.

Concept

De conceptfase bestaat uit de volgende onderdelen:

• Interview en toelichting stappenplan
• Functioneel ontwerp
• Flowchart en wireframes
• Kostenbegroting


INTERVIEW EN TOELICHTING STAPPENPLAN

Middels een informeel gesprek proberen we een helder beeld te krijgen van de doelgroep en doelstellingen, je dienst of product, de concurrentie, gewenste functionaliteit en de gewenste uitstraling. Ook willen wij in deze fase zoveel mogelijk bestaande documentatie verzamelen zoals statistieken, rapportages, klantenonderzoeken enz. Voor het interview hanteren wij veelal een standaard intake formulier zodat we niets vergeten. Daarnaast bespreken we dit document ‘Stappenplan’ samen met u zodat ook voor u alle informatie duidelijk is.

Overigens zullen er tijdens de ontwikkeling, indien nodig, meerdere gesprekken plaats vinden. Het ontwikkelen van een website is intensief traject waarbij wij u als klant zeker nodig hebben.


FUNCTIONEEL ONTWERP

De resultaten van het interview worden nauwkeurig geanalyseerd en verwerkt in een functioneel ontwerp. Het functioneel ontwerp verschaft inzicht in welke functionaliteit de website moet bieden. Het document zal niet te technisch worden omschreven en zal voor elke betrokken partij leesbaar zijn. De informatie uit dit plan moet namelijk nuttig zijn voor de alle betrokken teamleden (designers, developers, tekstschrijvers, fotografen, etc.). Het functioneel ontwerp is de blauwdruk van de te ontwikkelen website. In het functioneel ontwerp worden onder andere de volgende onderwerpen besproken:

• Betrokken partijen
• Algemene projectinformatie
• Structuur van de website
• Openstaande kwesties
• Realisatie gerelateerde zaken

FLOWCHART EN WIREFRAMES
Het functioneel ontwerp wordt meestal ondersteund door een flowchart en optioneel een aantal wireframes van de key-pagina’s. Middels de flowchart krijg je een schematische voorstelling van de website. Alle pagina’s uit het technisch ontwerp worden als het ware in een visuele structuur gegoten zodat de interactie tussen
deze schermen duidelijk wordt. Indien nodig wordt de flowchart ondersteund door
wireframes. Dit zijn schetsmatige weergaven van meestal de belangrijkste key-pagina’s van de website.

KOSTENBEGROTING

Zodra het technisch ontwerp, flowchart en eventuele wireframes zijn geaccordeerd
kunnen we een realistische kostenbegroting maken. Na schriftelijk akkoord op het
functioneel ontwerp, flowchart, eventuele wireframes en kostenbegroting is de opdracht een feit en wordt gestart met het webdesign.

Webdesign

Het webdesign bepaalt de uiteindelijke werking van de toekomstige website. De belangrijkste key-pagina’s worden visueel uitgewerkt zodat men een helder beeld heeft hoe toekomstige gebruikers de website gaan ervaren. Hierbij gaat het niet alleen om schoonheid, maar ook om gebruiksvriendelijkheid (usability), beleving (user experience/UX) en details. Aan details hechten wij bijzonder veel waarde. Hierbij is een sterke focus op zowel de kern en de uiteindelijke bezoeker van de website van groot belang (user-centered design).


PROTOTYPE

Bij grotere projecten wordt soms op basis van de wireframes eerst een werkend prototype gebouwd om een duidelijk beeld van de interactie te scheppen. Deze prototypes testen we middels speciale software zodat de informatie-architectuur en het interactie design voldoet aan de wensen van de eindgebruiker.


MOCKUP

De uitkomst van het webdesign is een pixel-perfect ontwerp van de website in de vorm van een ‘realistische’ mockup. Deze mockup wordt in de meeste gevallen online gepresenteerd om een realistisch beeld van de uiteindelijke website te geven. We werken standaard de desktop variant uit in de vorm van een zogenaamde style- guide. Komen we in deze fase samen tot nieuwe inzichten, dan wordt het webdesign daar vanzelfsprekend op aangepast.

Realisatie

De realisatie is een belangrijke stap in de ontwikkeling van de website. De website
moet uiteindelijk feilloos functioneren op verschillende apparaten, waarbij elk apparaat verschillende eisen stelt aan de website.

Door de nauwe samenwerking tussen de designer en developer zal het webdesign en de realisatie naadloos op elkaar aansluiten. Hierdoor kunnen we de bezoekers van de uiteindelijke website een unieke gebruikerservaring bieden. Functionaliteit, transities, animaties en eventuele verschillende versies voor verschillende apparaten (responsive) zullen in nauwe samenwerking worden ontwikkeld. De realisatie bestaat uit de volgende onderdelen:

• HTML5 / CSS3 de techniek voor het realiseren van hedendaagse websites
• Javascript voor het ontwikkelen van dynamische onderdelen en effecten
• Responsive, zodat de website goed uitziet op alle apparaten
• CMS, voor het makkelijk onderhouden van de website

HTML5 / CSS3

Middels HTML5 (structuur en inhoud) en CSS3 (opmaak) worden van de key-pagina’s
werkbare webpagina’s gemaakt. Bij het schrijven van de code houden we
rekening met onder andere zoekmachines en (moderne) webbrowser specificaties.
Daarnaast zullen streven naar valide HTML5/CSS3 code die voldoet aan de
algemene webrichtlijnen.


JAVASCRIPT
Middels Javascript wordt de website dynamisch waarbij het bijvoorbeeld gaat om
interactieve onderdelen, sliders, pop-up pagina’s, uitklapmenu’s, effecten en feedback.
Bij het schrijven van de Javascript code maken we meestal gebruik van jQuery
en bestaande plug-ins. Op deze manier kunnen we op een efficiënte en betaalbare
manier de beste gebruikerservaring creëren. Mocht er specifieke functionaliteit
gewenst zijn die niet te realiseren is met jQuery of plug-ins dan schrijven we de
code geheel op maat.


RESPONSIVE
Tegenwoordig surft een groot deel van de bezoekers met verschillende apparaten
zoals tablets en smartphones. Om deze reden is het belangrijk om een website
responsive te maken, zodat de website op alle apparaten de juiste beleving en
gebruikerservaring biedt. Bij het ontwikkelen van een responsive website hanteren
we het ‘desktop first’ principe waarbij de website vanuit het grootste scherm wordt
opgebouwd naar kleinere schermen en resoluties.

Content Management Systeem

De website wordt gekoppeld met het open-source JAMES content management systeem (CMS). Middels het CMS is de website op een makkelijke manier te vullen en te onderhouden. De meeste content zoals o.a. teksten en afbeeldingen zijn dynamisch in te vullen.

Van alle key-pagina’s worden templates en blokken gemaakt die te gebruiken zijn in het CMS. Hierna is het mogelijk om de website te gaan invullen met tekst, afbeeldingen, enz. De website wordt o.a. gekoppeld aan Google Tag manager, Google Analytics en Google Search Console.

Invulling website

De website is klaar voor verdere invulling. Het invullen van de website is minstens zo belangrijk dan de voorgaande stappen. In principe kunt u vanaf dit moment de website zelf gaan invullen met teksten, afbeeldingen, enz. Het is ook mogelijk om ons de initiële invulling te laten verzorgen.


TRAINING

Na een korte training op onze locatie kunnen redacteuren aan de slag met het invullen van de website middels het CMS. Een succesvolle website bevat relevante en actuele informatie. De invulling van de website dient met de grootste zorg te gebeuren omdat het zowel in visuele als technische zin het succes van de website bepaalt. Wij helpen u op weg door tevens een paar handzame richtlijnen mee te geven met betrekking tot zoekmachine optimalisatie (SEO). Wij zijn ervan overtuigd dat uw website met de juiste tips en technieken een unieke gebruikerservaring kan bieden en daarmee ook hoger kan scoren in de zoekresultaten.


INITIËLE INVULLING

Door kennis en tijdgebrek wordt er in de meeste gevallen voor gekozen om de initiële invulling door ons te laten verzorgen. Indien dit door ons wordt uitgevoerd dan zorgen wij ervoor dat alle aanwezige inhoud op de best als mogelijk manier wordt ingevuld. We houden rekening met zowel uw bezoekers als zoekmachines. De invulling van website wordt pas opgeleverd als het geheel voldoet aan uw verwachtingen.

Overdracht en verder

Het grote moment is gekomen waar de website klaar is om online te gaan. Bij de
overdracht nemen we samen nog één keer de website door. Eventueel helpen wij
je mee met de lancering in de vorm van bijvoorbeeld een online of offline mailing of presentatie. Ook kunnen we je ondersteunen met de realisatie van campagnes
met bijvoorbeeld sociale media of online advertising. Tot slot blikken we terug op de samenwerking en is het project gereed en opgeleverd.


VERBETEREN EN GROEIEN
We streven ernaar om actief betrokken te blijven bij het onderhoud en verbeteren van je nieuwe website.

Onze ervaring is dat een actuele website eerder succesvol en return on investment (ROI) is en goed presteert in zoekmachines. Ook is het belangrijk om te blijven inspelen op de veranderingen op het web en de manier waarop bezoekers de website te gebruiken. Zo kunnen we bijvoorbeeld middels statistieken en click-testen het gebruik van de website in kaart brengen en waar nodig bijsturen.


ONDERHOUD

Vaak is er te weinig tijd en kennis in huis om een website actueel te houden. Wij blijven heel graag betrokken om te zorgen dat website actueel blijft. Ook kunnen wij u ondersteunen met bijvoorbeeld hoogwaardige en geoptimaliseerde content, slimme online campagnes en vakkundige inzet van social media. Maar ook verzorgen wij bijvoorbeeld webhosting en CMS onderhoud voor onze klanten. Door onze ruime ervaring zijn wij ervan overtuigd dat we kunnen samenwerken om een succesvolle website te creëren, waarop zowel u als wij trots kunnen zijn.

Klaar om een project te starten?
Wij ook!


*
*
*
Bel ons:050 211 1970
Contactgegevens

Helperpark 292F
9723ZA Groningen

T. 050-2111970
E. info@tpf.nu

Support

+31502111970 @TPF.NU

Het kantoor van TPF is bereikbaar van 9.00 tot 17.00.
Voor supportzaken en dringende ondersteuning in de avond of het weekend kun je bellen op het mobiele nummer van je contactpersoon.

IBAN: NL98RABO0153466065
KVK: 01166569
BTW: NL.8214.93.759.B01