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