WEBDESIGN
Naam: M.C.C. Batens
Studentennummer: 4802654
Datum: 11-12-2020
Naam opleidingsinstantie: NCOI Opleidingen
Naam opleiding: Web-interaction design
Module: Webdesign
,Voorwoord
Voor u ligt de eerste moduleopdracht die ik heb geschreven voor de module webdesign. Dit
is onderdeel van de opleiding Web-Interaction design die wordt aangeboden via NCOI
Opleidingen. Dit verslag is geschreven voor het behalen van betreffende moduleopdracht.
Bij deze wil ik mijn leraar Rory Whittle bedanken voor zijn duidelijke lessen, fijne begeleiding
en ondersteuning tijdens dit proces. Ook wil ik Marlyn Wilders en Romy Vissers van de
onderneming Game makers bedanken voor hun tijd, fijne samenwerking en het beschikbaar
stellen van hun bedrijf. Zonder hun medewerking had ik dit verslag niet kunnen afronden.
Het schrijven van dit verslag was een leerzame ervaring en ik ben trots op het eindresultaat.
Ik wens u veel leesplezier toe.
Melanie Batens
Zoetermeer, 11 december ’20
,Samenvatting
Deze moduleopdracht Webdesign is geschreven voor Game makers. Dit zijn twee jonge
ondernemers die kaartspellen ontwikkelen met entertainment als doel. Game makers heeft
een nieuw spel ontwikkeld genaamd 60 Seconds Countdown. De ondernemers hebben voor
dit spel nog geen website ontwikkeld en kunnen geïnteresseerde klanten dus niet
doorverwijzen.
Als eerste wordt het bedrijf geïntroduceerd waar de moduleopdracht op is gebaseerd. De
primaire doelgroep zijn mannen en vrouwen van 12 tot 65 jaar. Dit is vastgesteld doormiddel
van een onderzoek. Bij dit onderzoek wordt gebruik gemaakt van het SDP-model.
Het doel van Game makers is om meer naamsbekendheid te creëren en om meer klanten te
kunnen bereiken. De website zal hier een belangrijk onderdeel van zijn. Om erachter te
komen wat de beste manier is om dit doel te bereiken, is onderzoek gedaan naar de
concurrenten en de behoeftes van de klant. Dit wordt gedaan met behulp van userscenario’s.
De informatie van de userscenario’s wordt gebruikt bij het ontwikkelen van de informatie- en
navigatiestructuur.
Door middel van card sorting wordt duidelijk welke informatie er op de website moet komen
om zo een prettige ervaring voor de bezoeker te creëren. Vanuit daar is er een website-
structuur opgezet. Dit draagt bij aan een optimaal zoekresultaat in google (SEO). Vervolgens
is er een mappenstructuur aangemaakt dat functioneel en overzichtelijk is.
Om de huisstijl van 60 Seconds Countdown in kaart te brengen, is er een stijlgids gemaakt.
In deze stijlgids worden de kleuren, lettertypes en overige elementen vastgesteld. De stijlgids
wordt het uitgangspunt voor de website.
Als alle nodige informatie verzameld is, wordt er door middel van wireframes een beeld
geschetst van hoe de website er uit zal gaan zien, met daarbij de nodige functionaliteiten.
Ook wordt hier de websitestructuur weergegeven. Hierna wordt de website opgebouwd door
middel van HTML en CSS.
, Inhoudsopgave
Voorwoord ................................................................................................................................................... 1
Samenvatting .............................................................................................................................................. 2
1. Inleiding ............................................................................................................................................... 4
2. Organisatie, doelgroep en doel ........................................................................................................ 5
Organisatie ........................................................................................................................................................ 5
Doelgroep.......................................................................................................................................................... 5
Doel .................................................................................................................................................................... 6
3. Userscenario’s .................................................................................................................................... 7
4. Informatiestructuur en mappenstructuur ....................................................................................... 7
5. Navigatiestructuur ............................................................................................................................. 8
6. Wireframes .......................................................................................................................................... 8
7. Grafische vormgeving ....................................................................................................................... 9
8. Uitwerking HTML & CSS ................................................................................................................... 9
Literatuurlijst ............................................................................................................................................ 10
Bijlagen ...................................................................................................................................................... 12
Bijlage 1. Flowchard.......................................................................................................................................... 12
Bijlage 2. Mappenstructuur .............................................................................................................................. 13
Bijlage 3. Wireframe desktopversie .................................................................................................................. 14
Bijlage 4. Wireframe mobiele versie ................................................................................................................. 15
Bijlage 5. Stijlgids .............................................................................................................................................. 16
Bijlage 6. Voorbeeld website ............................................................................................................................ 17
Naam: M.C.C. Batens
Studentennummer: 4802654
Datum: 11-12-2020
Naam opleidingsinstantie: NCOI Opleidingen
Naam opleiding: Web-interaction design
Module: Webdesign
,Voorwoord
Voor u ligt de eerste moduleopdracht die ik heb geschreven voor de module webdesign. Dit
is onderdeel van de opleiding Web-Interaction design die wordt aangeboden via NCOI
Opleidingen. Dit verslag is geschreven voor het behalen van betreffende moduleopdracht.
Bij deze wil ik mijn leraar Rory Whittle bedanken voor zijn duidelijke lessen, fijne begeleiding
en ondersteuning tijdens dit proces. Ook wil ik Marlyn Wilders en Romy Vissers van de
onderneming Game makers bedanken voor hun tijd, fijne samenwerking en het beschikbaar
stellen van hun bedrijf. Zonder hun medewerking had ik dit verslag niet kunnen afronden.
Het schrijven van dit verslag was een leerzame ervaring en ik ben trots op het eindresultaat.
Ik wens u veel leesplezier toe.
Melanie Batens
Zoetermeer, 11 december ’20
,Samenvatting
Deze moduleopdracht Webdesign is geschreven voor Game makers. Dit zijn twee jonge
ondernemers die kaartspellen ontwikkelen met entertainment als doel. Game makers heeft
een nieuw spel ontwikkeld genaamd 60 Seconds Countdown. De ondernemers hebben voor
dit spel nog geen website ontwikkeld en kunnen geïnteresseerde klanten dus niet
doorverwijzen.
Als eerste wordt het bedrijf geïntroduceerd waar de moduleopdracht op is gebaseerd. De
primaire doelgroep zijn mannen en vrouwen van 12 tot 65 jaar. Dit is vastgesteld doormiddel
van een onderzoek. Bij dit onderzoek wordt gebruik gemaakt van het SDP-model.
Het doel van Game makers is om meer naamsbekendheid te creëren en om meer klanten te
kunnen bereiken. De website zal hier een belangrijk onderdeel van zijn. Om erachter te
komen wat de beste manier is om dit doel te bereiken, is onderzoek gedaan naar de
concurrenten en de behoeftes van de klant. Dit wordt gedaan met behulp van userscenario’s.
De informatie van de userscenario’s wordt gebruikt bij het ontwikkelen van de informatie- en
navigatiestructuur.
Door middel van card sorting wordt duidelijk welke informatie er op de website moet komen
om zo een prettige ervaring voor de bezoeker te creëren. Vanuit daar is er een website-
structuur opgezet. Dit draagt bij aan een optimaal zoekresultaat in google (SEO). Vervolgens
is er een mappenstructuur aangemaakt dat functioneel en overzichtelijk is.
Om de huisstijl van 60 Seconds Countdown in kaart te brengen, is er een stijlgids gemaakt.
In deze stijlgids worden de kleuren, lettertypes en overige elementen vastgesteld. De stijlgids
wordt het uitgangspunt voor de website.
Als alle nodige informatie verzameld is, wordt er door middel van wireframes een beeld
geschetst van hoe de website er uit zal gaan zien, met daarbij de nodige functionaliteiten.
Ook wordt hier de websitestructuur weergegeven. Hierna wordt de website opgebouwd door
middel van HTML en CSS.
, Inhoudsopgave
Voorwoord ................................................................................................................................................... 1
Samenvatting .............................................................................................................................................. 2
1. Inleiding ............................................................................................................................................... 4
2. Organisatie, doelgroep en doel ........................................................................................................ 5
Organisatie ........................................................................................................................................................ 5
Doelgroep.......................................................................................................................................................... 5
Doel .................................................................................................................................................................... 6
3. Userscenario’s .................................................................................................................................... 7
4. Informatiestructuur en mappenstructuur ....................................................................................... 7
5. Navigatiestructuur ............................................................................................................................. 8
6. Wireframes .......................................................................................................................................... 8
7. Grafische vormgeving ....................................................................................................................... 9
8. Uitwerking HTML & CSS ................................................................................................................... 9
Literatuurlijst ............................................................................................................................................ 10
Bijlagen ...................................................................................................................................................... 12
Bijlage 1. Flowchard.......................................................................................................................................... 12
Bijlage 2. Mappenstructuur .............................................................................................................................. 13
Bijlage 3. Wireframe desktopversie .................................................................................................................. 14
Bijlage 4. Wireframe mobiele versie ................................................................................................................. 15
Bijlage 5. Stijlgids .............................................................................................................................................. 16
Bijlage 6. Voorbeeld website ............................................................................................................................ 17
