Page 1

ONTWERPDOCUMENT Coralie

15 JANUARI 2017 Docent: Ine Klas: C1F


Inhoud 3.0 Inleiding

blz.2

3.1 PUMP-voorbeelden

blz.3

3.2 Cardsorting

blz.6

3.3 Scenario

blz.8

3.4 Customer Journey

blz.9

3.5 Navigatie

blz.10

3.6 Schetsen

blz.12

3.7 Drie wireframes

blz.14

3.8 Designregels en richtlijnen

blz.16

3.9 Grafisch ontwerp van een single page voor desktop

blz.17

4.1 Testverslag

blz.19

4.2 Reflectie

blz.21

Bijlage Bronnenlijst

1


3.0 Inleiding Nu we het ResCon verslag achter de rug hebben kunnen we aan de slag met het ‘echte werk’ het ontwerpen van de site. Het onderzoek is achter de rug. Het ontwerpverslag gaat over hoe ik de site tot leven ga brengen, een verslag van mijn weg door het ontwerpproces. We gaan het hebben over de opdrachten die komen na de ResCon opdrachten, namelijk PUMP, cardsorting, scenario, costumer journey, navigatie, schetsen, wireframes, designregels en richtlijnen het grafisch ontwerp voor de single page, het testverslag en de reflectie.

2


3.1 PUMP-voorbeelden PUMP is niet een algemeen bekende term in de branche. Het is meer iets wat we hier gebruiken als iets op ons aan vast te houden tijdens de opdracht. PUMP is kort voor Personal, Unexpected, meaningful en Pleasantly packaged. Alle vier hebben ze een betekenis die ik even kort toelicht; Personal: Niet iets wat iedereen heeft, het moet persoonlijk zijn (zoals we bijvoorbeeld zien in een Direct Mail) Unexpected: Als iets onverwachts is, zal de verassing natuurlijk veel fijner zijn. Denk aan een onverwacht cadeau. Je moet ook iets unieks doen, iets wat andere mensen nog niet doen. Meaningful: Je moet het kunnen gebruiken, het moet niet nutteloos zijn. Denk aan het spiegeltje achterop een Kruidvat pasje. Pleasantly Packaged: Een deel van de beleving is het uitpakken van je cadeau. Hoe dingen eruit zien is heel belangrijk voor mensen. Denk bijvoorbeeld aan de extra prijs die je betaalt voor Beats by Dr. Dre enkel voor de verpakking. In dit hoofdstuk heb ik zelf drie PUMP-voorbeelden gevonden en erbij toegelicht wat het effect is en waarom het PUMP is.

DEEL A

1. BuzzFeed Beschrijf het effect Door een Konami Code (UP-UP-DOWN-DOWN-LEFT-RIGHT-LEFT-RIGHT-B-A) in te tikken veranderd de website in een andere versie. Zo was er ooit de luiaard sectie waar alles simpelweg naar luiaards veranderde. Op het moment is er een Wilkie! Pagina waar alle filmpjes, titels en artikelen naar het woord Wilkie! Zijn veranderd. Deze PUMP geeft totaal geen extra informatie maar is wel verschrikkelijk grappig om naar te kijken. Beargumenteer waarom jij het PUMP vindt. Unexpected, niemand verwacht als ze wat random aan het tikken zijn een totaal nutteloze, maar wel grappige, pagina te vinden.

3


2. Kickstarter Beschrijf het effect Helemaal onder aan de pagina kan ze een klein schaartje vinden. Als je vier keer klikt op deze schaar krijg je de optie jezelf in te schrijve voor een supergeheime nieuwsbrief over “Inside info about arts and culture in the kickstarter universe and beyond.” Beargumenteer waarom jij dit PUMP vindt Unexpected, nooit eerder zag ik ergens zo’n schaartje. Een originele manier om mensen voor een nieuwsbrief in te laten schrijven dus. Meaningful, het is iets waar je misschien ook echt iets aan hebt. Een nieuwsbrief brengt immers nieuws en leuke weetjes. Pleasantly packaged, er wordt op een leuke simplistische manier vormgegeven aan een leuk klein extraatje.

4


3. Google images beschrijf het effect Google, een site die wel vaker leuke dingen doet (denk aan de speciale google letters bij speciale dagen) heeft voor de 37ste verjaardag van de klassieke Atari game breakout hiervan een eigen versie gemaakt. Als je bij google images “Atari Breakout� intikt kan je het spelletje zelf spelen. Beargumenteer waarom jij dit PUMP vindt Unexpected, hoewel google vaak leuke dingen doet voor speciale dagen is dit toch wel echt een van de leukste in mijn opinie. Ook gaan de leuke plaatjes van de hoofdpagina weer weg na een dag terwijl dit spel al een paar jaar te spelen is. Pleasantly packed, het spelletje ziet er mooi uit, verschillende plaatjes van zoekresultaten verplaatsen zich naar de top van het scherm en veranderen van kleur.

DEEL B Bedenk zelf een PUMP-interactie voor jouw eigen website Beschrijf het effect Ergens boven of onderin een klein pictogram van een kledingkast. Als je erop klikt vergroot hij en gaat open, er komt zo een kortingscode tevoorschijn van bijvoorbeeld 5-10% korting op een bepaald soort kleding. Deze code zal elke maand ergens anders verstopt worden in een andere vorm. Denk bijvoorbeeld aan een opgevouwen shirt ergens in een foto waar je op kan klikken. Beargumenteer waarom jij dit PUMP vindt Unexpected, wie verwacht er nou een verstopte kortingscode! Dat is niet iets wat je doorgaans verstopt op een website tegenkomt. Meaningful, een kortingscode kan je natuurlijk gebruiken voor korting, er zit dus waarde aan. Pleasantly packed, elke maand een andere leuke plek waar het item verstopt wordt. Iedere keer in een nieuw jasje.

5


3.2 Cardsorting Bij het ontwerp van de website zal de gebruiker centraal staan. Alles moet gecategoriseerd en georganiseerd worden om tot de userflow te komen die ik heb beschreven. Bij deze opdracht hebben we op post-its kort uitgeschreven wat er op onze pagina moet komen, denk hierbij aan de artikelen en functies. Vervolgens hebben we alle post-its neergelegd onder een bepaalde categorie, wat dus zo de topics van de navigatie vaststelt. In het uiteindelijke ontwerp zijn niet alle categorieĂŤn hetzelfde gebleven aangezien het op een andere manier overzichtelijker was. Dit was dan ook meer een uitprobeersel dan een vast iets. Uitproberen is een van de belangrijkste dingen die je moet doen om tot een eindontwerp te komen.

6


7


3.3 Scenario Een scenario schrijf je om erachter te komen wat de gebruiker graag wil van jouw website. Je schrijft vanuit een wens van een van de persona’s, omschreven in het ResCon verslag, een scenario. In het scenario beschrijf je de optimale interactie met de website. Er is bij een scenario dan ook altijd een goed einde. Mijn scenario is geschreven vanuit het perspectief van Emy, de 32-jarige eco-vriend die is afgestudeerd in architectuur.

Emy’s scenario Emy heeft weer een lange dag op het werk achter de rug, elke dag zit ze van half negen tot zes uur bij haar bureau, maar morgen heeft ze een dagje vrij genomen. De wintermaanden komen er weer aan en ze gaat in huis lekker alles schoonmaken en sorteren. Zomerkleding de kast uit, en winterkleding de kast in. Bij het sorteren van de kleding komt ze van alles tegen wat haar dochtertje, die groeit als kool, niet meer past. Ook van zichzelf komt ze kleding tegen die ze eigenlijk nooit meer aanheeft. Vroeger gooide Emy alles meteen weg, zes jaar geleden kwam daar echter verandering in. Ze wil graag de kleding van haar en haar familie wegbrengen naar een tweedehandskledingwinkel. Emy pakt haar laptop en googelt “Tweedehandskledingwinkel Arnhem” Hier vindt ze al snel de site van Lot’s. Ze gaat naar de sectie tweedehandskleding en vervolgens naar het deel van die pagina dat zowel de voorwaarden als tijden en informatie over een vergoeding weergeeft. Hier staat alle informatie die ze nodig heeft om vandaag nog even langs te gaan! Drie minuutjes lopen van de bus stop en ze is er, met een zak vol kleding! Ze loopt naar binnen en geeft vrolijk haar kleding af. Weer iets goeds gedaan!

8


3.4 Constumer Journey Dit hoofdstuk is niet veel meer dan het omschrijven van de ‘flow’ van de user uit het vorige hoofdstuk (3.3 Scenario). De opdracht vereist dat de persona minimaal drie secties van de pagina bezoekt die de basis vormen voor mijn grafisch ontwerp en het werkende prototype. Een probleem hieraan is dat mij verteld is dat de website ‘zo simpel mogelijk te begrijpen’ moest zijn. Ik heb dus alleen maar hoofdcategorieën in mijn navigatie staan. Het is dus weinig moeite om snel te vinden wat je hebben wil. Ik zal mijn originele idee en wat uiteindelijk mijn Flow is hier laten zien.

Uiteindelijke Flow

Google

“Tweedehands kledingwinkel Arnhem”

Home

Zelf kleding inleveren

Originele Flow

Google

Home

Tweedehands artikelen

Tweedehands kleding

Voorwaarden inname kleding

Welke kleding kan nu gebracht worden

Prijsbepaling

Opbouw tegoed

Niet verkochte goederen 9


3.5 navigatie In dit hoofdstuk gaan we dieper in op de navigatie van een site. De opdracht vraagt op drie aansprekende navigatiestructuren op te zoeken en te beargumenteren waarom deze navigatiestructuur mij aanspreekt. Wat vind ik van andere sites? Naam

Makkelijk te vinden

Logische plek

Goed leesbaar

Letters duidelijk

http://www.details.co.jp/ http://www.borgoveneto.com/ https://communicatiekc.com/ http://appelenei.nl/

x x x x

x x x x

x

x

x x

x x

Makkelijk gebruiken

x x x

Makkelijk begrijpen

x x

Goede woordkeus

x x

Zichtbaar waar je bent? x x x

De screenshots staan in dezelfde volgorde als de sites in de tabel staan

10


Wat ben ik zelf van plan? Een menu bovenaan de pagina Dit menu laat alle delen zien van de website zien, net als bij de site van appel&ei, ook zal deze mee scrollen als de gebruiken naar beneden scrolt op de pagina zodat je altijd overal heen kan vanaf waar je bent. Als je bij een bepaald deel van de site bent is de tekst van het kopje waar je op staat dikgedrukt zodat je altijd weet waar je bent. Het logo moet links staan, groter dan de tekst van de kopjes.

11


3.6 Schetsen Deze opdracht bestaat simpelweg uit het maken van een paar schetsen voor de homepage van drie verschillende devices, namelijk mobile, tablet en desktop. Elke keer de beter schets kiezend tot je tevreden bent. Ook maak je aanvullende schetsen voor de desktopversie, hoe ziet het er bijvoorbeeld uit als ik naar een andere pagina navigeer? Tijdens deze opdracht worden minimaal zes schetsen gemaakt. Zelf heb ik de schetsen met de hand op papier gemaakt en er vervolgens foto’s van gemaakt (zoals je ze hieronder ziet)

12


Natuurlijk zal ik per schets even kort toelichten wat er te zien is en wat de bedoeling is. Schetsen betekent niet meteen een ontwerp maken. Schetsen is er juist voor om uit je sleur te breken. Misschien had je al een idee en ben je niet van plan die te veranderen, met schetsen kan je erachter komen dat een ander ontwerp toch beter zal werken. Pc-schets 1 - Home Schets 1 schetst een beeld van hoe Home er ongeveer uit moet komen te zien. Het logo en een korte beschrijving van waar je nu eigenlijk naar kijkt. Het is belangrijk dat je als je op een website komt je meteen kan zien waar je bent en wat je daar kan doen. pc-schets 2 - Scrol De schets onder schets 1 laat zien wat er gebeurt als je naar beneden scrolt vanaf de Home Page. Het menu is bovenaan te zien en zal ook mee scrollen. Pc-schets 3 – Wat? In de bovenste schets rechts is te zien hoe ik de producten wil laten zien. Je kan met de pijltjes naar links en rechts om zo een paar producten van het huidige seizoen te zien die de collectie representeren. Pc-schets 4 – Contact Ook belangrijk is het contact en de voorwaarden voor het inbrengen van kleding. Deze wil ik hier kort en overzichtelijk bespreken. Tablet schets – Home & menu Zo moet de Home Page eruit komen te zien op een tablet. Bovenaan nog steeds een balk met het logo en helemaal rechts een hamburger menu. Als je op het menu klikt zal het langs de rechterkant uitklappen en zo het volledige menu weergeven. Als je naar beneden swiped of op het pijltje klikt ga je naar het volgende deel van de site. Phone schets – Home & Menu Deze schets laat zien hoe de ‘home’ eruit komt te zien voor Phone. Hoewel dit niet veel zal verschillen met de tabletversie is in de bovenste balk het logo niet meer (of alleen kleiner) te zien. Ook hier gebruik ik een hamburger menu die net als het menu op de tablet uitklapt, zoals te zien in de rechter schets op de pagina.

13


3.7 Drie wireframes Wireframes zijn eigenlijk de basis voor je ontwerp. We maken er om z’n minst drie. Een voor de desktop en twee voor de tablet en mobiele versie. In een wireframe staat eigenlijk alles al behalve tekst en plaatjes, er staat wel op welke plek deze moeten komen. Hoewel aangeraden werd om deze wireframes uit te werken met een artboard in Photoshop, is mijn opinie dat het makkelijker en fijner is om ze met de hand te tekenen.

Dit zijn de uiteindelijke drie wireframes geworden, voor de PC heb ik nog een ander in de bijlage zitten, maar dit is het wireframe waarmee ik ben begonnen om mijn site te ontwerpen. Hier een korte toelichting (foto’s van links naar rechts) PC wireframe – Alles Hoewel ik uiteindelijk niet de site precies zo heb ontworpen als de wireframe, heb ik aan de wireframe wel een grote hulp gehad. Veel dingen komen nog terug, maar sommige zijn weggelaten zodat de pagina er niet té druk uit komt te zien. Alles staat op de pagina, niet zoals bij de mobile en tabletversie waar ik juist andere dingen heb gekozen. Tablet wireframe – Afbeeldingen, route & korte info Op een tablet zoeken mensen meestal niet naar veel specifieke info over een winkel, als je echt info zoekt zal je sneller op de computer zoeken. Voor de tablet richt ik me juist op afbeeldingen, route

14


begeleiding en korte info (dus ingekort van de website) over tweedehands kleding en de voorwaarden voor het inleveren die je misschien even snel wil opzoeken. Mobiele wireframe – Route & Korte info Bij de mobiele versie ligt de meeste nadruk op contact informatie, als bijvoorbeeld openingstijden en de route naar de winkel. Als je op je telefoon naar een site gaat heb je meestal geen zin om alle informatie te lezen (daarom dus ingekort van de website), liever kort en krachtig zodat je er snel doorheen kan. Alleen de belangrijkste informatie wordt kort beschreven. Denk bijvoorbeeld aan een scenario waar je in het dorp bent en je opeens die winkel met die toffe site herinnerd. Waar zit deze winkel ook al weer? Dan kan je snel even naar de website om daar naar de route te kijken.

15


3.8 Design regels en richtlijnen In dit hoofdstuk maken we de ontwerpkeuzes voor de site. Hiervoor is onderzoek nodig. De doelgroep staat hierbij uiteraard centraal. Het onderzoek gaat in op kleuren, fonts en het beargumenteren hiervan. Ik heb dit ook al eerder kort uitgelegd in mijn ResCon (Hoofdstuk 2.2 Moodboard blz.14) en ik wil hier iets uitgebreider mijn keuzes toelichten. Voor meer plaatjes van mijn keuze zie mijn moodboard in de bijlage. Kleuren De kleuren passen goed bij elkaar en zullen ook goed afsteken tegen elkaar, dit in tegenstelling tot de huidige site waar het roze en zwart (hoewel het bij elkaar kan passen) er afstotelijk uitziet. De kleuren zijn rustig en zullen een overzichtelijk gevoel geven. De groene tinten geven een gevoel van eco-vriendelijkheid terwijl ze tegelijkertijd ook een natuurlijke look aan de site geeft. Ook is groen de kleur van rust en balans, dingen die ik met mijn pagina graag uit wil stralen (Linden, J. 2016). De blauwe tinten zijn er voor het gevoel van vertrouwen en stabiliteit. Ook straalt het kalmte en wijsheid uit. Deze kleur is net als groen ook een natuurlijk aanvoelende kleur. Font Met de lettertypes heb ik nog even gespeeld om uiteindelijk op Lucida sans voor de artikelen en Adobe Caslon pro voor titels uit te komen. De keuze voor Lucida sans was omdat het een schreefloos lettertype is. Schreefloze letters zien er overzichtelijk en mooi uit, ook zijn schreefloze letters makkelijker te lezen voor mensen met Dyslexie. (Kuster S., Braams T., Bosman A., 2012) Overzichtelijkheid is een van de belangrijkste dingen die mijn site uit moet stralen, samen met elegantie. Dat laatste is de reden dat ik voor titels het lettertype Adobe Caslon uitgekozen heb. Overig De fotografie op mijn site is simpel, in de kleuren van de site en het liefst met ronde vormen. Alles vierkant is misschien wel de makkelijke manier, maar helaas niet de mooiste. Voor de foto’s is eigenlijk het belangrijkste dat er niet te veel omheen gebeurt. Het logo wat voorheen nogal onprofessioneel overkwam heb ik veranderd naar dit nieuwe logo. Het originele logo is simpelweg de naam van de winkel in een lelijk groot lettertype. Hoewel het logo misschien niet veel voorstelt is toch een hele verbetering op de vorige. Niet te complex, simpelweg de naam in een mooier, eleganter lettertype.

16


3.9 Grafisch ontwerp van een single page voor desktop Uiteindelijk is alles neergekomen op dit grafische ontwerp. Niet alles is precies zo geworden als mijn wireframe en moodboard, maar ik heb aan deze twee wel enorm veel hulp gehad tijdens het realiseren van mijn ontwerp. De foto hiernaast laat het ontwerp van de hele site zien. De twee afbeeldingen op de volgende pagina laten de pagina zien als je over de vragen heen gaat met je muis (hoofdstuk 2.3 van het ResCon verslag) Sommige dingen uit de originele ontwerpen heb ik weggelaten en uitgedund. Een van de belangrijkste dingen voor het maken van de site was dat het overzichtelijk blijft. Alles moet goed en makkelijk te vinden zijn. Overzicht zonder echte informatie te verliezen. De inlog knop gaat echter nergens heen aangezien ik zelf niet kan inloggen op de klantpagina. Als suggestie kreeg ik mee dat ik de pagina als ingelogd persoon kan bekijken. Ik heb hiernaar gekeken en ben tot de conclusie gekomen dat dat niet handig is. Op de site zoals hij nu is (niet mijn ontwerp, maar de originele site) Als je inlogt als klant ga je naar een speciale klant pagina waar ik dus niet bij kan.

17


18


4.1 Testverslag Om te testen of onze site wel echt zal werken en niet te ingewikkeld zal zijn doen we een test met drie personen. Hiervoor hebben wij een testplan gekregen die ik in dit hoofdstuk ook zal volgen. Testdeelnemers Mijn deelnemers zijn Marieke, Chris en Evelien van. Marieke is een klasgenoot die met een iets professioneler oog kijkt naar mijn website dan de andere twee deelnemers zullen doen aangezien we allebei nu het vak webdesign volgen. Mijn tweede deelnemer is Chris, mijn broer die toevallig in de doelgroep hipster valt. Rustig persoon met veel artistieke kanten. De derde en laatste persoon is Evelien. Evelien is een eco-vriend, misschien niet helemaal voor de ‘goede’ redenen maar het bespaart haar geld en dat is iets dat ze graag doet. Ook is ze veel bezig met letters aangezien ze aan hand lettering doet. De eerste indruk Wat voor soort website is dit? Eigenlijk antwoordde alle testgebruikers hier hetzelfde namelijk; ‘Een site voor tweedehands kinder-, dames en herenkleding, outlet en cadeauartikelen’ Wat is het belangrijkste onderdeel van deze website? De antwoorden waren deze keer verschillend, de ‘voorwaarden & regels’ werd gekozen door twee van de testpersonen, grotendeels omdat er het woord regels in stond. De andere persoon koos voor de plaatjes ‘outlet’, ‘tweedehands kleding’ en ‘cadeauartikelen’. Wat kun je nog meer doen? Inloggen, door plaatjes heen klikken, kijken wat de voorwaarden en regels zijn, tegoed kijken en naar openingstijden en contact zoeken. De meeste titels worden hier genoemd, die vallen immers ook het meest op. Van wie is de website? Het antwoord kwam bij iedereen al snel neer op Lot’s aangezien het logo zowel in het menu als op de homepage staat. Wat valt je op aan de website? Dit was voor iedereen natuurlijk anders met antwoorden als ‘Heel licht, fijn om naar te kijken, maar wel té veel tekst’ en ‘Alles is mooi en overzichtelijk, mooie kleuren ook!’ en als laatste ‘Mooi hoor! Mooie kleur combinatie en letters.’ Realistische zaken Dit is waar ik de gebruiker verder liet kijken. Wat zou je normaal doen op een soortgelijke website? Marieke die zelf ook een tweedehands winkel heeft gekozen voor deze opdracht las eventjes mijn kopjes ‘producten’ en ‘wie zijn wij’ door en kwam hier tot de conclusie dat er te veel tekst stond en het misschien een beter idee was om het kopje ‘producten’ zoals hij tijdens de test nog naast ‘wie zijn wij’ stond, weg te laten en de informatie over de producten in plaats daarvan onder de plaatjes te zetten. Ze keek ook even naar de twee vragen op de pagina en vroeg waar de antwoorden stonden, als antwoord liet ik haar de twee ontwerpen zien die ik daarvoor heb gemaakt. Zelf deed ze blijkbaar een soortgelijk iets op haar site.

19


Iets later ging ik naar Chris om hem hetzelfde te laten doen. Hij was een van de gebruikers die dacht dat ‘voorwaarden & regels’ een van de belangrijkste delen was van de pagina. Hier las hij snel de ‘regels’ door en stelde voor er een andere, minder dreigende naam aan te geven. Zelf zou hij het snelst naar de openingstijden en contact gaan, het viel hem tijdens het scrollen op de site op dat de pagina niet echt in duidelijke delen was opgebouwd, hij had geen idee waar je terecht zou komen als je in het menu ergens op klikte. Iets wat natuurlijk veranderd moet worden. Eenmaal onderaan de pagina bij contact terecht gekomen was zijn conclusie dat het er allemaal mooi en netjes uitzag. En als laatste testpersoon Evelien. Ze vond dat bij ‘tegoed’ té veel tekst stond en dat misschien in plaats van een uitleg over hoe je je tegoed kan checken gewoon simpelweg een linkje naar de tegoedpagina kan. Ook viel haar op dat de navigatiebalk dezelfde kleur was als de balk met ‘outlet’, ‘tweedehands kleding’ en ‘cadeauartikelen’ wat misschien moeite zou geven als het menu mee naar beneden ging. De ervaring Woorden die het beste passen: Persoon

(Gevoel) beste

(Gevoel) minst

Marieke

Vrolijk, open, neutraal Blij, warm, open

Bang, boos, afstandelijk Gesloten, agressief, moe Koud, duf, eenzaam

Chris Evelien

Warm, energiek, blij

(Associatie) Beste Licht, rustig, modern Druk, natuur, betrouwbaar Origineel, rustig, licht

(Associatie) minst Herrie, oud, donker Ouderwets, langzaam, grappig Cliché, doorsnee, donker

Algemene vragen De goede punten aan de site waren dat de site rustig was, heel mooi uitgewerkt, goed font, natuurlijke kleuren, leuk idee met de plaatjes dat je zo een deel van de collectie kan zien. verbeterpunten waren samengevat dus, minder tekst, navigatiebalk van kleur veranderen, onder de plaatjes de uitleg voor de producten geven, duidelijke site verdeling, ‘voorwaarden & regels’ aanpassen naar iets minder dreigends en bij ‘tegoed’ minder tekst (bijvoorbeeld door een link in plaats van uitleg hoe je in moet loggen) Wat er nog ontbreekt is eigenlijk niets. Alle nodige informatie staat op de site. Verschillen gewenste ervaring en werkelijke ervaring Ik had eigenlijk verwacht dat mijn site al heel goed in elkaar zat, maar het bleek dat er toch veel verbeterpunten waren die ik zelf over het hoofd had gezien. Nu ik het uiteindelijk verbeterd heb ziet de site er veel mooier en overzichtelijker uit! Ook had ik niet gedacht dat één titel zo af kon leiden van het eigenlijke doel, waardoor de mensen eerder dachten dat ‘Regels & voorwaarden’ belangrijk was. Het menu was inderdaad dezelfde kleur als het blok met de plaatjes erin, dat was me nooit opgevallen. Top 3 problemen 1. Navigeren, er stond nergens duidelijk aangegeven welk deel van het menu naar welk pagina deel zou gaan. 2. Prioriteiten, de titel van ‘regels & voorwaarden’ bleek té dreigend en leek daarom belangrijker dan andere dingen. 3. Té veel tekst, dat maakte de site hier en daar wat onrustig.

20


4.2 Reflectie Dit hoofdstuk is eigenlijk een verslag op zich, het gaat over de ontwikkeling van ons als maker en student aan de hand van concrete voorbeelden. We moeten hier niet alleen beschrijven dat wat we geleerd hebben, maar vooral wat en hoe we dat hebben gedaan. Ik heb mezelf een vraag gesteld ‘Waaraan voldoet een site die mensen oproept en activeert om tweedehands kleding te kopen en ook interessant blijft om te volgen?’ (ResCon hoofdstuk 1.3) waar ik vervolgens het antwoord op heb proberen te vinden. Uiteindelijk is mijn ontwerp het antwoord op deze vraag. De inhoud van dit verslag: Onderdeel A – Reflecteer op hoe je studeert 1. Omschrijf wat er goed ging en waarom 2. Omschrijf wat er niet lekker liep en waarom 3. Hoe ga je het de volgende keer aanpakken? Onderdeel B – Reflecteer op je ontwerpproces 4. Wat heb je deze afgelopen weken ontworpen, getest of onderzocht? 5. Welke vragen heb je jezelf daarbij gesteld? 6. Wat waren samengevat de resultaten? 7. Welke conclusie kun je daaruit trekken? 8. Hoe he je die conclusies verwerkt? Onderdeel C – Reflecteer op de ICA-talk door antwoord te geven op de volgende twee vragen; 1. Goede interactieve concepten die nu en in de nabije toekomst nodig zijn, zijn concepten die … 2. Onderscheidend in kwaliteit word ik als interaction designer door …

21


Onderdeel A – Reflecteer op hoe je studeert 1. Omschrijf wat er goed ging en waarom. Omschrijf wat er goed ging, lekker breed en vaag, ik zal het toch proberen. Studeren is niet iets wat je altijd zo bewust doet, niet meer in ieder geval. ‘Vroeger’ (tussen aanhalingstekens omdat vroeger voor mij helemaal zo lang geleden nog niet is) toen ik nog op de middelbare school zat had ik altijd een hekel aan naar school gaan, nu heb ik dat gelukkig helemaal niet meer. De stof is soms veel om op te nemen, zeker op zo’n vrijdagmiddag als je ineens allemaal code naar je gesmeten krijgt, maar dat maakt niet meer uit. Ik leer eindelijk iets wat wel interessant is in plaats van de saaie vakken waar ik op de middelbare doorheen moest zitten. In de les (hoewel het misschien niet altijd zo lijkt) let ik op en probeer ik mee te doen, dingen af te hebben en door te lezen. Elke keer ben ik weer nieuwsgierig naar wat er de volgende les komen gaat. Zelf vind ik dat dit iets is wat dus goed ging, ik ga met plezier naar school om te studeren. Ook schrijf ik graag, een groot voordeel bij deze opleiding aangezien verslag na verslag moet worden geschreven. Door het hele proces van verslagen schrijven had ik dan ook het gevoel dat dat goed ging. 2. Omschrijf wat niet lekker liep en waarom Sommige dingen lopen nu eenmaal minder goed, zoals vrijdagmiddag als je bijna weekend hebt en het moeilijk is om je gedachten erbij te houden. Aan het begin van deze course had ik eigenlijk nog weinig verstand van dingen zoals code, ik heb er altijd moeite mee als ik niets weet over een onderwerp terwijl een ander daar al vloeiend mee door kan gaan. De neiging is er bij mij altijd om te laat te beginnen met alles. Verassend genoeg heb ik dat ook deze course weer laten zien. Hoewel ik graag leer en werk ben ik vaak naar mijn mening te moe om nog aan school te werken als ik eenmaal thuis ben. In de vakantie zal ik sneller denken, waarom zou ik nu werken als ik ook Netflix kan kijken. Dit heeft er weer eens voor gezorgd dat ik te laat begonnen ben en uiteindelijk weinig tijd overhield om alles af te maken. 3. Hoe ga je het de volgende keer aanpakken? De volgende keer zal ik natuurlijk proberen om eerder te beginnen met mijn werk en het nog beter bij te houden. Voor de rest weet ik niet precies wat er met ‘volgende keer’ bedoeld wordt. Als we het hebben over het volgende blok dan is het op tijd beginnen inderdaad belangrijk. Nog eens een site ontwerpen zal me nu makkelijker vergaan aangezien ik het proces al een keer ben doorgelopen.

22


Onderdeel B – reflecteer op je ontwerpproces 4. Wat heb je deze afgelopen weken ontworpen, getest of onderzocht? Deze afgelopen weken heb ik een site ontworpen (zie hoofdstuk 3.9 Grafisch ontwerp van een single page voor desktop)! Tijdens het proces heb ik mensen zowel mijn moodboard als mijn ontwerp laten testen en de resultaten hiervan verwerkt in mijn verslagen. Voor veel opdrachten was onderzoek vereist. Denk bijvoorbeeld aan de persona’s die we moesten ‘bedenken’, bedenken hier tussen aanhalingstekens omdat we ze niet moesten verzinnen, maar juist door onderzoek moesten vaststellen wie deze mensen zijn. 5. Welke vragen heb je jezelf daarbij gesteld? Hoe? Hoe alles. Aan het begin van de course had ik weinig ervaring met dingen als HTML en ik had nog nooit een site ontworpen. Alles wat je in de les leert is nieuwe informatie, en door de lessen heen lees je langzaam hoe alles werkt. Een andere vraag die je blijft stellen tijdens het hele proces is ‘wat vindt de doelgroep hiervan?’. De doelgroep blijft door het hele proces centraal staan. Als je aan het einde van de course en website hebt gemaakt die jij helemaal het einde vindt en waarop je geweldig trots bent, heb je daar helemaal niets aan als het de doelgroep niet aanspreekt. Altijd moet een oog op de doelgroep gericht blijven. De vraag ‘klopt dit?’ is natuurlijk altijd een favoriet. Ik moest mezelf aanwennen om overal bronnen bij te schrijven, wat ik na veel herhaling inmiddels ook wel redelijk doe (hoop ik). 6. Wat waren samengevat de resultaten ‘Kijk ik kan dat ook!’ zo zou mijn samengevatte resultaat klinken. Elke keer die vraag hoe, is een goede manier om het antwoord te vinden en te leren. Inmiddels kan ik wel ok overweg met HTML en heb ik ook zelf een site ontworpen, wat gek genoeg best wel leuk bleek te zijn. 7. Welke conclusie kun je daaruit trekken? Tijdens deze course heb ik veel geleerd en ook op mijn vragen de antwoorden gevonden. Leren is een lang proces met veel vallen en opstaan. Elke keer als je het even niet weet moet je jezelf weer uitdagen om verder te gaan!

Onderdeel C – reflecteer op de ICA-talk Dit onderdeel is een reflectie op de ICA-talk van vormkracht10. Ze namen ons mee op hun pad door het proces van het maken van een website. Het traject bestaat uit een paar stappen namelijk: Analyse – indeling – ontwerp – realisatie – livegang – optimalisatie. Voor de rest waren er veel inspirerende quotes als “just do it”. Ik heb niet echt het gevoel dat ik veel heb geleerd van de ICA talks en veel kan ik hier dus ook niet vertellen. Het was allemaal leuk en aardig, ik heb alleen niet veel van waarde op kunnen pikken.

23


Bronnenlijst BuzzFeed (z.j). BuzzFeed. Geraadpleegd op 20-12-2016 van https://www.buzzfeed.com/ Kickstarter (z.j). Kickstarter. Geraadpleegd op 20-12-2016 van https://www.kickstarter.com/ Google Images (z.j). Atari. Geraadpleegd op 20-12-2016 van https://www.google.nl/imghp?hl=nl&tab=wi&ei=ns9OWPz8D4TwwQLblZqoDw&ved=0EKouCBYoAQ Linden, J. (22-9-2016) Het belang van een goede huisstijl. Geraadpleegd op 16-1-2017 van https://www.webwinkelkeur.nl/belang-goede-huisstijl/ Kuster S., Braams T., Bosman A. (02-2012). Lettertype dyslexie. Geraadpleegd op 16-1-2017 van https://www.braams.nl/kennisverdieping/hulpmiddelen/lettertype-dyslexie

24


Bijlage Wireframe website

25


Moodboard

26

Design Document - Webdesign  
Design Document - Webdesign  
Advertisement