Het proces van het ontwerpen van een website

Voor het ontwerpen van een website is meer nodig dan Photoshop en/of Illustrator (andere beeldbewerkingsoftware is natuurlijk ook mogelijk. Deze twee zijn echter de meest gebruikelijke). Hoe krijgen we een effectieve en gebruiksvriendelijke website als eindresultaat? In dit artikel probeer ik mijn aanpak toe te lichten. Dit artikel is gebaseerd op mijn bevindingen en ervaringen als webdesigner. Heb je andere ideeen of toevoegingen op mijn aanpak? Deel het gerust met mij door een comment achter te laten!

1. Oriëntatie

Wat we als eerste moeten doen is een oriëntatiegesprek voeren met de opdrachtgever. Dit geeft inzicht in het soort project, de grootte en de kansen en bedreigingen. Een aantal belangrijke vragen die tijdens het gesprek beantwoord moeten worden:

• Waarom heeft u een nieuwe website nodig?
• Wie zijn de doelgroepen van de website? Wat zijn hun kenmerken?
• Wat wilt u bereiken met de website?
• Wat voor soort website wordt het (grotendeels al af te leiden door de eerste 3 vragen te beantwoorden)?
• Welke (soort) content is er nodig voor de website?
• Wat zijn de grafische eisen (bijvoorbeeld het aanhouden van bepaalde huisstijlrichtlijnen)?

2. Strategie

Na het oriëntatiegesprek, hebben we een goede input om wat lijnen uit te kunnen zetten. Tijdens stap twee bepalen we de invulling van de website. Hiermee bedoel ik; welke pagina’s er aangemaakt moeten worden & wat voor content er per pagina moet komen. Dit wordt door middel van een sitemap aangegeven. Bekijk hier een voorbeeld van een sitemap. Naast de sitemap worden de doelstellingen en doelgroepen van de website concreet vastgesteld. Na deze stap weten we precies welke templates (uniek ontworpen webpagina’s) er ontworpen moeten worden. We weten ook welke elementen er nodig zijn per template.

3. Interface schetsen

Het schetsen van een interface kan in principe gewoon op papier. Tijdens de eerste twee stappen is duidelijk geworden welke pagina’s en pagina elementen er nodig zijn. Tijdens het schetsen van de interfaces houden we rekening met een aantal dingen:

• Wat komt er op welke pagina?
• Welke pagina-elementen zijn belangrijk en welke zijn minder belangrijk?
• Hoe functioneert elke element? Bijvoorbeeld wat gebeurd er als de bezoeker een bepaalde knop indrukt? (interaction design)
• Hoe wordt de informatie verdeeld in de verschillende pagina-elementen? (information architecture)

Bekijk een korte voorbeeld van een interface schets in actie

4. Website Design

Nu we alle onderdelen geschetst hebben, kunnen we eindelijk aan de slag met design. Hierbij houden we de doelstellingen, de doelgroepen en de organisatie in de gaten.

Doelstellingen:

Het design moet aansluiten op de doelstellingen van de website. Bijvoorbeeld: “Offerte aanvragen genereren via de website” is een doelstelling van de opdrachtgever. De aanvraagformulier is dan een belangrijke pagina-element in de website. Het zou ook een goed idee zijn om een prominente knop te ontwerpen die verwijst naar het formulier.

Doelgroepen:

Het design moet het doelgroep aanspreken. MKB bedrijven en jongeren die festivals bezoeken zijn twee totaal verschillende doelgroepen. Het spreekt voor zich dat het design op de doelgroep aangepast moet worden.

Organisatie:

De uistraling van de organisatie moet meegenomen worden in het design, mits de opdrachtgever anders aangeeft. Het is verstandig om communicatie-uitingen van de opdrachtgever te verzamelen. Denk aan huisstijl, brochures, foto’s, folders etc.

Overige aandachtspunten voor design:

• Goed toepassen van typografie (titels, subtitels, metadata, broodtekst, links, rollovers, quotes)
• Rust en overzicht (voldoende witruimte tussen pagina-elementen, kleurgebruik)
• Gebruiksvriendelijkheid (heldere navigatie, Buttons en links duidelijk onderscheiden)

5. Feedback

Elke opdrachtgever heeft natuurlijk zijn/haar eigen ideeen over de invulling en design. Als designer is het jouw taak om hier wat mee te doen. Houd alleen in het achterhoofd dat jij als designer ook een adviserende rol moet innemen. Neem dus niet alle feedback blind over, maar adviseer de opdrachtgever in zijn/haar beslissingen.

6. Definitief Design & briefing voor development

Wanneer de opdrachtgever tevreden is met het ontwerp, kan er begonnen worden met het ontwikkelen van de website. Zorg ervoor dat je aantekeningen maakt voor de developer betreft het design. Door zo concreet mogelijk aan te geven hoe alles werkt.

Heb je zelf ook een bepaalde aanpak of wil je reageren op mijn aanpak? Deel het door een comment achter te laten!