Voorblad
Naam:
Studentennummer:
Datum: 9 april 2020
Naam opleidingsinstantie: NCOI
Naam opleiding: Online Communicatie en Social Media
Module: Webdesign
Beoordeling
10
Cijfer
10 (100%)
Motivatie en verbeterpunten
ANALYSE, BEELDVORMING EN PLANNING:
Als beoordelaar hoef je alleen maar 'index.html' te openen om te zien dat u de theorie kent en kunt
toepassen. Wat heeft u er een werk van gemaakt. Complimenten. U heeft er lang over gedaan, maar
dat is goed te zien. U introduceert Nagelstyliste Bianca, een eenmanszaak voor het stijlen van nagels
in Amersfoort. Zij heeft te weinig klanten om op een gezonde manier haar bedrijf te kunnen runnen en
ik heb voorgesteld om haar te helpen door middel van deze module.
DOEL EN DOELGROEP:
U vertaalt de primaire en secundaire doelen niet naar de aspecten kennis, houding en gedrag. U
beschrijft ze wel in goede uitgewerkte userneeds en businessgoals. Ook voegt u in Hoofdstuk 4 drie
uitgewerkte userscenario's toe.
FUNCTIONEEL ONTWERP:
U maakt een navigatiestructuur. De keuzes worden voldoende onderbouwd. U maakt
een paginaontwerp in de vorm van wireframes. Deze komen goed zichtbaar terug in de bijlagen van
de opdracht. Ook voor Mobile.
INHOUD WEBSITE:
U benoemt de vragen die u uzelf stelt bij het vaststellen van de informatiestructuur. Uw 'prototype'
oogt professioneel, rustig en verzorgd.
GRAFISCH ONTWERP:
Design is ruim voldoende. U kiest voor een stijl gebaseerd op de wensen van de klant en die in een
moodboard en een kleurenpalet samengebracht, terug te vinden in de Bijlagen. Font is goed leesbaar
en oogt passend bij de doelgroep.
OVERIG:
1. U verwijst regelmatig naar de verplichte literatuur van o.a. Duckettm Krug, Dabner.
2. Responsive Design komt via bijlagen, beschrijving en verwijzing aan bod.
3. Vormgeving van de opdracht is goed. Ook de website is voldoende compleet en
professioneel.
4. Mooie uitgebreide bijlagen.
1
, 5. De apart toegestuurde website voldoet aan de eisen zoals gesteld in de Exameninformatie.
Zichtbaar wordt dat u hier veel tijd in heeft gestopt.
6. Samenvatting is een goede inhoudelijk samenvatting.
Beste, van harte met deze beoordeling! Wat zal Bianca blij met u zijn. Zij krijgt een nagenoeg
complete website aangeleverd. Goed gedaan. Succes met het vervolg studie en succes met uw
carrière.
Voorwoord
Samenvatting
Moduleopdracht webdesign, module 1 van Online Communicatie en Social Media
Geschreven voor Nagelstyliste, een eenmanszaak voor het stijlen van nagels in Amersfoort.
Het klantenbestand van Nagelstyliste is niet heel groot. Met de huidige aantal klanten kan er niet aan
de volledige inkomsten worden voldaan. Dit heeft te maken met de verouderde website, niet goed
genoeg vindbaar in Google, geen doelgroep bepaling en het website bezoek wordt niet gemeten.
Door het maken van een SWOT-analyse is inzichtelijk geworden wat de sterkten en zwaktes zijn van
het bedrijf en wat de kansen en bedreigingen zijn.
Door onderzoek te doen bij bestaande klanten en bij mensen in de omgeving, is duidelijk geworden
dat de primaire doelgroep vrouwen zijn van tussen de 16 en 70. In een tabel zijn de persona’s en hun
customer journey inzichtelijk gemaakt.
Om de sfeer van de website te bepalen is een moodboard gemaakt. Daarmee is een concept ontstaan
voor de uitstraling van de website. De kleuren en foto’s die hierin verwerkt zijn, is het uitgangspunt
voor de website.
De missie van de nagelsalon is om mooie nagels te creëren bij de klant en ze tevreden de deur uit te
laten gaan zodat ze weer terugkomen. De handen van de klanten zijn het visiekaartje van de salon.
Hiermee wordt de mond tot mondreclame ingezet, kunnen daarvan mooie foto’s op de website worden
geplaatst, en dat komt weer ten goede van de potentiele klant. Zo draagt ook de website bij aan deze
missie.
De website wordt ingericht naar de wens van de klant. Denk aan snelle navigatie, een zoekfunctie,
broodkruimels, informatie over de producten en prijzen en reviews.
Er is onderzoek gedaan onder verschillende vrouwen en vaste klanten over wat zij belangrijk vinden
op de website. Dit is verwerkt in verschillende user scenario’s. Op basis van deze informatie is in kaart
gebracht wat de informatie- en navigatiestructuur moet worden op de website.
Op basis van alle informatie die nu bekend is, is er gestart met het maken van verschillende
wireframes voor de desktop- en de mobiele versie. Dit is een eenvoudige schets van de belangrijkste
informatie die op elke pagina moet komen. De vaste plekken zijn dan al ingericht wat het maken van
een website makkelijker maakt.
Kijkend naar de doelgroep waarvoor de website gebouwd moet worden en de dienst die wordt
aangeboden, is gekozen voor pastelkleurige tinten in het roze.
Voor het type Font is gekozen voor Sans Serif. Dit is een modern lettertype wat steeds meer online
wordt gebruikt.
2
, Inhoudsopgave
Inhoud
Voorblad.................................................................................................................................................1
Inhoudsopgave.......................................................................................................................................3
................................................................................................................................................................3
Inleiding..................................................................................................................................................3
Uitwerkingen..........................................................................................................................................4
5. Informatiestructuur....................................................................................................................8
6. Navigatiestructuur......................................................................................................................9
7. Wireframes.................................................................................................................................9
8. Grafisch ontwerp......................................................................................................................10
9. CSS Uitwerken...........................................................................................................................10
10. Uitwerkingen pagina’s voor laptop en mobiele telefoon........................................................11
..............................................................................................................................................................11
Literatuurlijst........................................................................................................................................11
Bijlagen.................................................................................................................................................12
Bijlage 1. Moodboard...................................................................................................................12
Bijlage 2. Informatiestructuur.......................................................................................................13
Bijlage 3. Sitemap.........................................................................................................................13
Bijlage 4. Mapstructuur HTML......................................................................................................14
Bijlage 5. Navigatiestructuur.........................................................................................................14
Bijlage 6. Wireframes....................................................................................................................15
Bijlage 7. Stijlcollage....................................................................................................................16
Bijlage 8. Voorbeelduitwerking homepage en onderliggende pagina..........................................16
Bijlagen zip bestand ( _MO_webdesign)
> HTML & CSS code homepage
> Index HTML bestand
> Print van homepage, behandelingen en prijzen en openingstijden en contact
Inleiding
De organisatie waarvoor ik deze moduleopdracht schrijf, is een eenmanszaak voor het stijlen van
nagels. De werkzaamheden van het bedrijf zijn zetten van gelnagels en gellak op handen en voeten,
3
Naam:
Studentennummer:
Datum: 9 april 2020
Naam opleidingsinstantie: NCOI
Naam opleiding: Online Communicatie en Social Media
Module: Webdesign
Beoordeling
10
Cijfer
10 (100%)
Motivatie en verbeterpunten
ANALYSE, BEELDVORMING EN PLANNING:
Als beoordelaar hoef je alleen maar 'index.html' te openen om te zien dat u de theorie kent en kunt
toepassen. Wat heeft u er een werk van gemaakt. Complimenten. U heeft er lang over gedaan, maar
dat is goed te zien. U introduceert Nagelstyliste Bianca, een eenmanszaak voor het stijlen van nagels
in Amersfoort. Zij heeft te weinig klanten om op een gezonde manier haar bedrijf te kunnen runnen en
ik heb voorgesteld om haar te helpen door middel van deze module.
DOEL EN DOELGROEP:
U vertaalt de primaire en secundaire doelen niet naar de aspecten kennis, houding en gedrag. U
beschrijft ze wel in goede uitgewerkte userneeds en businessgoals. Ook voegt u in Hoofdstuk 4 drie
uitgewerkte userscenario's toe.
FUNCTIONEEL ONTWERP:
U maakt een navigatiestructuur. De keuzes worden voldoende onderbouwd. U maakt
een paginaontwerp in de vorm van wireframes. Deze komen goed zichtbaar terug in de bijlagen van
de opdracht. Ook voor Mobile.
INHOUD WEBSITE:
U benoemt de vragen die u uzelf stelt bij het vaststellen van de informatiestructuur. Uw 'prototype'
oogt professioneel, rustig en verzorgd.
GRAFISCH ONTWERP:
Design is ruim voldoende. U kiest voor een stijl gebaseerd op de wensen van de klant en die in een
moodboard en een kleurenpalet samengebracht, terug te vinden in de Bijlagen. Font is goed leesbaar
en oogt passend bij de doelgroep.
OVERIG:
1. U verwijst regelmatig naar de verplichte literatuur van o.a. Duckettm Krug, Dabner.
2. Responsive Design komt via bijlagen, beschrijving en verwijzing aan bod.
3. Vormgeving van de opdracht is goed. Ook de website is voldoende compleet en
professioneel.
4. Mooie uitgebreide bijlagen.
1
, 5. De apart toegestuurde website voldoet aan de eisen zoals gesteld in de Exameninformatie.
Zichtbaar wordt dat u hier veel tijd in heeft gestopt.
6. Samenvatting is een goede inhoudelijk samenvatting.
Beste, van harte met deze beoordeling! Wat zal Bianca blij met u zijn. Zij krijgt een nagenoeg
complete website aangeleverd. Goed gedaan. Succes met het vervolg studie en succes met uw
carrière.
Voorwoord
Samenvatting
Moduleopdracht webdesign, module 1 van Online Communicatie en Social Media
Geschreven voor Nagelstyliste, een eenmanszaak voor het stijlen van nagels in Amersfoort.
Het klantenbestand van Nagelstyliste is niet heel groot. Met de huidige aantal klanten kan er niet aan
de volledige inkomsten worden voldaan. Dit heeft te maken met de verouderde website, niet goed
genoeg vindbaar in Google, geen doelgroep bepaling en het website bezoek wordt niet gemeten.
Door het maken van een SWOT-analyse is inzichtelijk geworden wat de sterkten en zwaktes zijn van
het bedrijf en wat de kansen en bedreigingen zijn.
Door onderzoek te doen bij bestaande klanten en bij mensen in de omgeving, is duidelijk geworden
dat de primaire doelgroep vrouwen zijn van tussen de 16 en 70. In een tabel zijn de persona’s en hun
customer journey inzichtelijk gemaakt.
Om de sfeer van de website te bepalen is een moodboard gemaakt. Daarmee is een concept ontstaan
voor de uitstraling van de website. De kleuren en foto’s die hierin verwerkt zijn, is het uitgangspunt
voor de website.
De missie van de nagelsalon is om mooie nagels te creëren bij de klant en ze tevreden de deur uit te
laten gaan zodat ze weer terugkomen. De handen van de klanten zijn het visiekaartje van de salon.
Hiermee wordt de mond tot mondreclame ingezet, kunnen daarvan mooie foto’s op de website worden
geplaatst, en dat komt weer ten goede van de potentiele klant. Zo draagt ook de website bij aan deze
missie.
De website wordt ingericht naar de wens van de klant. Denk aan snelle navigatie, een zoekfunctie,
broodkruimels, informatie over de producten en prijzen en reviews.
Er is onderzoek gedaan onder verschillende vrouwen en vaste klanten over wat zij belangrijk vinden
op de website. Dit is verwerkt in verschillende user scenario’s. Op basis van deze informatie is in kaart
gebracht wat de informatie- en navigatiestructuur moet worden op de website.
Op basis van alle informatie die nu bekend is, is er gestart met het maken van verschillende
wireframes voor de desktop- en de mobiele versie. Dit is een eenvoudige schets van de belangrijkste
informatie die op elke pagina moet komen. De vaste plekken zijn dan al ingericht wat het maken van
een website makkelijker maakt.
Kijkend naar de doelgroep waarvoor de website gebouwd moet worden en de dienst die wordt
aangeboden, is gekozen voor pastelkleurige tinten in het roze.
Voor het type Font is gekozen voor Sans Serif. Dit is een modern lettertype wat steeds meer online
wordt gebruikt.
2
, Inhoudsopgave
Inhoud
Voorblad.................................................................................................................................................1
Inhoudsopgave.......................................................................................................................................3
................................................................................................................................................................3
Inleiding..................................................................................................................................................3
Uitwerkingen..........................................................................................................................................4
5. Informatiestructuur....................................................................................................................8
6. Navigatiestructuur......................................................................................................................9
7. Wireframes.................................................................................................................................9
8. Grafisch ontwerp......................................................................................................................10
9. CSS Uitwerken...........................................................................................................................10
10. Uitwerkingen pagina’s voor laptop en mobiele telefoon........................................................11
..............................................................................................................................................................11
Literatuurlijst........................................................................................................................................11
Bijlagen.................................................................................................................................................12
Bijlage 1. Moodboard...................................................................................................................12
Bijlage 2. Informatiestructuur.......................................................................................................13
Bijlage 3. Sitemap.........................................................................................................................13
Bijlage 4. Mapstructuur HTML......................................................................................................14
Bijlage 5. Navigatiestructuur.........................................................................................................14
Bijlage 6. Wireframes....................................................................................................................15
Bijlage 7. Stijlcollage....................................................................................................................16
Bijlage 8. Voorbeelduitwerking homepage en onderliggende pagina..........................................16
Bijlagen zip bestand ( _MO_webdesign)
> HTML & CSS code homepage
> Index HTML bestand
> Print van homepage, behandelingen en prijzen en openingstijden en contact
Inleiding
De organisatie waarvoor ik deze moduleopdracht schrijf, is een eenmanszaak voor het stijlen van
nagels. De werkzaamheden van het bedrijf zijn zetten van gelnagels en gellak op handen en voeten,
3
