Issuu on Google+

Ontwerprapport

Mitchel Bongers C1E Webdesign / Alphonso Steverink


Inleiding Ecoliving is een organisatie gericht op ecolifestyle. Na een marktonderzoek bleek dat er nog geen website aansloot op de specifieke doelgroep vrouwen van 20-40 jaar. Pixel Shaped heeft de opdracht gekregen een website voor deze groep vrouwen te realiseren. Ecoliving is een bedrijf dat alle nieuwe ontwikkelingen omtrent ecologisch wonen op de voet volgt. Het is bovendien de markt van de organisatie. Ecoliving voorziet haar klanten van tips omtrent ecolifestyle. Ze voorzien hierbij in de behoefte van mensen professioneel advies te krijgen. De kleine tips zijn er natuurlijk ook te vinden, omdat een ecolifestyle voor iedereen behaalbaar moet zijn. Inspiratie en informatie omtrent mode, wonen en eten behoren hiertoe. Ook probeert Ecoliving naast kleine producten mensen bewuster maken over hun interieur. Tips over meubels hebben ze bij Ecoliving veel. Qua producten voorziet Ecoliving in artikelen voor in en om huis. Dat is een beperkte lijn aan kleding, een uitgebreidere productlijn aan cosmetica, bepaalde handige en milieuvriendelijke producten, meubeks en tot slot een redelijk aanbod aan producten waarmee mensen eigenhandig hun huis ecologischer kunnen maken. Op meerdere niveaus probeert Ecoliving het leven van mensen dus groener te maken.

2


Inhoudsopgave Inleiding pag. 2 Concept pag. 4 & 5 Content Matrix pag. 6 Navigation Design pag. 7 & 8 Wireframes pag. 9 Lay-out pag. 10 t/m 12 Kleurenschema pag. 13 Typografie pag. 14 Bronnen pag. 15

3


Concept Basisidee De hele website is een webshop, alleen merkt de eindgebruiker dat niet. De bezoeker zal de website ervaren als een digitaal lifestylemagazine, toegespitst op ecologie. De webshop zit dermate verweven in de tips en vormgeving dat het niet zozeer duidelijk wordt dat mensen in een online winkel zijn.

Succes op basis van het PUMP-model Unexpected, omdat de website niet aanzet tot kopen, terwijl dat wel de uiteindelijke doelstelling van de website is.

Het idee achter de website voor Ecoliving is dat mensen een hernieuwde indruk krijgen van de term ‘ecolifestyle’. Een ecolifestyle hebben is modern en aantrekkelijk, die indruk moet de bezoeker meekrijgen. Dat wordt behaald met mooie afbeeldingen, handige tips en producten die meteen te bestellen zijn via de website.

Pleasantly packed, want het uiterlijk van de website is compleet ‘state of the art’.

De hoofdgedachte voor deze website: Een ecolifestyle is voor iedereen te behalen. Doel Het doel is een sterk online product neer te zetten. Op dit moment heeft Ecoliving nog helemaal geen website of enige online activiteit. Ze willen online producten verkopen en meer mensen overtuigen van het ecologisch leven.

4

Meaningful, omdat de bezoeker echt wat heeft aan de informatie op de website. Alle informatie is gratis beschikbaar en helpt de lezer verder.

Inhoud Er zal veel tekst te zien zijn, vooral bij de tips. Bij de sfeerimpressies zal het meer gaan om de plaatjes. Er wordt zoveel mogelijk gebruik gemaakt van professionele fotografie. De teksten zelf zijn zo geschreven dat ze, bij wijze van spreken, zo in een tijdschrift zouden kunnen. Structuur Links komt een paneel dat het menu vertegenwoordigt. Dit paneel toont alle rubrieken die er zijn in de website. Eenmaal wanneer een rubriek is geopend vind je onder die rubriek een aantal submenu’s. Deze submenu’s vertegenwoordigen onderwerpen of series aan verhalen die binnen een bepaalde rubriek worden gepubliceerd.


Concept Vorm De website moet bijna een soort brochure worden voor de pracht en het gemak van ecologisch wonen. De eenvoud een schoonheid van ecolifestyle komen duidelijk terug in de vormgeving van de website.

Op elke pagina van de website zal een ander achtergrond te zien zijn. Zoveel mogelijk zal deze achtergrond te maken hebben met het onderwerp van de desbetreffende pagina. Zo krijgt een productpagina op de achtergrond een (geblurde) afbeelding van het product.

Veel aspecten van de natuur komen terug in de website. Zo zie je op elke pagina een geblurde achtergrond van natuurbeeld en is het menu in het groen uitgewerkt. De typografie is hoofdzakelijk uitgevoerd in Helvetica of Arial.

Door de tekstkaders transparant te maken krijgen de achtergronden nog meer de kans de vormgeving van de website over te nemen. Het vrije gevoel van een ecologische leefstijl wordt op deze manier vertaalt naar het ontwerp.

5


Content Matrix

eco living

6

BESTEL METEEN


Navigation Design Flowchart website

Showcaset nieuwste content van de website.

Home

Mode

Wonen

Eten

Verzorging

Nieuwste content binnen deze rubriek

Nieuwste content binnen deze rubriek

Nieuwste content binnen deze rubriek

Nieuwste content binnen deze rubriek

Nieuwe trends

Nieuwe trends

Het gerecht van..

Tips

Tips

Wooninspiratie

De stijl van..

Fotoverslagen

Reviews

Reviews

Restaurants, keukenapparatuur en gerechten

Verzorgingsproducten, kuuroorden, schoonheidssalons

Inloggen

&

bestellen

Footer Contact

7

About


Navigation Design Flowchart loginsysteem

Productpagina Wachtwoord herstel

Login mislukt

OPNIEUW PROBEREN

Loginscherm

Inloggen

NEE

Account aanmaken

(invoervelden)

KLAAR

JA

Wachtwoord correct?

JA

Login geslaagd

8

JA

E-mailadres bekend?

NEE

Nieuw account aanmaken?

NEE


Wireframes 885 px 380 px

100 px

Ecae reprae quunt dolest, cus ellore ditaque eatempe lignatis earum dolorem quiberio vit et id mos idebit et et evelictet, experum rem qui odignist acerupis aces evendenit a pellautatur sequi bearum aliquiat et offictur as restiur? Mostet is doluptam que voluptas ut dolupturio molorrum fugitat omnis destrumquis sequae poreptatibus eseces si videscia dellabori berum si qui dolupta tectum resto temquo enima cullis moluptatur acestium quasimp oribus nulpa si consent orporen essitatur? Qui occullabor sum ipitatur moluptas excersp ernatem. Eque audiciet et et am dolumquatio inimet aut qui aut labor aborrum quiat.

300 px

Menu item 1

Menu item 2

Menu item 3

Illiquiae ex eum acesseq uiaeperis reptatiberum fugitat magnam et eos eatum autem quatquas enitiam, to conectatis num rere optat. Hent est, con niminctotas nonet quis sincto et volorios ata ernatem peribea rchillit ommo enis si sin nonsequae perum eos ab ipsam es asse dion pelitem oluptam aliquia nimetur, tem vent et laceribus dolorio bea sunt.

Menu item 4

Menu item 5

350 px

Image Placeholder

650 px

Website logo

100 px

885 px Website logo

300 px

Menu item 1

Image Placeholder Menu item 2

Menu item 3

650 px

Menu item 4

350 px

9

Image Placeholder

175 px

350 px

Image Placeholder

175 px

Menu item 5

Image Placeholder


Lay-out Contentpagina

Item 1 // Hover Item 2 // Active Item 3 // Normal Item 4 Item 5

HET HUIS VAN JE DROMEN Ecae reprae quunt dolest, cus ellore ditaque eatempe lignatis earum dolorem quiberio vit et id mos idebit et et evelictet, experum rem qui odignist acerupis aces evendenit a pellautatur sequi bearum aliquiat et offictur as restiur? Mostet is doluptam que voluptas ut dolupturio molorrum fugitat omnis destrumquis sequae poreptatibus eseces si videscia dellabori berum si qui dolupta tectum resto temquo enima cullis moluptatur acestium quasimp oribus nulpa si consent orporen essitatur? Qui occullabor sum ipitatur moluptas excersp ernatem. Eque audiciet et et am dolumquatio inimet aut qui aut labor aborrum quiat. Illiquiae ex eum acesseq uiaeperis reptatiberum fugitat magnam et eos eatum autem quatquas enitiam, to conectatis num rere optat. Hent est, con niminctotas nonet quis sincto et volorios ata ernatem peribea rchillit ommo enis si sin nonsequae perum eos ab ipsam es asse dion pelitem oluptam aliquia nimetur, tem vent et laceribus dolorio bea sunt.

Homepagina

Item 1 // Hover Item 2 // Active Item 3 // Normal Item 4

VERNIEUWEND DESIGN AAN DE WINNENDE HAND

Item 5

ROOS OVER HAAR NIEUWE LEEFSTIJL

HET HUIS VAN JE DROMEN

10

HOE DE ZON STRAKS UW ENERGIE BETAALT


Item 1 // Hover

VERNIEUWEND DESIGN AAN DE WINNENDE HAND

Item 2 // Active Item 3 // Normal Item 4 Item 5

Illiquiae ex eum acesseq uiaeperis reptatiberum fugitat magnam et eos eatum autem quatquas enitiam, to conectatis num rere optat. Hent est, con niminctotas nonet quis sincto et volorios ata ernatem peribea rchillit ommo enis si sin nonsequae perum eos ab ipsam es asse dion pelitem oluptam aliquia nimetur, tem vent et laceribus dolorio bea sunt.

BESTEL METEEN Ecae reprae quunt dolest, cus ellore ditaque eatempe lignatis earum dolorem quiberio vit et id mos idebit et et evelictet, experum rem qui odignist acerupis aces evendenit a pellautatur sequi bearum aliquiat et offictur as restiur? Mostet is doluptam que voluptas ut dolupturio molorrum fugitat omnis destrumquis sequae poreptatibus eseces si videscia dellabori berum si qui dolupta tectum resto temquo enima cullis moluptatur acestium quasimp oribus nulpa si consent orporen essitatur? Qui occullabor sum ipitatur moluptas excersp ernatem. Eque audiciet et et am dolumquatio inimet aut qui aut labor aborrum quiat. Illiquiae ex eum acesseq uiaeperis reptatiberum fugitat magnam et eos eatum autem quatquas enitiam, to conectatis num rere optat.

WRAP-UP

11

Ecae reprae quunt dolest, cus ellore ditaque eatempe lignatis earum dolorem quiberio vit et id mos idebit et et evelictet, experum rem qui odignist acerupis aces evendenit a pellautatur sequi bearum aliquiat et offictur as restiur? Mostet is doluptam que voluptas ut dolupturio molorrum fugitat omnis destrumquis sequae

Ecae reprae quunt dolest, cus ellore ditaque eatempe lignatis earum dolorem quiberio vit et id mos idebit et et evelictet, experum rem qui odignist acerupis aces evendenit a pellautatur sequi bearum aliquiat et offictur as restiur? Mostet is doluptam que voluptas ut dolupturio molorrum fugitat omnis destrumquis sequae

Productpagina

Ecae reprae quunt dolest, cus ellore ditaque eatempe lignatis earum dolorem quiberio vit et id mos idebit et et evelictet, experum rem qui odignist acerupis aces evendenit a pellautatur sequi bearum aliquiat et offictur as restiur? Mostet is doluptam que voluptas ut dolupturio molorrum fugitat omnis destrumquis sequae poreptatibus eseces si videscia dellabori berum si qui dolupta tectum resto temquo enima cullis moluptatur acestium quasimp oribus nulpa si consent orporen essitatur? Qui occullabor sum ipitatur moluptas excersp ernatem. Eque audiciet et et am dolumquatio inimet aut qui aut labor aborrum quiat.


Lay-out

Loginscherm

Item 1 // Hover Item 2 // Active Item 3 // Normal Item 4 Item 5

INLOGGEN Je e-mailadres

Je wachtwoord

DOORGAAN

12

GEEN ACCOUNT?


Kleurenschema De kleuren die op de website van Ecoliving zullen worden gebruikt zijn veelal lichte en frisse kleuren. Door veel groen te gebruiken haal je automatisch bij de bezoeker de assiocatie aan die ze met groen hebben: natuurlijklijk en milieuvriendelijk. Past bij goed bij de term ‘eco’. Wit wordt veel gebruikt voor de letters en soms als achtergrondkleur. Groen wordt gebruikt in de menu’s, waarbij donkergroen een ondersteunende kleur is om items meer te benadrukken. Zwart wordt gebruikt als achtergrond van pagina’s, weliswaar een beetje transparant. In sommige gevallen kan de tekst ook zwart worden weergegeven tegen een witte achtergrond. Doel van deze kleurstijl is om ‘eco’ te benadrukken en dat het voor een nieuwe bezoeker meteen duidelijk is op wat voor een website hij terecht is gekomen.

13


Typografie Standaard teksten Over het algemeen genomen worden alle letters uitgevoerd in Helvetica en anders in Helvetica. Dit geldt voor zowel de header als voor de teksten zelf. Enige verschil is dat de headers in hoofdletters worden uitgevoerd en dat de letters scheef worden weergegeven.

Homepage Op de homepagina worden kleinere versies gebruikt van de headers. In dezelfde stijl dus, maar dan kleiner uitgevoerd.

In het navigatiepaneel wordt ook gebruikt gemaakt van Helvetica en anders van Arial.

Item 1 // Hover Item 2 // Active Item 3 // Normal

HET HUIS VAN JE DROMEN

14

HEADER VOORBEELD Ecae reprae quunt dolest, cus ellore ditaque eatempe lignatis earum dolorem quiberio vit et id mos idebit et et evelictet, experum rem qui odignist acerupis aces evendenit a pellautatur sequi bearum aliquiat et offictur as restiur? Mostet is doluptam que voluptas ut dolupturio molorrum fugitat omnis destrumquis sequae poreptatibus eseces si videscia dellabori berum si qui dolupta tectum resto temquo enima cullis moluptatur acestium quasimp oribus nulpa si consent orporen essitatur? Qui occullabor sum ipitatur moluptas excersp ernatem. Eque audiciet et et am dolumquatio inimet aut qui aut labor aborrum quiat. Illiquiae ex eum acesseq uiaeperis reptatiberum fugitat magnam et eos eatum autem quatquas


Bronnen Afbeeldingen http://im01.thewallpapers.org/photo/27399/ leaf_tropaeolum.jpg http://www.coolwallpapers.org/photo/41319/nature_wallpapers-cool2560x1600c.jpg http://www.evocentar.net/wp-content/uploads/2012/05/kolektor.jpg http://tinyhousetips.com/wp-content/uploads/2013/10/farmhouse-wide-plankfloor-made-from-plywood-diy-picklee1380734937g8n4k.jpg http://www.ressoma.com.pe/wp-content/uploads/2013/10/Industria-Energetico-1.jpg http://www.eco-lifestyle.nl/files/et_temp/energie-besparen-461x271.jpg http://thumbs.dreamstime.com/z/earth-ecologic-concept-11763697.jpg http://informativonatural.com/wp-content/uploads/2012/08/110817719.jpg http://lembalili.files.wordpress.com/2013/01/15. jpg http://wwwgreeneridealcom.c.presscdn.com/ wp-content/uploads/2012/06/Tunbridge-wellshouse.jpg

15

Lettertypes http://www.dafont.com/comfortaa.font http://www.dafont.com/dolce-vita.font http://www.dafont.com/pacifico.font http://www.dafont.com/pixelmix.font


Ecoliving // Ontwerprapport