Zes algemene stappen voor het maken van een website

Door Leeban gepubliceerd op Tuesday 04 February 19:54

Introductie

Het proces voor het maken van een website bestaat uit bepaalde stappen. Hieronder volgt zes algemene stappen voor maken van een website.

Het proces is anders per designer, maar over het algemeen zijn deze 6 stappen de basis voor het proces.

Belangrijk! Er zijn twee belangrijke en terugkerende activiteiten waarmee men rekening mee moet houden. Deze activiteiten dienen gedurende het gehele proces terug te komen.

Namelijk:

  1. Feedback: Vraag constant feedback na elke stap. Op deze manier bespaar je jezelf veel onnodige werk aan het eind.
  2. Testen: Test zoveel mogelijk uit gedurende het gehele project. Het is makkelijker om tijdens het project wijzigingen aan te brengen dan aan het eind.

Hieronder zijn de zes stappen weergegeven.

  1. Kennis
  2. Planning
  3. Design
  4. Code
  5. Lanceren
  6. Onderhoud

 

Stap 1 Kennis

Het is belangrijk om te weten wat je gaat bouwen. Deze stap is essentieel voor het hele project. Je moet weten wat het doel is voordat je gaat bouwen.

Elke website is anders, daarom moet je actief op zoek gaan naar het doel van de website en naar de wensen van de klant. De klanten weet meestal niet wat ze precies willen. Soms weten ze wel wat ze willen maar ze kunnen dit niet precies onder woorden brengen omdat ze de termen en de technologie niet kennen.

We beginnen met de design brief

De design brief

Om deze informatie bij elkaar te zoeken kunnen webdesigners gebruik maken van een zogenaamde designbrief. Een designbrief is eigenlijk een serie van vragen die worden voorgelegd aan de klant om de doelen van het project te begrijpen. Deze design brief wordt op den duur een steun voor de webdesigner, je kunt elke keer terug gaan om te weten wat je moet doen.

Een aantal standaard onderwerpen waarover je moet vragen zijn:

·       Hoofddoel van de website, wat moet gebruikers daar doen

·       Secundaire doelen

·       Doelgroep

·       Huisstijl (indien aanwezig)

·       Budget

·       Deadline

·       Voorbeelden van website die ze mooi/goed vinden

·       Voorbeelden van website die ze niet mooi/goed vinden

Stel ook andere vragen die je hebt.

 

Stap 2 Planning

Na het vergaren van de informatie en het opstellen van de designbrief komt de planningsfase. Hoe je de website gaat maken.

Onderzoek en ideeën

Tijdens de planning moet naar voren komen welke stappen genomen moet worden om de website te maken. Je moet onderzoek verrichten om de nog openstaande vragen te beantwoorden. Gebruik de designbrief als fundament.

·       Hoe gaat de website eruit zien

·       Wat is de huidige huisstijl of is er nog geen huisstijl

·       Hoe zien de websites van de concurrentie eruit

·       Eventueel - wat wordt je inspiratiebron

·       Welke kleuren ga je gebruiken

·       Wat voor fonts ga je gebruiken

Plan ook de unieke stappen die van belang zijn voor deze website.

Structuur

Bepaal wat de structuur van de website wordt. Stel ook een sitemap samen, zodat je weet welke pagina’s er allemaal terug komen. Daarnaast stel je ook de navigatie samen.

Schetsen – mock up - wireframing

Nu je meer informatie hebt is het de tijd om deze informatie op papier te zetten in de vorm van een schets. De eerste schets kan het menu zijn. Link de pagina’s aan elkaar met pijlen.

Vervolgens kun je ook beginnen met het schetsen van de lay-out van de website, op deze manier komt je creativiteit los. Dit is een serieus proces.

Tools en technieken

Nu kun je alvast nadenken over het gebruik van verschillende tools en technieken die je wilt gebruiken.

Bijvoorbeeld, Javascript, JQuery HTML5, CSS3, PHP, Ruby On Rails, CMS, Responsive design, enzovoort.

 

Stap 3 Design – Grafische Vormgeving

Na het vergaren van kennis, de designbrief en de planning komt de grafische vormgeving oftewel de design. Als je de voorgaande stappen goed hebt uitgevoerd dan is deze stap veel simpeler dan wanneer je meteen aan de slag gaat met de design.

Het proces is simpel. Open Photoshop, Fireworks, Gimp of een grafische editor naar keuze. Nu moet je de mock up/schets tot leven brengen in bijvoorbeeld Fireworks of Photoshop.

De design is meer dan alleen de homepage, je moet ook denken aan de verschillende subpages. Denk ook aan een versie voor mobiele apparatuur.

Je kunt ook de keuze maken of je echte inhoudstekst gaat gebruiken of dat je slechts gebruik gaat maken van de dummy tekst. Denk ook aan de afbeeldingen die je gaat gebruiken.

In deze fase is het heel belangrijk om feedback te vragen. Nu is het gemakkelijk om wijzigingen aan te brengen. Na het slicen en coderen is het lastig.

 

Stap 4 Code

Nadat je een volledige en goedgekeurde design hebt kun je aan de slag gaan met slicen en coderen van de website.

Begin met een standaard HTML en CSS template. Het is gemakkelijker als je al een set standaard templates hebt die je kunt gebruiken.

De website

Na de standaard template, vul je de head en de title met de benodigde code.

Begin aan een structuur van de belangrijke divs en de CSS dat je nodig hebt voor de design. Bijvoorbeeld je header, content en footer.

Daarna zet je alle afbeeldingen van de slice op hun plaats. Denk ook aan je tekst en afbeeldingen die je gaat gebruiken.

Testen

Test je website in verschillende browsers en maak het cross-browser.

Daarna moet je denken aan validatie. W3C validation.

Denk ook aan Google Analytics.

 

Stap 5 Lanceren – de website online brengen

Wanneer je gehele website compleet is dan moet je het online zetten.

 

Stap 6 Onderhoud

Het onderhoud gebeurt door de eigenaar of de webdesigner wordt soms ingehuurd om dit onderhoud te doen.

Denk aan een simpele training voor de website eigenaar als hij beslist om het onderhoud te doen.

Reacties (0) 

Voordat je kunt reageren moet je aangemeld zijn. Login of maak een gratis account aan.