Produktion af website for Kunstforeningen Tangen by Kirsten Mellemkjaer

PROJEKTRAPPORT PRODUKTION AF WEBSITE FOR KUNSTFORENINGEN TANGEN

Ved kursus i multimedieteknologi og interaktionsdesign ved erhvervsakademi århus, den 4. november - 15. december 2010

Af: Bastian Hansen Line Højen Væggemose Kirsten Mellemkjær

Web-sitets adresse: http://www.multimediekursus.ats.dk/mult2/bastian/wp/

INDLEDNING. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 RAMMER OG METODE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 FORANALYSE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Projektbeskrivelse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 UNDERSØGELSESTRINNET. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Kommunikationsplanlægning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 DESIGNTRINNET. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Informationsdesign. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Interaktionsdesign. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Præsentationsdesign. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6 Komposition og udseende. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 REALISERINGSTRINNET. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 VURDERING OG KONKLUSION. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 BILAG 1. LOGO UDVIKLING 2. STORYBOARD 3. SKELET 5. MINDMAP 6. SKITSER 7. TIDSPLAN

Indledning Som led i kursus i Multimedieteknologi og Interaktionsdesign ved Erhvervsakademi Århus skal der produceres en projektopgave. Opgaven tager udgangspunkt i en bunden problemstilling; planlægning og produktion af website. Selve projektrapporteringen skal indeholde en reflekteret beskrivelse af websitets tilblivelse lige fra de indledende overvejelser til driftmæssig ibrugtagning af websitet.

Rammer og metode Der integreres en forretningsmæssig tilgangsvinkel til produktionen af websitet, idet der er tale om et bestillingsarbejde fra en kunde, som har krav og forventninger til websitet. Projektperioden er på ca. 9 dage inklusiv weekend, hvor der bliver mulighed for to kundemøder. Den tekniske platform er baseret på open source programmer, herunder CMS-Wordpress. Metodemæssigt tager projektet udgangspunkt i HOME-modellen (holistisk åben multimedie udviklingsmetode), som udsiger påstande om, at planlægningsproces og produktudvikling bedst forstås i en fornuftsmæssig logisk indbyrdes sammenhæng. Modellens trin og elementer er forbundet iterativt, og kan derfor gentages cyklisk efter behov indtil den ønskede vidensmængde er opnået. Homemodellen som metode består af de fire trin; foranalysen, undersøgelsestrinnet, designtrinnet og realiseringstrinnet. I det følgende vil disse fire trin danne udgangspunkt for beskrivelsen af projektarbejdet omkring udviklingen af et website.

Foranalyse Foranaly sen har været koncentreret omkring planlægning, afgrænsning/retning og research. Efter et besøg af kunden kunne vi for alvor gå i gang med projektarbejdet, men allerede inden nævnte besøg diskuterede vi, hvilke muligheder der lå i et website med netop det emne, der skitseres nedenfor. Desuden lavede vi indledende research på lignende websites samt på vores kunde. Under mødet med kunden fik vi specificeret kundens ønsker og behov, og målgruppe og formål blev skitseret. Forskellige fotos samt tekst-materiale blev fremvist som mulige elementer til integration på websitet. Efterfølgende kunne vi i gruppen gå videre med mindmapping og brainstorming (se bilag 5) over de dimensioner, som websitet skulle indeholde i forhold til afsender, målgruppe og formål. Samtidig fik vi udfærdiget en tidsplan for det videre arbejde i gruppen (se bilag 7).

Projektbeskrivelse Der skal laves et website til den nystiftede Kunstforening Tangen, hvis medlemskreds alle er medarbejdere ved virksomheden G4S i Århus. Ved første kundemøde, fremlægger foreningens kasserer Erik Aabling formål, ønsker og krav til Websitet. Sitets hovedformål er at viderebringe information til 1) medlemmer, 2) potentielle medlemmer (ansatte i G4S) og 3) potentielle kunstnere, som søger udstillingsplads. Den primære motivation for sitet er, at det skal være nemmere at informere om Kunstforeningens udstillinger og øvrige aktiviteter. Som sekundær motivation er at skabe interesse for foreningen hos potentielle medlemmer samt at tiltrække potentielle udstillere. Produktmålet er udvikling af et site, som er nemt at navigere rundt på, som benytter samme farver, som på www.g4s.dk, og derud over ikke ligner overnævnte site. Udviklingsmetoden kommer nærmest prototyping. Givet vores korte projektperiode og for at minimere risiko, har vi lagt vægt på at opstille forholdsvis grundige specifikationer til sitet før den egentlige design fase. Vores idégenerering er blevet fuldt op af analytisk stillingtagen til om kundens krav og ønsker rent faktisk opfyldes. Samtidig har kundens kravspecikationer på nogle punkter været vage og åbne, hvilket efterlader et betydeligt rum for fri udvikling. Vi vil inddrage familie (ung som gammel), som testere af sitets navigationsegenskaber og design. Kort før deadline præsenteres kunden for vores prototype, hvorpå vi specificerer kravene endnu engang og laver rettelser. I projektperioden når vi kun to iterationer, men i fald vores site skal implementeres i Kunstforeningen Tangen, vil der være behov for mindst endnu en iteration, hvor de endelig krav og behov for rettelser bliver opfyldt.

Undersøgelsestrinnet Arbejdet med idéudvikling har været en væsentlig del af arbejdet med projektet, og vi har valgt at afsætte en del tid til dette, da det danner grundlag for at kunne påbegynde det tekniske arbejde med udviklingen af websitet. Gennem mindmapping har vi fået alle tanker på bordet, og flowcharts og storyboards har skabt retning på idéerne. Vi har lavet forskellige bud på flowcharts og storyboards med henblik på at have det mest kvalificerede udgangspunkt for at vælge det bedst egnede ud fra formålet. Grundig research og idégenerering gjorde det muligt for os at definere afsender, målgruppe og formål nærmere.

Kommunikationsplanlægning Afsender Kunstforeningen Tangen er en nystartet forening, der afholdte stiftende generalforsamling i oktober 2010. Foreningens medlemmer er alle ansatte ved sikkerhedsvirksomheden G4S’ Århus-filial. G4S er verdens største sikkerhedsvirksomhed og har i Danmark ca. 2000 medarbejdere. Idéen om at starte en Kunstforening for G4S’ medarbejdere i Århus opstod hos medarbejderne selv, og foreningen er således udelukkende et medarbejderinitiativ, der ikke er en del af G4S’ overordnede strategi, medarbejderpolitik, e.l. Dette er relevant netop i forbindelse med udviklingen af et website for kunden, da det skaber nogle rammer og restriktioner omkring websitets udseende og indhold. Incitamentet for Kunstforeningen Tangen var i første omgang et behov for at få udsmykket de store bare vægge i en ny filial i Århus. Endvidere har kunstforeningen nogle sociale gevinster, og det er bestyrelsens ønske jævnligt at lave udstillinger, arrangementer og udflugter for sin medlemmer. Kunstforeningens ønsker til websitet er umiddelbart vage, og der er inden første kundemøde ikke nogen klar strategi med sitet fra kundens side. På mødet finder vi dog frem til enkelte rammer om websitet. Da formålet med sitet primært er at give oplysning og information til medlemmer og potentielle udstillere er dette også hovedprioriteten på websitet. Herudover har kunden følgende ønsker til websitet: • Det skal være let tilgængeligt; altså let at navigere rundt i, ikke for teksttungt, og teksten skal være let at læse. • Den røde farve i G4S’ logo må meget gerne genbruges på Kunstforeningens eget website. Det samme må den sorte og grå farve fra logoet. • Kunden vil gerne have et logo kreeret, som kan fremstå på websitet. • Kunden finder det på forespørgsel fra os relevant at indsætte en medlemstilmeldingsformular eller lignende på websitet samt eventuelt en kontaktformular for potentielle udstillere.

Da Kunstforeningen Tangen ikke er initieret af G4S som virksomhed og ej heller som sådan er en del af virksomheden, er der visser restriktioner på et website for foreningen. Disse restriktioner er: • G4S’s logo må ikke fremstå på websitet. • G4S’ navn må ikke nævnes på websitet. I stedet må virksomheden omtales som ”et sikkerhedsfirma med filial i Århus.” • Der må på websitet ikke linkes til G4S’ website. • Kunden ønsker ikke, at foreningens website skal ligne G4S’ eller ”smage af dette.” Udover ovenstående restriktioner meddeler kunden efter første kundemøde, at de ikke ønsker en facebook-gruppe, som der kunne linkes til fra websitet. Et element, som vi ellers i gruppen havde diskuteret mulighederne for under vores brainstorming.

Målgruppe Websitets målgruppe deler sig i tre forskellige grupper, der er meget forskellige. Den ene gruppe er G4S-medarbejdere, der allerede er medlemmer af kunstforeningen og skal serviceres med information på sitet. Den anden gruppe er medarbejdere, der ikke er medlemmer, og som websitet gerne skulle appellere til. Den sidste gruppe, potentielle udstillere, er ligeledes en målgruppe, som websitet skal brande foreningen overfor. Sitet skal gøre det attraktivt for kunstnerne at udstille kunst hos G4S. Samtidig skal det informere om foreningens profil og vision. Ud fra disse tre målgruppers behov vil vi på websitet lægge vægt på både at tilbyde information og brande foreningen som en forening, der er værd at være medlem af og værd at udstille kunst igennem. Vi ønsker at imødegå brugerne ved at skabe et meget overskueligt og brugervenligt design, som gerne må udstråle kvalitet og rene linier.

Budskab Kunstforeningen Tangen er en forening, der tilbyder sine medlemmer gode kunstoplevelser og sine udstillere attraktive rammer for deres kunst.

Designtrinnet Sitets design, som vi efter lang tids konstruktivt arbejde med muligheder og begrænsninger er nået frem til, bygger på de skitser vi tidligere i processen har udformet (se bilag 6). De trin, vi i processen med at designe sitet, har foretaget, vil vi beskrive med en opdeling i aktiviteterne informationsdesign, interaktionsdesign og præsentationsdesign.

Informationsdesign Informationen i selve produktet, dvs. på websitet er udvalgt nøje i forhold til kundens ønsker og behov og vores vurdering af målgruppens behov. I nærværende tilfælde har vi ikke modtaget hverken tekst eller brugbare billeder fra kunden, og det væsentlige i produktet er derfor ikke så meget informationsindholdet i traditionel forstand, men snarere rammerne, opbygningen, strukturen og det visuelle design på sitet. Vi har udvalgt indholdet i disse elementer ud fra et ønske om enkelthed, brugervenlighed og et kunstnerisk udtryk. Derfor har vi valgt enkelthed i fx navigationsmenuen, et gennemtænkt logo samt rammer, der giver plads til, at det kunstneriske i form af billeder, er fremtrædende. Vi har nøje udvalgt de side- og undersideoverskrifter, vi har fundet relevante ud fra, hvad vi har fundet frem til i for-analysen og undersøgelsestrinnet.

Strukturen her ud fra vores flowchart valgt med baggrund i et ønske om enkelthed og brugervenlighed i navigations-mulighederne på sitet. I valg af indholdet har vi fokuseret på de indholdsforventninger, som brugeren af sitet gerne skulle få indfriet, når han besøger sitet.

Interaktionsdesign Interaktionsdesignet omhandler brugerens interaktion med sitet. Graden af interaktion kan variere meget. I vores design af sitet har brugeren få, men enkle og nyttige muligheder for interaktion. Strukturen er en klassisk hierarkisk opbygning med en forside som hovedmenu. Menubaren er altid synlig, og undersider optræder i drop down-menuer under hvert menu-punkt, hvilket gør det nemt at komme direkte fra en side til en anden – uden at gå via forsiden. Drop-down menu skaber overskuelighed og gør det nemt hele tiden at orientere sig om hierarkiet i sitet. Drop-down menuer egner sig godt til forholdsvis overskuelige sites med et begrænset antal sider. Primært af visuelle og æstetiske årsager har vi valgt at have et slideshow kørende på sitet. Men dette slideshow gør det også muligt for brugeren at komme direkte til specifikke indlæg på sitet, som i dette tilfælde henviser til aktuelle udstillinger/kunstværker. Brugeren kan også blot se billederne/teksten i slideshowet ved selv at klikke sig fremad og tilbage i det. Desuden har vi et lille galleri på alle sider, der også giver mulighed for interaktion, idet brugeren kan vælge at få fremhævet specifikke kunstværker ved at klikke på små billeder, der så forstørres. Præsentationsdesign Med præsentationsdesignet bliver interaktionsdesignet til et konkret produkt. Det vil sige, at interaktionsdesignet munder ud i konkrete, valgte medieelementer integreret i teknologien og et brugegrænsedesign. Tidligere i processen har vi udviklet forskellige bud på skitser og storyboards. Disse munder på dette tidspunkt ud i et endeligt storyboard (se bilag 2 og 6). I storyboardudviklingsprocessen træffer vi nogle designvalg, som skal gå igen på alle sider. Dermed bliver forside-storyboardet i høj grad udgangspunkt for design af de efterfølgende sider.

Komposition og udseende Vi har placeret foreningslogo i øverste venstre hjørne på alle sider for at skabe blikfang og øjeblikkelig identifikation hos brugeren. Der redegøres for design af logo i bilag 1. På forsiden er der indlagt kunstbilleder i fire områder: i header som baggrundsbillede, øverst i midterkolonnen i form af slideshow, nederst til venstre som illustration til tekstboks og nederst til højre i form af billedgalleri. Sitets baggrundsfarve er ens, det samme er navigationsbaren og footeren, For disse gennemgående elementer er der valgt to farver, der ligger nær hinanden på en lysegrå farveskala. Farvevalget opfylder formål om genbrug af farver på G4S-sitet samt brugervenlighed, idet de nedtonede nuancer giver en mindre anstrengende læse-fornemmelse. Sitet benytter ikke kontraster i baggrundsfarver eller boksrammer, som hjælpemiddel til at guide brugeren rundt på sitet. Derimod er der lagt vægt på enkelthed, god afstand ml. elementer, tydelig skrift og beskeden mængde tekst. Den udbredte brug af kunstbilleder bryder monotonien, og den virker ”inviterende”; billederne giver brugere lyst til at udforske sitet og få mere ”flødeskum” til

Figur 2. AIDA-modellen

Forklaring: 1,2,3 og 4 beskriver rækkefølgen af en læsers ubevidste førstegangs-fokus/ opmærksomhed på en web-side. De 4 trin gennemleves i løbets af ganske få sekunder. øjnene. Visuelt kommunikerer sitet ”god smag”, kvalitet, troværdighed funktionalitet, rene linjer og professionalisme. Opsætningen af elementer på siderne følger de retningslinjer, som AIDA-modellen opererer med. Af figur 2 fremgår det, at brugerens opmærksomhed bedst fanges i logohjørnet, hvorefter brugeren orienterer sig om indhold (interest) nederst til højre, og hvis interessen fanges, ønsker brugeren mere af det, der lige har behaget ham (desire). Vores sites behager via kunstbilleder/ information om mere kunst(udstillinger). Endelig opererer AIDA-modellen med en brugerforventning om handling; ”hvordan kan jeg som bruger få flere behov udfyldt via denne side” = action. Nederst til venstre har vi har derfor valgt at lægge kontaktoplysninger.

Sitets valg af skrifttyper; arial for navigationsbjælke og læsetekst, georgia for overskrifter understøtter vores målsætning om enkelthed og funktionalitet, herunder web-læsevenlighed. De flotte georgia overskrifter fungerer som grafisk blikfang, tekstfelterne er korte, og der er lagt vægt på aktualitet i indhold. Teksten i slideren markeres med …… efter sidste ord i sidste linje, og indikerer at brugeren må klikke videre til siden med aktuelle indslag (blog-indlæg), hvis hele teksten skal ses.

Sitet gør meget brug illustrationer som logo og fotos af kunstværker. Billeder signalerer i højere grad end tekst troværdighed, hvilket motiverer brugeren til at udvise sitets seriøs interesse. Billederne er gode til at beskrive sitets tema og til at vække interesse og følelser hos brugeren. Billedernes ordløse kommunikation stimulerer brugerens fantasi/lyst og dermed sætter vi brugerens positive oplevelse i højsædet. Vi ønsker et flot brugervenlig site, som tiltrækker/fastholder medlemmer og appellerer til potentielle udstillere.

Billedslideren kan virke forstyrrende på nogle brugere, men den er medtaget, for at gøre sitet mere interaktivt og dermed brugerinvolverende. Slideren bringer samtidig tekstinformation om sidste ny arrangement og/eller udstilling, og guider dermed brugeren rundt på sitet.

Realiseringstrinnet Det endelige design er realiseret i CMS-systemet Wordpress. Vi har heri valgt et tema, der tilnærmelsesvist stemmer overens med vores storyboard for sitet. Hvor temaet ikke har levet op til vores ønsker og krav, har vi selv ændret i temaets bagvedliggende PHP- CSS- og HTML-koder. Sitets galleri er hentet ind som et plug-in, og billeder og grafiske elementer er redigeret i photoshop. I forbindelse med udviklingen af nærværende produkt sker der ikke nogen egentlig overdragelse til kunden. Men under alle omstændigheder er produktet i form af sitet netop opbygget i et CMS-system som Wordpress, fordi det er til at håndtere for en kunde, der ikke selv er vant til at beskæftige sig med web-design, web-udvikling og kodning i html, css og php.

Vurdering og konklusion I udviklingen af websitet for Kunstforeningen Tangen er der brugt meget tid på undersøgelsestrinnet og designtrinnet. Derigennem er det vores oplevelse, at der bedst kan opnås et produkt, der lever op til kundens behov ud fra de muligheder, der er til rådighed. Netop ved at fokusere på at finde frem til den bedste idé og det rigtige design gennem grundig analyse af målgruppe, afsenders behov og den potentielle brugers forventninger, er det også sandsynligt, at det endelige produkt bliver en succes. Da vi har haft nogle ret specifikke ønsker om, at websitet skulle være enkelt med kunsten i fokus, er det visuelle og kunsten fremtrædende i form af mange billeder samt en header, der sender et signal om, at sitet handler om kunst. Derfor brugte vi også en del tid på realiseringstrinnet, for at opnå et produkt, der lever op til disse ønsker. Det kan diskuteres, om et website reelt er den bedste løsning for vores kunde. En nærmere analyse af Kunstforeningen Tangens behov samt ønskerne fra medlemmerne af foreningen vil nærmere kunne belyse, om foreningen fx bedre kunne få sine behov dækket gennem intranettet for G4S. Der er en del problematikker forbundet med det faktum, at G4S ikke ønsker at blive forbundet med foreningen på websitet. Det medfører blandt andet, at det ikke er muligt at oplyse, hvor udstillinger vises, i nogle tilfælde hvor arrangementer afholdes, hvem det egentlig er, eventuelle udstillere udstiller hos osv. Desuden mistes den effekt det kunne have hos medlemmerne, at de oplever identifikation med G4S, når de besøger sitet. Det er naturligt, at virk-

somheden ønsker kontrol med foretagender som dette, men netop derfor kan det diskuteres, om sitet i stedet burde integreres enten i virksomhedens website eller virksomhedens intranet. Det er muligt, at sitet rummer lidt flere muligheder for fremvisning af kunstbilleder, end kunden reelt har brug for på nuværende tidspunkt. Men i så fald kan mulighederne fravælges og på et senere tidspunkt igen vælges til, hvis det bliver relevant.

Web-sitets adresse: http://www.multimediekursus.ats.dk/mult2/bastian/wp/ Kontaktperson: Kirsten Mail: kirsten.mellemkjaer@gmail.com

LOGO LOGO Skriftvalg Skriftvalg

kunstforeningen tangen

Bilag 1: Logo udvikling Hvilken skrifttype leder vi efter? En skrifttype der giver et seriøst og elegant udtryk.

Minion Std, Black, 18 pkt.

Font: Minion Std

KUNSTFORENINGEN TANGEN

Minion Std, Black (Versaler) Størrelse 18 pkt.

kunstforeningen tangen

ITC Officina Serif Std, Book, 18 pkt.

For klodset. Svær at læse, i lille størrelse. Ikke smart nok.

Font: ITC Officina Serif Std

KUNSTFORENINGEN TANGEN

ITC Officina Serif Std, Book (Versaler) Størrelse 18 pkt.

kunstforeningen tangen

ITC Lubalin Graph Std, Book, 18pkt.

KUNSTFORENINGEN TANGEN

kunstforeningen tangen

ITC Lubalin Graph Std, Book (Versaler) Størrelse 18 pkt.

Fødderne på hvert bogstav, er for markant. Bliver for kantet.

Font: ITC Lubalin Graph Std For kompakt. Svær at læse.

Cronos Pro, Regular, 18 pkt.

Font: Cronos Pro

KUNSTFORENINGEN TANGEN

Cronos Pro, Regular (Versaler) Størrelse 18 pkt.

kunstforeningen tangen

Eurostile LT Std, Condensed, 18 pkt.

Elegant skrift. God haroni mellem hvert bogstav. Passer godt til målgruppen. .

Font: Eurostile LT Std

KUNSTFORENINGEN TANGEN

Eurostile LT Std, Condensed (Versaler) Størrelse 18 pkt.

For kedelig og ensformigt. Mangler bevægelse.

LOGO Udvikling

kunstforeningen

tangen

Parameter defineret inden ide udvilking af logo Logoet vil kun best책 af sm책 bogstaver. Det giver et mere roligt billede og tager sig bedst ud.

kunstforeningen

t n n

kunstforeningen

tangen

kunstforeningen

tangen

tangen...

kunstforeningen

tangen...

tangen... tangen...

LOGO Forslag

Enkel og kunstnerisk, med et godt blikfang i “g’et”. Den røde farve går godt i spænd med resten af logoet. Dette er logoet vi har valgt.

Der skabes automatisk et sammenhæng mellem “r’et” og “g’et”, selvom de intet med hinanden har at gøre. “G’et”

Kontrasten mellem “kunstforeningen” og “tangen” fungere rigtig godt. Det giver et livligt udtryk uden, at gå for vidt i forhold til målgruppen og kundens ønske. G’et er dog ikke integreret ordenlig i logoet. Farverne er ikke sprælske nok.

De tre streger under g’et danner et indtryk af bevægelse. Er for livligt i forhold til hvad vi søger.

tangen... Der skabes automatisk et sammenhæng mellem “!” og “g’et”, selvom de intet med hinanden har at gøre.

kunstforeningen

tangen...

Helhedsudtrykket passer ikke sammen. At tilføje “..!” passer ikke id i logoet.

LOGO Skriftvalg

Bilag 2: Storyboard

Sidens navn: forside Style: Body: baggrundsfarve: #e7e9eb Navigation: Baggrundsfarve: #f3f4f5, border: 1px solid, border farve #c7ced1; Skillelinje mellem links: 1px solid #c7ced1 Navigations knapper: Knapper: dropdown Knap: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343 Knap hover: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343, baggrundsfarve #e8ebec

Tekst: h2: font farve #262626, 30px, font-familie: Georgia, serif h3: font farve #262626, 24px, font-familie: Georgia, serif BrĂ¸dtekst: font farve #262626, font Arial, Verdana, sans-serif, 11px Footer: Baggrundsfarve: #f3f4f5, border 1px, solid, border farve #c7ced1, font-familie: Arial, Verdana, sans-serif; 11px Grafik: logo.png, 8.jpg, facade.jpg, 1.jpg, 8.jpg, 9.jpg, tanja_maleri_2.jpg, Kors. jpg, Kors.jpg

Sidens navn: om tangen Style: Body: baggrundsfarve: #e7e9eb

Breadcrumbs: font-familie: Georgia, serif , farve #a0a7ac, 11px, italic

Navigation: Baggrundsfarve: #f3f4f5, border: 1px solid, border farve #c7ced1;

Tekst: h1: font farve #262626, 36px, font-familie: Georgia, serif

Skillelinje mellem links: 1px solid #c7ced1

h3: font farve #262626, 24px, font-familie: Georgia, serif

Navigations knapper: Knapper: dropdown

BrĂ¸dtekst: font farve #262626, font Arial, Verdana, sans-serif, 11px

Knap: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343 Knap hover: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343, baggrundsfarve #e8ebec

Footer: Baggrundsfarve: #f3f4f5, border 1px, solid, border farve #c7ced1, font-familie: Arial, Verdana, sans-serif; 11px Grafik: logo.png, 8.jpg, facade.jpg, 5.jpg, 3.jpg, Kors.jpg, 4.jpg 1.jpg, 1.jpg

Sidens navn: galleri Style: Body: baggrundsfarve: #e7e9eb

Breadcrumbs: font-familie: Georgia, serif , farve #a0a7ac, 11px, italic

Navigation: Baggrundsfarve: #f3f4f5, border: 1px solid, border farve #c7ced1;

Tekst: h1: font farve #262626, 36px, font-familie: Georgia, serif

Skillelinje mellem links: 1px solid #c7ced1

BrĂ¸dtekst: font farve #262626, font Arial, Verdana, sans-serif, 11px, bold

Navigations knapper: Knapper: dropdown

Footer: Baggrundsfarve: #f3f4f5, border 1px, solid, border farve #c7ced1, font-familie: Arial, Verdana, sans-serif; 11px

Knap: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343 Knap hover: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343, baggrundsfarve #e8ebec

Grafik: logo.png, Kors.jpg, tanja_maleri_10.jpg, tanja_maleri_2.jpg, tanja_ maleri_7.jpg, 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 1.jpg, 10.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg, 6.jpg, 7.jpg, 8.jpg, 9.jpg, Kors.jpg, anja_maleri_10. jpg, tanja_maleri_2.jpg, tanja_maleri_7.jpg

Sidens navn: sommer udstillinger Style: Body: baggrundsfarve: #e7e9eb

Breadcrumbs: font-familie: Georgia, serif , farve #a0a7ac, 11px, italic

Navigation: Baggrundsfarve: #f3f4f5, border: 1px solid, border farve #c7ced1;

Tekst: h1: font farve #262626, 36px, font-familie: Georgia, serif

Skillelinje mellem links: 1px solid #c7ced1

BrĂ¸dtekst: font farve #262626, font Arial, Verdana, sans-serif, 11px, bold

Navigations knapper: Knapper: dropdown

Footer: Baggrundsfarve: #f3f4f5, border 1px, solid, border farve #c7ced1, font-familie: Arial, Verdana, sans-serif; 11px

Knap: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343 Knap hover: font-familie Arial, Verdana, sans-serif, 14px, font farve #434343, baggrundsfarve #e8ebec

Grafik: logo.png, 8.jpg, tanja_maleri_10.jpg, Kors.jpg, 9.jpg, 8.jpg, tanja_ maleri_10.jpg, 5.jpg

Bilag 3: Skeletopbygning 960px Forside (index.php) Header 200px

10px 50px

45px Slider 920px

Auto

Venstre indhold

HĂ¸jre indhold 317px

643px

15px Footer

45px

960px Galleri (galleri.php) Header 200px

10px 50px

45px Indhold Auto 960px

45px Footer

45px

960px om tangen (om tangen.php)

Header 200px

10px 50px 45px

Menu Venstre indhold

HĂ¸jre indhold

Auto 643px

317px

45px Footer

45px

Bilag 7: Tidsplan

Foranalyse

TIrsdag d. 30.11.

Foranalyse

Onsdag d. 1.12.

Undersøgelsestrinnet/

Torsdag d. 2.12.

Tidsplan laves, og umiddelbare tanker og forventninger deles i gruppen. Research på kunde, målgruppe og lignende foreninger Kundemøde og på baggrund heraf brainstormes om afsender, målgruppe og design. Idébank og mindmap. Research på kunde, målgruppe og lignende foreninger Gruppens medlemmer laver individuelt skitser, storyboards og flowcharts.

designtrinnet Undersøgelsestrinnet/

Fredag d. 3.12.

Gruppens medlemmer laver individuelt skitser, storyboards og flowcharts.

designtrinnet Undersøgelsestrinnet/

Weekenden

Vi ser på anvendelige temaer, der kan passe til de forskellige storyboards.

designtrinnet Realiseringstrin- Mandag d. 6.12. net

Realiseringstrin- Tirsdag d. 7.12. net Realiseringstrin- Onsdag d. 8.12. net Torsdag d. 9.12. Fredag d. 10.12.

Gennemgang af vores storyboards og flowcharts – og endelig udvælgelse. Praktisk design og implementering i Wordpress påbegyndes. Praktisk design og implementering i Wordpress. Rapportskrivning. Praktisk design og implementering i Wordpress. Rapportskrivning. Samling af rapport samt gennemgang af denne. Sidste korrektur. Aflevering.