Ontwerprapport
Koken en eten Door Tjibbe Mooij Mail: tjibbe.mooij@gmail.com Studentnummer: 552197 1
Inleiding Chinese webwinkels storten zich op de Nederlandse markt. De webshops LightInTheBox heeft zijn site volledig in het Nederlands vertaald en de verwachting is dat er binnen afzienbare tijd nog veel meer zullen volgen. Met extreem lage prijzen en zonder verzendkosten gaan de Chinezen de concurrentie aan met Nederlandse aanbieders zoals bol.com. Al langer leveren Chinese webwinkels producten aan Nederland zonder verzendkosten, maar tot voor kort richtten ze zich niet specifiek op Nederland. Het doel: Het is aan mij om de Chinese webshop Light in the Box te verbeteren. De Nederlander moet geprikkeld worden om via de door mij verbeterde Chinese webshop producten aan te schaffen. In dit verslag lees je hoe ik dit wil realiseren. Veel leesplezier!
2
Inhoudsopgave
2.2
Flow chart
Blz. 4/5
2.3 Usercasescenario Blz. 6/7 2.4 Navigatie ontwerp Blz. 8/9 2.5 Schetsen website Blz. 10/11 2.6 Wireframes Blz. 12/13 2.7
Grafisch ontwep
Blz. 14 t/m 19
2.7(b) Matrix van jouw website
Blz. 20/21
2.8
Blz. 22/23
Trellotest
3.2 Testverslag Blz. 24
Reflectieverslag
Blz. 25 t/m 27
3
Opdracht 2.2 Flow chart Uitleg bovenste flow chart: In de afbeelding op pagina 5 kun je mijn flow charts zien. De opbouw van mijn website heb ik gebaseerd op de pump interacties. In mijn website zitten alle punten verwerkt uit de flow chart. Met passende media bij het product bedoel ik uiteraard de gerelateerde recepten bij mijn product. Ook speelt de header een rol. De header moet een sfeerfoto weergeven dat bij het product past. Dit is de reden waarom ik het betreffende onderdeel “passende media� heb genoemd in plaats van recepten. Uitleg onderste flow chart: Op de home pagina zijn er vijf mogelijkheden voor de gebruiker. Ze zien drie grote knoppen onder de header waar ze op kunnen klikken. Er is een knop voor bakken, koken en recepten.
Als de gebruiker op koken of bakken klikt, dan wordt hij of zei doorgestuurd naar de juiste productenlijst. In deze lijst kan de gebruiker op zoek gaan naar het gewenste product. Als de gebruiker op zoek is naar een specifiek product, dan kan hij gebruik maken van de zoekbalk in de header.
4
Wanneer de gebruiker het gewenste product heeft gevonden kan hij deze toevoegen aan het winkelwagentje. Vervolgens kan hij of zei het product afrekenen met behulp van zijn (op dat moment aangemaakt) Light in the Box account en zijn aankoop delen op facebook. Als de gebruiker op de recepten knop klikt dan wordt hij of zei doorgestuurd naar een pagina met recepten. Hier kan de gebruiker inspiratie opdoen voor het maken van recepten. Bij de recepten staan producten die vereist zijn voor het maken van het recept. Deze producten zijn uiteraard direct aan te schaffen via de website.
De 2 andere mogelijkheden op de home pagina zijn het aanmaken of inloggen van een Light in the Box account en het zoeken naar een product.
5
Opdracht 2.3 User Scenario Wim Jansen is 20 jaar en is werkzaam als een junior netwerkbeheerder bij een bedrijf wat IT diensten verleend aan MKB bedrijven. Na een aantal vervelende opdrachten uitgevoerd te hebben deze week is Wim uitgeput en dolblij dat hij weekend heeft. Tijd voor ontspanning! Hij gaat lekker ontspannen achter de computer zitten en online grappige plaatjes en filmpjes bekijken. Op eens komt er een afbeelding te voorschijn van een lekkere fondant taart. Wim heeft ervaring met taarten bakken. Hij heeft namelijk vroeger een bijbaan als bakker gehad en hij maakt af en toe taarten thuis om ze vervolgens op te eten en te delen met vrienden of familie. Hij heeft de meeste benodigdheden al in huis. Alleen voor het maken van een fondant taart heb je speciaal gereedschap nodig wat vrij duur is en in Nederland alleen in speciaalzaken verkrijgbaar is. Daarom gaat hij opzoek naar een Chinese webshop en komt terecht op het koken en eten gedeelte van Light in de Box. Het is een overzichtelijke website met een aantal knoppen. Hij ziet de knop bakken en klikt hierop. Nu ziet hij 3 kolommen naast elkaar met bakproducten. in het kolom koken ziet hij een aantal producten staan zoals een mixers, lepels en vormpjes. Na een paar tellen zoeken klikt hij op een product waarmee je fondant rozen kunt maken voor op de taart. Bovenin de balk staat dat hij nog een euro tegoed heeft wat hij opgebouwd heeft bij zijn vorige bestelling. Hij had een tijdje geleden nog iets besteld bij Light in the Box waarmee hij tegoed had opgebouwd. Wat een aangename verassing. Hij denkt er over na om het product aan te schaffen maar hij is compleet inspiratieloos. Hij wil graag een fondant taart maken maar wat voor een precies? Hij ziet een kopje gerelateerde recepten staan en scrolt verder.
6
Op de pagina die hij nu bekijkt staan een aantal recepten die hij kan maken met het product dat hij heeft aangeklikt. Na even zoeken ziet hij een mooie witte taart met rode rozen en hij besluit dat hij deze graag wil maken en wil delen met zijn moeder omdat ze erg dol is op rozen, suiker en zijn taarten. Na zijn zoektocht is hij eindelijk overtuigd en koopt hij het product waarmee hij fondant rozen kan maken. Zijn moeder is over twee maanden jarig en hij gaat haar verassen met een hele mooie taart! Met een goed gevoel gaat Wim het weekend in! Uitleg met behulp van de flow chart: Ik heb het pad dat Wim doorloopt aangegeven met oranje pijlen. Wim komt op de home van de website terecht. Hier klikt hij vervolgens op de knop bakken. Hier zoekt hij eventjes tot dat hij het gewenste product heeft gevonden. Vervolgens weet hij niet zo goed wat hij wil maken dus klikt hij op een gerelateerd recept en komt hij terecht bij het onderdeel recepten. Hier zoekt hij verder naar een passend recept. Na deze gevonden te hebben keert hij weer terug naar het product en doorloopt de aanschafprocedure.
7
Opdracht 2.4 Navigatie ontwerp Voor dit onderdeel van de website heb ik enorm veel onderzoek gedaan. Een aantal voorbeelden van website die ik onder andere bezocht heb voor het opdoen van inspiratie zijn awwwards.com, webbyarwards.com, Lightinthebox.com en zelfs de efteling.com. Tijdens mijn onderzoek ben ik tot de conclusie gekomen dat het gebruik van standaard icoontjes in combinatie met typografie knoppen de beste oplossing is. Een aantal voorbeelden van standaard icoontjes zijn een huisje en een contact icoontje. De “normale� internet gebruiker weet dat een huis icoontje voor de homepage staat. Rechts naast deze tekst kun je de knoppen zien die ik verwerkt heb in mijn ontwerp. De knoppen voor koken, bakken en recepten bevinden zich onder de header en zorgt ervoor dat je naar producten/recepten doorverwezen word. De knoppen koken, bakken en recepten zijn in bijna alle schetsen uit dit document te vinden.
8
Naast de standaard iconen heb ik een aantal textuele knoppen. Rechts naast deze tekst bevinden zich een aantal textuele knoppen. De betreffende knoppen heb ik ontworpen in de stijl van de website. Om de website fris en creatief over te laten komen heb ik bij deze knoppen een hover ingesteld en over de content afbeeldingen heen geplaatst. Dit houdt in dat de knop met de prijs en naam doorzichtig worden tot dat de gebruiker er met de cursor overheen gaat. De hover zorgt er daardoor ook voor dat de website meer interactief word. Het idee om gebruik te maken van een hover heb ik van pinterest. http://www.developers.pinterest. com/on_hover_pin_it_buttons.
9
Opdracht 2.5 Schetsen Schets 1: De eerste schets van het ontwerp. Zoals je kunt zien heb ik de content van de website ingedeeld in 3 blokken. De linker balk (onder de header) is de navigatie balk. Rechts daarvan staat een blok voor één product gevolgd door een blok voor één recept.
Schet 2: De tweede schets van het ontwerp. Na de eerste schets kwam ik tot de conclussie dat de content blokken even groot moeten zijn zodat ik uniformiteit creër.
Schets 3: De derde schets van het ontwerp. Na deze schets kwam ik tot de conclussie dat ik de sfeerfoto onder de header wil plaatsen in plaats van erin.
10
Schets 4: De vierde schets van het ontwerp. Dit is de slechste schets van de zes. Bij deze schets ben ik voornamelijk bezig geweest met het uitrekenen van het aantal pixels.
Schet 5: De vijfde schets van het ontwerp. Dit is de beste schets van de zes. Mijn uiteindelijk ontwerp lijkt het meeste op deze schets.
Schets 6: De zesde schets van het ontwerp. Deze schets heb ik samen van Hannneke van de Pol gemaakt na een tussentijdse evaluatie. Na deze schets heb ik schets 5 gemaakt.
11
Opdracht 2.6 Wireframes Twee van de drie wireframes heb ik ontworpen met behulp van www.mockingbird.com. Op deze pagina zie de betreffende wireframes. De derde wireframe bevindt zich op de pagina hiernaast. Bij de wireframes heb ik ervoor gekozen om de navigatiebalk linksboven te doen. Dit heb ik gezien op de app van intuos. Ik heb dit overgenomen omdat ik van mening ben dat dit erg overzichtelijk en gebruiksvriendelijk is. Zelfs de onervaren internet gebruiker kan met de navigatie van Intuos overweg. Verder heb ik de rest van de pagina verdeeld in 3 blokken. Deze blokken zijn niet even groot. Vlak voor het begin van de onterpfase heb ik besloten op de blokken toch even groot te maken. Zo creĂŤr ik namelijk uniformiteit en dat maakt de site netjes en overzichtelijker.
In de afbeelding boven de tekst zie je de wireframe van de home pagina. In de rechterblokken komen recepten te staan. Bovenaan is er een balk met drie knoppen te zien met hoofdgerechten, taarten en allebei. Het is de bedoelling dat als de gebruiker op een van deze knoppen kan klikken en dat vervolgens de recepten veranderen van categorie. Dit maakt de website interactief. In de afbeelding links naast de tekst zie je de wireframe van de prodcutenlijst pagina. De producten heb ik verdeeld in koken en bakken. In de linker blokken kun je RP zien staan. Dit staat voor gerelateerde producten. Hier komen producten te staan die gerelateerd aan de zoekopdrachten van de (ingelogde) gebruiker. In de footer komt informatie te staan over Light in the Box.
12
In de afbeelding links naast de tekst zie je de wireframe van de home pagina. Vlak voor het begin van de ontwerpfase heb ik ervoor gekozen om de content blokken even groot te maken. De derde wireframe heb ik ontwikkeld na een evaluatie met Hanneke van de Pol. Zoals je ook in schets 6 van dit document kunt zien heb ik ervoor gekozen om de container achter de producten weg te laten en de header te vergroten. Hierdoor oogt de website minder druk en wordt de site overzichtelijker. In de derde wireframe is het onderdeel recepten ook weggelaten en verplaatst naar de productinformatie. De wireframes van deze opdracht zijn aan het begin van deze course gemaakt. Hierdoor verschillen deze erg met het uiteindelijke demo.
13
Opdracht 2.7 Grafisch ontwerp In de afbeelding onder de tekst is het eerste concept ontwerp van mijn home pagina te zien. In dit stadium van het ontwerpen zat ik erg in de knoei met de plaatsing van de navigatie. Ik wist niet goed of ik nu tekst ging gebruiken of iconen. Verder was ik niet tevreden met de keuzes van mijn lettertype en kleuren. Al met al vond ik mijn ontwerp erg deprimerend. Dit was de reden voor mij om mijn grafisch ontwerp naar Hanneke van de Pol te mailen. Hanneke heeft me verder geholpen met de keuze voor een lettertype en de kleuren. Op pagina volgende pagina zie je afbeeldingen van een ontwerp dat ik ontwikkeld heb met een beetje hulp van Hanneke.
14
Door de kleuren okergeel en bruin/grijs te gerbuiken, wordt mijn concept vrolijker en creatiever. De lettertype in het ontwerp is de “PencilPete” lettertype. In mijn uiteindelijke grafisch ontwerp heb ik ervoor gekozen om deze niet te gebruiken omdat het de website wat kindelijker maakt. Na grondig onderzoek op dafont.com is mijn uiteindelijke keuze gevallen op de “Lucida Bright” lettertype. Dit zorgt voor een strak ontwerp. Let op! Tot op het heden heb ik alleen nog maar het onderzoek behandeld. Voor het uiteindelijke grafisch ontwerp verwijs ik u door naar de volgende bladzijden.
15
Grafisch ontwerp uiteindelijk In de afbeelding onder deze tekst is mijn grafische ontwerp van mijn home pagina te zien. Na veel onderzoek op verschillende websites over lettertypen, kleuren en navigatie is mijn uiteindelijke ontwerp klaar. Algemeen: Door een duidelijk stramien aan te houden en overal hetzelfde aantal pixels witruimte tussen de onderdelen te houden, heb ik een overzichtelijk en duidelijk grafisch ontwerp ontwikkeld. Zoals je kunt zien in de onderstaande afbeelding heb ik mijn flow charts aangehouden. Ik heb alleen de winkelwagen als extra onderdeel toegevoegd. Interactie: De drie knoppen koken bakken en recepten zijn aanwezig. Als de gebruiker op een van deze knoppen kllikt, wordt hij of zei doorgestuurd naar de productenlijst. Een afbeelding van de productenlijst is te vinden op bladzijde 17. Op deze pagina staan een aantal producten. Over deze producten staat een doorzichtige balk met de prijs en product naam heen. De balk wordt duidelijker als de gebruiker met zijn cursor over de balk gaat. De gebruiker wordt doorverwezen naar het product als hij of zij op de balk klikt.
16
17
Grafisch ontwerp uiteindelijk In de afbeelding op bladzijde 19 is mijn grafisch ontwerp van de prodcutinformatie te zien. In tegenstelling tot mijn flow chart heb ik hier al de mogelijkheid gecreëerd om het product te delen. In mijn flow chart stond dat dit pas kon na de aanschaf van het product. Door het creëren van deze optie, wordt de website interactiever. Ik heb mijn grafisch ontwerp gebaseerd op het concept wat ik gemaakt heb in de eerste weken van de course. Het ontwerp is wel erg anders dan wat ik als aan het begin van deze course in mijn hoofd had, maar dit is niet erg omdat mijn ontwerp er beter uit is gekomen dan ik had gehoopt.
18
Tijdens het maken van deze pagina wist ik niet zo goed hoe ik de onderdelen “gerelateerde producten” en “gerelateerde recepten” in mijn ontwerp moest verwerken. Na wat onderzoek kwam ik een mooie oplossing tegen op Light in the Box (zie onderstaande afbeelding).
Door deze oplossing te implementeren in mijn ontwerp zorg ik niet alleen voor een duidelijk structuur, maar neem ik ook een beetje de style over van Light in the Box.
19
Opdracht 2.7B Content Matrix In de afbeelding op bladzijde 17 is mijn content matrix te zijn. Ik ga de content matrix nu per onderdeel uitleggen. Design:
Content: In de content matrix onder het kopje content zijn er meerdere afbeeldingen te zien. De eerste vier vallen onder de kopjes cognition en associatie omdat de content de gebruiker helpt om de website beter te begrijpen en het associaties op kan roepen met andere producten die ze misschien op een andere website hebben gezien.
In de contentmatrix onder het kopje design is er een afbeelding te zien met een snelkook pan en een bakblik. deze hoort onder congnition omdat de betreffende onderdelen je helpen met het begrijpen van de website. De laaste twee afbeeldingen horen bij associatie, affect en cognition. Ik heb ze Iconen: alleen bij associatie en affect gezet omdat het doel van deze afbeeldingen is om de In de content materix onder het kopje gebruiker te verleiden om de recepten te iconen zijn er meerder afbeeldingen te zien. maken die bij de betreffende afbeeldingen Deze afbeeldingen horen onder cognition horen. en association omdat de iconen je helpen met het begrijpen van de website. De iconen kunnen ook eventueel een associatie oproepen bij de gebruiker. Texture: In de content matrix onder het kopje texture is er maar een afbeelding te vinden. Dit is de afbeelding die zich bevind in de header van website. De afbeelding van de header is te plaatsen onder alle drie de categorieĂŤn. De afbeelding zorgt ervoor dat de gebruiker de website beter begrijpt. Verder roept de afbeelding gevoelens en associaties op bij de gebruiker.
20
21
Opdracht 2.8 Trello test De link naar trello: https://trello.com/b/ HLTsXfRt/kopie-tjibbe-mooij. Tijdens de course webdesign is mijn concept beoordeeld door twee persona’s. Tijdens deze evaluatie werden een aantal vragen gesteld. Vragen en antwoorden over de content: 1. Omschrijf wat het doel is van deze site 2. Zou je op deze website iets kunnen vinden waar je naar op zoek bent, zonder dat je iets over het onderwerp weet? 3. Op welke manier is het taalgebruik afgestemd op de doelgroep? 4. Passen de afbeeldingen bij de inhoud? Motiveer je antwoord. Persona 1: 1.Het verkopen van kook - en bakproducten online via de website. 2.Ja, de producten staan geordend zodat deze gemakkelijk te bestellen zijn. 3.Het taalgebruik is helder en begrijpbaar voor iedereen. 4.Afbeeldingen bij recepten zijn goed. Hartjestaarten en cupcakes met bloemetjes zijn een beetje kinderachtig en ‘gay’. Niet iets voor Dolf denk ik want hij is 25 jaar en heeft een vriendin. Persona 2: 1: De website geeft recepten en kook producten weer. 2: Ja, zodra de website ook content heeft. 3: Nog niet zichtbaar. 4: Ja de afbeeldingen zien er goed uit.
22
Vragen en antwoorden over de interactie: 1. Hoe weet je wat je moet/kunt doen? Licht toe 2. Op welke manier navigeer je door deze site, Is dit een optimale manier voor jou? 3. Op welke manier(en) kan je zien waar je bent in de taak of het proces? 4. Op welke manier kun je de verschillende soorten navigatie onderscheiden? 5. Zijn de labels van de navigatie items passend en aansprekend voor de doelgroep? Licht toe Persona 1: 1.Ja, het is duidelijk. 2.Eerst bekijk ik de recepten en benodigdheden en dan bestel ik bijvoorbeeld taartvormen die bij de taart hoort. Ik begin dus bij de recepten en eindig bij de webshop. 3.Er is een navigatie aanwezig. Hierdoor kan ik bekijken waar ik nu ben en waar ik naartoe wil.. 4.Dit is nog niet in te vullen 5.Er zijn nog geen buttons of zo aanwezig. Hier kan ik niets over zeggen. Persona 2: 1: Als de navigatie van de website zichtbaar is, zal deze goed te gebruiken zijn. 2: Dit is nog niet zichtbaar. 3: De kopjes Bakken en Koken geven goed de categorieen aan. 4: Dit is nog niet zichtbaar.
Vragen en antwoorden over de seduction: 1. Voor wie is deze website bedoeld en waar kun je dat aan zien? 2. Is er iets aan deze website wat je opvallend vindt ten opzichte van de websites die jij kent? 3. Omschrijf de sfeer van de website. Spreekt deze sfeer je aan? Waarom wel of waarom niet? 4. Welke gevoelens of emoties krijg jij bij deze website? 5. Op wat voor manier voel jij je als gebruiker persoonlijk aangesproken door wat je op de website kan doen? 6. Geef aan of en op welke manier de website het onderwerp meer betekenis geeft
Persona 2: 1: Deze website is bedoeld voor mensen die van koken houden. Het is niet duidelijk of dit mannen of vrouwen zijn. 2: De foto’s lijken een beetje onnatuurlijk. 3: De sfeer is gezellig. En bij koken hoort ook gezelligheid 4: De website is nogal leeg, dus het roept nog geen emoties bij me op. 5: Je wordt niet persoonlijk aangesproken. 6: Door het ontwerp van de pagina, wordt de gezelligheid van koken benadrukt.
Persona 1: 1.Voor mensen die van koken en bakken houden en naast de webshop ook altijd op zoek zijn naar nieuwe recepten. 2.De felle kleuren. 3.Ik vind de sfeer goed. De webshop ziet er niet alleen uit alsof er iets verkocht moet worden maar ook voor lekkere recepten kun je op de website terecht. 4.Ik heb zin om te koken als ik de webshop zie. 5.Er staat nog weinig tekst op de website dus dat weet ik niet. 6.De kleuren zijn erg vrolijk en de recepten zien er lekker uit dus ik krijg zin om te koken.
23
Opdracht 3.2 Testverslag De feedback van mijn medestudenten is gebaseerd op het oude grafische ontwerp. Het oude grafische ontwerp is te vinden op bladzijde 15 links bovenaan en gecentreerd onderaan.
Conclusie / nog aan te passen:
Over het algemeen ben ik het eens met de feedback van de persona’s. Persona 1 zegt wel dat bij de seduction er te weinig tekst aanwezig is. Omdat ik mijn website overOmdat ik toen nog op onderzoek uit was zichtelijk en strak wil houden, wil ik voor een lettertype, kleurverhouding en een uiteraard niet teveel tekst op mijn navigatiebalk, was het grafisch ontwerp nog website. Dit is een puntje waar ik niet mee niet af. eens ben. Misschien kan die conclusie getrokken worden doordat het grafisch In de feedback van de content kwam naar ontwerp toen nog niet klaar was. voren dat de website kinderachtig overkomt. Hier ben ik het mee eens. Ik Na de feedback ben ik van plan om de vond zelf de lettertype ook vrij kinderlijk en website minder kinderachtig te maken. het was ook niet verstandig om valentijn Ook moet er uiteraard verandering komen gerechten op de home pagina te plaatsen. in de lettertype en indeling van de knoppen. Aangezien ik nog bezig was met mijn In de feedback van de interactie kwam naar onderzoek, was dit geen nieuwe informatie. voren dat ik nog een aantal onderelen zoals bijvoorbeeld buttons niet zichtbaar waren. Het was wel fijn om feedback te krijgen. Het Dit klopt ook, want het ontwerp was nog was voor mij een soort bevestiging dat ik niet helemaal af. wel goed bezig was, maar dat er nog wel aardig wat moest gebeuren. In de feedback van de seduction kwam naar voren dat de sfeer van de website goed is. Het probleem is volgens de persona’s dat de gebruiker niet persoonlijk aangesproken word. Er wordt ook gezegd dat het niet duidelijk is of de website nu voor mannen of voor vrouwen is. Aangezien mijn doelgroep uit mannen én vrouwen bestaat lijkt mij dit de bedoeling.
24
Reflectieverslag Inleiding
Situatie
Aan het begin van deze course kregen we konden we kiezen uit een aantal casusen.
Aan het begin van deze course heb ik een planning gemaakt. Deze planning was bruikbaar tot de ontwerpfase. Door het twijfelen over het ontwerp kwam ik een beetje in tijdnood met het afronden van mijn onderzoek.
Ik heb gekozen voor de Light in the Box casus waardoor ik de taak op me kreeg om een onderdeel van de webshop Light in the box te verbeteren en toegankelijker te maken voor de Nederlander. In dit onderdeel ga ik kort maar betekenisvol mijn professionele handelen tijdens de course reflecteren. De STARRmethode gaat mij hierbij helpen. Starr staat voor situatie, taak, actie, resultaat en reflectie.
Aangezien ik in het bezit ben van een MBO niveau 4 IT diploma had ik al enige html kennis. Hierdoor kon ik het me veroorloven om wat langer over het onderzoek te doen. Ik heb heel veel tijd ingehaald met het bouwen van de website. Ik ben er wel heel druk mee geweest maar het ging sneller dan bij mijn medestudenten. Tijdens deze course verwachtte ik veel te leren over het bouwen van website. Niet alleen om mijn html kennis te verbreden, maar ook de interactie met verschillende doelgroepen / internet gebruikers.
25
Reflectieverslag Taak
Actie
In deze course ben ik in aanraking gekomen met de taken van een conceptontwikkelaar, ontwerper en webbouwer.
In mijn analyserapport heb ik mijn concept niet goed kunnen omschrijven door mijn twijfels. Mijn eerste tussentijdse evaluatie voor het analyserapportwas daarom helaas onvoldoende. Mijn eerste keerpunt in de course is daarom na deze evaluatie. Door hard te werken en toch zo goed mogelijk mijn concept uit te leggen heb ik toch nog een voldoende gekregen voor mijn analyseverslag.
De meeste tijd zat in het uitvoeren van de taken van een conceptontwikkelaar. Het heeft me de meeste tijd gekost om een duidelijk ontwerp in mijn hoofd te krijgen. Na veel onderzoek op verschillende websites en wat hulp van Hanneke, slaagde ik erin om een grafisch ontwerp vlak voor de kerstvakantie te produceren. Mijn klasgenoten hebben mij hierin ook ondersteunt. Ik heb ze niet om raad gevraagt, maar ik heb hun geholpen met het bouwen van hun html concepten. Tijdens het helpen met het bouwen van andere websites kreeg ik ook een aantal goede ideeĂŤn. Doordat ik heel lang geen duidelijk beeld in mijn hoofd had voor het maken van een concept waren de eerste ontwerpen ook niet zo goed. Nadat ik een duidelijk beeld in mijn hoofd had over hoe mijn website eruit moest gaan zien, ging het bouwen van de website heel gemakkelijk.
26
Mijn tweede keerpunt in de course was vlak voor de kerstvakantie. Na alle informatie van Hanneke, mijn medestudenten en mijn eigen onderzoek verzameld te hebben, was ik in staat om het grafisch ontwerp van bladzijden 16, 17 en 19 op de vrijdag voor de kerstvakantie op te leveren. Doordat ik dit concept had ontwikkeld was het eenvoudig om de website op te leveren. Ik heb veel verloren tijd in kunnen halen doordat ik al wat kennis in huis had van html.
Reflectieverslag Resultaat
Reflectie
Tijdens deze course heb ik niet constant mijn concept kunnen volgen omdat ik erg besluiteloos was over het ontwerp. Ik ben erg tevreden met het eindresultaat. Mijn website is erg verbeterd in de laatste paar weken van de course. Mijn medestudenten waren erg onder de indruk toen ik ze mijn website liet zien na de vakantie. Zelfs mijn lerares was erg blij met het resultaat. Ik ben vooral trots op mijn css die wel geteld 988 regels bestaat
Wat neem je mee en wat ga je anders doen bij een volgend concept? Bij het volgende concept zou ik sneller en nog meer onderzoek doen om zo een beter concept te ontwikkelen. Het onderzoek duurde eigenlijk veel te lang en ik had veel te laat pas een concept in mijn hoofd. Wat neem je mee en wat ga je anders doen bij het realiseren van een volgende ontwerp? Ik ben erg tevreden met mijn ontwerp. Ik ben nog niet helemaal tevreden over de kleurencombinatie maar voor mij is het goed genoeg. Conclusie: Voordat ik aan deze course begon had ik nog nooit eerder van de pumpinteracties gehoord. Hier heb ik nu wel veel van geleerd. De lessen HTML vind ik erg leuk. Ik heb al 4 jaar les gehad in HTML, maar ik heb nooit iets gehoord over een structuur of een stramien die je moest aanhouden. Dit vond ik erg leuk om te leren. Het moeilijkste onderdeel van de course vond ik het matrix . Na het maken van het analyserapport snap ik het belang van een concurrentie/content matrix maar kon ik deze nog niet erg goed toepassen. Gelukkig heb ik nog wel deel mogen nemen aan een proeftoets hierover waardoor ik het uiteindelijk erg goed door kreeg.
27
28