ontwerprapport 'haneco' website
DESCRIPTION
Dit is het ontwerprapport voor de site van opdrachtgever 'Haneco'. Het zal een site zijn over ecolifestyle.TRANSCRIPT
1
Ontwerprapportremediate 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
Cheese&Rice&
3
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
4
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!
Inleiding
5
Moodboard
6
7
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.
Concept
9
Homepage
Vervolgpagina
Low-fidelity schermontwerp
10
TypografieIn 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.
11
Lettertype, grootte
Kleur Vulling/stroke
BijzonderhedenToepassing
Haneco
Haneco
Haneco
Haneco
Haneco
HanecoHaneco
Origin bold 25pt
Times new Roman regular 12pt
Times new Roman regular 12pt
Veranda regular 24pt
Optima regular,9pt
Veranda bold, wisselend pt
Zwart
Lichtblauw
Lichtblauw
Zwart
Zwart
Zwart
In de header en subheaders
Footer headers
Footer subheaders
Titels bij afbeeldingen
Algemene teksten
Titel afbeeldingen vervolgpagina
C=49 Y=11M=12 C=0
C=49 Y=11M=12 C=0
12
Navigation-interaction design
Kleurenschema
- Frisse kleur groen.C = 71M = 0Y = 100K = 0
- kalme kleur blauwC = 74M = 37Y = 26K = 1
- betrouwbare kleur lichtblauwC = 49M = 12Y = 11K = 0
- overzichtelijke kleur witC = 0M = 0Y = 0K = 0
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.
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
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.
White stands for purity and joy.
13
Vervolgpagina
Hoofdpagina
Visueel ontwerp
- De afbeelding voor de mode-button.
Speelse, rustige foto. Vrouwenbenen. Groen.
- 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
- Het hoofdmenu
- De afbeelding voor de wonen-button.
Gedurft, jong design.Groen.
- De afbeelding voor de voeding-button.
Fris, kleurrijk.
14
Vervolgpagina 2
Kader met een duidelijke foto van het product of het bijbehorende artikel. Bijgevoegd een korte tekst over het pro-ducten. 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.
15
Het logo
Functionaliteiten
HanecoHanecoHanecoHaneco
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.
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.
16
Wireframe homepage
Bijlagen
17
Homepage
Bijlagen
18
Bijlagen
Wireframe vervolgpagina
19
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.
20
Bijlagen
Wireframe vervolgpagina 2
21
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 koop- button. 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.
22
Bijlagen
Wireframe registratiepagina
23
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.
Bijlagen
Registratiepagina
24
Bijlagen
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.
Homepage versie 2
25
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