Hogeschool Arnhem NijmegenInformatie & Communicatie Academie

Propedeuse

Student:

Asli Dilsiz511235

Klas: C1DOpdracht: Create your ecolifestyle

Datum: 14 december 2012Docent: Emiel Ruis

Ontwerprapport

remediate 2012

2 3

Inleiding

Duurzaam en met zonder schadelijke stoffen leven wilt iedereen wel. Dit is belangrijk voor ons, toekomst en voor ons samenleving. Je komt ecologische producten nu wel vaker tegen maar het is nog in de minderheid. Om er een trend van te maken zal er een website ge-maakt worden met de meest interessante producten.

Het meest wat erg interessant is van ecoliving is het voeding. Vooral voor moeders die hun kinderen op een ecologische manier willen opvoeden zal er interessante producten verkrijg-baar zijn.

Niet alleen producten maar nieuws over ecoliving om mensen meer te kunnen overtuigen waarom ecoliving goed voor ons is.

Maar voordat ik met dit begin zal ik onderzoek doen om een juiste website ervan te kunnen bouwen. Met dit analyse zal ik er zelf achter komen wat passend voor de consument is kwa layout en inhoud.

ConceptConceptOnze concept is: “Het aansporen om meer duurzame/ecologische producten te kopen/gebruiken”. Dit willen we bereiken d.m.v. een website. Op de website komt informatie en nieuws te staan over producten en projecten die te maken hebben met het onderwerp. Als mensen informatie op Google opzoeken over duurzame en/of eco-producten, dan moet onze website in de zoekresultaten staan.Ook zal er wat interactie met de gebruikers in de vorm van een enquête en prijsvragen die via social media en de website gehouden zullen worden.

Ons doelgroep zullen mannen en vrouwen zijn tussen de 15 en 40 jaar. Wij hebben hiervoor gekozen, omdat we vinden dat het een lifestyle is en die kun je beter vroeg aanleren. Het is makkelijker om iemand van 15 een levensstijl aan te leren dan een ouder persoon.

Basis idéeDe opdracht is om een website te maken met als thema “ecoliving”. Hiermee wordt be-doeld een website om mensen aan te sporen na te denken over duurzame producten en diensten. Bijvoorbeeld een gezondere lifestyle door biologische voedingsmiddelen te kopen of duurzame producten te gebruiken/kopen die minder schadelijk zijn voor het milieu. Denk hierbij aan kleding, bouwmaterialen, meubels etcetera. Het is de bedoeling om het mensen aantrekkelijk te maken om voor deze producten te kiezen. Het moet vooral geen website worden met allemaal feiten en cijfers over milieu-onvriendelijke producten en dergelijke.

UitgangspuntWij willen met de website binnen 2 maanden minimaal 10.000 bezoekers trekken. Deze bezoekers zullen naar de website worden geleid d.m.v. social media, mond-op-mond rec-lame en google Adwords. Op de website zullen enquêtes ingevuld kunnenworden over de huide lifestyle van de bezoekers. Wij verwachten dat 30% van debezoekers deze zal invullen. Ook kunnen mensen aangeven om meer informatiete ontvangen via de e-mail. Een realistische schatting is dat ongeveer 10% van de bezoekers hier zich voor zal aanmelden.

Inhoud (wat)Omdat we niet voor alle dagelijksgebruikte producten onbeperkt grondstoffen hebben, is het nodig om de mensen ervan bewust te maken. Tegenwoordig zoeken mensen (door de crisis) steeds naar goedkope(re) producten. Dit is helaas niet altijd goed voor de aarde en de mensen. Zoals al heel vaak in het nieuws komt, vervuilenwe de aarde en ons-zelf steeds meer en meer. Dit heeft consequenties. Denk hierbij aan het broeikaseffect en de steeds ongezonder wordende mensen. Als we zo door blijven gaan, maken we een ‘einde’ aan de wereld.

5

Structuur (ordening, navigatie, interactieWebsite moet overzichtelijk zijn zodat iedereen alles handig kan vinden wat waar is. Navi-gatie zal op het top gestructureerd worden boven de header. Zo ziet het er overzichtelijker uit en niet te druk. Ook zal er met illustratie het interactieve terug komen door erop te kun-nen klikken. Website moet niet saai worden door alleen tekst. Het uiterlijk van de website moet de boodschap goed bij de consument overbrengen.

Uiterlijk (grafische vormgeving)Frisse kleuren van het natuur en groente zal erin gebruikt worden dit zijn: groen, wit, geel en blauw zijn. Op het top zal de main menu plaatst vinden. Header zal met illustratie en beelden duidelijk moeten laten zien waar het onderwerp en website over gaat. Daardoor zal de header ook wat breder worden dan de standaard headers. Bijvoorbeeld: • Width:968px; • Height: 400px; Onder de header zal een content met een korte inleidend tekst plaatst vinden die de web-site inleid. In de inleidend teksten zal er beelden en illustraties voorkomen waardoor je erop kunt klikken om het artikel verder te kunnen lezen.

4

Moodboard

InhoudContentContent moet niet vol gepropt worden met tekst maar ook met illustraties, beelden en films. Dit zorgt voor meer interactieve en word voor de consument interessanter om langer op de website te blijven. Omdat ons doelgroep erg uitgebreid is moeten we voor elke doelgroep wat te vinden op ons website. Voor studenten, ouders, starters etc. met dit soort onderwer-pen kunnen er enquêtes ingevuld kunnen worden en zal je hiermee ook informatie hierover mailen aan de bezoekers. Dit kan zijn studenten die graag shoppen. Moeders die graag voor hun kinderen ecologische producten willen kopen. Starters die net een nieuwe huisje hebben en die ze met ecologische producten willen inrichten. En nieuws over ecologische-producten zodat de consument meer hoogte krijgt van de ecologische producten.

Flowchart

6

http://www.youtube.com/watch?v=U2YSViGgEMA

http://www.youtube.com/watch?v=As9h8wkyFt8

http://www.youtube.com/watch?v=GZwZ-mxefVw

http://www.youtube.com/watch?v=rntqYBeifw4

http://www.youtube.com/watch?v=s4flfO0hsio

http://www.ellenwillink.nl/ 7

Vanuit het home page kun je op alle pagina’s terecht komen en vanuit het bezochte pagi-na weer terug naar de homepage.

• Homepage o Wat is ecologisch? o Eten en drinken o Wonen o Kinderen o Contact o Enquêtes

• Wat is ecologisch? o Informatie over wat ecologisch is, uitleg over duurzaamheid. o Invul formulier, voordat je de enquêtes wilt invullen of een bestelling wilt plaatsen word de klant gestuurd naar het invul formulier pagina klant vult hier zijn ge gevens: • Naam • Adresgegevens • Leeftijd • Email adres

8 9

• Eten en drinken o Ecologische levensmiddelen die je kunt kopen en bestellen. o Nieuwsbrief, om op de hoogte te kunnen blijven van ecologische levensmid delen. o Winkelwagen om je bestelde producten te kopen. o Invul formulier, voordat je de enquêtes wilt invullen of een bestelling wilt plaatsen word de klant gestuurd naar het invul formulier pagina klant vult hier zijn ge- gevens: o Naam o Adresgegevens o Leeftijd o Email adres

• Wonen o Woon artikelen die je kunt kopen en bestellen. o Nieuwsbrief, om op de hoogte te kunnen blijven van nieuwe woon producten. o Winkelwagen om je bestelde producten te kopen. o Invul formulier, voordat je de enquêtes wilt invullen of een bestelling wilt plaatsen word de klant gestuurd naar het invul formulier pagina klant vult hier zijn ge- gevens: o Naam o Adresgegevens o Leeftijd o Email adres

• Kinderen o Kinder artikelen die je kunt kopen en bestellen o Nieuwsbrief, om op de hoogte te kunnen blijven van nieuwe kinder producten. o Winkelwagen om je bestelde producten te kopen. o Invul formulier, voordat je de enquêtes wilt invullen of een bestelling wilt plaatsen word de klant gestuurd naar het invul formulier pagina klant vult hier zijn ge- gevens: o Naam o Adresgegevens o Leeftijd o Email adres

• Contact o Enquêtes o Nieuwsbrief o Invul formulier

• Enquêtes o Enquêtes die ingevuld kunnen worden. o Invul formulier, voordat je de enquêtes wilt invullen of een bestelling wilt plaatsen word de klant gestuurd naar het invul formulier pagina klant vult hier zijn gegevens: o Naam o Adresgegevens o Leeftijd o Email adres

• Nieuwsbrief, om op de hoogte te kunnen blijven van de enquêtes.

KleurenschemaLay-out/wirefrime

10 11

Kleurenkleuren vertellen veel maar het is belangrijk hoe je het met elkaar moet gebruiken. Kleuren hebben ook een bepaalde betekenis en om dit goed te kunnen laten zien moet je de juiste kleuren er ook voor gebruiken.

Inspirerende kleuren1. Roze, zwart en grijs zijn de hoofd kleuren wat samen heel erg mooi oogt. De donkeren kleuren combineert goed met de lichten kleuren. Hoe fel de roze kleur ook is het ver- stoord niet.

12

2. Grijs, oranje en groen zijn de hoofd kleuren wat ook heel erg mooi oogt. Er is een donk- er kleur gekozen maar de fris en felle kleur combineert prima met de donkeren kleur.

3. Zwart, grijs, wit en oranje zijn de hoofd kleuren. Deze kleuren oogt weer erg streng maar omdat de kleur oranje is gebruikt wijkt het een beetje af.

Al deze kleurcombinaties inspireren mij omdat het mooi is gecombineerd. Het valt me op dat donkeren kleuren het mooist met felle kleuren mooi gecombineerd kunnen worden. [3] ook al zijn er alleen maar donkeren kleuren in gebruikt met een fellere kleur kan het combi-natie totaal veranderen.

Mijn uitgangspunten voor deze kleuren die ik graag wil gebruiken komt door de betekenis van de kleuren zelf. Dit past precies bij het onderwerp van de website.

Groen: vruchtbaarheid, vrede, natuur, aarde -> lente, jeugd, onervarenheid, hoop, vredige rust

Wit: licht, zuiverheid, netheid, leegte, dood -> ongereptheid, volmaaktheid, onschuld, vrede en leegte

Blauw: waarheid, helderheid, macht -> oneindigheid, de hemel, ruimte, reizen, eeuwigheid

13

14 15

Definitieve kleurenDe kleuren wit, grijs en groen zullen de definitieve kleuren worden van de website. Groen en wit hebben de juiste kleurbetekenis van het onderwerp. Grijs heeft niet een betekenis in dit onderwerp maar zal wel weer mooi kunnen combineren met de frissere kleuren. Met de donkere kleur zal er geen eentonigheid ontstaan.

TypografieInspirerende typografieTypografie die strak, helder en duidelijk is geeft gelijk een serieuze uitstraling.Met ons onderwerp is dit de juiste toepassing.

Typografie rood “daiichi”• Strak, helder en groot.• Leesbaarheid erg wordt erg onduidelijk als het pt; verkleind word. • Geen opsommingen aanwezig van dit lettertype.

Typografie groen “GeosansLight”• Strak, helder en duidelijk• Leesbaarheid blijft zeer duidelijk.

Typografie blauw “Tall Films Expanded”• Strak, helder en lijkt wel ingekrompen.• Leesbaarheid duidelijk maar opsommingen worden zeer onduidelijk omdat de witre- gels erg op mekaar liggen.

Website typografieOmdat de html code standaard typografen hebben is er weinig keus om een gewilde ty-pografie te gebruiken. Daarom moet dit standaard typografie ook het gewilde typografie goed verbeelden en het uiterlijk van een strak, helder en duidelijk beeld vertonen.

Typografie rood”Arial”• Strak, helder en duidelijk• Leesbaarheid saai kwa uiterlijk.

Typografie groen”Trebuchet sm”• Strak, helder en duidelijk• Leesbaarheid vriendelijker kwa uiterlijk.

Typografie blauw “Tahoma”• Strak, helder en duidelijk• Leesbaarheid vriendelijker kwa uiterlijk maar te dik.

16“Trebuchet sm” is het meest toepasselijke typografie wat erin de website toegepast kan worden. Dit komt door het strak, helder en duidelijkheid van de font zelf. Dit zal het frisse, nat-uurlijke en serieuze beeld vertonen.

Wis je dat kleuren die gebruikt zijn voor typografie het RGB kleuren is?

Pagina layout onderzoekHet website is rommelig ingedeeld maar door de kleuren en de juiste indeling ziet de web-site alsnog er strak uit.

Een website wat er perfect uitziet! Het lay-out komt wel vaker voor maar de kleuren en de typografie geeft de website een andere uitstraling.

Dit website is veelste druk met tekst maar de indeling en de grafische design is rustig ge-houden.

17

18 19

Dit website inspireert mij door de indeling, kleuren, illustraties en concept. Het mooiste wat ik vind dat de illustratie die getekend is een soort diepte in de website vormt.

Ik weet, ik hou van dit soort websites dit spreekt mij erg aan en inspireert me door de indeling. Dit website is weer het zelfde soort websites waarvan ik hou maar het afbeeld-ing maakt het website erg mooi.

Weer een zelfde soort website maar het mooiste van dit website is de illustraties. Ik vind een website met illustraties erg appart en mooi.

Inspiratie

Een standaard navigatie wat je vaak tegen komt. Maar het Meest overzichtelijke.

Navigatie onderzoek

Een leuke navigatie wat eigenlijk standaard is maar grafisch anders is gemaakt.

Ook een standaard navigatie wat met kleur alsnog een anders oogt.

Zo’n leuke navigatie die samen met het illustratie een geheel combineert. Je hebt hiervoor geen apparte header voor nodig vind ik.

Navigatie inspiratie

Klein maar fijn! Het vorm en dat het zo klein is maakt het navigatie erg interessant.

Hou me adem in....dit vind ik met een woord GEWELDIG!

20

Grafische ontwerp