Ontwerprapport
Roel Wamelink, C1G, Webdesign, Roelwamelink@outlook.com 1
Ontwerprapport
Roel Wamelink C1G Webdesign Roelwamelink@outlook.com studentenummer: 550581 2
Inhoudsopgave Ontwerprapport 2.2 Flowchart 2.3 User Case Scenario 2.4 Navigatie ontwerp 2.5 Zes schetsen 2.6 Drie wireframes 2.7 Grafisch ontwerpen pagina’s 2.7b Eigen contentmatrix
Testrapport Testen reflectie op testrapport
Eindproduct screenshots eindproduct reflectie
3
4
Inleiding In dit ontwerprapport zie je mijn ontwerpen en hoe ik daar met schetsen naar toe heb gewerkt. Ook zie je hoe ik door middel van een Trello test feedback heb gekregen. Dit ontwerprapport is voor een goede doelen website. De opdracht was om de website “whocares.org� te verbeteren. Ik heb dit gedaan door middel van een website waar je zelf een actie kan beginnen. Hierbij kan de klant zelf een actie starten of bedenken. Op deze manier probeer ik meer mensen te activeren om zelf een actie te beginnen. Op deze manier weten de mensen zeker dat het geld bij het goede doel terecht komt. Ook komen meer mensen over dit concept te weten doordat mensen hun actie verspreiden en delen met andere mensen. Ik sluit dit rapport af met een reflectie verslag waarin ik bekijk wat ik beter had kunnen doen en wat goed ging.
5
2.2 Flowchart
6
2.3 User Case Scenario De gele route is de route die de klant zou moeten volgen. Als de doelgroep de gele route volgt Dan ervaart hij de website het best. Hij kiest ervoor om het introductiefilmpje te bekijken. Dit is een inspirerende video die de kijker moet overhalen om een eigen actie te gaan starten. Nadat hij de video bekeken heeft klikt hij op de ‘‘start je eigen actie’’ knop. Hierdoor komt hij op een pagina terecht waar hij uit vier acties kan kiezen. Als hij een zelf verzonen actie wil beginnen klikt hij op de eigen actie knop. Deze knop stuurt hem naar een informatiepagina. Op deze pagina staat informatie over zelfverzonnen acties. Hij bekijkt de video die op deze pagina staan en leest vervolgens de informatie die eronder staat. Nu alles duidelijk ik klikt hij op de ‘beginnen maar” knop. Deze knop stuurt hem naar een in vul formulier. Dit formulier vult hij vervolgens uitgebrijd en enthousiast in. Dan klikt hij op verzend en zijn actie wordt verzonden. Nadat de actie verzonden is wordt de gebruiker naar de laatste pagina gestuurd. Op deze laatste pagina staat dat de actie succesvul verzonden is. De gebruiker leest nog wat informatie over hoe het verder gaat. Daarna bekijkt hij de slot video, in deze video ziet hij een aantal geslaagde acties om gemotiveerd te raken met zijn eigen actie. Tot slot klikt hij op de ‘‘deel je actie’’ knop om zijn actie de wereld in te sturen!
7
2.4 Navigatie ontwerp
Navigatiebalk
Buttons
8
Klikbare afbeeldingen 9
2.5 Zes schetsen
10
Schetsen homepagina 11
12
Aanvullende schetsen
13
2.6 Wireframes
Actie kiezen pagina
14
Home pagina
15
Vul in pagina
16
Informatie pagina
17
Kenmerken designs: - Simpel - Duidelijk - Strak - Terugkomend logo - Herkenbare buttons - Korte duidelijke teksten - Begeleidende video’s
18
Verzonden pagina
19
2.7 Grafische ontwerpen pag
Kies pagina
20
gina’s
Homepagina
21
Vul in pagina
22
Informatie pagina
23
24
Verzonden pagina
25
2.7B Eigen contentmatrix Design Elements Cognition: - De wat langere teksten geven de belangrijke uitleg. Door deze uitleg te lezen begrijpt de gebruiken alles beter.
- Door een knop te maken van een hardloopster samen met het woord sponserloop, kan de bezoeker in een oogopslag zien waar het over gaat.
Association: - De klant herkent het lampje en verbind dit met een idee. Op deze manier weet de Association: - De korte vertellen hoeveel mensen er al klant dat het om een eigen idee gaat. mee hebben gedaan. Als mensen dit lezen gaan mensen eerder meedoen omdat Affect: - Door bijvoorbeeld een plaatje van een ze graag met de groep mee gaan. vrolijke collecteerder te gebruiken, voelen mensen zich meer aangetrokken om dit zelf Affect: te gaan doen De grote koppen zijn er om mensen te activeren.
Iconic Elements Cognition: - De oranje knoppen bevatten een aantal woorden waardoor de mensen weten wat er gebeurt als ze er op klikken.
Texture / Decoration
Cognition: De oranje kleur helpt de bezoeker om de belangrijke dingen te onderscheiden. Zo komen de oranje knoppen beter naar voren op de witte achtergrond.
Association: De grijze balk die onderaan elke pagina staat, laat de klant weten dat ze op het punt aan zijn gekomen dat ze door moeten klikken. Door een knop in deze grijze balk te plaatsen, weten de mensen dat ze hier op Affect: - Het terugkomende Whocares logo geeft moeten klikken. de mensen het gevoel dat ze bezig zijn Affect: voor een goed doel. Zolang als het logo op de pagina staat, weten de mensen dat De witten achtergrond straalt rust uit en zorgt ervoor dat de website overzichtelijk ze nog op de juiste website zitten. blijft. Door niet te veel afleidende dingen toe te voegen, blijven de klanten makkelijker Content gefocust op de website. Cognition: Association: - De Thuis knop herkent iedereen. Op deze manier weet iedereen hoe ze weer terug naar de begin pagina moeten.
26
27
2.7 De trello test Antwoorden op vragen Vragen over content: 1. Omschrijf wat het doel is van deze site: - Het doel van de site is om mensen een eigen actie te laten starten
in de site. Dit werkt prima.
3. Op welke manier(en) kan je zien waar je bent in de taak of het proces? - Door de kleur van de navigatiebalk
- Mensen activeren om een eigen actie te beginnen
- Alleen aan de pagina titel, niet heel duidelijk.
2. Zou je op deze website iets kunnen vinden waar je naar op zoek bent, zonder dat je iets over het onderwerp weet?
4. Op welke manier kan je de verschillende soorten navigatie onderscheiden?
- Ja er is een duidelijke navigatie
- Navigatiebalk heeft zwarte knoppen en de rest van de site gele
- ja, er is een ‘‘over whocares’’ knop
- Door de grootte, de positie en de opmaak
3. Op welke manier is het taalgebruik afgestemd op de doelgroep?
5. Zijn de labels van de navigatie items passend en aansprekend voor de doelgroep? Licht toe.
- Nog geen grote teksten ingevuld maar de woorden in de navigatie enzo zijn duidelijk.
- De labels zijn gewoon goed in het algemeen, je kan
- Je wordt met je aangesproken en niet met u.
niet echt dingen veranderen specifiek op doelgroep.
4. Passen de afbeeldingen bij de inhoud? Motiveer je antwoord:
Vragen over seduction:
- Ja de plaatjes zijn goed. Bij een sponserloop een rennende vrouw dus de plaatjes passen bij de woorden. Dit is goed ondersteunende foto’s. - Ja de plaatjes passen bij de woorden.
- Ze doen wat ze moeten doen, prima dus.
1. Voor wie is deze website bedoeld en waar kan je dat aan zien? - De site is bedoeld voor ondernemende mensen, die al een hele tijd iets willen doen voor een goed doel,
Vragen over interaction:
maar nog niet het platform hebben gevonden om dit op
1. Hoe weet je wat je moet/kunt doen? Licht toe
- De site is volgens mij bedoeld voor mensen die
- De site weet wat hij is, en laat gelijk op de homepage zien waar hij het over heeft. - Het eerste wat je leest is start je eigen actie, duidelijker kan niet
2. Op welke manier navigeer je door deze site, Is dit een optimale manier voor jou? - Door de navigatiebalk zie je goed waar je heen kunt gaan, erg duidelijk door de kleur van de balk tegenover de achtergrond 28
- Doormiddel van grote knoppen in de navigatie balk en
te starten. zelfstandig zijn en ondernemend. Ook voor mensen die om andere geven. Dit kan ik zien aan de woorden eigen actie die vaker terug komen.
2. Is er iets aan deze website wat je opvallend vindt ten opzichten van de websites die jij kent? - Dat het bij deze site echt gaat om de gebruiker, en het design is erg clean. - Opvallend vind ik dat het bij deze site gaat om zelf iets bedenken en niet alleen geld geven zoals ik meestal tegenkom.
3. Omschrijf de sfeer van de website. Spreekt deze sfeer je aan? Waarom wel of waarom niet?
ker persoonlijk aangesproken door wat je op de website kan doen?
- Op zich link ik het gelijk aan de whocares site,
ker.
verder is het erg open en geordend.
- Zelf een actie starten is echt een super gaaf idee,
- De sfeer van de pagina neutraal.
zo weet je ook dat je moeite goed terecht komt!
4. Welke gevoelens of emoties krijg jij bij deze website?
6. Geef aan of en op welke manier de website het onderwerp meer betekenis geeft.
- Open, strak en geordend
- De website geeft mensen de mogelijkheid om zelf
- De website geeft een rustige sfeer.
een actie te beginnen.
5. Op wat voor manier voel jij je als gebrui-
- Het is een site die echt gemaakt is voor de gebrui-
- De website activeert de mensen om zelf aan de slag te gaan voor het goede doel.
Reflectie op test Uit de trello test blijkt dat doel duidelijk overkomt. De navigatie komt duidelijk naar voren door kleurverschil. Het taalgebruik is nog iets waar aan gewerkt moet worden. Dit moet nog aangevuld worden en doelgroepgericht zijn. De afbeeldingen ondersteunen de teksten goed. Ook het gebruik maken van afbeeldingen in als navigatie slaat goed aan. De website laat duidelijk zien wat je moet en kunt doen. Zo zie je op de homepagina heel groot ‘‘start je eigen actie’’ staan. Verder zorgt de navigatie ervoor dat je makkelijk de juiste route volgt. Door de afwijkende kleuren van de knoppen en de grote koppen is de navigatie van de website duidelijk en overzichtelijk. Toch is het af en toe nog wel moeilijk om te zien waar je bent in de taak of proces. Alleen aan de grote koppen is dit te zien. Dit is dus nog een aandachtspuntje waar aan gewerkt moet worden. De label van de navigatie items zijn duidelijk en doen wat ze moeten doen.
Het is goed te zien voor wie de website bedoeld is. Het valt meteen op dat de website voor mensen zijn die om andere mensen geven en bereid zijn om daarvoor actie te ondernemen. Het viel op dat de website een goed concept heeft. Het maken van een eigen actie is een keer wat anders als het doneren van geld. Ook is de opmaak van de website gericht op de gebruiker. De sfeer van de website past bij de sfeer van whocares. Door het kleurgebruik en door de afbeeldingen krijgt de website deze sfeer. De website geeft een rustige en duidelijke sfeer zonder poespas eromheen. Doordat de gebruiker zelf de actie start of maakt, is de gebruiker goed betrokken bij de website. Doordat de mensen zelf een actie kunnen starten krijgt het onderwerp meer aandacht. De mensen zelf leren er meer over en geven dit weer door aan andere mensen door middel van hun zelf gestarte actie.
29
Screenshots eindresultaat
Resultaat kies pagina
30
Resultaat Homepagina
31
Vul in pagina
32
Informatie pagina
33
34
Verzonden pagina
35
Reflectieverslag Dit reflexieverslag is geschreven met behulp van het STARR model.
slag zocht ik naar een geschikte oplossing. Het was de bedoeling om de oude website van Whocares te verbeteren. Hiervoor Situatie: moest ik kijken wat er goed en fout aan Was de planning realistisch en bruikbaar? de website was. Ook moest ik een aantal De planning was wel realistisch, maar was persona’s en doelgroepen schrijven. Hierachteraf niet heel goed bruikbaar. Doordat uit heb ik een aantal conclusies kunnen er een aantal veranderingen in de planning trekken die mij geholpen hebben bij het kwamen, was het niet mogelijk om me albedenken van een concept. tijd aan de planning te houden. Uiteindelijk Als ontwerpen moest ik een aantal schetis het toch gelukt om weer bij te komen en sen maken van hoe ik de website eruit wil is alles op tijd afgekomen. laten zien. Van deze websites heb ik vervolgens een aantal wireframes gemaakt. Had je al ervaring met HTML en Deze wireframes heb ik in fotoschop omcss? gezet naar definitieve schetsen. Ik vond de Mijn enige ervaring met HTML is dat ik tijd die we kregen voor het ontwerpen aan in het begin van dit jaar een website heb de lage kant. Normaal moet je overal aan gemaakt met Dreamweaver. Ik heb toen denken bij het ontwerpen van iets. Nu was door middel van Dreamweaver een temhet meer dat het eerste idee dat in me op plate aangepast. Hierbij moest ik af en toe kwam ook uitgevoerd werd. HTML gebruiken. Met css had ik nog geen Als webbouwer heb ik mijn definitieve enkele ervaring. schetsen uitgewerkt tot een werkende website. Ik het geleerd om met HTML en Wat waren je verwachting van css om te gaan en dit moest ik bij het mawat je zou leren in dit course? ken van de website uitvoeren. In deze course verwachte ik dat ik een website uit niets zou kunnen opbouwen Waar ging je aandacht naar uit? door middel van HTML en css. Ik heb dit Ik heb de meeste aandacht besteed aan uiteindelijk ook geleerd. Het is voor mij nog het maken van een concept. Ik wilde een steeds een beetje zoeken maar ik kan nu sterk concept hebben aangezien dat noodal wel redelijk overweg met HTML en css. zakelijk is voor het verbeteren van de oude Whocares website.
Taak:
Voor deze course ben je in aanraking Heb je de aandacht goed kungekomen met taken van de conceptontwik- nen verdelen? kelaar, ontwerper en webbouwer. Het verdelen van de aandacht was niet altijd even makkelijk. Zo was het af en toe Omschrijf per beroepsprofiel lastig om van creatief denken naar het wat je uit hebt gevoerd. denken in HTML te gaan. Toch ik het aarAls conceptontwikkelaar moest ik een ana- dig gelukt om alles op het juiste moment te lyseverslag maken. Met behulp van dit ver- doen.
36
Actie: Wat was een keerpunt in de course?
Het keerpunt in de course was eigenlijk wel de Trello test en de feedback van de lerares. Door deze feedback wist ik wat er beter kon en wat ik dus moest veranderen. Dit keerpunt kwam voor mij op tijd aangezien ik toen nog zat tijd had om deze veranderingen plaats te laten vinden.
Wat betekent dat keerpunt voor de wijze waarop je vanaf dat moment aan het werk ging?
Het keerpunt zorgde ervoor dat ik mijn schetsen moest aanpassen. Doordat ik mijn schetsen moest aanpassen moest ik ook mijn wireframes en mijn Photoshop ontwerpen aanpassen. Verder verliep mijn werkwijze zoals voorheen.
Resultaat Ben je tevreden met het eindresultaat?
Door de korte tijd die we kregen voor het ontwerpen van de website ben ik niet helemaal tevreden. Ik had liever iets langer gehad voor het ontwerpen, op deze manier had ik niet het eerste beste idee uitgewerkt. Toch ben ik blij met de uitwerking van mijn concept. Ik heb uiteindelijk toch een strakke duidelijke website neergezet. Ook ben ik tevreden met het feit dat ik een website heb getypt uit niks.
Is het eindresultaat beter, minder goed of anders dan het dan het concept? Licht toe.
Het eindresultaat is precies het concept wat ik in gedachte had. Het is en strakke en duidelijke website geworden waar mensen hun eigen actie kunnen starten.
Hoe reageerde anderen op het eindresultaat?
Ze vonden het een duidelijke website die goed te begrijpen is.
Reflectie Wat neem je mee en wat ga je anders doen bij een volgende concept?
Bij een volgend concept neem ik mee dat het een vernieuwend iets moet zijn. Bij dit concept is het bijvoorbeeld vernieuwend dat je een eigen actie kunt beginnen, in plaats van dat standaard doneren van geld.
Wat neem je mee en wat ga je anders doen bij een volgende ontwerp?
Bij een volgend ontwerp wil ik meer tijd besteden aan het ontwerp proces. Op deze manier probeer ik een vernieuwend en eigen ontwerp neer te zetten.
Wat neem je mee en wat ga je anders doen bij het realiseren van een volgende ontwerp?
Ik neem mee dat ik nu HTML en css kan gebruiken. Het zal de volgende keer makHet concept was in het begin een goede kelijker worden om een website te maken doelen test en de mogelijkheid om je eigen met behulp van HTML en css. actie te starten. Na het krijgen van feedback heb ik ervoor gekozen om het conWat heb je nodig voor een succept te verkleinen naar het ‘’start je eigen cesvolle vervolg? actie’’ idee. Dit concept heb ik vervolgens Een creatief en vernieuwend concept en volledig gevolgd. een bijpassend ontwerp.
Heb je het concept gevolgd?
37
38