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