Ontwerprapport 'Haneco' Website

Ontwerprapport remediate 2012 Hogeschool Arnhem Nijmegen Informatie & Communicatie Academie Propedeuse

Naam student Jelle Lugten Studentnummer 514331

Klas C1F

Opdracht Ontwerprapport Datum 06/12/2012

Docent Roy Peters

& 1

Inhoud Inleiding .................................................................... 4 Moodboard ................................................................ 5 Concept .................................................................... 7 Low-fidelity schermontwerp ......................................... 9 Typografie ................................................................ 10, 11 Navigation-interaction design ...................................... 12 Kleurenschema .......................................................... 12 Visueel ontwerp ......................................................... 13, 14 Het logo ................................................................... 15 Functionaliteiten ........................................................ 15 Bijlagen .................................................................... 16 t/m 24 Bronnen ................................................................... 25

3

Inleiding Het designbureau Cheese & Rice zal namens de organisatie ‘Haneco’ een website bouwen. Deze organisatie valt onder de gemeenschap van de Hogescholen in Arnhem en in Nijmegen. De leidinggever van ‘Haneco’ is Roy Peters.

Het wordt een frisse en moderne website. De doelgroep is; uitwonende vrouwelijke studentes met de leeftijd tussen de 20 en 30 jaar.

Onderwerpen Op de website wordt deze doelgroep op de hoogte gehouden van het nieuws met betrekking tot de ecolifestyle. Het laatste nieuws zal op de homepage en in het hoofdmenu vermeldt zijn. Een volledige eigen pagina voor inspiratie zal aanwezig zijn in het hoofdmenu. Deze header zal opgedeeld zijn in de subheaders; mode, wonen, voeding.

Ook zit er een webshop en een optie tot workshops in het hoofdmenu. Deze zijn ook opgedeeld op de drie subheaders waar de doelgroep het meeste belang bij heeft, mode, wonen, voeding.

De missie Een website creëren die de doelgroep motiveerd een ecolifestyle toe te passen in hun eigen leven. Een gezonde en duurzame lifestyle hoeft helemaal niet saai te zijn!

4

Moodboard

5

6

Concept Beschrijving concept Een website creëren die de doelgroep motiveerd een ecolifestyle toe te passen in hun eigen leven. Een gezonde en duurzame lifestyle hoeft helemaal niet saai te zijn!

Dit wordt gedaan Als eerst is een analyse gemaakt over het onderwerp en de doelgroep. Via verschillende analyses (SMART/ SWOT) zijn punten goed bekeken en is de haalbaarheid van dit plan ingeschat.

Designbureau Cheese & Rice heeft nu het eerste concept gemaakt van de website om de doelgroep te motiveren tot een ecolifestyle.

Centrale idee De bezoekers verleiden tot een ecolifestyle. Gezond en duurzaam leven hoeft helemaal niet saai te zijn!

Inhoud De website bevat 5 headers (zie bijlage ‘Homepage’). Hierin zal op een overzichtelijk manier informatie getoond worden. Hierbij zullen ook duidelijke afbeeldingen getoond worden.

Over producten en workshops is het mogelijk ervaringen publiekelijk te vermelden. Dit geeft een realistisch beeld van wat de klanten ervaren in hun ecolifestyle.

Doel Een groeiende groep van mensen die een ecolifestyle naleven. Als eerst zal de focus gelegd worden op studentes met de leeftijd van 20 tot 30 jaar, maar het doel is deze doelgroep steeds verder te kunnen uitbreiden.

Structuur Een frisse homepage met duidelijke elementen. Het hoofdmenu verschijnt volledig bovenaan in uw scherm.

In het midden staat een grote ronde figuur met de naam en de slogan van het bedrijf erin. Rechts van het hoofdmenu staat een ster met de mogelijkheid tot log-in. De homepage heeft een grote frisse afbeelding van studentes die zich bevinden in hun ecolifestyle.

Uitstraling De uitstraling die wij met deze website nastreven is in eerste instantie Modern en fris. Modern omdat de doelgroep uit mensen bestaat met de leeftijd tussen de 20 en 30 jaar. Dit zijn ook nog studentes dus komen vaak met vernieuwing in aanraking.

Fris omdat een bezoek aan de website moet motiveren een ecologische lifestyle na te leven.

Daarbuiten hebben we vooral gekozen voor het overbrengen van informatie met afbeeldingen. De teksten hierbij zullen een informatief en motiverend karakter hebben maar zeker niet te lang zijn. Door het gebruik van slechts enkele kaders per pagina blijft de website goed overzichtelijk.

7

Low-fidelity schermontwerp Homepage

Vervolgpagina

9

Typografie In het gebruik van de typografie is er gelet op; modern, betrouwbaar (duidelijk) en slank (gezond).

Origin In het hoofdmenu is daarvoor voor het font Origin Bold 25pt gekozen. Dit is in ‘regular’ zo’n slank font dat het eigenlijk te slank is om toe te passen in een hoofdmenu, want de duidelijk en -betrouwbaarheid gaan hierdoor verloren. Daarom is in de fontopties voor ‘Bold gekozen’.

Veranda Voor de toonaangevende titels van kaders op de homepage is voor het font Veranda Bold gekozen. Deze enkele titels verschillen wel van grote, linksboven staat een groot kader voor ‘Uitgelicht’. Dit is nieuw of belangerijk ter naleving van het doel dat de site wil overbrengen. Voor dit font is gekozen omdat het duidelijk en schreefloos is. Dit draagt bij aan een betrouwbare no-nonsense uitstraling.

Op de vervolgpagina’s worden voor titels ook Veranda gebruikt. In de geval is er in de fontoptie gekozen voor ‘regular’. Dit omdat de vervolgpagina’s dan herkenbaar geen hoofdpagina is.

Times new roman Voor de broad-teksten is gekozen voor het font Times new roman. Dit omdat het een herkenbaar en betrouwbaar lettertype wordt gevonden. Doordat er aan dit font wel een lichte schreef zit komt het moderner (statiger) over. De informatie die in tekst vermeldt wordt komt daardoor aannemelijker over.

10

Lettertype, grootte

Kleur

Haneco

Zwart

In de header en subheaders

Haneco

Lichtblauw

Footer headers

Times new Roman regular 12pt

C=49 Y=11 M=12 C=0

Vulling/ stroke

Toepassing

Bijzonderheden

Origin bold 25pt

Haneco

Lichtblauw

Footer subheaders

Optima regular,9pt

C=49 Y=11 M=12 C=0

Haneco

Zwart

Titels bij afbeeldingen

Zwart

Algemene teksten

Zwart

Titel afbeeldingen vervolgpagina

Veranda bold, wisselend pt Haneco Times new Roman regular 12pt

Haneco Veranda regular 24pt

11

Navigation-interaction design De woorden in het hoofdmenu verwijzen naar een pagina op de website. Haneco verwijst naar een pagina over de organisatie zelf. Inspiratie, webshop en workshops verwijzen naar pagina die verder zijn onderverdeeld in; mode, voeding en wonen. Bij workshops is het mogelijk je aan te melden via een apparte pagina. De log-in pagina is verbonden aan het hoofdmenu d.m.v. een ronde ster-vorm.

Kleurenschema - Frisse kleur groen.

C = 71 M=0 Y = 100 K=0 - kalme kleur blauw C = 74 M = 37 Y = 26 K=1 - betrouwbare kleur lichtblauw C = 49 M = 12 Y = 11 K=0

12

- overzichtelijke kleur wit C=0 M=0 Y=0 K=0

Currently the most popular decorating color, green symbolizes nature. It is the easiest color on the eye and can improve vision. It is a calming, refreshing color.

The color of the sky and the ocean, blue is one of the most popular colors. It causes the opposite reaction as red. Peaceful, tranquil blue causes the body to produce calming chemicals The color of the sky and the ocean, blue is one of the most popular colors. It causes the opposite reaction as red. Peaceful, tranquil blue causes the body to produce calming chemicals

White stands for purity and joy.

Visueel ontwerp Hoofdpagina - Het hoofdmenu

- Opvallende registreerbutton (andere vorm) op homepage naast hoofdmenu.

- De afbeelding op de achtergrond van de homepage. Fris met de juiste kleurelementen.

- Duidelijke rechthoekige kaders voor tekst en afbeelding

Vervolgpagina - De afbeelding voor de mode-button.

Speelse, rustige foto.

Vrouwenbenen. Groen.

- De afbeelding voor de wonen-button.

Gedurft, jong design.

Groen.

- De afbeelding voor de voeding-button.

Fris, kleurrijk.

13

Vervolgpagina 2

Kader met een duidelijke foto van het product of het bijbehorende artikel.

Bijgevoegd een korte tekst over het producten. Bij koppelingen naar tekst zal dit een inleidend stuk tekst zijn met een : ‘Lees verder’ koppeling.

Een kader met een kleine opsomming van meest bekeken artikelen. Zo zien gebruikers wat andere eco-lifestyle mensen interessant vinden.

14

Het logo

Haneco Haneco Haneco Haneco

Het logo is puur typografisch. De typografie die hiervoor gebruikt is; Origin Bold. Voor dit font is gekozen omdat het een slank en schreefloos lettertype is. Dit heeft de uitstraling dit wij ook verlangen van de website, namelijk, modern.

Omdat het een schreefloos font is heeft het een betrouwbaar karakter. ‘ Geen ditjes en datjes, dit ben ik’ straalt het uit.

Doordat het een puur typografie logo is kunnen er alle kleuren in dit logo verwerkt worden.

Functionaliteiten Log-in en registratie Op de website van Haneco is het mogelijk verschillende functionaliteiten toe te passen.

Rechtsbovenin kan er ingelogd worden met gebruikersnaam en wachtwoord. Mocht men nog niet geregistreerd zijn dan staat er onder de log-in een koppeling d.m.v. het woord ‘registreer’ aan te klikken. Men kan zich registreren, hiervoor wordt gevraagd om een email adres. De betreffende persoon die bezig is zich te registreren wordt ook gevraagd zelf een gebruikersnaam en wachtwoord te verzinnen. Na de registratie kan de persoon naar eigen zeggen informatie over Haneco per mail ontvangen. Daarnaast kan deze persoon zich ook inloggen op de site. Wanneer iemand is ingelogd kan deze reacties geven op het nieuws en de producten op de site.

Nieuws Op de homepage zal onder de header rechtsboven het laatste nieuwsartikel komen te staan d.m.v. een afbeelding van het bijbehorende artikel. Hieronder komt een inleidende tekst die na een klein stukje wordt afgebroken. “Lees verder..” komt hierachter te staan.

Dit zal een koppeling zijn naar de algemene nieuwspagina waar dit artikel dan bovenaan staan met de overige tekst.

Zoekfunctie De website zal op alle pagina’s beschikken over een zoekfunctie. Deze zal rechtsonder aan de bovenkant van de footer komen te staan. Hier kan men d.m.v. het typen van trefwoorden bijbehorende artikelen op de site terugvinden.

Koppelingen social media Aan de linkerzijde van de bovenkant van de footer zullen op elke pagina koppelingen staan die in verbinding staan met; Facebook, Twitter, Vimeo en Flickr. Hier kunnen bezoekers content gemakkelijk delen met andere personen via social media en deze ook prikkelen de ecolifestyle toe te passen.

15

Bijlagen Wireframe homepage

16

Bijlagen Homepage

17

Bijlagen Wireframe vervolgpagina

18

Bijlagen Vervolgpagina

Na het aanklikken van een topic in het hoofdmenu zal de eerste vervolgpagina verschijnen. Hier staan drie onderwerpen, namelijk; Mode, Wonen en Voeding. Onder elk plaatje zal ook een korte tekst staan over de ecolifestyle doe je met deze categorie kan naleven.

Net linksonder het hoofdmenu staat vermeldt waar de bezoeker zich op de pagina bevind. De namen van de pagina’s die vermeld staan zijn tevens koppelingen naar deze pagina. Zo is de navigatie erg gemakkelijk.

19

Bijlagen Wireframe vervolgpagina 2

20

Bijlagen Vervolgpagina 2

Op vervolgpagina 2 zien we de kaders waar producten of artikelen getoond zullen worden. Als eerst wordt er een afbeelding getoond en daar rechts van staan bij de web en -workshop een korte beschrijving en een koopbutton. Bij het menu inspiratie zal deze pagina ook verschijnen. Hier zullen echter korte inleidende tekstjes in de tekstkaders staan waarna er ‘lees verder..’ komt te staan. Dit zal een koppeling zijn naar het complete artikel.

Net linksonder het hoofdmenu staat vermeldt waar de bezoeker zich op de pagina bevind. De namen van de pagina’s die vermeld staan zijn tevens koppelingen naar deze pagina. Zo is de navigatie erg gemakkelijk.

21

Bijlagen Wireframe registratiepagina

22

Bijlagen Registratiepagina

Dit is de registratie-pagina voor gebruikers die nog geen account hebben. Hierop vullen ze de volgende gegevens in; E-mail: Voor bevestiging van het account en voor toezending van updates op de site.

Gebruikersnaam: Deze kan degene die zich registreet zelf verzinnen.

Wactwoord: Het wachtwoord kan degene die zich registreert zelf verzinnen.

Op de homepage is de mogelijkheid in te loggen met gebruikersnaam en wachtwoord.

Als laatste kan de persoon aangeven of hij updates en verdere informatie via de mail wilt ontvangen.

23

Bijlagen Homepage versie 2

Dit was het tweede ontwerp voor mijn homepage. Alles is behouden in deze pagina, alleen een direct log-in functie is toegevoegd. Vaste gebruikers/klanten eerst! De plek van deze log-in functie heb ik uiteindelijk niet zo laten staan. Na enkele sites bezocht te hebben om inspiratie op te doen kwam ik tot de conclusie dat de log-in functie rechtboovenaan naast het hoofdmenu moest komen.

24

Bronnen

Inspiratie:

- http://learnlakenona.com/ - http://www.ecochic.com.au/ - http://ecoki.com/

Informatie: - http://wiki.answers.com/Q/What_does_blue_stand_for - http://wiki.answers.com/Q/What_does_green_stand_for - http://wiki.answers.com/Q/What_does_white_stand_for

Opbouw ontwerprapport:

- http://www.multimedia-4u.nl/images/docs/grafisch_ontwerp_gehoorschade.pdf - www.online.han.nl , Propedeuse remediate voltijd

25