Ikumbo - en ny webidentitet

Transkript

1 Ikumbo - en ny webidentitet Af Sara Marie Ertner, Anne Mie Kragelund, Sissel Quistgaard Pagh, Kenneth Riis-Jensen, Mads Benjamin Lumholt, Webdesign & Webkommunikation, Efterår 2007 Undervisere: Tomas Sokoler, Jens Kaaber Pors, Ian Wisler IT-Universitetet

2 Læsevejledning Rapporten er blevet udarbejdet på baggrund af vores arbejde med at udvikle et nyt website for den afrikanske dansegruppe Ikumbo. Websitet kan ses online på denne adresse: Rapporten er inddelt i 5 overordnede dele. Indledningen er en introduktion af Ikumbo og vores motivation for projektet, samt en problemformulering. Dernæst kommer kommunikationsplanen, som behandler de mere strategiske og indledende overvejelser i forbindelse med blandt andet budskab, formål, afsender og målgruppe. I afsnittet Produktudvikling vil vi gennemgå og argumentere for de valg, vi har truffet i forhold til det endelige produkt. Metodeafsnittet giver et overblik over de anvendte metoder, og hvad vi har fået ud af dem. I afrundingen har vi en konklusion på projektet og en perspektivering over muligheder i forhold til videreudvikling af websitet. Til sidst i rapporten findes bilag med supplerende information og resultater fra de forskellige tests. Go læselyst

3 Indholdsfortegnelse Websitets forside 0 Indledning 1 Introduktion/Motivation 2 Problemformulering 3 Kommunikationsplan 4 Websitets budskab 5 Websitets afsender 5 Målgruppe 7 Kravspecifikation 9 Produktudvikling 10 Metodisk overblik 11 Genre og stil 12 Visuel identitet 16 Informations arkitektur 21 Skriftlig formidling 27 Tekniske specifikationer 29 Metode 33 Konklusion 37 Perspektivering 39 Litteraturliste 43 Bilag A - I 45

4

5 Indledning Introduktion og motivation Problemformulering

6 Introduktion og motivation Vores website er udviklet for Ikumbo, som er en dansk tanzaniansk dansegruppe. De optræder med dans, sang og musik, der stammer fra Sukumaland i Tanzania. Ikumbo er en forening, og medlemmerne kommer fra både Danmark og Tanzania. De deltager ofte i kulturarrangementer, hvor de optræder med deres shows. Desuden optræder de for private og tilbyder workshops, hvor de lærer fra sig af dans og trommespil. Gruppen har eksisteret i 20 år, men har aldrig haft et website. Dette var særligt interessant for os, fordi det ville give os stor frihed i forhold til at udvikle et design og i det hele taget konstruere en helt ny visuel webidentitet for gruppen. Desuden valgte vi at arbejde med Ikumbo, fordi vi så mange spændende designmuligheder i deres dansekoncept, som er præget af liv og sjæl, bevægelse, dynamik og kulør. Vi fandt det udfordrende at forsøge at integrere hele dette oplevelseselement fra Ikumbos optrædener i et samlet webdesign. Vi har udformet en problemformulering med et overordnet spørgsmål og herunder 5 centrale hensigtserklæringer: 2

7 Problemformulering Hvordan kan man udvikle et website, der både formidler Ikumbos identitet og værdier, og selve oplevelsen af en Ikumbo performance? Hensigtserklæring Websitet vil både være informativt og appellerende, men samtidig skal det visuelle og sproglige udtryk være tro mod Ikumbos faktiske identitet. I forlængelse heraf vil websitet få Ikumbo til at fremstå som en engageret og seriøs danse- og musikgruppe, der kan tilrettelægge og organisere et dynamisk og flot arrangement på professionel vis. Websitet vil være brugervenligt og lettilgængeligt. Ikumbos centrale værdi livsglæde vil blive transformeret til et visuelt og skriftligt udtryk. Websitet vil skabe en levende oplevelse af, hvad en Ikumbo performance handler om. 3

8 Kommunikationsplan Websitets budskab Websitets afsender Målgruppe Kravspecifikation

9 Websitets budskab Ikumbo er en seriøs dansegruppe, der på professionel vis kan planlægge og afholde motiverende og inspirerende workshops og tilbyde sprudlende og spændende danseoplevelser. Websitets afsender I arbejdet med Ikumbo som afsender har vi særligt fokuseret på, at indkredse gruppens identitet og selvforståelse i den tekstlige og visuelle formidling, og skabe et website, der passer til de ressourcer og behov, som gruppen har. Afsenderidentitet Ikumbo består af frivillige medlemmer, der praktiserer dans og musik på fritidsbasis. Medlemmerne er meget engagerede i den Tanzanianske danse- og musikkultur og tager jævnligt på rejser til Tanzania. Her søger de inspiration og større forståelse for den tanzanianske dansetradition og den kultur og historie som dansene formidler. Selv er Ikumbo aktivt med til at videreformidle denne kultur herhjemme, hvor de ofte er med til at arrangere og optræde på diverse kulturarrangementer og sommerlejre med andre afrikanske dansegrupper. Ikumbos nøgleværdier er Livsglæde og fornyelse, som de forsøger at integrere i deres optrædener. De går meget op i at hente ny inspiration til deres shows blandt andet igennem gæsteundervisere og deres rejser til Tanzania. Her forsøger de konstant at forny deres shows for at skabe autentiske og stemningsfulde publikumsoplevelser for både ører og øjne. Ikumbo tilstræber derfor at lave shows, der emmer af dynamik, stemning, rytmer og kulør. Ikumbo er en amatør-gruppe og har ikke ambitioner om at fremstå som en professionel gruppe eller opnå professionel status. Mange af deres medlemmer er danskere, og de ønsker ikke at sælge sig selv som en afrikansk gruppe. Det er meget vigtigt for dem at udtrykket på websitet bærer præg af dette for at et website ikke kommer til at skabe forventninger, som gruppen ikke kan indfri. Blandingen af både afrikanske og danske medlemmer skal derfor fremgå tydeligt på sitet, hvor det er vigtigt at Ikumbo ikke fremstår mere professionel, og autentisk end gruppen egentlig er. 5

10 Afsenderrelevans websitets formål og type Ikumbos ønske var at få en profil på nettet med funktion som et digitalt visitkort. Formålet var primært at henvise eksisterende og potentielle kunder til et website, hvor de kunne få information om Ikumbos dansestil og optrædener med henblik på at booke et show eller en workshop. For Ikumbo vil et website give mulighed for at få eksponering og dermed tiltrække nye kunder. Medlemmerne har ingen indtjening igennem Ikumbo, og alle indtægter fra shows og workshops går til at dække udgifterne fra deres optrædener og nye kostumer. Det er altså en non-profit organisation, og der er derfor ikke de store ressourcer i forhold til vedligeholdelse af websitet. Ikumbo har dermed behov for et website, der ikke kræver mange jævnlige opdateringer og stort teknisk kendskab. Desuden er det ikke intentionen, at tiltrække så mange kunder som muligt via brugerdrevede funktionaliteter og et dynamisk indhold, men blot tilbyde information og en kontakt via nettet til et begrænset antal kunder. Det website, vi har udviklet, er dermed forholdsvis statisk og befinder sig mellem et standard og et udvidet website, idet der ikke lægges op til stor interaktion på sitet. Der er imidlertid et par enkelte funktioner såsom Tip en ven, som kan siges at give det en lidt højere grad af interaktion end på et standard website. 6

11 Målgruppe Vi har arbejdet med en primær og en sekundær målgruppe for Ikumbos website. Den primære er overordnet Ikumbos kunder og den sekundære er journalister. Den primære er langt den vigtigste for Ikumbo og er derfor den vi hovedsageligt har taget udgangspunkt i i opbygningen af websitet. Vi har ikke lavet en decideret målgruppeanalyse baseret på empirisk data, men fået viden fra andre kilder. Vi har her brugt Ikumbo s medlemmer som corporate informants (personer der har en viden om målgruppen uden selv at være en del af den) og trukket på deres viden om målgruppen. Desuden har vi ud fra deres referenceliste fået et indtryk af, hvilken slags kunder, der kontakter Ikumbo. Mere personlige detaljer om målgruppen blandt andet i forhold til deres webadfærd har vi ikke kunnet få fat i. Vi har derfor udviklet konkrete brugerscenarier for at få en forestilling om, hvilke spørgsmål og hvilken adfærd der opstår i en given brugskontekst [Se bilag B]. Den primære målgruppe Ikumbos primære målgruppe er kunder, der ønsker at booke gruppen til et show eller en workshop. Denne gruppe har oftest hørt om Ikumbo gennem andre kunder, set dem optræde før, eller er eksisterende kunder, der tidligere har booket Ikumbo og ønsker at gøre det igen. Målgruppen består hovedsageligt af kommunalt ansatte som projektledere og kulturelle iværksættere for arrangementer som Aidsdagen, Kulturhavn København eller Fristaden Christianias fødselsdag. Derudover er der ansatte i virksomheder og offentlige institutioner, særligt i kultur- og uddannelsesinstitutioner. Disse booker Ikumbo til shows og workshops i forbindelse med arrangementer som eksempelvis rusture, julefrokoster eller medarbejder-seminarer. Til sidst er det private kunder, der ønsker et show eller workshop til for eksempel en polterabend. Den primære målgruppe vil særligt opsøge websitet for at finde information om, hvad Ikumbo kan tilbyde dem. De vil gerne føle sig trygge ved, at den gruppe de booker, kan levere en flot og spændende oplevelse. De har derfor primært behov for at få et indtryk af Ikumbos præstationer til shows og workshops, og information om, hvordan de kan komme i kontakt med dem. Den sekundære målgruppe Den sekundære målgruppe består af journalister særligt fra lokale dagblade og TV. Det vil ikke være en jævnligt besøgende brugergruppe, men vigtig at tilgodese alligevel, da de kan give Ikumbo en god eksponering i medier. Tidligere har Ikumbo 7

12 blandt andet været kontaktet af Go aften Danmark på TV2. For denne gruppe er det særligt vigtigt, at have let og hurtig adgang til billeder og information, der kan omsættes til gangbart pressemateriale om Ikumbo og dermed ikke kræver meget bearbejdning fra journalisten. Journalisterne søger ofte efter emner til artikler eller TV-indslag på nettet, hvor de kontakter den første den bedste, som ser forholdsvis seriøs og engageret ud. Det er derfor centralt for Ikumbo at manifestere sig på nettet og positionere sig blandt de andre afrikanske dansegrupper i Danmark. Brugernes adfærd på nettet Selvom målgruppen er splittet op i to, mener vi alligevel, der er nogle gensidige karakteristika, som kendetegner begge brugertypers adfærd på nettet. På trods af de mange individuelle variationer fra bruger til bruger, vil vi forsøge at sige noget samlet om deres formodede interaktion med websitet. Begge målgrupper opsøger Ikumbos website i professionelt ærinde. De har ikke nødvendigvis nogen personlig interesse for dans og musik, men er på sitet for at udføre en opgave. Dette betyder at de hverken har tid eller lyst til at fordybe sig i tekst, men behov for hurtig og lettilgængelig information. Det er derfor meget vigtigt, at de kan finde direkte svar på deres spørgsmål, og ikke skal lede efter informationer. Man kan sige, at brugerne er utålmodige og illoyale forstået på den måde, at hvis de ikke hurtigt finder det de søger, eller mister interessen for sitet, vil de forlade det. Hvis brugerne når at forlade sitet inden deres intention med at besøge det er opfyldt, er der en stor risiko for, at de ikke vender tilbage. Dette gælder særligt for dem, der ikke i forvejen kender Ikumbo, og dermed ikke er personligt motiveret for at søge videre på netop dette site. Her er det næste dansesite bare et enkelt klik væk. 8

13 Kravspecifikation Som indledning til samarbejdet med Ikumbo sendte vi dem en række spørgsmål om deres visioner og ønsker i forhold til websitets indhold, design og samlede udtryk. Hensigten var, at udvikle en kravspecifikation baseret på deres ønsker og behov, som vi så kunne arbejde videre ud fra. Her er en række af de mest centrale krav og visioner uddraget fra den kravspecifikation, Ikumbo selv har udformet i starten af projektet [se hele Ikumbos kravspecifikation i bilag C]: Ikumbos hjemmeside skal først og fremmest udtrykke livsglæde. Vi vil gerne have en lys og lækker side dvs. ikke for meget traditionelt afro-halløj i sorte, orange og jordfarver. Den må meget gerne se lidt "prof" ud - dvs. heller ikke for mange små sjove gadgets, som kravler hen over skærmen i tide og utide. Vi vil gerne fortælle brugerne af hjemmesiden om hvad vi kan i Ikumbo, og hvordan man får fat i os. Vi mener ikke der skal være alt for meget tekst - men samtidig har vi jo også nogle ting vi gerne vil fortælle om. Billederne skal vise den realistiske sammensætning af gruppen (der er mange danske piger, og knap så mange afrikanere med), så folk ikke bliver skuffede når vi kommer ud og optræder. Siden skal som minimum indeholde: Historie, kontaktinfo, fotogalleri og links. Derudover må siden gerne indeholde: Afrikansk dans, kalender og medlemsgalleri. Vi har så vidt muligt taget hensyn til Ikumbos krav og ønsker, og har i høj grad efterlevet dem i det færdige resultat. For at omsætte krav og visioner til et konkret produkt, har det dog været nødvendigt at bearbejde dem, og tilpasse dem til andre faktorer som for eksempel brugervenlig navigation og informationsarkitektur, relevans, sammenhæng og betydning for det samlede udtryk. 9

14 Produktudvikling Metodisk overblik Genre og stil Visuel identitet Informations arkitektur Skriftlig formidling Tekniske specifikationer

15 Metodisk overblik Før vi begynder at beskrive selve design-processen vil vi kort give et overblik over de metoder der bliver anvendt. Senere vil vi i Metodeafsnittet mere indgående beskrive metoderne, og diskutere hvad vi fik ud af dem. Overordnede metoder er: 1. Etablering af gruppens samarbejdsmetoder. Som nyskabt projektgruppe må man i fællesskab beslutte, hvordan designprocessen og arbejdsfordelingen skal organiseres [beskrivelse i bilag A] 2. Webresearch. Er efter vores vurdering en forudsætning for et godt designarbejde. Med andre ord vil det være uhensigtsmæssigt ikke at have referencer og inspiration fra websites for, at få et indtryk af best practice og eventuelle innovative tilgange 3. Konceptudvikling. I opstarten af den kreative fase har vi vurderet det hensigtsmæssigt at øve os i konceptudvikling og samtidig forsøge at invitere en kreativ sindstilstand [Se beskrivelse af workshoppen i bilag G] 4. Test. Steve Krug betoner vigtigheden af brugerinddragelse i form af tests. Vi har valgt at udføre tre typer tests. Efter den første prototype bad vi Ikumbo om at vurdere sitet (dvs. en template/ forside). De sendte pr. mail en samlet respons [se bilag D]. De næste prototyper testede vi på ITU, med tilfældigt udvalgte studerende i en kort og overordnet test af sitets layout, en såkaldt Quick n dirty test [se beskrivelse og resultater i bilag E]. Dette gjorde vi for at kunne korrigere endnu mere præcist ift. grafisk udtryk og brugervenlighed. Den sidste brugertest har vi kaldt Booker-brugertest fordi den er foretaget med 2 repræsentanter fra målgruppen, som begge er bookere af kulturelle arrangementer [ se bilag F]. Formålet var at få reaktion på den funktionelle og næsten færdige udgave af websitet. 11

16 Genre og stil Ida Engholm introducerer begreberne genre og stil i forhold til sites på Internettet. Tanken er, at sites kan klassificeres efter bestemte genrer (f.eks. banksites) og i forskellige stilarter. En stilart i denne forbindelse kan defineres som den differentiering der er indenfor en given genre. Operationelt set kan man bruge disse tanker til at opbygge et nyt site efter. Har man defineret sitets genre, kan man efterfølgende undersøge, hvilke stilarter der eksisterer indenfor den givne genre, og på den baggrund opbygge sitet efter den valgte genre eller stilarts konventioner. Vores research af eksisterende sites af samme genre som vores viste, at der eksisterede to stilarter. Den ene stilart kunne karakteriseres som spraglet, farverig, og rodet [Se f.eks. Den anden (der udgjordes af ganske få sites) kunne karakteriseres som enkel, dynamisk og kølig [Se f.eks. www. africadance.dk]. Samtidig tog disse sites typisk udgangspunkt i repræsentation af en enkelt person, og ikke en dansegruppe. Fra vores opdragsgiver vidste vi, at sitet skulle være et elektronisk visitkort. Hensigten med sitet skulle dermed være, at brugeren kunne søge oplysninger om Ikumbo, og evt. opnå kontakt. På denne baggrund mente vi, at den første stilart ikke passede til disse behov, da den ikke vægtede overskuelighed og informationsprioritering højt. Den anden stilart tilbød den ro og prioritering af tekst og billeder som passede ind i vores opdragsgivers behov. Dog var den for afdæmpet i farverne i forhold til hvad vores opdragsgiver ønskede, og der eksisterede for få til klart at definere stilarten entydigt. Alligevel valgte vi på et tidligt tidspunkt at søge inspiration blandt nogle af disse sites, dog med henblik på at skabe et site, der stilmæssigt afveg, i forhold til opdragsgivers ønsker. Processen blev på denne baggrund drevet af en individualiseringsdynamik, et ønske om at adskille sig i forhold til de eksisterende stilarter [Engholm, 2004, s. 75]. Disse overvejelser resulterede i, at vi besluttede os for at tage udgangspunkt i et enkelt design, der stemmer overens med de beskrevne mål i vores hensigtserklæring. For yderligere at karakterisere vores site vil vi analysere det via Ida Engholms analysemodel. 12

17 Engholms analysemodel Ida Engholm har udviklet en deskriptiv analysemodel, der kan anvendes til at bestemme et websites karakteristika. Modellen er bygget over en klassisk arkitekturmodel, der blev (og bliver) anvendt til at formgive bygninger. Engholm har operationaliseret denne model, og sat den i en anden kontekst, hvor den bliver anvendelig til at analysere websites. Modellen ses i figur 1. Vi søger via Engholms model at karakterisere vores site. Figur 1 1. Teknisk konstruktion Er defineret ved at være knyttet til den teknologi og det medie, der danner grundlag for sitets konstruktion og bestemmer, hvad der kan lade sig gøre teknologisk [Engholm, 2004, s. 60]. I designet af sitet har det været vigtigt for os, at tage udgangspunkt i målgruppens forventede tekniske ressourcer. Dette har betydet, at vi har måtte indtænke følgende forhold: - Sitet skal kunne ses i 800x600 px. - Sitet skal kunne ses i forskellige browsere (IE, Firefox, Avant & Opera er testet) - Sitet skal reelt kunne ses via f.eks. en telefonmodem forbindelse. Figur 2 2. Den brugsmæssige funktionalitet Er relateret til sitets anvendelse og bestemt af de navigationsmæssige interface-aspekter, der sammen med de tekniske dimensioner giver brugeren mulighed for at interagere med sitet [Engholm, 2004, s. 61]. Vi har valgt en klassisk navigationsstruktur, da sitet er et informationssite, og ikke et oplevelsessite. Valget af en klassisk navigation skaber genkendelse, ensartethed, samt forudsigelighed. Samtidig er rækkefølgen af navigationens punkter overvejet ud fra et informationsorienteret synspunkt. Vi har søgt, at lade rækkefølgen komme naturligt, efter de behov målgruppen kunne have. Se figur 2. - Om Ikumbo er det første menupunkt. Menupunktet er naturligt som det første, idet det dækker over hvem Ikumbo er og hvad de står for. - Shows og Workshops handler om hvad Ikumbo kan tilbyde. - Dans fra Tanzania er baggrundsinformation, til at forstå dansen på et 13

18 mere generelt plan. Galleriet indeholder billeder og video fra Ikumbos optræden. - Pressekit falder lidt udenfor det naturlige flow. - Kontakt Navigationen afsluttes naturligt med at man tilbydes at opnå kontakt til Ikumbo. 3. Den æstetiske dimension er knyttet til de mere udefinerlige forhold, der vedrører de emotionelle og nydelsesmæssige effekter, et website bibringer brugeren gennem sin fremtræden og det interaktive samspil, æstetikken ved brugen af et site [Engholm, 2004, s. 61]. Den æstetiske dimension vil blive uddybet i det næste afsnit; Visuel identitet: Grafisk design, billeder. Det er dog værd at nævne, at en udfordring har været at skabe en selvstændig visuel identitet (eller stilart) som brugeren instinktivt kunne genkende, på trods af, at der kun i et lille omfang er hentet inspiration fra allerede eksisterende konventioner indenfor genren. 4. Formen [ ] defineres formen som betinget af både den tekniske konstruktion og de brugsmæssige og æstetiske aspekter. [Engholm, 2004, s. 62]. Vi har bevidst valgt ikke at indarbejde aktive elementer, som f.eks. flash, som et ekstra lag på sitet. Hvad angår selve formen på sitet, er det karakteriseret ved, at der er en del luft. Dette skaber ro. Se figur 3. Navigationen har som udgangspunkt samme baggrundsfarve som en stor del af headeren (sort), for at skabe en sammenhæng mellem toppen og navigationen. Navigationen skifter farve, alt efter hvilken menupunkt brugeren vælger. Denne nye farve skaber så sammenhæng mellem menuen og ned i resten af sitet. Den rundede figur og bunden omkranser derefter det egentlige, teksten og billederne. På denne måde har vi søgt at skabe en form på sitet der skaber sammenhæng og fokus. Figur 3 5. Brugskonteksten Brugskonteksten er [ ]betinget af brugerens anvendelsesmæssige kompetencer, de kulturelle og institutionelle forhold, der præger ens opfattelse af sitet [ ] [Engholm, 2004, s. 62]. Brugskonteksten handler altså om de forhold brugeren befinder sig i. Som nævnt er sitet designet efter følgende tekniske specifikationer: - Sitet skal kunne ses i 800x600 px. - Sitet skal kunne ses i forskellige browsere 14

19 - Sitet skal reelt kunne ses via f.eks. en telefonmodem forbindelse. Disse tre parametre handler også om brugskonteksten. Vi ønskede, at sitet var uafhængigt af brugerens skærmopløsning, og derfor kunne ses på en stor del maskiner. Samtidig er sitet testet i forskellige browsere, hvilket afspejler, at sitet ikke skal stille krav til brug af en bestemt browser. Endelig har vi designet site efter at fylde så få kilobytes som muligt, således at transmission af data kan foregå hurtigt. Samlet er hensigten her, at skabe et site der hurtigt og ubesværet kan ses af på mange forskellige maskiner. Vores forventninger til målgruppens tekniske udstyr afspejler dette. Vi forestiller os, at dele af målgruppen opsøger Ikumbos website i arbejdsrelaterede sammenhænge. I denne situation har de muligvis ikke mulighed for at justere de tekniske specifikationer, f.eks. kan man ikke bare udskifte en skærm, eller installere en ny browser på ens arbejdsplads. 15

20 Visuel identitet Det er vigtigt med et fængende og godt design på et website for at få folk til at blive hængende. Samtidig er det også væsentligt at der er et klart sammenspil mellem afsenderens identitet, i vores tilfælde en livsglad dynamisk dansk/tanzaniansk musik og dansetrup, og websitets udseende og indhold. I udviklingen af lay-out et har vi derfor stilet efter, at få websitet til at symbolisere en følelse af livsglæde og professionalisme. Ikumbo havde inden websitets udvikling ingen trykt visuel identitet der skulle arbejdes videre med, men var i færd med at få udarbejdet et logo. Dog havde de gjort sig nogle forestillinger om deres visuelle identitet, som nævnt i deres kravspecifikation, at de bl.a. ikke ønskede sig et site med mange jordfarver, men hellere noget lyst og lækkert. Ikumbos Logo Grafisk design Udviklingen af det grafiske lay-out er foregået gennem en iterativ designproces med flere udkast til templates der undervejs er blevet testet hos både målgruppe og afsender. Vores design er bygget op ud fra den overbevisning at Graphic design is visuel information management [2001, Lynch & Horton, s. 80]. Med andre ord en form for visuel logik der leder brugerens opmærksomhed hen imod noget. Derfor falder det naturligt at følgende afsnit om grafisk design er bygget op omkring Lynch og Hortons (2001) principper om at skabe en visuel logik. Skitse af website Visuelt hierarki Kontraster er yderst vigtige, når man designer et website. Ifølge Lynch og Horton [2001, s ] ser websitets brugere ved første øjekast sitets former og farver med kontrasterne fra baggrund og forgrundens elementer, herefter danner man sig et lille overblik ved at udplukke lidt information om sitet fra det grafiske og først derefter bevæger brugeren sig over til at læse og fordybe sig i sitets indhold. På Ikumbo websitet har vi prøvet at understrege kontrasten ved at bruge former, farver og grafik som værktøjer til at skabe et visuelt hierarki. Med farverne og de grafiske illustrationer i headeren har vi prøvet at tiltrække brugeren til sitet samtidig med at form-inddelingen af header, footer samt text og billedområdet har skullet fremstå som et hurtigt overskueligt visuelt område. Det luftige design vi gennem hele site-udviklingen har stræbt efter, har vi prioriteret for at skabe ro og overblik for brugeren. Yderligere fremhæver det kontrasterne og giver sitet former. Dette skulle lette koncentrationen for brugeren således at brugeren når deres mål med selve informationssøgningen på sitet. 16

21 Men sådan så sitet ikke ud i de første lay-outs, her var der ingen ramme om informationsfeltet, hvilket gav et langt mere luftigt design. Ved vores første brugertest, Quick n dirty -testen blev informanterne vist to versioner af sitets layout: En brun version med en ramme om informationsfeltet og en rød version uden. Den brune-prototype fik positiv respons særligt for det indrammede indholdsfelt. Informanterne oplevede, at rammen gav sammenhæng og overskuelighed på websitet. Den røde prototype Headeren er ifølge Lynch og Horton [2001] det første brugeren lægger mærke til, når de går ind på sitet og er oftest det mest identitetsskabende element at finde på et website. De første template udkast var helt fri for grafik i headeren og bestod kun af titel og måske en tagline ovenpå en farvet streg. Set i den visuelle oplevelses optik viste dette meget luftige udtryk sig at være for fattigt. Quick n dirty testen afslørede nemlig stor positiv respons ved at have et billede eller lignende i headeren, dog ikke det specifikke billede, der var i den brune prototype. Derimod reagerede de positivt overfor footeren i den røde template prototype, hvor Ikumbos logo var inkorporeret. En parring af de to faldt herefter naturligt og den originale footers grafik blev tilpasset headeren. Vi fandt at Ikumbos nye logo var et velegnet designelement at gå videre med i webdesignet af flere årsager. Logoet i sin helhed står enormt stærkt og illustrerer historien bag Ikumbos danse fra Sukumaland, desuden vil Ikumbo i fremtiden tage logoet til sig som deres visuelle identitet. Derfor mente vi, at elementer fra logoet kunne komme til at stå stærkt på deres site og skabe en visuel kobling mellem deres online og trykte identitet. Resultatet med logoet i headeren på websitet blev en langt mere identitetsskabende header med grafik, der rummer bevægelse og har en afrikansk streg. Sidens længde Vi mente, at det ville give Ikumbos site et stærkt grafisk udtryk, at brugeren hele tiden vil kunne se hele rammen af sitet på deres skærm og ikke ville have brug for at scrolle op eller ned for at kunne danne sig et helhedsindtryk. Dette stemmer overens med sitets formål, om at give et hurtigt og stemningsfuldt indtryk af Ikumbo, hvilket bedst opnås med et kort website [Lynch et al, 2001, s ]. Den brune prototype 17

22 Farver Farver kan ses som en let tilgængelig designressource og i sig selv et semiotisk mode i henhold til Kress og Van Leeuwen [2001]. I vores design med Ikumbos website var farverne, i og med at de skabte kontrast på sitet, med til at lede opmærksomheden hen mod informationsfeltet. Den orange farve ligger som en ramme om sitets mere uddybende felt og suger brugeren ind til en oplevelse af Ikumbos sprudlende livsglæde. I vores første layout var sitets header og tekstfelt holdt i to farver, mens footeren var meget farverig. Footeren skabte med sine mange farver en del uro og krævede for meget opmærksomhed frem for at henlede opmærksomheden på indholdet. Derefter blev det på baggrund af feedback fra Ikumbo besluttet at sitet skulle holdes i få farver for at skabe ro og overskuelighed. Dette valg understøttede også nedtoningen af det meget spraglede look man ofte finder på relaterede sites. Den oprindelige kravspecifikation fra Ikumbo havde lydt på at holde sitet i lyse og lækre farver og væk fra sort, orange og jordfarver. Dette har måske allerede givet anledning til en vis undren for den kvikke læser, der har bemærket de sorte og orange farver i det endelige udkast. Det viste sig efter vi havde præsenteret opdragsgiverne for det første udkast, at deres farveønsker ikke stemte helt overens med deres oprindelige kravspecifikation. Der lød nu flere bud på mulige farver, såsom farverne fra det tanzanianske flag og jordfarver. Farver, der er stærkt repræsenteret på andre sites, der har med Afrika at gøre og som sådan lever op til den genre, som Ikumbo ellers gerne vil tage afstand fra. Vi har forholdt os til deres modstridende udsagn og læner os op af, at Ikumbo giver udtryk for at ville adskille sig fra de stilarter, der allerede findes. Nogle senere template-prototyper vi benyttede i Quick n dirty testen, fik fra brugerne ikke nogen enstemmig positiv respons. Se illustrationerne på forrige side. Jeg synes egentlig at de varme solfarver, ligesom i den røde, er gode, der må godt være noget mere pang. Den her er ligesom lidt for typisk afrikansk var et af svarene til den brune version, mens informanterne samtidig mente at den røde version var for barnlig og havde en for dominerende farve. Den første website Vi stod nu tilbage og skulle finde en varm farve, der ikke er for afrikansk og som udtrykker livsglæde, vores bud fra farvepaletten blev orange sammen med sort og hvid. Farvekombinationen blev valgt på baggrund af flere årsager blandt andet skaber de ro, varme og har en sammenhæng med farverne i billederne. Den præcise 18

23 tone af den orange farve blev udvundet fra et beklædningsstykke, der blev båret af danserne fra Ikumbo på et af billederne på sitet. Hvilket skabte en sammenhæng og ro i sitets helhed. Ydermere er de endelige farver på sitet meget kontrastfulde og understøtter det visuelle hierarki. Således undgik vi de varme jordfarver men fandt en farvekombination, der favner bredere i stil og genre. Farverne er også kendt fra skandinavisk retrostil, men ligger sig stadig ikke for langt fra konventionen af afrikanske farver. Dette gør, at brugeren let kan identificere sitet som et afrikansk site. Website farvepalet 19

24 Billeder Der er en lige vægt mellem billeder og tekst i sitets informationsfelt. Hver især fortæller de deres historie om Ikumbo. Billederne skal kunne stå alene og understrege sitets budskab - altså give denne følelse af livsglæde og professionalisme. For at undgå skuffede kunder, når Ikumbo mødte op til en optræden med en masse lyse piger i farvede kangaer, var det vigtigt for opdragsgiveren, at billederne på sitet gav et realistisk indblik i Ikumbos medlemssammensætning. Dette har vi forsøgt at tage højde for i billedbrugen. Før bearbejdning Vi havde et ønske om et rigt narrativt billedmateriale, der fanger Ikumbos multiple dansearters bevægelse, glæde, sensualitet. Desværre var Ikumbos eksisterende billedmateriale ikke taget med henblik på kommercielt brug og derfor lidt fattige i komposition og kvalitet. Dette gjorde det svært at beskære dem uden at billederne ville blive alt for pixellerede, dog gjorde vi et forsøg på at beskære billederne så der kom mere fokus på dansen og personerne. Ydermere havde flere af billederne nogle meget dominerende baggrunde, såsom røde murstensvægge. For at rette brugerens fokus på dansen og dynamikken gjorde vi billedernes baggrunde sort/hvid. Billedmanipulationen fik billederne til at se mere professionelle ud, og gjorde at motiv og udtryk kom til at stå tydeligere frem. Dog kunne vi stadig ønske os en yderligere beskæring af billederne. En beskæring, der går meget tættere på detaljen såsom en hofte eller en svingende halskæde. Dette tror vi kunne skabe en større dynamik og bevægelse i billederne. Som det fremgår af vores designproces er de visuelle elementer valgt på baggrund af grundige overvejelser og med fokus på enkelhed og originalitet. Dette er med til at danne en stærk visuel identitet for Ikumbo. Efter bearbejdning 20

25 Informationsarkitektur Vi regner med at brugere af Ikumbos website er utålmodige; i brugsssituationen har de sandsynligvis søgt på nettet efter danseshows eller lignende og har flere hits som de sammenligner [Nielsen, 2001, s.112]. Derfor er websitet heller ikke informationstungt, fordi brugeren hurtigt skal skimme sig frem til, hvad sitet går ud på. Dette har været udgangspunktet for den måde, vi har designet sitets informationsarkitektur på. Organisering af indhold Ud fra kravsspecifikationen og ideer vi fik fra research på lignende sites, definerede vi, hvilket indhold, der skulle være på sitet: Kort info om foreningen Foreningens historie Oversigt over medlemmer Beskrivelse af shows Beskrivelse af workshops Pressemateriale Info om tanzaniansk dans Fotomateriale Videomateriale Kontaktinfo Tip en ven funktion Links til relevante websites 21

26 Brugerens advokat Ovenstående indhold fremstår som én stor rodebunke, fordi det ikke er kategoriseret i over- og underkategorier. For at kategorisere sitets indhold har vi i gruppen haft en funktion, vi kalder brugerens advokat. Denne funktion går ud på at identificere og inddrage brugernes behov i alle valg omkring informationsarkitekturen. Ud fra scenarier har advokaten opstillet en række spørgsmål som brugeren hurtigt vil have svar på, når han/hun entrerer sitet. De mest centrale er listet nedenfor [for alle spørgsmål og scenarier, se bilag B] 1. Hvilken side er jeg kommet ind på? 2. Hvem er Ikumbo? 3. Hvor finder jeg ud af, hvad Ikumbo tilbyder? 4. Hvordan kan jeg komme i kontakt med dem? 5. Hvor meget koster et show? Ud fra spørgsmålene udarbejdede vi guidelines for, hvordan indholdet skulle prioriteres [Rosenfeld et al, 2002, s. 42]. Vi skrev desuden alle indholdspunkterne op på lapper. Disse lapper flyttede vi rundt med indtil vi fandt frem til den mest brugervenlige informationsstruktur [Appel et al 2001, s. 32]. På den måde fik vi ordnet indholdet i følgende overordnede kategorier af information: Kort info om foreningen Ikumbo herunder foreningens historie og oversigt over medlemmer. Info om Tanzaniansk dans. Beskrivelse af shows og workshops bemærk at shows og workshops er slået sammen til én side. Foto og videomateriale - bemærk at foto og video er samlet under ét menupunkt Pressemateriale. Kontaktinfo. Kategorisering Nogle af de først listede indholdskategorier har overlevet som overordnede kategorier, mens andre logisk kunne samles under en af disse. Tip en ven funktionen og links er slet ikke at finde under en overkategori. Vi vurderede at disse to punkter ikke logisk kunne passe under nogle af kategorierne og derfor måtte stå lidt for sig selv. Samtidig er 22

27 de ikke essentielle i forhold til at besvare brugerens vigtigste spørgsmål. De kan nærmere betegnes som en form for supplerende markedsføring. Derfor har vi valgt, at disse to skulle adskilles tydeligt fra sitets hovedindhold for ikke at forvirre brugeren. Dette leder videre til en overordnet gennemgang af sitets struktur, eller organiseringssystem [Rosenfeld et al, 2002, s. 46]. Sitets organisering Overordnet er sitet organiseret så brugeren hurtigst muligt fra forsiden kan orientere sig om, hvad sitet handler om, hvordan det er organiseret og hvordan man finder rundt [Appel et al, 2001, s. 29]. Overordnede sektioner Som det fremgår af eksemplet, og som nævnt i afsnittet grafisk design, er sitet delt op i tre overordnede sektioner: 1. Den øverste bjælke (headeren) fungerer som sitets logo og identificerer sitet som et afrikansk dansesite. Det er med til at fortælle brugeren, hvilket site han/hun befinder sig på lige meget, hvilken underside de har klikket sig frem til [Rosenfeld et al 2002, s. 42]. 2. Nedenunder er der en menubjælke, eller klump, der udgør et overblik over sitets indhold, altså hvad brugeren kan forvente at finde af information på sitet. Det er altså som udgangspunkt her brugeren kan navigere rundt mellem forskelligt indhold på sitet. 3. I midten af sitet (og brugerens synsfelt) er selve indholdet samlet for den pågældende side brugeren har klikket sig ind på. Det er delt op i et tekstfelt til venstre og et billedfelt til højre. Indholdet er indrammet så brugeren let kan genkende, at her findes specifik information. De førnævnte tip en ven og links er placeret nederst i sitets footer for at markere at de ikke er centrale, men snarere supplerende muligheder for brugeren. På den måde er det tydeligt, at de adskiller sig fra hovedkategorierne i menuen. Konsistens Det har været vigtigt for os at sitets opbygning er konsistent. Derfor er der 23

28 defineret faste områder på sitet til hvert element/sektion, dvs. et fast menu-, billed- og tekstområde. Denne genkendelige opbygning går igen på næsten alle sitets sider og betyder at brugeren ikke behøver bruge energi på at lede efter f.eks. indholdstekst, eller blive forvirret over billeder som skifter plads fra underside til underside. Når undersider afviger fra den overordnede opbygning er det kun i indholdsfeltet, hvor f.eks. foto og videogalleriet krævede en anderledes opsætning end de andre undersider. Men dette forventer brugeren sandsynligvis også, når de klikker sig ind på et menupunkt med titlen fotogalleri. Etiketter Dette leder videre til vores måde at give kategorierne etiketter, der tydeligt skal kunne fortælle brugeren hvilken information han/hun kan forvente at finde her [Rosenfeld et al, 2002, s ]. Med den utålmodige bruger i tankerne har vi prioriteret direkte og informative etiketter, der meningsfuldt guider brugeren i forhold til hans/hendes spørgsmål [Nielsen, 2001, s ]. Fx.: Hvem er Ikumbo? Her giver vi et direkte svar i menutitlen: Om Ikumbo. Brugeren er dermed ikke i tvivl om hvor han/hun finder information om, hvem Ikumbo er. Man kan måske diskutere om ikke etiketterne kunne være mere sprælske og vittige, men i første omgang har vi altså sat brugervenligheden øverst. Navigation Vi har overordnet valgt en flad struktur for websitet, se bilag I. Der er kun to niveauer og vi risikerer dermed ikke at brugeren får følelsen af at fare vild på sitet [Appel et al 2001, s. 30]. Dette har vi gjort, fordi vores brugere er utålmodige og hurtigt skal få et overblik over, hvilke informationer der er at finde på sitet. Vores menu har derfor 6 punkter, hvilket holder sig indenfor de 5-9 stykker, som en bruger kan kapere uden at miste overblikket [Appel et al, 2001, s. 30]. På den måde skal brugeren ikke klikke sig ind i en masse undermenuer for at finde en given information. Sitet er, som nævnt, ikke informationstungt og derfor er en flad struktur mulig. Samtidig kan man også sige, at en dyb struktur ikke ville give megen mening med så lidt information på sitet. 24

29 Menu Den primære navigation foregår fra emneområder i den statiske sorte menu i toppen. Kun nogle af menupunkterne har undersider. Disse kommer frem i den orange linje nedenunder, når brugeren klikker på et menupunkt. For at brugeren let kan se, hvor han/hun befinder sig på sitet, bliver menupunktets baggrund orange, både når curseren går over det, og når man står på det. Links fra undersider En anden måde for brugeren at navigere er gennem links fra underside til underside. Vi tilbyder på den måde brugeren relateret viden, der hvor det er relevant for den side, de er på [Jensen 2001, s. 66]. Fx.: Fra siden Om Ikumbo linker vi til siden Shows og Workshops, fordi vi regner med at brugeren, der først går ind og læser generelt om gruppen også gerne vil læse om, hvad Ikumbo tilbyder. Dette hjælper brugeren til at finde relateret information direkte fra den side de står på i stedet for at skulle op i menuen og finde det. Dermed har vi forsøgt at gøre det muligt for brugeren at nå information på flere måder end bare fra topmenuen [Appel et al 2001, s. 39]. Andre navigationsformer Vi har som udgangspunkt fravalgt sitemap, index og søgefunktion, fordi vi ikke mente at brugeren ville have svært ved at overskue et så enkelt og informationslet site. Ved nærmere eftertanke ville det dog være en god idé at lave en søgefunktion, fordi mange brugere instinktivt bruger søgefunktionen i stedet for at lede efter information gennem menuen. Det er også en fordel for brugere, der kender sitet i forvejen og kun søger en specifik information, f.eks. om priser. Det ville så være en fordel, at han/hun kunne skrive priser i søgefeltet og komme direkte til destinationen, der for øvrigt fortæller, at Ikumbo ikke har faste priser, men at man skal tage kontakt til gruppen for at få en pris. Derudover ville det være en fordel også at lave en krummesti, der fortæller brugeren noget om sin vej på sitet og hvordan han/hun kom derhen, hvor han/hun befinder sig nu [Appel et al, 2001, s. 31]. Fravalg af scroll Af hensyn til brugervenligheden har vi valgt, at man ikke skal kunne scrolle 25

30 på sitet [Nielsen, 2001, s ). Det har også betydet, at vi har måttet holde sitets tekster på et minimum. Dette ser vi dog kun som en fordel, da brugeren ikke kommer for at læse en roman, men for at få et hurtigt indtryk af Ikumbo [Krug, 2006, s. 22]. Sitets medlems- og fotogalleri indeholder mere information end de resterende sider og kan ikke holdes indenfor de samme stramme rammer. For at undgå scroll på disse undersider er der derfor en pil, der leder videre til næste side. Dette pilesymbol skal dog understøttes med en meningsfuld tekst, såsom flere billeder eller videre [Jensen et al, 2001 s. 66]. 26

31 Skriftlig formidling Overordnet set kan vores site karakteriseres som et informationssøgningssite. Brugere kommer til sitet for at få et indtryk af hvem Ikumbo er, hvad de kan tilbyde og hvordan man kan opnå kontakt med dem. Teksten er på denne måde vigtig (sammen med billedmaterialet), da den klart skal kunne formidle disse informationer. Men samtidig har vi været bevidste om, hvor væsentligt det er at skive korte og præcise tekster. Dette bl.a. fordi: One of the very few well-documented facts about web use is that people tend to spend very little time reading most web pages. Instead, we scan (or skim) them, looking for words or phrases that catch our eye [Krug, 2006, s. 22]. Figur 4 Figur 5 Hovedpointe/ konklusion Baggrund Detaljer Hovedpointe/ konklusion Baggrund Detaljer I forbindelse med formuleringen af overskrifterne lagde vi vægt på, at de skulle være korte og beskrivende. Dette valg hænger godt sammen med udgangspunktet at vores site er et informationssøgningssite Dog er vi ikke helt tilfredse med selve formuleringen af overskrifterne, da vi føler, at der mangler en informativ dybde, f.eks. kunne overskriften Shows & workshops være mere sigende. Se i øvrigt afsnittet Informationsarkitektur for en yderligere uddybning af principperne bag opbygningen af overskrifterne. Da vi er bevidste om, at internettekst kun skimmes, har vi valgt at dele de enkelte tekster op i små, korte afsnit, der tydeligt er adskilt af tomme linier, se figur 4. På Internettet bør tekster, der indeholder flere pointer, være delt op i et tilsvarende antal korte tekster snarere end at stå som én lang tekst [Jensen et al, 2001, s. 64]. Vi har søgt at formulere de enkelte afsnit ud fra den omvendte nyhedstrekant [Jensen et al, 2001, s. 63], gentaget for hvert afsnit, se figur 5. Som eksempel på hvordan teksten generelt er opbygget, vil vi gennemgå følgende tekst fra sitet: I vores workshops kan alle kan være med, for niveauet fastsættes efter deltagernes behov og ønsker. Et show med en workshop er derfor perfekt til idrætsdage, polterabender og rusture, hvor vi garanterer en festlig stemning og et godt grin [Fra siden Shows og workshops ] 27

32 Afsnittet starter med at understrege at alle kan være med, hvilket er den overordnede pointe. Derefter udbygges pointen med at man vil sammensætte showet efter deltagernes behov og ønsker, derved bekræftes pointen, med hvordan Ikumbo operationelt vil praktisere hovedpointen. Endelig afsluttes afsnittet med at Ikumbos workshop derfor passer til en række forskellige arrangementer. På denne måde er teksten disponeret i tre lag, hvor det for den skimmende læser er nok, at læse den første linje. Det bemærkes samtidig, at afsnittet er skrevet i en mundret, direkte tone, der har til hensigt at være på øjenhøjde med modtageren. Samtidig er teksterne skrevet ud fra princippet om den åbne start [Jensen et al, 2001, s. 68], hvilket betyder, at samtlige tekster direkte kan læses, uden at man har læst andre tekstdele tidligere. Dette er hensigtsmæssigt, da teksterne skal kunne læses ud af kontekst, hvis f.eks. brugeren kommer fra en søgemaskine, eller ikke følger en bestemt rækkefølge. 28

33 Tekniske specifikationer Overvejelser i forbindelse med sitet Sitet er opbygget ved brug af XHTML og CSS. Den primære tanke er, at selve stylingen (dvs. placering af elementer, valg af farver, skriftstørrelser, etc.) af sitet foregår via CSS. På denne måde vil en ændring i stylesheetet ændre hele sitet samtidig. Dette letter opdatering og vedligeholdelse. Vores stylesheet, style.css er kodet således, at man ser det i den rækkefølge, som browseren fortolker oplysningerne. Dermed er der indbygget en kronologisk rækkefølge, der øger overskueligheden. Samtidig har vi udarbejdet en template, som alle sider er lavet på baggrund af. Dette valg afspejler ligeledes, at det letter vedligeholdelsen af sitet. En ændring i templaten vil således ændre alle sider lavet på baggrund af templaten. Templaten er opbygget således, at den består af editable regions, og man derved ikke kommer til at ændre i kode der er væsentlig for sitet. Valg omkring brug af CSS og template afspejler to beslutninger: 1. Teknisk set er det en elegant løsning, da den er enkel og overskuelig, samtidig med, at vi minimerer risikoen for fejl (brugte vi f.eks. ikke CSS skulle man manuelt rette på hver enkelt side, og dermed kan der opstå fejl.) 2. Ikumbo kommer selv til at varetage vedligeholdelsen af sitet, og vi ønskede at gøre denne vedligeholdelse så minimal og så ukompliceret som muligt. 29

34 Den overordnede opbygning af sitet Sitets overordnede opbygning fremgår af figur 6. Som det ses er hele sitet indrammet af en DIV tag, der hedder Container. På billedet er den aftegnet større, end den er, for at illustrere, at hele sitet ligger indenfor dens rammer. Figur 6 I toppen er headeren, efterfulgt af navigationen, der består af menu, og en orange linje reserveret til undermenu. Denne bliver benyttet på to sider, Om ikumbo og Galleri. Dernæst kommer Slideren, der er den orange buede grafik yderst til venstre. Slideren består udelukkende af et billede. Interessant er her, at vi i style.css blev nødt til at tilføje kommandoen: FLOAT: left;. Fjerner man kommandoen skubber slideren til Contentcontaineren og derved bliver opbygningen af sitet forstyrret. Contentcontaineren er vores tekstområde, hvor overskrifter samt brødtekst er. Til venstre for contentcontaineren kommer det billedmateriale, der knytter sig til den aktuelle side. Billedmaterialet er bevidst lagt udenfor contentcontaineren, da den ellers ville blive skubbet under contentcontaineren, der i øvrigt ligesom slideren bliver floatet (vha. kommandoen: FLOAT: right;). Grunden til at vi har brugt float til at positionere dels slideren, og dels billedmaterialet er, at vi på denne måde kunne tage højde for fremtidigt billedmateriale, der ikke har samme størrelse, som det billedmateriale sitet er lavet på baggrund af. Endelig bliver sitet afsluttet af footeren i bunden, der også er defineret som et område for sig selv. Eksempel på samspillet mellem XHTML og CSS Som eksempel på hvordan XHTML og CSS samarbejder, gennemgår vi efterfølgende kildekoden for placeringen af billederne (dvs. dem til højre for contentcontaineren). På sitet har vi to størrelser af billeder. Store billeder: bredde på 190px. højde på 360px. Små billeder: bredde på 190px. 30

35 højde på 181px. Vi ønskede at billederne blev placeret pænt iforhold til de orange streger ovenfor og nedenunder på billederne, samtidig med, at der var luft mellem billederne og stregerne. Den måde, vi løste dette på, var ved at oprette to class attributter i style.css. elementer. Et for de store billeder, og et for de små. I figuren nedenfor ses den del af XHTML koden, hvor et stort billede til galleriet er indsat. Begge typer billeder ligger, som nævnt, udenfor DIV tags, og benytter begge Class elementet. Vi lavede to forskellige class elementer, for at kunne ændre marginen, afhængigt af, om det var et stort eller lille billede. CSS til de store billeder: img.floatrightclear { } FLOAT: right; MARGIN-TOP: 10px; CSS til de små billeder: img.floatrightclearsmall { } FLOAT: right; MARGIN-TOP: 6px; Som det fremgår, er den eneste forskel, hvor stor Margin-top er sat til. Efterfølgende var den eneste ændring i XHTML enkoden, om billederne skulle 31

36 have den ene eller den anden class. Eftersom resten af sitet i et stort omfang er opbygget via DIV tags, er det på sin plads, at redegøre for hvorfor vi her valgte at arbejde med classes. Begrundelsen er ganske enkelt, at det virkede. Vi startede med at sætte billederne op via en DIV tag, men det betød, at de flyttede sig vertikalt i forhold til undermenuen og footeren. Se illustrationen. Figur 7 32

37 Metode

38 Metode I projektforløbet har vi fundet det hensigtsmæssigt at anvende følgende overordnede metoder for at udarbejde Ikumbos website: 1. Etablering af gruppens samarbejdsmetoder [se bilag A] 2. Webresearch 3. Konceptudvikling 4. Tests Webresearch Vi har overordnet brugt research på nettet til at undersøge, hvilke stilarter der er indenfor webgenren afrikansk dans. Derudover har vi brugt det til at søge inspiration til sitets grafiske udformning. I startfasen stillede vi os selv forskellige reseachopgaver. Det var f.eks. at finde ud af, hvordan vi ville positionere os i forhold til eksisterende dansesites, og hvordan andre webdesignere har løst udfordringer i forhold til sideopsætning, billedbrug og logo. Ud fra vores webresearch kunne vi derudover få en fornemmelse for gruppens forskellige æstetiske præferencer og udarbejde et fælles grundlag at arbejde videre med. Konceptudvikling Til udvikling af websitets grafiske design afsatte vi en hel dag til en konceptudviklings-workshop på ITU. Formålet med denne workshop var, at forsøge at finde ind i et kreativt flow sammen og finde frem til helt nye ideer ved at fordybe os i en række konceptudviklingsopgaver. Disse opgaver bestod overordnet i at lave en masse skitser og mock-ups i papir for at indkredse, hvordan man visuelt kunne omsætte Ikumbos identitet og værdier til et visuelt materiale. Vi lave blandt andet skitser der skulle illustrere vores fortolkning af livsglæde og afrikansk kultur. Workshoppen viste sig at være værdifuld, fordi det har fungeret som en slags idékatalog, som vi senere har brugt i udviklingen af websitets visuelle profil. [Se bilag G for en mere detaljeret skitsering af forløbet]. 34