Foreningen Pigeliv projektrapport

Foreningen PigelivProjektrapport udarbejdet afMarianne HogrefeMads NielsenChristina SørensenMultimedieteknologi og interaktionsdesignMandag den 13. februar 2012Hold 0212

RAPPORTPROJEKT

- 2 -

Indholdsfortegnelse

Baggrund for projektet..................................................................................... HOME-Model......................................................................................... Foranalyse............................................................................................................. Informationsindsamling..................................................................... Projektbeskrivelse................................................................................. Undersøgelse........................................................................................................ Mindmap.................................................................................................. Kommunikationsplan..........................................................................

Design....................................................................................................................... Informationsdesign.............................................................................. Interaktionsdesign................................................................................ Præsentationsdesign.......................................................................... Designparametre................................................................................. Komposition............................................................................................

Realisering..............................................................................................................

Evaluering...............................................................................................................

Link til hjemmesiden: phpkursus.tietgen.dk/0212/christina/wp/

Kontaktperson: Marianne Hogrefe [email protected]

33

334

666

8889911

13

14

- 3 -

Baggrund for projektet

Dette projekt er skrevet som en del af et 6 ugers kursusforløb på Erhvervsakade-miet Lillebælt i Odense i faget multimedieteknologi og interaktionsdesign.

HOME modellenOpgaven tager udgangspunkt i HOME metoden, som er en metode, der er hel-hedsorienteret og åben og som kan bruges til alle slags digitale medier. HOME står for Holistic, Open Multimedia development mEthod.

Metoden beskriver både projektledelse og udviklingen af digitale medier. Me-todens formål er at systematisere arbejdet gennem hele projektforløbet, og sætte fokus på de valg man træffer undervejs i projektet. Vi har valgt denne struktur i opgaven netop pga. dens åbne tilgang, og som kan tilpasses netop de aktiviteter, dokumentationer og rækkefølger, der er i vores projekt1.

Da metoden kan bruges til meget store og længerevarende projekter, har vi valgt at benytte de dele af metoden som vi synes giver mening i vores projekt. Vi har derfor valgt, at se mere på produktet end selve processen, og vi har primært struktureret vores arbejde ud fra følgende trin i modellen:

Foranalyse Undersøgelse Design Realisering

Foranalyse

InformationsindsamlingI 2010 blev foreningen Pigeliv etableret i Vollsmose i Odense. Foreningen består af frivillige, studentermedhjælpere og en bestyrelse. Foreningen Pigeliv hen-vender sig hovedsageligt til piger med anden etnisk baggrund i alderen 14-24 år. Der arrangeres jævnligt ture ud af huset f.eks. til Zoo, til København og teat-erbesøg m.v.

1. Digital Media Management - Louise Harder Fischer - Marie Oosterbaan side 12-13

- 4 -

Foreningen har åbent hver onsdag og torsdag fra kl. 15:00-18:00. Benytter pi-gerne foreningen i de to ugentlige åbningsdage, er det gratis at deltage. Vælger pigerne at deltage i arrangementer ud af huset koster det 50 kr. pr ½ år. Foreningen er politisk og religiøst neutral. Foreningen ønsker, at inddrage de to sprogede piger og give dem nogle gode oplevelser og relationer til andre nationaliteter.

Formålet med foreningen er at skabe et rum for piger og udvikle deres sociale kompetencer og ikke mindst udvide deres horisont og netværk. Et sted hvor pigerne kan komme og hygge sig, få hjælp med lektier, lave aktiviteter m.m. i stedet for at hænge ud på gaden. De vil gerne have at pigerne på sigt, tager flere initiativer og er med til selv at lave de arrangementer i foreningen og for dennes medlemmer.

På kundemødet gav de udtryk for, at de ønsker sig et web-site, da det eneste de har i øjeblikket er en facebook gruppe. De synes de mangler et web-site, hvor de bedre kan informere om deres forening både til nuværende medlem-mer, men også til nye medlemmer, forældre til pigerne, samarbejdspartnere og sponsorer.

ProjektbeskrivelsePigeliv ønsker et web-site, der skal kunne informere om deres forening, så det bliver nemmere for deres nuværende medlemmer at orientere sig om, hvad der sker i foreningen, samt gøre det nemmere at få flere nye medlemmer. På kun-demødet gav de ligeledes udtryk for følgende ønsker til det nye web-site.

KalenderForeningen ønsker med et web-site at gøre tidligere og kommende arrange-menter mere overskuelig via en kalender på web-sitet. En mulighed er at face-book siden bevares som den er p.t. men, at man kan linke fra facebooksiden til det nye web-site, hvor der er en overskuelig aktivitetskalender med nærmere beskrivelse.

Login/intern blogPå nuværende tidspunkt anvender de deres outlook mail, men når flere har kommenteret på et arrangement virker mailen uoverskuelig. Derfor ønsker fore-ningen at bestyrelsen og de frivillige skal kunne logge sig ind på siden (blog) og skrive til hinanden internt.

- 5 -

GalleriKunden ønsker et galleri, hvor billeder samt videoklip fra forskellige arrange-menter kan samles.

Foreningen PigelivKunden ønsker, at der på siden er oplysninger om medarbejdere(inkl. foto og kontaktoplysninger), åbningstider og vedtægter. KontaktformularPå hjemmesiden skal det være muligt at udfylde en kontaktformular, hvis man ønsker at blive medlem, frivillig medhjælper eller ønsker at kontakte foreningen generelt.

SucceskriterierSucceskriterier for hjemmesiden er at skabe et netværk mellem piger med for-skellig kulturel baggrund. Ved at få en mere overskuelig aktivitetskalender kan det evt. blive nemmere at læse om de enkelte arrangementer og dermed få flere piger til at deltage. Dermed kan foreningen på sigt opnå at få flere med-lemmer og frivillige medhjælpere. Derudover ønsker de, at deres web-site skal fremstå seriøst, ungdommeligt, pi-get og enkelt.

MetodeDa vores projekt strækker sig over en relativ kort periode, har vi valgt at arbejde ud fra vandfaldsmetoden2, som er den lineære og faseopdelte udviklingsproces med vægt på løbende godkendelser og dokumentation. Vi har dog ikke lagt os mere fast på denne metode end, at vi højst sandsynligvis vil komme til at bruge noget fra de andre metoder også.

AfgrænsningVi fokuserer ikke på tekststykker og formidlingen af de skriftlige budskaber, men holder os til at fokusere på form, design, funktionalitet og stemningen i det nye web-site for Pigeliv.

Der er ikke udarbejdet et fuldstændigt web-site, hvor alle undersider er funk-tionelle, men derimod en visuel ramme for det endelige website, hvori design af forside og nogle af undersiderne er fuldt udformet.

2. Digital Media Management - Louise Harder Fischer - Marie Oosterbaan side 31

- 6 -

ProjektplanProjektplan og forventet/reelt tidsforbrug er vedlagt som bilag 1.

Undersøgelse

Undersøgelsesfasen har vi set som start til at komme i gang med selve den kon-krete del af projektet. Formålet med denne fase var, at lade ideerne flyde for at have så mange muligheder at vælge imellem til sidst, i forhold til målgruppe, kommunikationen og design.

Mindmap/idebankFor at få styr og ord på ideerne udviklede et mindmap, hvor vi på baggrund af analysen, kundeinterviewet og vores egne ideer fik skrevet ned, hvad vi synes, der er vigtigt for foreningen Pigeliv at lægge vægt på med sit nye web-site (se mindmap bilag 2).

Vi fik valgt de vigtigste og mest centrale nøgleord ud og begyndte at lave skit-setegninger til selve sitet. Dette bliver nærmere beskrevet på de følgende sider, hvor vi starter med at beskrive kommunikationsplanen for derefter at gå over til selve designet af web-sitet.

Kommunikationsplan

AfsenderWeb-sites afsender er naturligvis Pigeliv, der er en forening, der har eksisteret siden 2010. De har til huse i Vollsmose og er den eneste af sin slags i området. Det er en upolitisk og neutral forening, hvor alle piger i alderen 14-24 år er velkomne. Nogle af de centrale ideer bag Pigeliv er, at skabe et sted og et forum, hvor pigerne kan være sammen på kryds og tværs, udvikle deres sociale kompetencer, udvide deres horisont og netværk. I øjeblikket har de en face-book-gruppe, hvor der er ca. 70 venner.

- 7 -

BudskabWeb-sitet skal først og fremmest være med til at give medlemmerne et større og bedre overblik i, hvad det er for nogle aktiviteter og arrangementer foreningen laver. Derudover skal det også ses som en præsentation af foreningen, hvor de nuværende medlemmer, deres familie, samarbejdspartnere og sponsorer kan læse om foreningen, og hvem der står bag. Den skal også være med til at gøre det nemmere at få nye medlemmer. Web-sitet skal vise, at det er en forening for alle piger i målgruppen, et hyggeligt sted de kan komme for at ”hænge ud” sammen med andre. Det skal også vise, at det er en forening med seriøsitet bag, og hvor man har mulighed for at udvikle sig, og hvor fællesskabet kan være forpligtende.

MålgruppeIfølge foreningen Pigeliv vil websitets primære målgruppe vil være pigerne der benytter sig af foreningen i forvejen altså de 14-24 årige. Det er vigtigt, at pi-gerne kan identificere sig med sitet, derfor skal det nøje overvejes hvilke farver, opbygning, sprogbrug m.m. der bruges på sitet, det skal virke ungdommeligt og enkelt. Det skal bl.a. være nemt for pigerne at finde kalenderen, så de kan se, hvilke arrangementer, der er i den kommende tid.

Den sekundære målgruppe for siden vil være forældrene til pigerne, der kom-mer i foreningen. Derfor er det vigtigt, at der på siden er en seriøs udstråling og forklaring af, hvad det er, der foregår i klubben, samt en beskrivelse af, hvem det er, der står bag foreningen.

I den tertiære målgruppe vil der være følgende interessenter:

Samarbejdspartnere, her tænkes på andre foreninger i lokalsamfun- det, og eventuelt andre pigeforeninger i landet. Sponsorer og fonde som foreningen får eller søger om støtte fra Jour- nalister som skal skrive om foreningen. Skolerne hvor pigerne går i skole. De vil måske gerne vide, hvad det er pigerne går og bruger deres fritid på.

AfsenderForeningen Pigeliv

BudskabEt “fristed” for

unge piger

MålgruppePrimær

SekundærTertiær

- 8 -

Design

InformationsdesignPå baggrund af foranalysen, kundemødet og undersøgelsesfasen har vi beslut-tet, hvilke ting vi vil arbejde videre med i designfasen. Da det er vigtigt for fore-ningen, at sitet virker ungdommeligt, piget og enkelt, har vi prøvet at efterleve dette med, at lave et overskueligt og enkelt design på sitet.

Den simple menu linie med dropdowns, giver en nem brugervenlighed. Kalen-deren som var et meget stort ønske fra foreningen, har vi gjort synlig på alle sider samt lavet en nyhedsboks med slideshow, hvor de enten kan sætte deres næste arrangementer ind med tid og sted, eller skrive om hvad der sker i fore-ningen.

InteraktionsdesignInteraktionsdesignet beskriver, hvordan brugeren skal interagere med mediet, til dette har vi udviklet et non-linært flowchart, der viser sitets navigationsstruktur (se bilag 3). Vores mål er, at brugeren med så få klik som muligt kommer til det ønskede.

Derudover har vi bygget sitet op efter den primære, sekundære og tertiære målgruppe. Hvor de første menupunkter i menubaren (læst fra venstre) hen-vender sig til pigerne, og de sider der er interessante for dem. Her tænkes på menupunkterne aktiviteter, galleri, besøg os og medarbejdere. Menuknappen medarbejdere kan også være interessant for den sekundære målgruppe der sammen med punktet foreningen Pigeliv henvender sig til forældre, samarbejd-spartnere og sponsorer, hvor man kan læse om foreningen og dennes formål, generalforsamling, vedtægter m.m.

Vi har prioriteret at sætte facebook-linket, så det er på alle siderne, netop for at holde koblingen til facebook-gruppen, hvor alle pigerne kan skrive deres kom-mentarer til det, der er sket i foreningen.

Vi har brugt den hierarkiske struktur på sitet, med en hovedmenu der forgrener sig i flere undersider. Dette er en overskuelig opbygning, der gør det nemt for brugeren at navigere rundt på sitet.

- 9 -

PræsentationsdesignPræsentationsdesignet handler om at iklæde indhold og interaktioner den rigtige form. For at finde ud af, hvordan vores site skulle opbygges, startede vi med at lave et mind-map, hvor vi lod fantasien få frit løb. Ud fra mind-map og in mente, hvad det er kunden ønsker, lavede vi nogle forskellige forslag til sitets opbygning (Se skitser bilag 4). Vi forsøgte at sætte os både i bruger og afsend-ers rolle, for at finde den optimale sammenhæng mellem funktionalitet, æstetik og teknik, der skal være på websitet.

Når pigerne/målgruppen kommer ind på web-sitet, har vi lagt vægt på, at de skal kunne identificere sig med sitet, de skal føle, at sitet henvender sig til dem både hvad angår farver, indhold og sprog. Det skal være nemt for brugeren at finde rundt på siden, og finde de ting der søges efter. Derudover synes vi også det er vigtigt, at siden udstråler en seriøsitet og giver information, da også mange forældre vil benytte sig af siden. Vi har derfor prøvet at lave en vægtning mellem tingene så sitet opfylder så meget som muligt af kundens ønsker (se storyboard bilag 5 og skeletopbygning bilag 6).

DesignparametreFor at finde opbygningen og udseendet for selve designet af web-sitet har vi brugt følgende parametre (Se designmanual bilag 7):

Form Typografi Illustration Farver Animation Lyd

FormVi har lagt stor vægt på, at siden skal være enkel og nem at navigere rundt på. Formen er klassisk opbygget med en header, hvor logoet er præsenteret i ven-stre side. Derudover består sitet af en menulinie, en højre side, hvor kalenderen er placeret og med en footer. Disse elementer følger med på alle sider, da disse ting er vægtet højt hos kunden.

Det eneste der skifter fra side til side er det store tekstfelt, hvor der kan skrives eller indsættes det som er relevant for siden. I menulinien har vi valgt at sætte et link ind til deres facebookgruppe, da meget at kommunikationen foregår via

- 10 -

den. Vi har valgt ikke at arbejde mere med at lægge facebook gruppen over på web-sitet, men det kunne helt sikkert være noget der kunne gøres.

Hele sitet er opbygget med runde hjørner, hvilket signalere det bløde og kvin-delige look, som vi synes er vigtigt at signalere, da de fleste i målgruppen er piger. På forsiden har vi undgået scroll, da brugeren derved får et godt overblik over hele siden, og det er vigtigt da vi her fremhæver de kommende arrange-menter i foreningen. På undersiderne har vi ikke lagt vægt på at undgå scroll, men mere hvad det er for et indhold, siderne skal indeholde.

TypografiDet endelige valg af font faldt på Century Gothic, for det første ville vi gerne have, at det var et websikkert valg, vi søgte lidt, og fandt at denne font skulle være rimelig websikker3. Derudover er denne font også lidt ”rund” i skriften, hvilket passer godt til det vi gerne vil udstråle med sitet. Efter en del arbejde med Wordpress fandt vi ud af at gøre punktafstanden større, hvilket gør at den er ligeledes er letlæselig. Vi har valgt den samme font på hele sitet, for at have en ensartethed og enkelhed som er noget af det kunden vægter højt.

IllustrationDen første illustration brugeren ser på sitet er headeren, vi har valgt at sætte logoet i venstre side af headeren. I resten af headeren har vi lavet nogle bløde og runde illustrationer i en pink farve, som skal symbolisere foreningen pigeliv, som er piget, et hyggeligt og rart sted at komme, hvor der både er plads til sjov og seriøsitet. Vi var inde i overvejelserne om der skulle laves et nyt logo, men for det første synes vi logoet er meget godt, og for det andet synes vi, at når fore-ningen ikke er ældre end den er, så er det er for tidligt at lave et nyt logo. Vi ville gerne have anvendt logoet i den lysere farve som vores illustrationer, men vi har ikke kunne skaffe en redigerbar fil af logoet. Vi forsøgte med den røde farve fra det oprindelige logo på sitet, men så synes vi det blev alt for mørkt og tungt.

Vi har valgt, at farverne på sitet skal være den lyserøde/pinke og som kontrast til denne er alt andet holdt i hvidt. Vi har dog valgt at baggrunden som fader nedad starter lidt mørkt, da det giver en større fokus og kontrast til headeren. For at det hele ikke skal være hvidt, har vi valgt at rundt om alle bokse, billeder m.m. skal være en tynd lyserød/pink kant for at give lidt liv på siden.

Vi har valgt, at header, menulinie, footer og kalender skal gå igen på samtlige sites, kalenderen fordi det var utroligt vigtigt for kunden, at den er synlig og de andre ting for at skabe en kontinuitet og let genkendelighed på hele sitet.Som grafisk kontrast til logoet har vi billeder på forsiden.

3. Skrifttype: http://doctype.com/century-gothic-websafe Century Gothic

- 11 -

FarverVi har valgt den lyserøde/pink farve som naturligvis er oplagt at bruge, da målgruppen er piger og det er en pigefarve. Vi har valgt kun at benytte os af denne ene farve for at holde det enkelt og samtidig udstråler det seriøsitet ikke at blande for mange farver sammen. Vi har valgt at vores links på siden også skal holdes i de farver, dvs. vores link er sorte som skrifttypen, for at gøre det synligt, at det er et link, er det understreget når man køre hen over det (hover) bliver det pink.

AnimationVi har valgt at bruge en animation på forsiden, hvor billederne skifter sammen med beskrivelsen af de kommende arrangementer. Vi synes godt sitet kan ”bære” dette taget i betragtning af, at resten af siden er meget enkel. Det er den eneste animation vi benytter, da vi synes alt andet vil blive for vildt og ro-det, hvilket ikke lever op til kundens krav om enkelt- og overskuelighed.

LydDer er ikke noget lyd på siden med undtagelse af eventuelle filmklip fra deres arrangementer eller henvisninger til youtube klip.

KompositionEn meget vigtig parameter for at målgruppen får lyst til at blive på sitet er selve grænsefladekompositionen. Det er utroligt vigtigt at målgruppen kan finde de oplysninger de søger, i de områder de forventer, de er placeret. For at planægge et godt web-site har vi valgt at anvende kommunikationsmodellen AIDA4 og Eye-tracking5.

AIDA-modellenAIDA-modellen definerer fire trin Attention, Intrerest, Desire, Action, hvor man bevæger sig fra det ene trin videre til næste trin. Vi vil i nedenstående gennem-gå de enkelte trin for at finde frem til, hvordan hjemmesiden forventes at bliver læst.

AttentionDet område vi forventer at målgruppen vil se først er øverste venstre hjørne af header. I det område har vi valgt at anbringe logoet, hvilket gerne skulle give målgruppen et indtryk af hvem afsenderen er. (se evt. skitser herunder).

4. International markedsføring – 2000 – Finn Rolighed Andersen – Trojka A/S side 4835. Digital Media Management - Louise Harder Fischer - Marie Oosterbaan side 167

- 12 -

InterestHer skal interessen vækkes, hvor øjnene bevæger sig ned over siden og hen til aktivitetsgalleri og -kalender. De skal gerne vække interesse for målgruppen og få dem til at søge videre på sitet efter flere oplysninger.

DesireHer skulle målgruppen gerne have lyst til at læse om næstkommende akti-viteter/arrangementer, som er placeret i et galleri midt til venstre på siden.

Action I dette trin skal målgruppen gerne foretage en handling og evt. søge flere oplys-ninger så de kan blive tilmeldt kommende arrangementer. For hurtigt at finde frem til kontaktoplysninger har vi valgt at placere adresse oplysninger i footer nederst på hjemmesiden.

AIDA-model

- 13 -

Pointer eye-trackingUd fra pointer eye-tracking modellen ses det at målgruppen forventes at se flere gange hen over galleriet med kommende aktiviteter. Dette skulle gerne føre til, at målgruppen får lyst til læse mere om de kommende aktiviteter i fore-ningen Pigeliv og i sidste ende tilmelde sig.

Realisering

I realiseringsfasen nævnes modellen SCRUM, hvor arbejdet bliver delt op i min-dre enheder, hvor arbejdet bliver gjort færdigt, dette for at sikre en hastighed og dynamik i arbejdet. Vi har gennem hele projektet arbejdet ud fra denne model, hvor vi hver især har stået for nogle opgaver. Vi har igennem hele pro-cessen holdt daglige møder (kaldet Daily SCRUM Meeting) for at følge op på tingene. Her har vi haft mulighed for at snakke om problemer og udfordringer vi er stødt på og hvordan vi skal gribe de næste opgaver an.

Vi har set på forskellige Wordpress temaer til web-sitet, og til sidst stod valget mellem Atahualpa og Weaver. Vi valgte Atahualpa fra blandt andet fordi vi synes det blev for kompliceret for kunden at redigere. Derfor faldt valget på Wordpress temaet, der hedder Weaver, hvor vi igen har valgt under temaet indie ave. Vi har valgt dette tema, da det er meget brugervenligt og nemt, at

Poynter eye-tracking

- 14 -

redigere for kunden som skal overtage sitet. Samtidig er det muligt at sætte mange forskellige plug-inns og widgets områder ind, så man derved kan opnå lige præcis det site man gerne vil have. Skal man ind og lave om på selve opsætningen i sitet, skal man dog have lidt forstand på koder, ellers vil det ikke være anbefalelsesværdigt at gøre.

Evaluering

Nu sidder vi her med det næsten færdige resultat af både rapport og web-site, og vi synes vi har fået lavet et web-site, der i høj grad lever op til de forventnin-ger og ønsker der har været fra kunden. Vi synes også vi har fået lavet et site, der udtrykker det foreningen Pigeliv gerne vil nemlig, at det skal være enkelt, piget og seriøst.

Gruppen har bestået af 3 medlemmer med forskellig faglig baggrund, hvilket har betydet, at vi har suppleret hinanden godt gennem hele processen, og vi har forsøgt, at udnytte så vidt muligt de kompetencer vi hver især har. Vores arbejde har gennem hele processen været konstruktiv, og der har været bred enighed i gruppen igennem alle faserne. Vi har i større eller mindre omfang alle været involveret i alle beslutninger vi har truffet gennem udviklingstrinene, hvilket selvfølgelig har krævet noget tid, men vi mener det har været givet godt ud.

Vi har lavet en liste med ideer til videreudvikling af siden som ses på bilag 8.

Vi er selv tilfredse med resultatet og håber naturligvis, at kunden også synes det kunne være interessant at arbejde videre med vores site.

BILAG

- 2 -

Bilagsliste

Tidsplan.................................................................................................................... Mindmap................................................................................................................ Flowchart................................................................................................................ Skitser af opbygning......................................................................................... Storyboard..............................................................................................................

Skelet........................................................................................................................

Designmanual......................................................................................................

Videreudvikling...................................................................................................

1

2

3

4

5

6

7

8

- 3 -

Tidsplan - Projekt foreningen PigelivUdarbejdet af Marianne, Mads og Christina

[42]

Start Slut Tidsf

orbr

ug

timer

pl

anla

gt

1 Foranalyse 2-02-12 5-02-12 9 10

1.1 Projektbeskrivelse 02-02-.2012 5-02-12 2 2

1.2 Tidsplan 02.02.2012 13.02.2012 1 2

1.3 Kundemøde 02.02.2012 02.02.2012 6 6

2 Undersøgelse 05.02.2012 06.02.2012 9 11

2.1 Mind map 02.05.2012 06.02.2012 3 3

2.2 Skitsetegninger 05.02.2012 06.02.2012 4 5

2.3Kommunikationsplanlægning 05.02.2012 06.02.2012 2 3

3 Design 06.02.2012 08.02.2012 18 26

3.1 Designprincipper 06.02.2012 08.02.2012 6 10

3.2 Flowchart 07.02.2012 07.02.2012 2 1

3.3 Storyboard 08.02.2012 09.02.2012 2 3

3.4 Designparameter 07.02.2012 08.02.2012 6 10

3.5 Valg/fravalg 02.02.2012 08.02.2012 2 2

4 Realisering 06.02.2012 13.02.2012 48 83

4.1 Design i Wordpress 06.02.2012 13.02.2012 25 40

4.2 Design manual 08.02.2012 09.02.2012 4 2

4.3 Evaluering af processen 11.02.2012 11.02.2012 2 3

4.4 Rapportskrivning 05.02.2012 11.02.2012 15 35

4.5 videreudvikling 11.02.2012 11.02.2012 1 1

4.6 Opload 13.02.2012 13.02.2012 1 2

84 130

Reel

t tid

sfor

brug

af

tim

er

Bilag 1Tidsplan

- 4 -

Bilag 2Mindmap

- 5 -

Flow

char

t

Fors

ide

Akt

ivite

ter

Kom

men

de

aktiv

itete

rFo

r per

sona

let

Inte

rn b

log

side

med

logi

n

Face

book

logi

n

Info

rmat

ion

Bliv

friv

illig

Sam

arbe

jds-

partn

ere

Spon

sore

r

Ved

tægt

er

Afh

old

te

aktiv

itete

r

Gal

leri

Besø

g os

Med

arbe

jder

eFo

reni

ngen

Pi

geliv

Kont

akt o

s

Bilag 3Flowchart

- 6 -

Bilag 4Skitser til opbygning

- 7 -

Bilag 4aSkitser af opbygning

- 8 -

Bilag 4bSkitser til opbygning

- 9 -

Bilag 4cSkitser af opbygning

- 10 -

Bilag 4dSkitser til opbygning

- 11 -

Bilag 5

Storyboard - forsideLogo Grafisk billede

Horisontal menu Facebook ikon Søgefelt

Footer (kontaktoplysninger)

Into tekst

Aktivitets galleri

Aktivitets kalender

Nyhedsbrev

Storyboard til pige-liv.dk som skal implementeres i CMS-systemet Wordpress.

Navigation/knapper:Background: #e848c6Font-size: 12pxColor: #ffffffColor hover: #ffffffFont-family: Centory GothicLetter-spacing: 0.5pt

Tekstindhold:Background: #ffffffFont-size: 12pxColor: #000Color hover: #e848c6Font-family: Centory GothicLetter-spacing: 0.5ptOverskrift: 18px??????

Faste grafiske elementer:header pigeliv ny.jpgCalender (IZ) pluginFacebook ikon

Grafik:Galleri (plugin)

- 12 -

Storyboard - Kontakt osLogo Grafisk billede



KontaktformularAktivitets kalender

Storyboard af underside - Kontakt os.


Tekstindhold:Background: #ffffffFont-size: 12pxColor: #000000Color hover: #e848c6Font-family: Centory GothicLetter-spacing: 0.5ptOverskrift: 18px


Bilag 5a

Storyboard - Besøg os

- 13 -

Storyboard - Kontakt osBilag 5b

Storyboard - Besøg osLogo Grafisk billede



tekst

Aktivitets kalender

Google maps

Storyboard af underside - Besøg os.


Tekstindhold:Background: #ffffffFont-size: 12pxColor: #000Color hover: #e848c6Font-family: Centory GothicLetter-spacing: 0.5ptOverskrift: 18px


- 14 -

Storyboard - MedarbejdereLogo Grafisk billede



Aktivitets kalender

Storyboard af underside - Medarbejdere.

Medarbejderfoto

Profil Kontakt

Medarbejderfoto


Tekstindhold:Background: #ffffffFont-size: 12pxColor: #000000Color hover: #e848c6Font-family: Centory GothicLetter-spacing: 0.5ptOverskrift: 18px??????


Grafik:Rammer(medarbejderfoto):#e848c6

Bilag 5c

- 15 -

Storyboard - Medarbejdere

Bilag 6

Mål (skelet)954px

7px

51px

24px

27px

940px

180px

40px

317px

7px

35px

38px 260px

65px

28px

647px

232px

Wrapper: 960px x fleksibel indhold

7px

Wrapper: 954px x højde justeres efter indhold

- 16 -

Designmanual

Designvalg til hjemmesiden

Font: Centory GothicDesigner: Monotype, Hess, Sol

Kilde http://www.fonts.com/findfonts/detail.htm?productid=165755

Menupunkter: Centory Gotic 12px #ffffffOverskrifter: 18px bold #000000Brødtekst: 12px, #000000Links hover: #e848c6

Bilag 7

- 17 -

Oprindelig logo farve: #cc0b80 CMYK: 18 100 11 0 RGB: 204 11 128

Anvendt farve #e848c6 Web Color: #ff33cc(illustration på header) CMYK: 19 80 0 0 RGB: 255 51 204 RGB: 232 72 198

#f7b4e9 Web Color: #ffccff CMYK: 5 34 0 0 RGB: 255 204 255 RGB: 247 180 233

Bilag 7a

- 18 -

Forslag til videreudvikling af siden

Få facebook-væggen ind på web-sitet, så brugerne bliver på siden og ikke bliver sendt videre til facebook.

Farvevalg: Vi har valgt en lysere nuance end den logoet havde oprindeligt, da vi synes den blev for ”tung” og dominerende på siden. Vi valgte farven uden tænke over om den var web sikker, men ud fra hvad der så bedst ud. Vil kunden have en web-sikker farve kunne de fx vælge farven ff33cc, som ligger tæt på vores farvevalg.

De kan installere et plug-in der optimere søgningen af deres side på google.Oversættelse af nogle sider til arabisk, somalisk mm.

Bilag 8