Hogeschool Arnhem Nijmegen

Informatie & Communicatie Academie

Propedeuse

Naam student: GideonStudentnummer: 511454

Klas: C1D

Opdracht: Website Koken voor yuppen

Datum: 00-00-2012

Docent: Emiel Ruis

Ontwerp rapportremediate 2012

2 3

InleidingInleiding

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 Food-cave.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 uitein-delijke 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.

4 5

Concept & inhoudConcept

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 vervol-gens kunnen delen via Twitter of Facebook met vrienden of andere gebruikers.

Ook moet er een verdienmodel aanzitten. Hier-voor denken wij gebruik te gaan maken van ad-vertenties 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 kun-nen 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 ge-schikt 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 opval-lende 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.

Inhoud

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 be-drag een advertentie laten plaatsen dat natuurlijk met eten te maken heeft.

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 vervol-gens 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 ges-choten door een fotograaf of gekocht van stock websites. Gebruikte fonts worden ook gekocht omdat hier een licentie aan vast zit.

Achtergrond afbeelding

Afbeelding nieuws slide

6 7

Moodboard Navigation-interaction design

Moodboard

Navigation-interaction Design

HomeAls de gebruiker arriveert op de homepage krijgt hij meteen het laatste nieuws te zien te zien of een aantal highlighted recepten en andere infor-matie zoals reclame, het zoeken van recepten, de functie om in te loggen en een disclaimer in de footer.

ReceptenOp 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 onsOp 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.

ContactOp 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.

8 9

Visueel ontwerp

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 over-geen 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 vormgev-ing van de site is zeker iets dat mensen geïnteresseerd maakt om naar deze site te surfen.

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 vormge-geven.

Wij kwamen Yummly tegen en waren er meteen dol op. Deze recepten website heeft een geweldige sociale intergra-tie, 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.

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.

Yummly

Cooking.com

Snowbird BBC Food

Paginaontwerp Onderzoek Paginaontwerp Inspiratie

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

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 alle-maal makkelijk te beluisteren op de site. De afbeeldin-gen 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.

Bicharia

BBC Radio 1

10 11

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 ge-bruiker 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 hand-ige tools die het de gebruiker makkelijker maken om snel een recept te vinden naar zijn of haar smaak. Linksonderin staan oudere items die voor-heen 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 han-dige tools zodat de gebruiker niet om deze heen

De uitgangspunten voor het ontwerp van mijn home pagina was om een pagina te maken dat over-zichtelijk 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.

Paginaontwerp OntwerpPaginaontwerp Concept

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 re-cepten 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.

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 ge-schreven is. Hier kunnen anderen op reageren en over praten. En natuurlijk delen met andere vrienden!

Overzichtelijk

Leuk

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.

12 13

Kleuren kunnen veel met een ontwerp of foto doen. En dat is hier ook te zien. Deze prachtige foto is meer gaan opval-len door de paarse kleuren die ontzet-tend 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.

Foto’s met veel kleur kunnen de sfeer van een site bepalen. Het is daarom bel-angrijk 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 opval-lende 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.

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 pret-tige 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 lek-kere gezonde recepten kan vinden.

Rust is erg belangrijk voor een kook/re-cepten 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.

Prettige kleuren

Rust

Opvallend Moderne uitstraling

Kleur Onderzoek Kleur Inspiratie

In deze foto zijn veel verschillende kleuren te zien, dit geeft de foto een magisch sfeertje, want zoveel opvallen-de 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.

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 combi-natie van de kleur beige met de gesa-tureerde 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.

Sfeer

Frisse kleuren

14 15

De uitgangspunten voor het kleurgebruik waren om een aantal kleuren te kiezen die goed com-bineerde 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.

Kleur Concept

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 bijvoor-beeld 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.

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 gesatu-reerde kleuren gebruiken.

Modern

Opvallend

Hier is nogmaals de homepage, waar duidelijk de gekozen kleuren terug te zien zijn. Het uiteindeli-jke 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 ge-bruiken 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.

Kleur Ontwerp

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 re-ceptenvinder een donkerpaarse kleur te geven. Hierdoor valt hij iets meer op zijn bijvoorbeeld te top 5, die toch opvalt als je naar de receptenvin-der zoekt. Hierdoor krijgt een nieuwe bezoeker snel de opties te zien waar hij naar zoekt.

16 17

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 ge-bruiken 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.

Op de website van BBC Food is het gebruik van fonts goed toegepast, al hebben zij zich wel beperkt tot maxi-maal 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 lees-baar was en ook goed paste bij onze blokken structuur.

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 ge-bruikt worden om bepaalde onderdelen op de website meer aandacht te geven. Deze font zou ik goed kunnen gebruik-en voor de advertenties of artikelen.

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 achter-grond. Dit is nog steeds prima te lezen en het geeft de site een stoere uitstral-ing.

Sterk

Duidelijk lettertype

Keurig Bijpassend

Typografie Onderzoek Typografie Inspiratie

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.

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.

Speels

Sier

18 19

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.

Typografie Concept

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 soortgeli-jke font omdat hij goed leesbaar is en mooier is om te zien dan een standaard lettertype.

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

Duidelijk

Mooi

Op deze afbeelding is te zien hoe wij de font hebben gebruik. Wij heben hem gebruikt voor de navi-gatie 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.

Typografie Ontwerp

20 21

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 ge-bruiken om mensen makkelijk te laten kiezen in bijvoorbeeld de recepten pa-gina, waar afbeeldingen al een grote rol spelen omdat deze de impressie geven van het recept.

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 geposi-tioneerd 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.

Een groot deel vand de navigatie van de site is hier te vinden in de naviga-tiebalk. 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 mak-kelijk bedienbaar maakt op tablets en mobieltjes.

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 infor-matie 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 vormge-geven en past goed bij de uitstraling van de website.

Eenvoud

Links

Afbeeldingen

Anders

Navigatie Onderzoek Navigatie Inspiratie

Hier is de navigatiebalk aan de rechter-kant 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.

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 naviga-tie doorverwijzen naar de belangrijkste onderwerpen.

Duidelijk

Mooi

22 23

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 opva-lende kleur te geven. Verder moest het mogenlijk zijn om van de ene pagina makkelijk te navigeren naar een andere pagina.

Navigatie Concept

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.

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 gebruik-er niet lastig te maken.

Duidelijk

Opvallend

Hier is te zien hoe wij een deel van de navigatie hebben vormgegeven om zo het de gebruiker mak-kelijk 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 bijvoor-beeld de grote slider.

Navigatie Ontwerp

24 25

Lay-outLow-fidelity ontwerp

Wireframe

High-fidelity ontwerp

26 27

ConclussieUiteindelijk vind ik dat we een mooie pagina heb-ben weten te ontwerpen waarvan we erg zeker zijn dat deze de doelgroep zou gaan aanspreken. De navigatie is erg duidelijk waardoor de ge-bruiker 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 zor-gen. 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 ve-randeren. Wel vind ik de indeling van het uitein-delijke 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 recepten pagina

High-fidelity ontwerp gekozen recept pagina