Projekt Kunstforenngen Tangen by Nina Kristensen

projekt Kunstforeningen Tangen

Multimedieteknologi og interaktionsdesign

rapport

december

2010

Udarbejdet af: Ann Bir(gitte) Clement Bente Lassen Jens Frich Nina HĂ¸jris Kristensen

Indholdsfortegnelse Indledning 05 Metode 06 Foranalyse 06 Projektbeskrivelse 07 Undersøgelse 07 Budskab 08 Afsender 08 Målgrupper 08 Ønsker 09 Design 10 Informationsdesign 10 Interaktionsdesign 10 Præsentationsdesign 11 Logo 11 De 4 designparametrer 12 Grafiske virkemidler 13 AIDA modellen 14 Realisering 15 Kvaltetsvurdering og konklusion 15 Literaturliste 16 Designmaual 17 Bilag 20 Kontakt 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 intranet, 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 metode 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 budskabet, 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 gruppearbejde 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=15 Bestyrelse: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=11 Aktiviteter: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=47 Galleri: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=21 Udstilling 1: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=84 Udstilling 2: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=193 Bliv medlem: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=49 Debat-forum: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=40 Links: http://multimediekursus.ats.dk/mult1/bgjn/?page_id=369

06 1: Litteraturliste, kilde 1 2: Bilag A 3: Bilag B

Metode 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 Management”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 proces- og produktniveauet. De 4 trin er foranalyse, undersøgelse, design og realisering og trinene benyttes i det efterfølgende til at beskrive vores projekt.

Foranalyse 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ålgrupper, 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 selvstæ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.

Projektbeskrivelse Projektet defineres med projektbeskrivelsen: at designe et website til Kunstforeningen Tangen, der er en lukket kunstforening, for den lokale afdeling af sikkerhedsfirmaet. Målet er at orientere nuværende og kommende medlemmer blandt afdelingens ansatte om foreningens udstillinger, arrangementer 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 forkastet. Det har været en iterativ proces med en del tilbageløb.

Undersøgelse 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 WordPress, var der altid noget, der ikke var, som vi kunne tænke os det. Enten var det for avanceret layoutmæssigt med flash, popup menuer eller havde et udseende, vi ikke var tilfredse med. Vi har den mening, at vores site skal være enkelt, brugervenligt 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 forskellige 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 ønsker at sende, hvem afsenderen er, og hvilken målgruppe vi henvender os til, samt kunstforeningens ønsker.

07 4: Bilag C 5: Bilag D

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

Budskab 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.

Afsender Afsenderen, som er kunstforeningen, er en lille medlemsskare, 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.

Målgruppe 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 aldersgruppen 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 kunstnere, som er interesseret i at udstille deres værker. Der er ingen 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 designskoler. 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ællesskabsorienterede segment”7. Nøgleordene for målgruppen er social og samfundsmæssig ansvarlighed, åbenhed overfor omverdenen, tolerance og med-

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ø, arbejde 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-, museums- 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.

Ø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

10 8:Billag E 9: Bilag G

Design Efter foranalyse og undersøgelsestrinnet skal vi nu til at designe logo og website. Med udgangspunkt i vores viden nu, kan vi komme med et forslag til et design, som opfylder kundens ø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 faser, informations-, interaktions- og præsentationsdesign. Derudover vil vi beskrive logoet, de fire designparametre, grafiske virkemidler og AIDA-modellen.

Informationsdesign Dette site skal henvende sig til nuværende medlemmer, medarbejdere 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å interesse for at være med i foreningen.

Interaktionsdesign Med vores simple opbygning af websitet giver det færre muligheder for at fare vild, og det gør det nemmere at finde, det man søger. Dette ses også tydeligt på vores flowchart8. Menulinien 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ålgruppen, 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 gallerrisektion, hvor man kan se hvilke udstillinger, der er aktuelle eller har været det. Under siden med formål og vedtægter ligger et link til foreningens vedtægter, som åbner op i en ny side, når linket aktiveres. Dette bevirker, at man kommer tilbage til

samme 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å indholdet på websitet. På den måde har vi kombineret informationen omkring foreningen med nogle interaktionsmuligheder.

11 10: Bilag F 11: Se designmanual, side 19

Præsentationsdesign Med informations- og interaktionsdesign på plads skal vi få det hele til at gå op i en højere enhed ved at designe websitet med disse overvejelser, samt at give den besøgende en behagelig oplevelse. Websitet er opbygget med en header øverst, hvori der er et billede og et logo10. Herunder har vi en menulinie, hvor størstedelen af alle siderne er repræsenteret. Under menuen har vi delt feltet i to spalter, hvor den ene er et tekstfelt 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 afslutning. Til allersidst har vi en lille tekst med Kunstforeningen 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 underkant, 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.

Logo 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

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. Yderligere 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 medarbejderne 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 designparametre.

De 4 designparametre Format Websitet 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. Farver Vi har valgt farverne sort, hvidt, og rødt som de primære farver. 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. Illustrationer Af 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. Billederne vil hovedsagelig være af malerier, skulpturer og lignende,

som er eller har været på udstilling hos foreningen. Billederne gør websitet spændende, indbydende og er med til at give noget genkendelighed. Derudover kan udefra kommende eller interesserede få et glimt af, hvad foreningen foretager sig. Typografi På 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 websites; 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 Komposition Da 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. Menulinien er nem at bruge, da den skifter farve ved roll-over, og den valgte side vises med hvidt, og de andre træder i baggrunden 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 noget 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 stemning Stilen 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å mulighed 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 overskuelighed.

AIDA modellen I udviklingen af websitet har vi haft AIDA-modellen i bagtankerne, 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 opmærksomhed, og samtidig viser de, hvad der foregår i foreningen. Interest= Efter at have skabt opmærksomheden, fanger vi interessen ved, at sitet har lidt information om, hvem og hvad kunstforeningen indeholder. I menulinien er der også mulighed 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 velkommen 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 Realisering på produktniveauet går på at udføre designbeslutningerne i praksis. Udviklingen er foretaget i WordPress, som er et content management-system forkortet CMS, hvilket betyder, 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 overensstemmelse med vores ideer, og de beslutninger, vi har taget undervejs. I gruppearbejdet har vi benyttet os af personernes forskellige 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 fortrinsvis 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.

Litteraturliste 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 Typografi: Der er valgt Verdana som font, og det vil være gennemgående på hele websitet.

The quick brown fox jumps over the crazy dog The quick brown fox jumps over the crazy dog 1234567890 !?+/& Den vil være præsenteret på websitet i forskellige størrelser: Menu linien: Font størrelse: 13px Farven ved valgt side: #ffffff Farven når de er urørt: #333 Dropdownmenu er det samme som menulinien Tekstfeltet: Størrelse: h3 - 16px Brødtekst: 16 px Farven: #000000 Teksten i spalte til højre: Overskrift: bold, Farve: #000000 Punkter: Farve: #d9d9d3 Footeren: 11px, bold, #000000 Links i tekst: Størrelse: 16px kursiv Farve: #d9d9d3 Roll-over: #fc1b23 Links på linkssiden: Roll-over: #fc1b23

Farver: 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

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

web: #d9d9d3

R=217 G=217 B=211

web: #333333

R=51 G=51 B=51

Billag Bilag A: Bilag B: Bilag C: Bilag D: Bilag E: Bilag F: Bilag G: Bilag H:

Tidsplan Mindmaps Storyboard Logo forslag Flowchart Skelet af web PHP kode Storyboard

Kontakt Ved videre samarbejde kontaktes: Ann Birgitte (Gitte) Clement

Bilag A Dato

Aktivitet

Foranalyse

Onsdag d. 1/12

Første kundebesøg

Opsummering af kundekrav

Udkast til

Undersøgelse

Design

Realisering

Tidsplan/planlægning Torsdag d. 2/12

Fredag d. 3/12

Søndag d. 5/12

Brainstorm Logo

Undersøgelse af forskellige temaer i WordPress

Valg af Twenty Ten

Rapportskrivning påbegyndt

De første del-sites (sider)

Logo design

Ændring af style

Formular design

PHP programmering og test i prototype

Rapport skrivning Rettelse Style-sheet Mandag d. 6/12

Logo design – kundevalg Fastlæggelse af menubar

Formular i sitet

Generel styling

Rapport skrivning Tirsdag d. 7/12

Klargøring af sitet til andet kundebesøg

Rapport skrivning Onsdag d. 8/12

Andet kundebesøg Opfølgning herpå

Rapport skrivning Torsdag d. 9/12

Opsamling af mangler på sitet

Færdiggørelse af rapport

Samling af rapport

Opload til ISSUU + udprint Fredag d. 10/12

Aflevering

X X

Bilag B

Bilag C

TANGEN

KUNSTFORENINGEN

kunst foreningen tangen

kunstforeningen

Tangen 5.

KUNSTFORENING

TANGEN

kunst foreningen tangen

KUNSTFORENINGEN

TANGEN

KUNSTFORENINGEN

TANGEN

KUNSTFORENINGEN

tangen

Bilag D

FormĂĽl og vedtĂŚgter

Bilag E

Bestyrelsen

Aktiviteter

Udstilling 1

Hjem

Galleri

Udstilling 2

Bliv medlem

Debatforum

Links

Ekstern

Bilag F 2px 20px

20px

47px

120px 198px

212px

940px variabel

3 568px

328px

4 5

280px

33px

54px 990px

2px Siden er delt op i disse 7 felter: 1: Logo 2: Billede 3: Menuline 4: Tekst felt 5: Tekst felt 6: Footer 7: Header P책 figuren kan der ses de overordnede m책l, yderligere er der; Padding omkring cotent: Top 10 px Bottom 16 px Paddng omkring sidebar: Top: 10 px Padding omkring tekst ved footer: Padding : 8 px

Bilag G

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

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: Password:

admin 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

5. december 2010 kl. 15:20

Side 1 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

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: Baggrundens farve:

5. december 2010 kl. 15:20

hvid + sort + rød + grå lysegrå

Side 2 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

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

Tekstindhold:

Verdana

indsættes i felterne 1+2 som indlæggets thumbnail

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å

5. december 2010 kl. 15:20

Side 3 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen 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: Tekstindhold:

bestyrelse2.jpg Verdana

indsættes i felterne 1+2

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”

5. december 2010 kl. 15:20

Side 4 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen

Sidens navn:

Aktiviteter

Grafik:

aktiviteter2.jpg

Tekstindhold:

Verdana

indsættes i felterne 1+2 som indlæggets thumbnail

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

Tekstindhold:

Verdana

indsættes i felterne 1+2 som indlæggets thumbnail

5. december 2010 kl. 15:20

Side 5 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen 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:

5. december 2010 kl. 15:20

Side 6 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen ”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

5. december 2010 kl. 15:20

indsættes i felterne 1+2 som indlæggets

Side 7 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen 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

Tekstindhold:

Verdana

5. december 2010 kl. 15:20

indsættes i felterne 1+2 som indlæggets Thumbnail og som header-billede i WordPress

Side 8 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen 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

5. december 2010 kl. 15:20

Side 9 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen 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

Tekstindhold:

Verdana

indsættes i felterne 1+2 som indlæggets thumbnail

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

5. december 2010 kl. 15:20

Side 10 af 11

Bilag H Produktoplysninger om hjemmesiden til Kunstforeningen Tangen - 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 En knap ved navn ”Søg”

Kan udfyldes med det ord, man ønsker at finde, på en vilkårlig side. Viser alle de fundne steder. 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 Log ud Log ind

5. december 2010 kl. 15:20

Kan kun benyttes af bruger admin. Vises kun for denne bruger. Giver adgang til WordPress’s kontrolpanel Kommer ud på login-billedet til WordPress. 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.

Side 11 af 11