MultiMedieteknologi og interaktionsdesign

Udarbejdet af:

Ann Bir(gitte) ClementBente Lassen

Jens FrichNina Højris Kristensen

deceMber 2010

rapport

Kunstforeningen Tangen

projekt

Indholdsfortegnelse

Indledning 05Metode 06Foranalyse 06Projektbeskrivelse 07Undersøgelse 07 Budskab 08 Afsender 08 Målgrupper 08 Ønsker 09Design 10 Informationsdesign 10 Interaktionsdesign 10 Præsentationsdesign 11 Logo 11 De 4 designparametrer 12 Grafiske virkemidler 13 AIDA modellen 14Realisering 15 Kvaltetsvurdering og konklusion 15Literaturliste 16Designmaual 17Bilag 20Kontakt 20

Indledning

Som afslutning på kurset Multimedie og interaktionsdesign er det vores opgave, at udforme et website til den nystiftede Kunstforening Tangen hos et sikkerhedsfirma med afdeling i Aarhus. Dette firma har til huse på adressen Tangen 8, 8200 Århus N og derfor navnet Tangen. Sikkerhedsfirmaet har et website i dag og et eksisterende in-tranet, hvor fra der er en mulighed for, at man kan linke til det nye site. Blandt ønskerne fra kunden er udformning af et nyt logo i farverne rød, sort, og hvidt. Virksomhedens nuværende logo må ikke bruges. Yderligere ønsker kunden, at det er let at se, hvor man eksakt befinder sig på sitet f.eks., at der står Hjem på index-siden osv. I den følgende rapport vil vi komme ind på hvilken me-tode vi har brugt til at komme fra idé frem til det endelige produkt. Der vil kunne læses om processen fra start til slut, bl.a. hvordan vi har arbejdet og kommet frem til de forskellige resultater. Der vil være en beskrivelse af målgruppe og budsk-abet, samt en fyldig beskrivelse af logo og website. Yderligere har vi en designmanual, hvor det er muligt at få et overblik over typografi og farver. Tilsidst vurderer vi vores gruppearbe-jde og giver en konklusion.

Det udviklede site findes på: http://multimediekursus.ats.dk/mult1/bgjn/

Layoutmæssigt har vi valgt at specificere sider + undersiderne:Hjem: http://multimediekursus.ats.dk/mult1/bgjn/Formål og vedtægter: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=15Bestyrelse:http://multimediekursus.ats.dk/mult1/bgjn/?page_id=11Aktiviteter:http://multimediekursus.ats.dk/mult1/bgjn/?page_id=47Galleri: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=21 Udstilling 1: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=84Udstilling 2: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=193Bliv medlem: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=49Debat-forum: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=40Links: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=369

05

Metode

Foranalyse

Et krav til opgaven er at anvende udviklingsmetoden HOME, der står for Holistic, Open Multimedia development mEthod. Det er en helhedsorienteret og åben metode til udvikling af alle slags digitale medier ifølge bogen ”Digital Media Manage-ment”1. At den er helhedsorienteret betyder, at den omfatter hele udviklingsprocessen. Man kan frit udvælge de elementer, som passer til et konkret projekt. Udviklingsmetoden består af 4 trin og behandler både pro-ces- og produktniveauet. De 4 trin er foranalyse, undersøgelse, design og realisering og trinene benyttes i det efterfølgende til at beskrive vores projekt.

Foranalysen består af en afdækning og definition af projektet og en planlægning af udviklingsarbejdet. Vi indledte projektet med at have besøg af en repræsentant for kunden på kurset. Af sikkerhedsmæssige hensyn var det ikke muligt, at vi kunne besøge virksomheden. Kunstforeningen var repræsenteret ved bestyrelsesmedlem Erik Aabling, som kom og fortalte om den nystiftede forening og hvilke krav og ønsker, foreningen havde til et website. Vi havde mulighed for at stille uddybende spørgsmål, og vi fik fotos, vedtægter og oplysende materiale stillet til rådighed til brug for sitet. Vi fik oplyst, hvilke mål-grupper, der var og så deres nuværende virksomhedssite, som Erik Aabling kom med nogle kritiske kommentarer til. Virksomheden har en kunstforening i hovedstaden, men den har ingen interesse i filialen i Århus, og den har intet selv-stændigt website. Derfor har filialen i Aarhus besluttet selv at oprette en kunstforening, og at denne skal have et website. Formålet med kunstforeningen er ifølge dens vedtægter at afholde udstillinger på arbejdspladsen, samt arrangere film, foredrag, besøg hos kunstnere og kunstudstillinger. Desuden at indkøbe kunstgenstande til bortlodning blandt foreningens medlemmer ved en årlig lodtrækning. Efter kundemødet satte vi os i gruppen ned og fremstillede en foreløbig tidsplan2 og diskuterede hvilket indhold, der skulle være på vores site. Vi lavede brainstorm med idégenerering til udformning af et ønsket logo3. Tidsplanen er efterfølgende løbende blevet specificeret med konkrete arbejdsopgaver.

06

1: Litteraturliste, kilde 12: Bilag A3: Bilag B

Projektbeskrivelse

Undersøgelse

Projektet defineres med projektbeskrivelsen: at designe et website til Kunstforeningen Tangen, der er en lukket kunst-forening, for den lokale afdeling af sikkerhedsfirmaet. Målet er at orientere nuværende og kommende medlemmer blandt afdelingens ansatte om foreningens udstillinger, arrangement-er osv., at få mulige kunstnere til at udstille og henvende sig, samt at få nye medlemmer blandt firmaets ansatte. Vi har fået frie tøjler, men HOME-udviklingsmetoden er givet på forhånd. Blandt HOME-modellens paradigmer hælder vi til prototyping, hvor vi har afprøvet forskellige ting, som vi har vist for hinanden, og som enten er blevet accepteret eller for-kastet. Det har været en iterativ proces med en del tilbageløb.

Vi har brugt meget tid på idéudvikling og research for at finde et passende tema i Wordpress. Vi ville finde et, som vi kunne bruge som udgangspunkt for vores design af websitet. Vi havde på forhånd diskuteret udseende for websitet og set på flere forskellige sites. Vi havde lavet et storyboard4, som vi kunne tænke os at temaet skulle lægge sig op ad, og det er løbende blevet diskuteret og revideret. Når vi testede et foreslået tema i preview-funktionen i Word-Press, var der altid noget, der ikke var, som vi kunne tænke os det. Enten var det for avanceret layoutmæssigt med flash, pop-up menuer eller havde et udseende, vi ikke var tilfredse med. Vi har den mening, at vores site skal være enkelt, brugerven-ligt og uden fancy virkemidler, som f.eks. flash. Hvis kunden ønsker det, kan dette være en fremtidig mulighed i forbindelse med en evt. videreudvikling. Til sidst blev vi enige om at anvende et enkelt tema og så rette det til efter vores smag. Der er blevet udformet mange forskel-lige logoforslag5, og da vi havde vanskeligt ved at bestemme os for et logo, henvendte vi os til kunden med et udvalg af forslag. Kunden foretrak det udarbejdede logo, som er placeret på alle web-siderne. Senere under designtrinnet bliver logoet nærmere beskrevet. Vi har overvejet hvilket budskab, vi øn-sker at sende, hvem afsenderen er, og hvilken målgruppe vi henvender os til, samt kunstforeningens ønsker.

07

4: Bilag C5: Bilag D

Budskab

Afsender

Målgruppe

Budskabet, vi gerne vil sende, er, at alle medarbejdere er velkomne og har mulighed for at deltage i kunstforeningens virke. De skal føle sig hjemme: Derfor billedet af bygningen på forsiden.

Afsenderen, som er kunstforeningen, er en lille medlemsska-re, som gerne vil have noget kunst på deres bare vægge. De vil gerne finde nogle kunstnere, der kan udstille og de vil fortælle om aktiviteter og arrangementer.

Der er tre overordnede målgrupper for dette website: 1. Nuværende medlemmer af foreningen, 2. Medarbejdere hos firmaet i Aarhus 3. Kunstnere som kunne være interesseret i at udstille.

Sammenfattende for gruppe 1 og 2 kan vi nævne, at det er en blanding af både unge, ældre, mænd og kvinder i alders-gruppen 20-65 år, og fælles for dem alle er, at de arbejder hos sikkerhedsfirmaet i Aarhus. Som nævnt er dette en lukket gruppe, og der er ingen planer om at udvide foreningen med udefrakomne. For gruppe 3 gælder, at det skal være kunst-nere, som er interesseret i at udstille deres værker. Der er in-gen foretrukne stilarter, så alle er velkomne. De har god plads til at udstille på, der er derfor også muligheder for udstillinger med skulpturer, keramik og lignende. Af kunstnere kan det være veletablerede eller helt nye i faget. Man kunne eventuelt henvende sig til Aarhus Kunstakademi og andre kunst- og de-signskoler. Derved give up-coming kunstnere mulighed for at vise deres kunnen. Vi vil gå lidt tættere på, hvilke værdier disse målgrupper har. Selvfølgelig kan folk ikke sættes i kasser, dog kan vi finde nogle fællestræk, som vi kan bruge i vores udvikling af det nye website. Blandt målgruppen kan man finde lighedstræk fra ”det fællesskabsorientrede segment”6, og ”det mo-derne fæl-lesskabsorienterede segment”7. Nøgleordene for målgruppen er social og samfundsmæssig ansvarlighed, åbenhed overfor omverdenen, tolerance og med-

08

6: Litteraturliste, kilde 5 7: Litteraturliste, kilde 5

menneskelighed. De interesserer sig for Danmarks virke på den internationale scene, eller når det gælder hjælp til ringere stillede lande eller integrationen af flygtninge. De bor i eller i nærheden af større byer, de har eller er i færd med skabe sig en uddannet baggrund, og mange af dem har stiftet familie. De er stærkt interesseret i spørgsmål, der umiddelbart går tæt på det enkelte menneske og dennes hverdag, såsom miljø, arbe-jde og bolig situationen. I tråd med deres samfundsmæssige ansvarlighed tilhører de også den kundegruppe, som gerne køber miljøvenlige og økologiske produkter. I deres fritid er de storforbrugere af kulturelle tilbud, hvor teater-, biograf-, mu-seums- og biblioteksbesøg samt maleri- og kunstudstillinger ofte er den foretrukne aktivitet. De er hyppige brugere af PC og internet, såvel på arbejdet som i hjemmet. Internettet bruger de i stor grad til at se/læse nyheder, job samt underholdnings- og kulturtilbud. Det er også her vi finder læsehestene, og det er både skøn- og faglitteratur, der bliver læst. Derudover bliver Politiken, Information, Berlingske Tidende og Samvirke læst.

09

Ønsker

Kunstforeningens ønsker er:• et nyt logo • en side med oversigt over aktiviteter • en side med en formular til indmeldelse • en side der viser foreningens vedtægter • en side med kunstforeningens billeder• Siderne må gerne holdes i farverne rød, grå, sort og hvid

Design

Efter foranalyse og undersøgelsestrinnet skal vi nu til at de-signe logo og website. Med udgangspunkt i vores viden nu, kan vi komme med et forslag til et design, som opfylder kund-ens ønsker, der rammer målgruppen og indfrier formålet. Vi har brainstormet, skitseret og diskuteret os frem til resultatet. I det følgende vil vi komme ind på de tre forskellige fas-er, informations-, interaktions- og præsentationsdesign. Der-udover vil vi beskrive logoet, de fire designparametre, grafiske virkemidler og AIDA-modellen.

10

Informationsdesign

Interaktionsdesign

Dette site skal henvende sig til nuværende medlemmer, med-arbejdere og kunstnere. Det er derfor vigtigt hurtigt at kunne afkode hvem Kunstforeningen Tangen er, og hvad dens formål er. Her skal kunne findes information både om foreningen og dens aktiviteter. Websitet skal derfor vise, hvem de er og være nemt at finde rundt i. Derudover skal kunsten også spille en rolle, da det skal skabe opmærksomhed og derved også inter-esse for at være med i foreningen.

Med vores simple opbygning af websitet giver det færre mu-ligheder for at fare vild, og det gør det nemmere at finde, det man søger. Dette ses også tydeligt på vores flowchart8. Menulin-ien vil altid være synlig, og det vil hele tiden være indikeret, hvor man er på sitet. Det har vi valgt af hensyn til målgrup-pen, da vi mener, at brugervenligheden spiller en stor rolle for kunden. Derudover har besøgende mulighed for at komme med anbefalinger, indlede en debat eller bare dele en tanke med andre besøgende. Med dette debatforum er der mulighed for en del aktivitet, og udefrakomne kan få en fornemmelse af, hvad der sker i foreningen. Yderligere har vi en formular9, hvor nye medlemmer kan melde sig til. Vi har også en galler-risektion, hvor man kan se hvilke udstillinger, der er aktuelle eller har været det. Under siden med formål og vedtægter lig-ger et link til foreningens vedtægter, som åbner op i en ny side, når linket aktiveres. Dette bevirker, at man kommer tilbage til

8:Billag E 9: Bilag G

11samme side igen, når pdf dokumentet lukkes igen. På links siden er nogle forskellige relevante links, som vil åbne i et nyt vindue. Yderligere har vi også et søgefelt, hvor der søges på in-dholdet på websitet. På den måde har vi kombineret informa-tionen omkring foreningen med nogle interaktionsmuligheder.

Præsentationsdesign

Logo

Med informations- og interaktionsdesign på plads skal vi få det hele til at gå op i en højere enhed ved at designe web-sitet med disse overvejelser, samt at give den besøgende en be-hagelig oplevelse. Websitet er opbygget med en header øverst, hvori der er et billede og et logo10. Herunder har vi en men-ulinie, hvor størstedelen af alle siderne er repræsenteret. Und-er menuen har vi delt feltet i to spalter, hvor den ene er et tek-stfelt og den anden, som er lidt mindre, er ment som en slags menu, hvor der er genveje til nogle sider med noget relevant information. Dette vækker interessen hos besøgende eller som sagt skal det bare være en nem genvej for et medlem. Videre under de to spalter har vi en rød streg, der fungerer som en af-slutning. Til allersidst har vi en lille tekst med Kunstforening-en Tangen, der virker som en hjem-knap. I baggrunden har vi valgt en ren grå farve, for at bevarer fokusset på indholdet. De fleste sider er opbygget således, dog har vi en fleksibel under-kant, da for eksempel debatforummet hurtigt bliver længere end f.eks. forsiden, og her synes vi ikke, det gør noget, at der er en scrollbar. På denne måde kan man også se flere debatindlæg end bare det seneste. Undersiderne med udstilling 1 og 2 har billeder i stedet for tekst.

Igennem vores idégenerering og skitser er vi kommet frem til det valgte logo. Logoet11 er en kombination af en logotype og et symbol. I logotypen er der brugt fonten Melior std, som er en klassisk og solid font. Den er meget læsbar og kan bruges til mange forskellige opgaver. Den er tegnet af Herman Zapf, og det overordnede design er baseret på et rektangel. Samtidig med at den er klassisk, har den også sine egne træk, hvilket giver den genkendelighed. Vi har valgt at lade ordet Tangen stå stort, og på den måde giver vi deres kendenavn den største opmærksomhed. Nu hvor

10: Bilag F11: Se designmanual,

side 19

12 opmærksomheden er fanget, kan der med små versaler læses Kunstforeningen. Det er skrevet med små versaler for at skabe en lige linie og dermed generer det ikke ordet Tangen. Yder-ligere har vi rundet T’ets top, så det passer med symbolets runding. Symbolet forestiller et øje, som henviser til det at se og at overvåge. At se, som er det essentielle for kunst, at observere kunsten, hvorefter man måske bliver klogere, måske er det bare pænt at kigge på, måske bliver man oplyst eller noget helt andet. Overvågning som er hovedbeskæftigelse for medarbej-derne til hverdag. På den måde har vi både noget kendt fra medarbejdernes hverdag, noget de kan relatere til, og kunsten, som er hovedformålet med foreningen. Logoet kan både stå alene på en hvid bagrund eller i en hvid firkant, f.eks. ovenpå billeder. Denne firkant har en opacitet på 85%, så man lige kan ane det i baggrunden. Kanterne på bund-en af firkanten er runde for at give en blødere afslutning og relaterer også til det runde øje. Farverne er holdt i sort, hvid og rød efter ønske fra kunden. Mere om dette i de 4 design-parametre.

De 4 designparametre

FormatWebsitet er lavet i formatet 990x600px, da dette format kan ses på alle skærme og dermed er fleksibelt for dem, som besøger sitet. Formatet er standarden for alle sider, dog kører vi med en flydende underkant, da vi bl.a. har et debatforum, som fylder mere end f.eks. forsiden.

FarverVi har valgt farverne sort, hvidt, og rødt som de primære far-ver. Det har vi gjort, da dette var kundens ønske. Derudover har vi nuancer af grå som sekundær farver. Disse farver giver en god kombination med de kunstbilleder, der vil være på websitet. Vi har lagt vægt på et rent og simpelt site, hvor hvidt giver luft, sort er information og den røde er det lille krydderi, der bryder det sorte og hvide. Den grå farve har vi brugt til at skabe ro eller til at fremhæve nogle af de andre farver. Vi har lagt vægt på billederne, da det er kunst, vi har med at gøre, og det dermed er oplagt, derfor ville andre og for mange farver på sitet give et rodet udseende.

IllustrationerAf illustrationer har vi som sagt brugt billeder. Disse spiller en store rolle på sitet i og med de er i header’en og derved er noget af det første, der ses, når der landes på en af siderne. Billed-erne vil hovedsagelig være af malerier, skulpturer og lignende,

13som er eller har været på udstilling hos foreningen. Billederne gør websitet spændende, indbydende og er med til at give no-get genkendelighed. Derudover kan udefra kommende eller in-teresserede få et glimt af, hvad foreningen foretager sig.

TypografiPå websitet har vi valgt Verdana, som er en websikker font og er designet til skærmbrug. Den er let at læse og går hånd i hånd med vores fokus på brugervenlighed. Med valget af fonten er vi sikre på hvilken slags font, der vises på forskellige typer af skærme.

Yderligere findes der 2 andre parametre, når der tales om web-sites; animation og lyd. Vi har ikke brugt nogle af disse, da vi ikke syntes, de var relevante. Dog kunne man med tiden overveje et dias med billederne i headeren. Lyd skal der ikke være noget af, da det hurtigt kan virke generende. Især da der er chancer for at sitet vil blive besøgt i arbejdstiden.

Grafiske virkemidler

KompositionDa det ikke er et website med mange sider, der kræver det helt store, har vi valgt en simpel opbygning, der gør det nemt at navigere rundt, og finde de informationer, man ønsker. Me-nulinien er nem at bruge, da den skifter farve ved roll-over, og den valgte side vises med hvidt, og de andre træder i bag-grunden med den grå. Således har man et nemt overblik over, hvor man er på sitet. Yderligere har vi en dropdown menu ved galleri, hvor man kan klikke sig videre til en udstilling. Disse fungerer på samme måde med roll-over effekten. Foruden billederne er resten holdt i hvidt for at skabe no-get luft, og give ro til tekstområdet. Dog har vi en rød streg ved footeren, for at have en afslutning, samtidig bryder den det sorte og hvide. Derudover adskiller den også tekstfeltet fra footeren.

Stil og stemningStilen på sitet er rent og simpelt, da vi kunne fornemme på kunden, at dette vægtes højt. Sitet skulle være brugervenligt og nemt at finde rundt i. Sitet er gjort enkelt da det således vil være nemt at vedligeholde, men samtidig giver det også mu-lighed for at lade kunsten være det fremtrædende. Man kunne have valgt at gå helt ”kunstamok” med et spraglet udseende, men da aldersgruppen er så bred, kunne man nemt tabe nogle besøgende, da de måske ville finde det for ungt og vildt. Derfor har vi beholdt kunsten i rolige omgivelser med en nem over-skuelighed.

14AIDA modellen

I udviklingen af websitet har vi haft AIDA-modellen i bag-tankerne, og på den måde får vi målgruppen rundt på sitet, og vi er forholdsvis sikre på, at den besøgende får det vigtigste med.

Attention= Vores blikfang er de store billeder i headeren og med logoet i venstre hjørne afkoder man hurtigt, at man er endt på Kunstforeningen Tangens site. Billederne skaber op-mærksomhed, og samtidig viser de, hvad der foregår i foreningen.

Interest= Efter at have skabt opmærksomheden, fanger vi in-teressen ved, at sitet har lidt information om, hvem og hvad kunstforeningen indeholder. I menulinien er der også mu-lighed for at klikke rundt og se, hvad den ellers tilbyder.

Desire= Ved at klikke rundt på sitet, skulle der efterhånden skabes et ønske om at være med i foreningen, føle sig velkom-men og have lyst til at komme igen og/eller have lyst til at udstille hos foreningen.

Action= Efter denne rundtur på sitet skulle det gerne ende ud med, at man bliver medlem, finder det, man søgte efter eller kontakter foreningen for et videre samarbejde.

Realisering 15

Realisering på produktniveauet går på at udføre designbeslut-ningerne i praksis. Udviklingen er foretaget i WordPress, som er et content management-system forkortet CMS, hvilket bety-der, at det er et system til at vedligeholde hjemmesider i ifølge pjecen WordPress af Brian Brandt. Det er valgt, fordi det er brugervenligt og let for kunden at redigere i/bruge bagefter. Det tema, vi har valgt, er rettet til med HTML, CSS og PHP, så det passer til vores ønskede design. Billederne er rettet til i Photoshop og logoet er lavet i Illustrator, og derefter indsat i WordPress. Kunstudvalgets vedtægter er sat ind i et pdf-format som et link, så det er let for kunden at skifte det ud, hvis der sker ændringer i vedtægterne.

Kvalitetsvurdering og konklusion

Vi har forsøgt at efterkomme mange af kundens ønsker. Dog har vi ikke lavet en speciel adgangskontrol, fordi vi ikke kan se, der er nogle oplysninger, som alle ikke må se, men ellers kan det lægges ind som en udvidelsesmulighed senere. Vi har heller ikke lavet en speciel formular til eventuelle kunstnere, der vil udstille, fordi vi har en emailadresse på sitet, som de kan bruge til en henvendelse til foreningen. Vi vurderer, at vores site er i overensstemmelse med de ønsker og ideer, som kunden havde, og på det sidste kundemøde inden aflevering, var kunden også tilfreds med sitet. Det er også i overensstem-melse med vores ideer, og de beslutninger, vi har taget undervejs. I gruppearbejdet har vi benyttet os af personernes forskel-lige kompetencer. En har været specialist inden for det grafiske område, en anden god til HTML , CSS og PHP, en 3. god til WordPress mens den 4. har forsøgt at styre projektet og fortrin-svis har skrevet på projektrapporten. Vi har alle bidraget med ideer, konstruktiv kritik, kommentarer og testet sitet. Vores samarbejde har fungeret godt. Vi har været enige om tingene eller diskuteret, til vi blev enige, og alle har accepteret deres forskellige roller i projektet.

Litteraturliste16

Kilde 1: Louise Harder Fischer og Marie Oosterbaan ”Digital Media Maagement En helhedsorienteret metode” 3.udgave, Nyt Teknisk Forlag 2010.

Kilde 2: Brian Brandt ”WordPress” 1.udgave, 1.oplag, Libris 2010

Kilde 3: www.bjerknaes.com/projekter/p6deodora.pdf d. 5/12 kl. 16.10

Kilde 4: http://tinyurl.com/3xfko58 d. 5/12 kl. 16.10

Kilde 5: www.gallup.dk (gallupkompasset)d. 6/12 kl. 11:20

Designmanual 17

Typografi:Der er valgt Verdana som font, og det vil være gennemgående på hele websitet.

Den vil være præsenteret på websitet i forskellige størrelser:Menu linien:Font størrelse: 13pxFarven ved valgt side: #ffffffFarven når de er urørt: #333

Dropdownmenu er det samme som menulinien

Tekstfeltet:Størrelse: h3 - 16pxBrødtekst: 16 pxFarven: #000000

Teksten i spalte til højre:Overskrift: bold,Farve: #000000Punkter:Farve: #d9d9d3

Footeren: 11px, bold, #000000

Links i tekst:Størrelse: 16px kursivFarve: #d9d9d3Roll-over: #fc1b23

Links på linkssiden: Roll-over: #fc1b23

The quick brown fox jumps over the crazy dogThe quick brown fox jumps over the crazy dog 1234567890 !?+/&

18Farver:Vores primære farver er sort, hvid og rød:

web: #ffffff R=255 G=255 B=255

web: #fc1b23 R=252 G=27 B=35

web: #000000 R=0 G=0 B=0

web: #d9d9d3 R=217 G=217 B=211

web: #333333 R=51 G=51 B=51

Vores sekundær farver har vi valgt nogle grå nuancer for at gøre websitet mere uoverskueligt:

19

Billag20

Bilag A: TidsplanBilag B: MindmapsBilag C: StoryboardBilag D: Logo forslagBilag E: FlowchartBilag F: Skelet af webBilag G: PHP kodeBilag H: Storyboard

Kontakt

Ved videre samarbejde kontaktes:Ann Birgitte (Gitte) Clement

Bilag A

Dato Aktivitet For-analyse

Under-søgelse

Design Realise-ring

Onsdag d. 1/12 Første kundebesøg

Opsummering af kundekrav

Udkast til

Tidsplan/planlægning

Brainstorm Logo

X

X

X

X

Torsdag d. 2/12 Undersøgelse af forskellige temaer i WordPress

Valg af Twenty Ten

Rapportskrivning påbegyndt

X

X

X

X

Fredag d. 3/12 De første del-sites (sider)

Logo design

Ændring af style

X X

X

X

X

X X

Søndag d. 5/12 Formular design

PHP programmering og test i prototype

Rapport skrivning

Rettelse Style-sheet

X

X

X

X

X

X

X

X

X

Mandag d. 6/12 Logo design – kundevalg

Fastlæggelse af menubar

Formular i sitet

Generel styling

Rapport skrivning

X X

X

X

X

X

X

X

X

X

X

Tirsdag d. 7/12 Klargøring af sitet til andet kundebesøg

Rapport skrivning

X X

X

Onsdag d. 8/12 Andet kundebesøg

Opfølgning herpå

Rapport skrivning

X X

X

X

X

X

X

Torsdag d. 9/12 Opsamling af mangler på sitet

Færdiggørelse af rapport

Samling af rapport

Opload til ISSUU + udprint

X

X

X

X

X

X

Fredag d. 10/12 Aflevering X

Bilag B

Bilag B

Bilag C

Bilag D

Tan

gen

kun

stfo

ren

inge

nTA

NG

EN

KU

NS

TF

OR

EN

IN

GE

N

KU

NS

TF

OR

EN

ING

EN

kun

stfo

ren

inge

nta

nge

n

kun

stfo

ren

inge

nta

nge

nta

nge

n

KU

NS

TF

OR

EN

ING

EN

TAN

GE

NK

UN

ST

FO

RE

NIN

GTA

NG

EN

KU

NS

TF

OR

EN

ING

EN

TAN

GE

N

4.

2.

3.

5.

7.8.

9.

Bilag E

Hjem

Form

ål og vedtæ

gterB

estyrelsenA

ktiviteter

Ud

stilling 1

Ud

stilling 2

Galleri

Bliv m

edlem

Debatforu

mL

inks

Ekstern

Bilag F

1

2

3

4

5

6

7

Siden er delt op i disse 7 felter:1: Logo2: Billede3: Menuline4: Tekst felt5: Tekst felt6: Footer7: Header

På figuren kan der ses de overordnede mål, yderligere er der;Padding omkring cotent: Top 10 pxBottom 16 px

Paddng omkring sidebar:Top: 10 px

Padding omkring tekst ved footer:Padding : 8 px

990px

940px

568px

20px

47px

33px

2px

2px

198px

120px

328px

280px

variabel

20px

212px

54px

Bilag G

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 1 af 11

Produkt- /projekt-beskrivelse

Denne hjemmeside er lavet i WordPress. Vi har valgt at bruge temaet ”Twenty Ten 1.1” som udgangspunkt, fordi det virkede meget ”stylish, simple and readable”.

Hjemmesidens adresse til dens administrator er følgende: http://multimediekursus.ats.dk/mult1/bgjn/wp-admin Bruger: admin Password: tangen2010 Alle andre kan komme ind via denne adresse: http://multimediekursus.ats.dk/mult1/bgjn/ Denne gruppes hjemmeside er lavet af:

Ann Birgitte (Gitte) Clement

Jens Frich

Bente Lassen

Nina Højris Kristensen

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 2 af 11

Overordnet story-board for hjemmesiden:

Siden er delt op i disse 7 felter.

Strukturen er fælles for de forskellige sider:

Headeren består af følgende : Felt 7 blank header, Felterne 1 og 2 der indeholder et billede, hvor logo’et er sat ind Felt 3 der indeholder 8 menu-knapper. Teksten til den enkelte website placeres i felterne 4 og 5. Footeren sættes ind i felt 6. Den indeholder et link til forsiden ved navn ”Hjem”. Hjemmesidens farver: hvid + sort + rød + grå Baggrundens farve: lysegrå

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 3 af 11

Sidens navn: Hjem (Betragtes som web-sitens forside)

Grafik: Forside2.jpg indsættes i felterne 1+2 som indlæggets thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i den første knap fra venstre er ”Hjem” med farven hvid Link : teksten ”Hjem” er hvid Baggrund er sort Link hover: Teksten ”Hjem” er hvid Baggrund er mørkegrå I felt 7 findes et link til hjemmesiden ”Hjem”. Den indeholder hjemmesidens navn; men skrevet med hvid farve, så man ikke kan se den. Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort .

Sidens navn: Formål og vedtægter

Grafik: formaale2.jpg indsættes i felterne 1+2 som indlæggets thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 2 fra venstre er ”Formål og vedtægter” med farven hvid Link : teksten ”Formål og vedtægter” er hvid Baggrund er sort Link hover: Teksten ”Formål og vedtægter” er hvid Baggrund er mørkegrå

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 4 af 11

Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder følgende: Link: Teksten Vedtægter med understregning Link hover: Teksten ”Vedtægter” med understregning er nu rød Link active: Når man klikker på dette link vises indholdet af denne fil: http://multimediekursus.ats.dk/mult1/bgjn/kunst/vedtaegter_kunst.pdf

Idet pdf-dokumentet oploades i et nyt billede forlades siden ”Formål og vedtægter ” ikke.

Et eksempel på brødteksten er følgende: ”Har du lyst til at have indflydelse på hvilken kunst vi skal udstille og senere bortlodde til kunstforeningens medlemmer, så har du nu muligheden for at være medbestemmende fremover. Kom og deltag i valget og få lidt hyggeligt samvær med dine kollegaer.”

Sidens navn: Bestyrelsen

Grafik: bestyrelse2.jpg indsættes i felterne 1+2 Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 3 fra venstre er ”Bestyrelsen” med farven hvid Link : teksten ”Bestyrelsen” er hvid Baggrund er sort Link hover: Teksten ”Bestyrelsen” er hvid Baggrund er mørkegrå Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder følgende Brødtekst :

”Bestyrelsen består af : Formand : Lissy Madsen Kasserer : Erik Aabling Næstformand : Sekretær : Anne Pedersen”

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 5 af 11

Sidens navn: Aktiviteter

Grafik: aktiviteter2.jpg indsættes i felterne 1+2 som indlæggets thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 4 fra venstre er ”Aktiviteter” med farven hvid Link : teksten ”Aktiviteter” er hvid Baggrund er sort Link hover: Teksten ”Aktiviteter” er hvid Baggrund er mørkegrå Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder følgende Brødtekst :

”Årets aktiviteter: I januar viser vi en udstilling med medlemmernes kæreste eje. 20. februar tur til kunstudstillingen på Aros. ”

Sidens navn: Galleri

Grafik: galleri2.jpg indsættes i felterne 1+2 som indlæggets thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 5 fra venstre er ”Galleri” med farven hvid Link : teksten ”Galleri” er hvid Baggrund er sort

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 6 af 11

Link hover: Teksten ”Galleri” er hvid Baggrund er mørkegrå

Viser menuen til under-siderne ”Udstilling 1” og ”Udstilling 2”. Disse 2 undersider har siden ”Galleri” som parent/forælder.

Baggrunden er mørkegrå, og teksten er lysegrå. Når man hover over enten ”Udstilling 1” eller ”Udstilling 2”, så skal teksten være hvid.

Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder følgende Brødtekst :

”Næste kunstudstilling bliver med medlemmernes kæreste eje. Hvis du kender en kunstner der kunne tænke sig at udstille her på Tangen så send en mail til tangen@kunst.dk ”

Under-sidens navn: Galleri (man er inde på ”Udstilling 1”)

Grafik: galleri2.jpg indsættes i felterne 1+2 som indlæggets thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 5 fra venstre er ”Galleri” med farven hvid Link : teksten ”Galleri” er hvid Baggrund er sort Link hover: Teksten ”Galleri” er hvid Baggrund er mørkegrå

Viser menuen til under-siderne ”Udstilling 1” og ”Udstilling 2”. Disse 2 undersider har siden ”Galleri” som parent/forælder.

Baggrunden er mørkegrå, og teksten er lysegrå. Når man hover over enten ”Udstilling 1” eller ”Udstilling 2”, så skal teksten være hvid.

Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder denne tekst:

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 7 af 11

”Det købte billede :” Samt følgende billede : 100_2317.jpg

Under-sidens navn: Galleri (man er inde på ”Udstilling 2”)

Grafik: galleri2.jpg indsættes i felterne 1+2 som indlæggets thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 5 fra venstre er ”Galleri” med farven hvid Link : teksten ”Galleri” er hvid Baggrund er sort Link hover: Teksten ”Galleri” er hvid Baggrund er mørkegrå

Viser menuen til under-siderne ”Udstilling 1” og ”Udstilling 2”. Disse 2 undersider har siden ”Galleri” som parent/forælder.

Baggrunden er mørkegrå, og teksten er lysegrå. Når man hover over enten ”Udstilling 1” eller ”Udstilling 2”, så skal teksten være hvid.

Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem”. Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder følgende 3 billeder : ?????

Sidens navn: Bliv medlem

Grafik: medlem2.jpg indsættes i felterne 1+2 som indlæggets

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 8 af 11

thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 6 fra venstre er ”Bliv medlem” med farven hvid Link : teksten ”Bliv medlem” er hvid Baggrund er sort Link hover: Teksten ”Bliv medlem” er hvid Baggrund er mørkegrå Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder følgende Brødtekst : Hvordan bliver man medlem af Kunstforeningen Tangen ? Udfyld nedenstående og send en e-mail! Dette er oprettet som en formular i HTML. Navn:

Lønnummer:

E-mail:

SEND MAIL

Sidens navn: Debat-forum

Grafik: debat2.jpg indsættes i felterne 1+2 som indlæggets Thumbnail og som header-billede i WordPress Tekstindhold: Verdana

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 9 af 11

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 7 fra venstre er ”Debat-forum” med farven hvid Link : teksten ”Debat-forum” er hvid Baggrund er sort Link hover: Teksten ”Debat-forum” er hvid Baggrund er mørkegrå Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Denne side indeholder indlæg skrevet af sidens administrator. Medlemmerne kan så kommentere dette indlæg. Når man klikker på menu-punktet Debat-forum, vises siden med de forskellige debat-indlæg. Her kan alle skrive kommentarer til de enkelte indlæg. Og evt. markere det med en kategori. Indlægget bliver gemt i et kategoriarkiv, f.eks. Kategoriarkiv: Bestyrelsesmedlem Hvis indlægget er udgivet af bruger admin, så bliver det gemt i et

Forfatterarkiv: admin

Følgende kategorier er oprettet:

Medlem

Bestyrelsesmedlem

Ikke kategoriseret Man kan få adgang til disse arkiver ved at klikke på følgende link’s:

Udgivet den 4. december 2010 af admin

Hej

Udgivet i Bestyrelsesmedlem | Skriv en kommentar | Rediger

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 10 af 11

Når man hover over linket med indlæggets dato, så vises det tidspunkt, hvor indlægget blev skrevet / gemt. Linket vises også med rødt .

Sidens navn: Links

Grafik: links2.jpg indsættes i felterne 1+2 som indlæggets thumbnail Tekstindhold: Verdana

Navigation/knapper:

Menu-linjens baggrund er sort Headerens øverste border er sort , solid og på 2px Teksten i knap nr. 4 fra venstre er ”Links” med farven hvid Link : teksten ”Links” er hvid Baggrund er sort Link hover: Teksten ”Links” er hvid Baggrund er mørkegrå Felt 6 er footeren. Den starter med en rød solid border-top på 2px. Desuden indeholder den et link til hjemmesiden ”Hjem” . Den indeholder hjemmesidens titel ”Kunstforeningen Tangen”, vist i farven sort . Felt 4 indeholder følgende Brødtekst :

”Henvisning til diverse hjemmesider, som kan være af interesse for kunstforeningens medlemmer:” Der er sat følgende 2 links ind på siden som eksempel:

www.aros.dk/

ARoS Aarhus Art Museum stedside

Bilag H

Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

5. december 2010 kl. 15:20 Side 11 af 11

- hvad med dette ?????????????????

Hjemmesiden er struktureret således:

Højre-sidebar

På de sider, som er lavet ved hjælp af standard-skabelonen, findes der en højre-sidebar, med følgende indhold: Et søgefelt Kan udfyldes med det ord, man ønsker at finde, på en vilkårlig side. Viser alle

de fundne steder. En knap ved navn ”Søg” Klik på denne knap når man ønsker at starte søgningen. Arkiver ”december 2010” Et link til et måneds-arkiv med gemte indlæg, lavet på siden ”Debat-forum”. Meta Sideadmin Kan kun benyttes af bruger admin. Vises kun for denne bruger. Giver adgang

til WordPress’s kontrolpanel Log ud Kommer ud på login-billedet til WordPress. Log ind Vises hvis man er kommet ind uden at være administrator. Hvis man klikker på dette link, så kommer man ind på login-billedet til WordPress.