Page 1

Ontwerp rapport remediate 2012

Hogeschool Arnhem Nijmegen Informatie & Communicatie Academie Propedeuse Naam student: Gideon Studentnummer: 511454 Klas: C1D Opdracht: Website Koken voor yuppen Datum: 00-00-2012 Docent: Emiel Ruis


Inleiding Inleiding Om tot een goed ontwerp te komen voor je website is het erg belangrijk te weten wat een ontwerp van een website nou eigenlijk zo goed maakt. Om hier een beter inzicht in te krijgen maken wij voor de website Foodcave.com een ontwerprapport. In dit rapport analyseren wij een aantal andere websites op hun indeling, navigatie, kleur en typografie. Dit zijn de 4 belangrijkste dingen die een goede website kunnen onderscheiden van een slechte website. Ook beschrijven wij hoe we tot de uiteindelijke vormgeving van de website zijn gekomen. Door dit te doen hopen wij u een goed beeld te geven van de richting die wij willen opgaan met uw website en u laten weten waarom wij sommige keuzes tijdens dit ontwerpproces hebben gemaakt om zo bepaalde doelgroepen aan te spreken, deze lid laten worden van de site en proberen te behouden.

2

3


Concept & inhoud Concept Voor het concept van de website Foodcave.com hadden we het idee om een recepten website te ontwerpen met een goede sociale intergratie. Met deze sociale intergratie hebben gebruikers de mogenlijkheid om in te loggen met Facebook en reacties te plaatsen bij recepten. Ook kunnen zij zelf recepten toevoegen zodat ze deze vervolgens kunnen delen via Twitter of Facebook met vrienden of andere gebruikers. Ook moet er een verdienmodel aanzitten. Hiervoor denken wij gebruik te gaan maken van advertenties en een bestel/bezorgservice. Klanten zullen de eigenaar kunnen benaderen om een advertentie te kunnen laten plaatsen. Het uiteindelijke doel is om een website te maken waar liefhebbers van eten in contact kunnen komen met andere liefhebbers om zo met hun recepten te delen om ze vervolgens zelf te kunnen bereiden. De website zal niet alleen geschikt zijn voor de yup, maar ook andere gebruikers. Hierdoor zal de site uiteindelijk meer geld kunnen opleveren. Verder zal de site natuurlijk uiterst geschikt zijn voor de yup omdat we goed rekening houden met de eissen van deze doelgroep. Dit zal ook in de uitstraling van de site terug te zien zijn. We willen een site ontwerpen die niet al te serieus oogt en je niet afschrikt door alle poespas. Daarom zullen we rustige en iets meer opvallende kleurenn combineren. Ook zal de site erg overzichtelijk zijn, de meest gebruikte opties zou je daarom niet onderaan de pagina zien, maar daar waar ze opvallen.

Ook worden er diensten gelinkt met de recepten binder op de site. De recepten is een functie dat je recepten van de website kan laten toevoegen om deze later nogmaals te bekijken. Hier kan de gebruiker de benodigde ingredienten van deze recepten bestellen en laten bezorgen door een van de partners van Foodcave. Verder zal social media een grote rol spelen op de website. Door in te loggen met Facebook zullen gebruikers zelf voor een deel van de inhoud van de website kunnen zorgen, deze kunnen delen met vrienden en kunnen laten beoordelen door andere gebruikers. Deze recepten moeten vervolgens eerst goedgekeurd worden door een van de administrators of moderators van de site. Afbeeldingen op de website zullen voor een groot deel foto’s zijn van eten die zelf door de uploaders moet worden aangeleverd. Dus geen afbeeldingen waar een copyright aan vast zit. Overige afbeeldingen zoals die in de achtergrond van de website of news slide worden zelf geschoten door een fotograaf of gekocht van stock websites. Gebruikte fonts worden ook gekocht omdat hier een licentie aan vast zit.

Afbeelding nieuws slide

Inhoud

4

5

Foodcave.com is een recepten website, daarom zal een groot deel van de content gaan over eten en het bereiden ervan. Deze content zal te vinden zijn op de mainpage waar de gebruiker meteen wat kan lezen over de laatste recepten trends en ander interresant nieuws. Ook zal er een stukje advertisement terug te vinden zijn op de website. Dit zal de bron van inkomsten zijn voor de site. Klanten kunnen hier tegen een maandelijks bedrag een advertentie laten plaatsen dat natuurlijk met eten te maken heeft.

Achtergrond afbeelding


Moodboard

Navigation-interaction design

Navigation-interaction Design

Moodboard

6

Home Als de gebruiker arriveert op de homepage krijgt hij meteen het laatste nieuws te zien te zien of een aantal highlighted recepten en andere informatie zoals reclame, het zoeken van recepten, de functie om in te loggen en een disclaimer in de footer. Recepten Op de recepten pagina is uiteraard een goed overzicht te vinden van de laatste en meest populaire recepten. Ook krijgt de gebruiker hier de optie om recepten te filteren door gebruik te maken van de zoek balk net zoals die van de homepage alleen zijn er hier wat extra zoekopties toegevoegd. Als je op een recept klikt kom je op een aparte pagina terecht waar je meer informatie kunt lezen over het recept en de optie krijgt om hierop te reageren of natuurlijk om deze te delen via social media.

Over ons Op deze pagina is een uitleg over Foodcave.com te vinden en haar partners. Dit is om gebruikers een goed beeld te geven over de visie en doel van Foodcave, wat ook interessant kan zijn voor potentiele klanten voor reclame op de site. Ook is hier een linkje te vinden naar de contact pagina voor mensen die meer informatie zouden willen hebben of contact willen opnemen. Contact Op de contact pagina is natuurlijk een contact formulier te vinden. Hier moet de gebruiker zijn/ haar gegevens invullen om een bericht te mogen versturen. Om misbruik te voorkomen maakt dit formulier gebruik van een code beveiliging dat kan checken of de gebruiker geen bot is. Recepten binder Op deze pagina kan de gebruiker zijn gekozen recepten inzien, zijn verzameling van recepten delen met vrienden of de ingrediĂŤnten bestellen en laten bezorgen door een van de partners van Foodcave.

7


Visueel ontwerp Paginaontwerp Onderzoek

Paginaontwerp Inspiratie

Snowbird

BBC Food Het paginaontwerp van snowbird. com is erg anders dan de meeste web pagina’s. Alles kan uitkappen en is mooi vormgegeven. Ook onstaan er bergjes onder in de navigatie als je er overgeen gaat. Ook is hij erg overzichtelijk alleen denk ik niet dat hij super werkt op een tablet omdat het scherm daar niet groot genoeg voor is. De vormgeving van de site is zeker iets dat mensen geïnteresseerd maakt om naar deze site te surfen.

Bicharia

De recepten website van de BBC heeft mij erg geinspireerd met het ontwerp van mijn eigen ontwerp. Een aantal elemental heb ik ook overgenomen van deze site omdat ik ze erg tof vond en zelf geen manier kon bedenken om het beter te doen. De site is voor mij een recepten website zoals hij hoort te zijn. Simpel, overzichtelijk en leuk vormgegeven.

Yummly Ik weet niet in wat voor taal deze site geschreven is, maar mooi is die zeker. De site heeft een leuke vrolijke vormgeving en maakt goed gebruik van verschillende kleuren en afbeeldingen. Ook deze site is overzichtelijk, want hier wordt je niet doodgegooid door allemaal buttons die je ergens naar kunnen verwijzen.

8

BBC Radio 1

Wij kwamen Yummly tegen en waren er meteen dol op. Deze recepten website heeft een geweldige sociale intergratie, de ideën kwamen meteen binnen! Alleen hadden we de banner anders vormgegeven, want deze straalt niet echt veel vrolijkheid uit en de kleuren komen er niet goed uit. De recepten pagina van deze site was ook erg goed ingedeeld, duidelijk aangevuld met informatie en de Yum button is een leuke toevoeging.

9

Cooking.com De site van BBC radio 1 is een site bedoeld om mensen te informeren over de radioprogramma’s van de zender en de laatste muziek hits. Deze zijn allemaal makkelijk te beluisteren op de site. De afbeeldingen die op de site worden gebruikt geven de gebruiker een duidelijk beeld van wat hij kan verwachten als hij er op klikt. Op de homepage is daarom weinig aan tekst te vinden.

Cooking.com, een gezellig uitziende recepten site. Hier speelt sociale media een minder grote rol, maar dat komt denk ik omdat deze site is bedoeld voor een andere doelgroep, en dat is ook wel te zien aan de vormgeving. Het is niet te druk, maar het spreekt mij als een jongere gebruiker minder aan dan BBC Food of Yummly. Wel zijn hier genoeg recepten te vinden die goed in veel verschillende categorieën zijn verdeeld.


Paginaontwerp Concept

Paginaontwerp Ontwerp

De uitgangspunten voor het ontwerp van mijn home pagina was om een pagina te maken dat overzichtelijk is en er goed uit ziet. Niet saai, maar ook niet te serieus. Het moet er leuker uitzien dan de meeste recepten sites, waarvan ik zelf vind dat ze er erg saai uitzien. Het moet mensen van 20-35 jaar aanspreken die niet veel tijd hebben om te koken, daarom moesten er ook tools komen die het de gebruiker makkelijk maakte om een goed recept te vinden. Voor mensen met wat meer tijd wilde wij een sociale intergratie zodat ze in contact konden komen met andere liefhebbers van het koken. Ook belangrijk is dat de pagina op zowel pc’s als op tablets goed te bekijken moet zijn. Om dit te doen kiezen wij voor een breedte van 960 pixels en minder hovers dan een gemiddelde site.

Overzichtelijk Dit is een deel van de low-fi die we hebben gemaakt voor de site. Hier is te zien dat we willen gaan voor een overzichtelijk structuur voor de website. Naast de slider waarin het belangrijke nieuws komt te staan is meteen een recepten finder te zien. Al het belangrijke staat naast elkaar zodat de gebruiker zonder tijd niet de hele pagina heeft af te zoeken naar hetgeen waar hij naar zoekt.

Leuk

10

Ook belangrijk is dat de website leuk moet zijn, het moet meer zijn dat alleen een site waar je even heen gaat voor een recept. Voor de mensen met meer tijd is er veel te lezen over de lekkerste recepten voor bepaalde tijden in het jaar en is er een hoop inhoud te lezen dat zelf door andere gebruikers geschreven is. Hier kunnen anderen op reageren en over praten. En natuurlijk delen met andere vrienden!

Dit is het uiteindelijke ontwerp voor de mainpage van Foodcave. Zoals u ziet heb ik gekozen voor een rustige uitstraling met een overzichtelijke indeling. Rechts boven kunnen gebruikers met Facebook inloggen zodat ze reacties kunnen plaatsen op recepten, zelf recepten kunnen uploaden of kunnen delen met vrienden. Meteen daaronder heb ik gekozen de navigatiebalk te plaatsen. Dit heb ik gedaan omdat ik vond dat hij hier beter paste omdat hij dan dichterbij andere tools zat zoals de receptenvinder. Zo kan de gebruiker makkelijker navigeren door de site. Onder deze navigatie kom je de content tegen van de site. Meteen zie je de grote afbeelding dat steeds veranderd naar een andere slide. Hierin staat het belangrijkste nieuws. Daarnaast 2 handige tools die het de gebruiker makkelijker maken om snel een recept te vinden naar zijn of haar smaak. Linksonderin staan oudere items die voorheen in de slide stonden. Of gewoon iets minder belangrijk zijn. Rechts daarvan heb ik gekozen grote advertenties te plaatsen. Deze afvertenties staan naast andere tips over de site of kleine handige tools zodat de gebruiker niet om deze heen

komt tenzij hij ze heeft uitgezet in zijn browser. Dat gebruikers hier niet zo makkelijk omheen kunnen zou investeerders eerder geĂŻnteresseerd maken om zelf hier zijn product te promoten. In de achtergrond van de pagina is een grote afbeelding te zien die veranderd kan worden naar andere afbeeldingen met een andere kleur. Dit veranderd tevens meteen de hele uitstraling van de site. Deze blijft dus vernieuwend, en kan ook makkelijk veranderd worden naar een thema als bijvoorbeeld kerst of halloween. Onderaan de pagina staat uiteraard een footer die mensen kan doorverwijzen naar de policy van Foodcave of doorlinkt naar gelinkte sociale media.

11


Kleur Onderzoek

Kleur Inspiratie

Opvallend

Moderne uitstraling Kleuren kunnen veel met een ontwerp of foto doen. En dat is hier ook te zien. Deze prachtige foto is meer gaan opvallen door de paarse kleuren die ontzettend opvallen. Deze kleur combineerd mooi met het zwart in de achtergrond en de grijze kleur van het model. Ook dit kan werken op witte achtergronden, alles wat dan kleur heeft zal ontzettend opvallen. Dit is iets wat ik ook probeer te doen in mijn eigen ontwerp.

Sfeer

Foto’s met veel kleur kunnen de sfeer van een site bepalen. Het is daarom belangrijk foto’s te kiezen die passen bij de uitstraling van de ste. Deze foto geeft een mooi beeld van het kleurgebruik dat ik wil gebruiken op de website. Veel wit met hier en daar warme en opvallende kleuren. Zo wordt de website niet te druk en geeft het nog steeds een fijn gevoel om er naar te kijken omdat hij dan ook niet eentonig en saai lijkt.

Prettige kleuren In deze foto zijn veel verschillende kleuren te zien, dit geeft de foto een magisch sfeertje, want zoveel opvallende kleuren op deze manier in een foto is iets wat je niet vaak ziet. Goed te zien is dat de lampjes in de foto een groot deel van de sfeer bepalen, ondanks ze het kleinste zijn. Dit komt omdat deze een stuk helderder zijn dan de andere kleuren in de foto. En oranje is ook een hele warme kleur. Het straalt gezelligheid uit, iets wat in het logo terug te zien is.

12

Frisse kleuren

In deze foto is de achtergrond wat minder wit, maar meer beige. Dit straalt minder frisheid uit, maar iets meer warmte. In de achtergrond van de site is dit ook te zien. In combinatie met al dat wit zijn er hier en daar toch nog prettige kleuren terug te zien. De kleuren rood en groen zullen veel terug te zien op de site omdat dit ook wel kleuren zijn die veel terug te zien zijn in gezond eten. En dit is wel iets wat wij uit willen stralen met de site. Een plek waar je lekkere gezonde recepten kan vinden.

13

Rust Deze foto heft een iets minder warme sfeer dan de bovenste foto, maar hij straalt wel iets anders uit dat goed kan zijn voor het ontwerp van een site en dat is dat hij serieus oogt. De combinatie van de kleur beige met de gesatureerde groen combineerd goed en geeft een frisse uitstraling. Dit is iets dat terug te zien is in de achtergrond van de site. Deze is rustig, prettig om naar te kijken. Maar haalt niet alle aandacht weg van de andere kleuren.

Rust is erg belangrijk voor een kook/recepten website. Als je voor het eerst op een website komt wil je rustig kunnen bekijken wat er alemaal te halen valt. Het moet niet overdonderend zijn, want dit kan mensen wegjagen. Ook kleur kan hier bij helpen. Door de website een rustige uitstraling te geven kan de gebruiker zich al sneller op zijn of haar gemak voelen. Daarom wordt er veel wit gebruikt op de website, met hier en daar een opvallende kleur font of afbeelding om het toch nog een beetje spannend te maken.


Kleur Concept

Kleur Ontwerp

De uitgangspunten voor het kleurgebruik waren om een aantal kleuren te kiezen die goed combineerde met de foto’s op de website en de website door behulp van een aantal rustige kleuren een rustige maar prettige uitstraling te geven aan het ontwerp. Om dit niet te saai te maken hebben we ook gekozen om voor een aantal opvallende kleuren, maar ook kleuren die iets meer desaturated waren zodat ze minder opvielen. Hieronder zijn een aantal kleuren te zien die terug te vinden zijn in het uiteindelijke ontwerp van de website.

Modern Hier zijn 3 van de kleuren te zien die te vinden zijn in het ontwerp van de site. Een felle paarse kleur voor het logo met de desaturated kleuren voor bijvoorbeeld de receptenvinder en andere tools. Deze combineren goed met de witte en grijze tonen op de website en geven de site een frisse maar serieuse look. De combinatie van deze kleuren geeft de site een moderne uitstraling.

Opvallend

14

Ook hebben we gekozen voor wat sterkere kleuren combinaties zoals het donker grijze uit de footer en het oranje uit het logo. En de bruin/grijze kleur voor de navigatie. Alle kleuren blijven op de site in combinatie met een licht grijze of witte kleur. Met deze kleuren laten we de site niet te serieus ogen, maar warmer omdat we al veel gesatureerde kleuren gebruiken.

Hier is nogmaals de homepage, waar duidelijk de gekozen kleuren terug te zien zijn. Het uiteindelijke ontwerp heeft nu een fijne rustige uitstraling waarvan de inhoud nog prima te lezen is omdat er geen kleuren zijn die de totale aandacht van het ontwerp wegtrekken. Zoals u vast heeft vernomen zal het gebruik van foto’s een grote rol spelen in de sfeer en look van de website. Wij vinden het daarom erg belangrijk om foto’s te gebruiken die goed passen bij het concept. Ook hier is in de achtergrond van de pagina een foto te zien waar de mooie oranje en groene met beige kleuren terug zijn te zien.

Dit straalt een bepaalde rust en frisheid uit. Om deze niet teveel te laten opvallen zijn de kleuren wat minder fel gemaakt. Hierdoor komen de overige afbeeldingen meer naar voren. Ook is er voor een reden gekozen om de receptenvinder een donkerpaarse kleur te geven. Hierdoor valt hij iets meer op zijn bijvoorbeeld te top 5, die toch opvalt als je naar de receptenvinder zoekt. Hierdoor krijgt een nieuwe bezoeker snel de opties te zien waar hij naar zoekt.

15


Typografie Onderzoek

Typografie Inspiratie

Keurig

Bijpassend Op de website van BBC Food is het gebruik van fonts goed toegepast, al hebben zij zich wel beperkt tot maximaal 2 fonts. Het font dat ze het meest gebruiken is te zien in de afbeelding hiernaast. Het is duidelijk zichtbaar en past goed bij het blokken structuur dat gebruikt is voor de site. Voor ons eigen ontwerp hebben wij een soortgelijke font gekozen omdat deze goed leesbaar was en ook goed paste bij onze blokken structuur.

Een keurig normaal lettertype is altijd prettiger te lezen dan een sierletter. De font JK Polar is wat langer dan een normale font maar nog steeds prima te lezen. Een font als deze is goed te gebruiken voor een banner, ik zal hem niet aanraden te gebruiken voor de content omdat hij minder goed te lezen is zodra hij kleiner is. Dit is niet prettig als je een hele lange tekst zou moeten lezen.

Speels

Sterk Speelse letters zoals deze zijn altijd goed te gebruiken om je site er minder saai en eentonig uit te laten zien. Ze zijn goed te gebruiken voor een kop of zelfs een logo. De font Grand Hotel zou ik zelf gebruiken om teksten in foto’s wat sierlijker te maken. Ik heb deze font gekozen omdat ik denk dat hij goed zou kunnen passen bij het ontwerp van Foodcave.

16

Sier

Af en toe is het leuk om wat te spelen met fonts op een pagina. Iets zoals hier is gedaan zou ook goed kunnen zijn om hier en daar artikelen op te vrolijken. De rode kleur van het lettertype versterkt de font omdat hij nu beter naar voren komt dan dat hij zwart was geweest. Een dik letterype kan ook prima gebruikt worden om bepaalde onderdelen op de website meer aandacht te geven. Deze font zou ik goed kunnen gebruiken voor de advertenties of artikelen.

17

Duidelijk lettertype Als je geen geschikt lettertype kan vinden zou je er natuurlijk ook voor kunnen kiezen om deze zelf te maken. Natuurlijk kost dit wel ontzettend veel tijd, maar je kunt er wel leuke dingen mee doen zoals hier is gedaan. Met een font zoals deze zou je de site een iets oudere uitstraling kunnen geven. Wat natuurlijk erg leuk is en best goed kan passen bij het kookboek idee. Helaas heb ik er niet genoeg tijd voor, anders had het zeker een leuke toevoeging kunnen zijn.

Op de website Abduzeedo is een mooi lettertype gebruikt dat goed leesbaar is, leesbaarheid voor de site Foodcave vind ik erg belangrijk omdat het lezen van recepten gewoon een van de belangrijkste dingen is van de site en waar de site eigenlijk ook om gaat. Hier is gekozen wit of lichtgrijze letters te gebruiken op een donkergrijze achtergrond. Dit is nog steeds prima te lezen en het geeft de site een stoere uitstraling.


Typografie Concept

Typografie Ontwerp

Ook voor onze site was het belangrijk dat we een sterk lettertype gebruikte voor de nieuwsitems en de belangrijke tools. Hij moest goed leesbaar zijn, maar natuurlijk ook goed passen bij de vormgeving van de site, want hij zou overal terug komen. Na het uitproberen van velen fonts kwamen we tot de keuze om een font te gebruiken dat leekt op die van BBC Food.

Duidelijk Deze font genaamd Scene, hebben we gekozen omdat hij goed paste bij de vormgeving van onze site. Ongeveer dezelfde font is ook terug te zien op de site BBC Food. Hier is net zoals bij ons veel gebruik gemaakt van dit soortgelijke font omdat hij goed leesbaar is en mooier is om te zien dan een standaard lettertype.

Op deze afbeelding is te zien hoe wij de font hebben gebruik. Wij heben hem gebruikt voor de navigatie omdat hij klein ook goed leesbaar was en er netjes uitzag. In de slide is hij ook terug te zien, in de snelle receptenvinder, de top 5 en ga maar door. 98% van de tekst is vormgegeven voor deze font. Hij is overal goed te gebruiken en de verschillende varianten maken dat ook erg makkelijk.

Mooi

18

De font ziet er mooi uit en is goed te gebruiken voor websites omdat er ongeveer 10 varianten van zijn. Van Italic Light tot Black. Deze font is gewoon overal goed voor te gebruiken!

19


Navigatie Onderzoek

Navigatie Inspiratie

Eenvoud

Anders Een groot deel vand de navigatie van de site is hier te vinden in de navigatiebalk. Hier zijn dikke buttons voor gebruikt die met de muis moeilijk te missen zijn. Maar natuurlijk ook niet met de vinger, wat deze site ook makkelijk bedienbaar maakt op tablets en mobieltjes.

Duidelijk

Onze navigatiebalk is bijna precies dezelfde zoals deze bij BBC Food is gebruikt. Wij vonden hem zo goed bij de website passen dat we hem voor een groot deel nagemaakt hebbeb. Hij trekt niet al te veel aandacht, maar is prima te vinden omdat hij gewoon aan de bovenkant van de pagina gepositioneerd is. Alles wat eronder te vinden is op deze pagina kan de gebruiker doorsturen naar andere pagina’s zoals de recepten vinder die je een andere pagina toont dan de recepten in de top navigatie.

Afbeeldingen Hier is de navigatiebalk aan de rechterkant geplaatst, het is anders dan wat ik vaak gewend bent maar het past er wel goed bij.Omdat de website niet te breedt is kan dit prima toe worden gepast.

20

Mooi

De navigatie van deze site viel mij erg op. Inplaats van kleine buttons te gebruiken gebruikte deze site hier grote plaatsjes met informatie voor om mensen naar een ander onderwerp te verwijzen. Dit is iets wat goed werkt op tablets en wat mij wel inspireerde om zelf ook grotere afbeeldingen te gebruiken om mensen makkelijk te laten kiezen in bijvoorbeeld de recepten pagina, waar afbeeldingen al een grote rol spelen omdat deze de impressie geven van het recept.

21

Links Hier is gekozen om geen dikke buttons te maken, maar gewoon simpel kleine woordjes in caps die klikbaar zijn. Dit past goed bij de rust die de rest van de website uitstraalt. Onderaan de pagina zijn nog meer links te vinden die de gebruiker net als in de bovenste navigatie doorverwijzen naar de belangrijkste onderwerpen.

Hier is de navigatie van de site duidelijk te zien aan de linkerkant van de pagina. De vormgeving vind ik echt super. Hij is makkelijk te gebruiken. Verder is dit ook een site waar niet ontzettend veel informatie op staat, dus het is ook niet nodig om deze vol te gooien met tientallen buttons die je verwijzen naar andere pagina’s. Ook is hij erg mooi vormgegeven en past goed bij de uitstraling van de website.


Navigatie Concept

Navigatie Ontwerp

Omdat onze doelgroep niet zoveel tijd heeft is een goede navigatie erg belangrijk. We wilden niet dat de gebruiker minuten bezig is om een geschikt recept te vinden dus deze navigatie moest zo simpel en duidelijk mogenlijk zijn. Dit moest gedaan worden door de navigatie op plekken te zetten waar je hem verwacht en elementen die ergens anders staan duidelijk in beeld te brengen door ze een opvalende kleur te geven. Verder moest het mogenlijk zijn om van de ene pagina makkelijk te navigeren naar een andere pagina.

Duidelijk Een duidelijke navigatie is gewoon erg van belang. En dit hebben we dan ook geprobeerd to goed mogenlijk te doen. Alhoewel wij de navigatiebalk van de BBC bijna hetzelfde hebben zijn er wel andere elementen die wij anders hebben gedaan zoals Het linken naar groepen van recepten, items en andere content. Ook is de navigatie overal goed te gebruiken. Je surfst makkelijk van de ene pagina naar de ander.

Opvallend

22

Tools of andere content die op andere plekken stonden dan dat je ze zou verwachten zijn zo vormgegeven dat ze goed opvallen. Zo is het nog makkelijk om deze te vinden en te gebruiken. Ook staan deze bij elkaar om het de gebruiker niet lastig te maken.

Hier is te zien hoe wij een deel van de navigatie hebben vormgegeven om zo het de gebruiker makkelijk te makkelijk te maken om door de site te navigeren. Als je op het logo klikt ga je weer terug naar de homepage, maar ook natuurlijk door gewoon op home te klikken. Deze navigatiebalk is terug te vinden op elke pagina. Zelfs in de policy en contact. Bijna alles is klikbaar en kan je doorsturen naar een andere pagina. De meeste elementen staan ook op plekken waar je ze zou verwachten, en andere elementen die dat niet doen omdat ze dan beter paste bij de vormgeving zijn zo vormgegeven dat ze meer opvallen door kleur gebruik of om ze bij belangrijke delen van de site te zetten zoals bijvoorbeeld de grote slider.

23


Lay-out Low-fidelity ontwerp

High-fidelity ontwerp

Wireframe

24

25


Conclussie High-fidelity ontwerp recepten pagina

Uiteindelijk vind ik dat we een mooie pagina hebben weten te ontwerpen waarvan we erg zeker zijn dat deze de doelgroep zou gaan aanspreken. De navigatie is erg duidelijk waardoor de gebruiker makkelijk bij zijn recept kan komen. Ook is de intergratie van Social media een leuk idee om mensen uit een andere doelgroep ook wat te geven zodat zij zelf ook voor content kunnen zorgen. Dit neemt natuurlijk een ook hoop werk uit de hande van Foodcave omdat zij zich nu meer kunnen richten op het beheren van de website en te zorgen voor eigen nieuws op recepten gebied. Met het ontwerp voor de recepten pagina ben ik alleen nog niet helemaal tevreden dus het kan zijn dat ik hier en daar nog wat aanpas in de vormgeving. Ook de pagina voor het uiteindelijk gekozen recept zou hier en daar wat kunnen veranderen. Wel vind ik de indeling van het uiteindelijke recept prima, al kunnen er hier en daar nog wat opties worden toegevoegd voor leden die ingelogd zijn, zoals het delen van het recept via social media.

High-fidelity ontwerp gekozen recept pagina

26

27


ontwerprapport Remidiate  

verslag school

Advertisement
Read more
Read more
Similar to
Popular now
Just for you