FreshRecipe Werkboek Remediate 2012 Hogeschool Arnhem Nijmegen Informatie & Communicatie Academie Propedeuse Sandra Yuen 464474 C1B Opdracht 17 januari 2013 Jopie Colet
“When tea becomes ritual, it takes its place at the heart of our ability to see greatness in small things.� By Muriel Barbery, The Elegance of the Hedgehog
2
Inhoud Mindmap..............................................................................................4 Concept................................................................................................6 Moodboards.........................................................................................8 Kleuren...............................................................................................12 Typografie..........................................................................................18 Inspiraties...........................................................................................20 Navigatie structuur...........................................................................24 Logo ontwerp.....................................................................................26 Wireframes........................................................................................28
3
Mindmap
4
5
Concept
“There is no l than the love
6
Dit is mijn concept voor mijn website. Ik heb dit foto gekozen, omdat ik vind dat het best bij mijn website past. Dit concept is een picnic foto met wijn en druiven. Daardoor betekent dat bij picnic kan ook verbeelding (fancy) zijn en ook met smaak volle hapjes. Normaal gesproken gaan mensen naar picnic met alleen koude eten of zelfs geen maaltijden, alleen maar chips of dergelijke. Dit concept geeft aan dat bij de website krijg je snelle verse warme recepten die zich verbeeld (fancy) met classic. Het lijkt dat picnic geen echte maaltijden te vinden is, maar in dat mandje zijn er veel smaak volle eten en bijzondere hapjes.
love sincerer of food.�
7
Moodboards Moodboard 1
8
Dit is de eerste moodboard ik heb gemaakt voor de website. Bij dit moodboard is er nog niet specifieke ideeen te vinden. Hier is meer van foto’s verzamelen van de mindmap. Welke richting moet gaan? Wat wil ik in mijn website? Voor wie is de website? Deze vragen zijn nog te beantwoorden om echt een visie te krijgen van mijn website. In dit moodboard zijn er toch een paar kernmerken te zien. Dat zijn snelle recepten, recepten van maximaal 20 minuten, vers en gezond.
9
Moodboard 2
10
Fancy Classic Tasty Fresh Simple Dit is mijn tweede moodboard en ook de ene die ik ga gebruiken voor mijn website. Bij dit moodboard krijg je het gevoel van de boven genoemde kernmerken. Alles moet vers, simpel, smaakvol, verbeelding en classic zijn. Dit is gecreeerd op basis van de doelgroep yuppen. Veel yuppen willen vers en gezond eten, maar toch iets bijzonder en classic. Daardoor heb ik het plaatje van wijn, simpele keuken en fancy maaltijd in de moodboard geplaatst. Hier is de moodboard meer specifiek gemaakt om de website te maken. Het gaat meer van specifieke doelen.
11
Kleuren
12
1 2 3 4 5
Dit is de eerste moodboard van mijn website van recepten voor yuppen. Dit moodboard houd in verse maaltijden bereiden in korte tijd. In het moodboard is te zien dat er een plaatje is bij gevoegd van 20 minuten, dit is het doel van de website, dat er alleen maximum 20 minuten nodig is om een maaltijd klaar te hebben. Dit moodboard is ook gebaseerd op degene die geen tijd heeft om te koken, maar toch iets lekkers binnen enkele minuten klaar heeft. Bij dit moodboard is er veel kleuren te voorschijn, waarbij er enkele kleuren uitgekozen moet worden voor het maken van de website. Aan de hand van de site kuler.adobe.com heb ik de kleuren van de moodboard geanalyseerd. Er zijn 5 kleuren in totaal te voorschijn. Ik heb voor gekozen om de “muted” mood kleuren te selecteren. Dit mood kleur “muted” betekent lichter, minder contrast en minder saturation.
13
1 2 3 4 5
Dit is mijn tweede moodboard. Dit moodboard is een beetje anders dan de eerste. Het is waarschijnlijk de moodboard die ik ga voor gebruiken voor de website. Aan de hand van dit moodboard wordt de website gemaakt. De eerste moodboard is in het algemeen waar het onder van de website gebaseerd is. Dit moodboard is meer specifiek aangegeven door de geselecteerde plaatjes en kleuren van de plaatjes. Zoals bij de plaatje van de concept zijn er een paar kernwoorden die er uit de concept kan gezien worden. Dat zijn namelijk: fancy, classic, fresh, tasty en simple. Alle 5 kernwoorden zijn ook terug te vinden in dit moodboard. Om de kleuren van dit moodboard eruit te halen, heb ik ook aan de hand van de site kuler.adobe. com gebruikt om de kleuren te analyseren. Hiervoor heb ik de mood “muted� alweer geselecteerd, omdat het lichter, minder contrast en minder saturation heeft. Dit soort mood is leuk en vriendelijk te zien. Als je goed kijkt, komt de eerste twee kleuren ook te voorschijn bij de eerste moodboard. Met dit ga ik vanuit dat die twee kleuren zijn al vast die er in mijn website gebruikt moet worden of tewel voorkomt.
14
1 2 3 4 5
Dit is dezelfde moodboard, maar met een ander kleur analyse. Dit is de mood “colorful� , dit betekent kleurrijk. Bij dit mood wordt de basis kleuren van de foto geanalyseerd, daardoor krijg ik ook wat verschillende kleuren te zien dan bij de vorige twee analyse. Bij dit analyse is te zien dat de eerste twee kleuren ook dezelfde is als de eerste en de tweede analyse. Aan de hand van alle analyses kan ik concluderen dat eerste twee kleuren de basis kleur is van mijn moodboard en met die twee kleuren kan ik voor gebruiken voor mijn website. Aan de hand van alle analyses, heb ik een keuze gemaakt bij de tweede analyse. De tweede kleur analyse valt me echt op. De kleuren zijn lichter en de combinatie daarvan past meer bij mijn concept en moodboards. De laatste analyse vind ik de kleuren te sterk, druk in combinatie met alle kleuren. Dit kleur analyse geeft ook een serieus, strake gevoel, waarvan de tweede een warme vriendelijk gevoel aangeeft, met andere woorden de kleuren zijn wat rustiger.
15
De bovenstaande kleuren is de kleuren analyse die ik heb gekozen, de tweede analyse. Daarvoor heb ik de lichte groene kleur als achtergrond van de tabs met daarin een donkergroen lettertype. Verder heb ik een andere keuze voor een donkergroen achtergrond voor de tabs met daarin een oranje lettertype. Deze twee combinatie lijkt me goed voor de website te bouwen. Daarnaast heb ik de grijze kleur als een content balk. Deze zijn allemaal een concept hoe de website eruit lijkt. Er kan nog veranderingen komen bij het maken van stramien.
GROEN is de kleur van de natuur. Het symboliseert de groei, harmonie, versheid, en vruchtbaarheid. Groen heeft een sterke emotionele correspondentie met de veiligheid. Donkergroen wordt ook vaak geassocieerd met geld. Groen heeft een grote genezende kracht. Het is de meest ontspannen kleur voor het menselijke oog kan beter zicht. Groen suggereert stabiliteit en uithoudingsvermogen. Soms groene geeft aan gebrek aan ervaring, bijvoorbeeld, een ‘groentje’ is een beginner. In wapenkunde, groen geeft aan de groei en hoop. Groen is ook de tegenstelling van rood, het betekent veiligheid, de kleur van vrije doorgang in het wegverkeer. Doffe, donkerder groen wordt vaak geassocieerd met geld in de financiële wereld, het bankwezen, en Wall Street. Donkergroen wordt geassocieerd met ambitie, hebzucht en jaloezie. Aqua wordt geassocieerd met emotionele genezing en bescherming. Olijf groen is de traditionele kleur van de vrede.
16
GEEL is de kleur van de zon. Het is geassocieerd met vreugde, geluk, intellect, en energie. Geel geeft een verwarmend effect, wekt vrolijkheid, stimuleert mentale activiteit, en genereert spieren energie. Geel wordt vaak geassocieerd met voedsel. Heldere, zuivere geel is een blikvanger, dat is de reden taxi’s zijn geschilderd van deze kleur. In wapenkunde geeft geel eer en loyaliteit aan. Geel is tot aangename, vrolijke gevoelens op te roepen. U kunt ervoor kiezen gele producten voor kinderen en items met betrekking tot vrije tijd te bevorderen. Geel is zeer effectief voor het aantrekken van de aandacht, dus het gebruiken om de belangrijkste elementen van het ontwerp te benadrukken.
17
Typografie
18
Soorten typografie die ik heb gekozen voor de website. Ik heb drie soorten typografie gekozen om te vergelijken welke het best paste bij de website. Daarvoor heb ik de laatste typografie voor gekozen, typografie van “Garamond”. Dit typografie past meer bij mij website, omdat het heeft meerdere vorm in het typografie. In de “Garamond” kan wel “bold” vet gedruk en “italic” schuin geschreven worden. Bij de andere twee is er niet zoveel mogelijkheden zoals “Garamond”. Ik vind Garamond typografie zeer duidelijk en netjes te zien en fijn om te lezen. Bij sommige website krijg je moeite met het lezen, omdat hun typografie niet strak en duidelijk is. Veel websites gebruiken Georgia, Times New Roman en Arial als typografie. Ik vind ze een beetje saai, omdat je altijd websites met dezelfde typografie leest. Daardoor heb ik iets Garamond gekozen.
19
Inspiraties
20
Dit is een van de website voor mijn inspiratie. Ik vind het gedeelte van foto als header zeer aantrekkelijk. Als iemand het website bezoekt wil je het toch zo aantrekkelijk mogelijk maken om de bezoekers verder door te klikken. Ik denk om een slide show te maken in plaats van alleen maar een foto. Door een slide show wordt het meer aantrekkelijker wat het website allemaal heeft aan te bieden.
21
Dit is een andere website voor inspiratie. Bij deze website vind ik de navigatie structuur zeer duidelijk en simpel om te zoeken. Het navigeren is makkelijk om verder door te klikken wat de website heeft aan te bieden. Verder bij deze website vind ik de kleuren echt te simpel gebruikt. Ik heb dit gekozen voor inspiratie, omdat in het website hebben ze het kleur groen gebruikt, waarbij mij website ook groen gaat worden in combinatie met andere kleuren. typografie van dit website is zeer duidelijk om te lezen.
22
Hieronderste website had ik veel inspiraties gevonden. De layout van dit website vind ik simple, maar toch netjes, strak. Aan de rechterkant van de website bevindt de sign up gedeelte, waar ik de logische plek vond. Verder is er een groter plaatje als header in dit website en ook nog de navigatie balk boven op is. Ik vind het zeer aantrekkelijk. Ik zou mijn website ook zo maken, maar misschien de navigatiebalk onder het plaatje. Zo word je meer aangetrokken om bij de navigatiebalk aan te klikken om door te gaan kijken. Bij de combinatie van kleuren hiervan vind ik leuk, vooral met die licht geel groene kleur erin. Het straalt meer aantrekkelijk uit. Ik heb meer visie van zulke layout voor mijn website.
23
Structuur
24
25
Logo
26
Dit is de eerste logo die ik had ontworp. Hier kwamik op het idee om twee bladeren te gebruiken, omdat mijn website heeft als kernmerk voor vers e eten. In principe was het idee om die twee bladeren naast elkaar overheen te leggen. De 20 wil ik zeggen dat het maximaal 20 minuten bereidingstijd nodig heeft om een maaltijd te maken. Daarnaast is er een paar streepjes om het meer te lijken als een klok of timer.
Bij verder ontwerp en verbeterd ziet mijn logo zo uit. In plaats van twee bladeren van maken, heb ik het idee gehad om in een bloem te veranderen met bladeren. Nou, dit logo lijkt me het beste als eerst en ik had met dit logo gepresenteerd. Toen had ik feedback gekregen erover dat goed was, maar die nummer 20 kan ik weghalen, omdat in een logo moet je niet alles vertellen.
Na de feeback heb ik de logo verbeterd. Ik heb de 20 weggehaald en de naam van mijn website ook bij gevoegd eronder. Hierbij heb ik de font van “Plantagenet Cherokee” gebruikt. Het typografie lijkt me simpel, maar niet wat ik had verwacht . Het lijk me te simpel. toch iets bijzonder erin met de krulletjes aan het eind bij elk letter. Verder heb ik de “F” en de “R” wat grooter gemaakt voor het extra uitstraling van verse recepten.
Bij het twijfelen van de typografie heb ik de logo nog een keer verbeterd. Hier heb ik de typografie van “Garamond” gebruikt. Dit typografie heeft iets bijzonder erin met de krulletjes aan het eind bij elk letter. Zo lijk me wat leuker met de krulletjes erin. Het is simpel, maar een vriendelijk gevoel.
Dit is de definitieve logo die ik had ontworpen. Ik heb een border bijgevoegd, omdat ik vond het een beetje los van elkaar wanneer ik in mijn website ga voegen.
27
Wireframe
28
29
Home pagina
Dit is uit eindelijk mijn website voor yuppen. Na alle inspiraties kon ik toch op een simpel verse website te bouwen. Als eerst was het echt vervelend voor het kiezen van een achtergrond, maar toen aan het eind heb ik toch een goeien gevonden. Dit website is gemaakt voor degene niet tijd heeft om te koken. Dit website is meer gericht op de de doelgroep van yuppen. Yuppen moeten werken en hebben een sociale leven, dat wil zeggen ze hebben echt geen tijd om een uitgebreide maaltijd te koken. Dit website biedt maximaal 20 minuten maaltijden. voor bereidingen. Het website is gemaakt op basis van moodboard2. Het geeft een uitstraling van vers, simpel, snel en smaak volle website. Bij de home pagina is makkelijk te navigeren. Aan de linkerkant bevindt je meteen de zoekbalk. De zoekbalk is zeer belangrijk dat ik heb het daar gepositioneerd, omdat bezoekers kunnen snel hun gewenste recepten zoeken in plaats van doorlezen naar alle tabs. Verder zijn er door de gebruikers toevalige recepten uitgekozen te zien. Voor de layout heb ik een zeer aantrekkelijke slideshow als header gemaakt. Daarin bevindt je de meeste bekeken recepten. De slideshow kun je met je muis overheen plaatsen om het recept van de gegeven foto te bekijken. Dit geef ik als mijn kern aantrekkelijke punt op de website.
Nieuwste pagina
Dit is de vervolgend pagina wanneer je bij de tab “Nieuwste� klikt. In dit tab kun je de nieuwste recepten vinden waar gebruikers hebben toegevoegd. Daardaast is er een link bij lees meer voor de recept met bereidingstijd en ingridienten. De tab van de pagina waar je er mee bezig ben is aangegeven met een andere symbool.
30
31
32
Keukens
Dit is een andere pagina bij de tab “Keukens”. Hier bevindt je alle soorten keukens. Dit pagina is bij de keuken van “Italiaanse Keuken”. Op dit pagina zijn er voor-,hoofd- en nagerechten aangeboden zodat het makkelijk kan navigeren welke gerechten
33
34