Ikumbo - en ny webidentitet

Størrelse: px
Starte visningen fra side:

Download "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

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15 DESIGNPROCES Indledende møde med

Læs mere

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl. Indledning Mit sidste projekt her på 1.semester gik ud på at jeg skulle lave et redesign af mit første portfolio, som jeg lavede i starten af semesteret. Formålet var at vise hvad jeg havde lært siden

Læs mere

1 Robbins, Jennifer N.: Learning Web Design, s. 41

1 Robbins, Jennifer N.: Learning Web Design, s. 41 I designarbejdet forbundet med at udvikle en hjemmeside, er det vigtigt at gøre sig nogle overvejelser over hvilken optimale skærmstørrelse man designer til, da dette har konsekvens for den efterfølgende

Læs mere

Grundforløbsprøve Projektbeskrivelse

Grundforløbsprøve Projektbeskrivelse Grundforløbsprøve Projektbeskrivelse Webintegrator Thomas á Rógvi 221191-2505 Indholdsfortegnelse Opgaven... 3 Tidsplan... 4 Målgruppe... 5 Layout... 6 Design... 7 Fonte... 7 Browser... 7 Bilag... 8 Det

Læs mere

Portfolioudvikling. Line la Fontaine. Multimediedesigner

Portfolioudvikling. Line la Fontaine. Multimediedesigner Portfolioudvikling Line la Fontaine Multimediedesigner Indholdsfortegnelse - Designvalg s. 1-9 - Målgruppe s. 1 - Wireframes/skitser s. 1-5 - Informationsarkitektur s. 6-7 - Farver s. 8 - Typografi s.

Læs mere

Delaflevering: Webdesign og webkommunikation. Organisation: Københavns Erhvervsakademi. Af Silke Brewster Rosendahl (hold 1) og Marie Anne Svendsen

Delaflevering: Webdesign og webkommunikation. Organisation: Københavns Erhvervsakademi. Af Silke Brewster Rosendahl (hold 1) og Marie Anne Svendsen Delaflevering: Webdesign og webkommunikation Af Silke Brewster Rosendahl (hold 1) og Marie Anne Svendsen Vi har valgt at lave et redesign af KEA s online videnscenter/bibliotek. Organisation: Københavns

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

Portfolio redesign. Kia Dahlen! cph-kd51@cphbusiness.dk! 1. semester eksamen! MUL-A 2013! !!! www.mul17.itkn.dk/portfolio/index.html!

Portfolio redesign. Kia Dahlen! cph-kd51@cphbusiness.dk! 1. semester eksamen! MUL-A 2013! !!! www.mul17.itkn.dk/portfolio/index.html! Portfolio redesign Kia Dahlen cph-kd51@cphbusiness.dk 1. semester eksamen MUL-A 2013 www.mul17.itkn.dk/portfolio/index.html Underviserer: Ditlev Skanderby Frederik Tang Ian Wisler-Poulsen Jesper Hinchely

Læs mere

Grafisk design. Ide. Designprocess. Målgruppe

Grafisk design. Ide. Designprocess. Målgruppe Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk.

Læs mere

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er

Læs mere

Personlig branding i webdesign

Personlig branding i webdesign Personlig branding i webdesign I forhold til vejledning vil jeg spørge, om opgaven i sin helhed ser fornuftig ud. Er min problemformulering skarp nok? Er min metode i orden? Er det ok at gøre brug af min

Læs mere

Dynamisk Webdesign. Stefan Grage

Dynamisk Webdesign. Stefan Grage Dynamisk Webdesign Stefan Grage Brugen af web Hvilke sites besøger i oftest? Og hvorfor? Snak med sidemanden i 3 min. Kategorisering Utility sites Sociale sites Webshops Indholdstunge sites Utilities Google

Læs mere

Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum

Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum Hjemmeside redesign af Dansk Jagt- og Skovbrugsmuseum Usability dokumentation Lavet af Sarina, Maria og René MulB-13 22.11.2013 I forbindelse med ekspertvurderingstests udarbejdes som hovedregel altid

Læs mere

Grafisk Design 70% Skitser

Grafisk Design 70% Skitser Grafisk design Grafisk 2 PRODUKT Som et led i den online markedsføring af BBQ Wing it, har jeg valgt at lave et website, med fokus på information. Det er et website, der er baseret ud fra lærte funktioner

Læs mere

Afsluttende opgave 2009 Kommunikation/IT

Afsluttende opgave 2009 Kommunikation/IT Afsluttende opgave 2009 Kommunikation/IT Tema: Kulløse Miljømesse Rapport af: Jacob Almann Tinnesen, Oliver Mørk og Oscar Helmersen Roskilde Tekniske Gymnasium Klasse 1.1 Afleveret: 24-04-2009 Side 1 af

Læs mere

WBS. Inledning. Afsluttende projekt 1. sem

WBS. Inledning. Afsluttende projekt 1. sem MARK KRISTENSEN.DK Afsluttende projekt 1. sem Inledning I denne rapport kan du læse om den udviklingsproces, der ligger til grund for min nye portfolio, de metoder jeg har brugt, mine designvalg og designprincipper.

Læs mere

kollegiekokkenet.tmpdesign.dk Side 1

kollegiekokkenet.tmpdesign.dk Side 1 kollegiekokkenet.tmpdesign.dk Side 1 Indholdsfortegnelse Forord 3 Problemformulering 4 Udviklingsmetode 5 Tidsplan 6 Målgruppe 7 Design brief 8 Logo 10 Typografi og farve 11 Navigationsdiagram 12 Usecase

Læs mere

Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN

Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN Hassansalem.dk/delpin User: admin Pass: admin INTERFACE DESIGN 1/20 Indledning Dette projekt er den afsluttende del af webudvikling-studiet på Erhvervs Lillebælt 1. semester. Projektet er udarbejdet med

Læs mere

GRAFISK DESIGN SVENDEPRØVE 2013. Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

GRAFISK DESIGN SVENDEPRØVE 2013. Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5 NAVN PÅ OPGAVEN KERNEOMRÅDE SVENDEPRØVE 2013 Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5 Beskrivelse af opgaven I min fritid modtog jeg en opgave, som bestod i, at redesigne og kode et

Læs mere

Relevant skærmdump fra det evaluerede materiale indsættes her BRUGERTESTANALYSE M. 5 TESTBRUGERE

Relevant skærmdump fra det evaluerede materiale indsættes her BRUGERTESTANALYSE M. 5 TESTBRUGERE 1 Relevant skærmdump fra det evaluerede materiale indsættes her BRUGERTESTANALYSE M. 5 TESTBRUGERE 2 Alle testpersonerne giver udtryk for at sitet er forholdsvis nemt at anvende til at finde den information

Læs mere

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen. http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/ Produkt Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen.

Læs mere

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2. GRAFISK PRODUKTION OG WORK- FLOW CSS Wrapper paragraph h1 h2 DREAMWEAVER CS5 Class Tags Kodning Design a.link, a.hover, a.visited HTML Kundekontakt Komposition og modulopbygning Skelet Pixels Layout Usabillity

Læs mere

Produkt. Index side GRAFISK DESIGN

Produkt. Index side GRAFISK DESIGN Grafisk design Produkt Index side Produkt Underside - kontakt Redegørelse OPGAVEN I forbindelse med valgfag, som jeg tog i København, havde vi lært forskellige nye funktioner, som vi skulle implementere

Læs mere

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT PROJEKTET Udarbejdelse og idéudvikling af en fiktiv grafisk identitet til Puls Fitness. I denne kernefaglighed fremhæver jeg designet til websitet samt lidt merchandise. Derudover ses et udkast til bl.a.

Læs mere

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN. Grafisk design Grafisk design Opgaven Jeg har fået til opgave at re-designe Sells.dk. Sitet skal benytte elementer fra en kampagne, der tidligere er

Læs mere

Kend dine brugere. Om brugertest. 2 sem., feb. 2010 Multimediedesigner, København nord

Kend dine brugere. Om brugertest. 2 sem., feb. 2010 Multimediedesigner, København nord Kend dine brugere Om brugertest 2 sem., feb. 2010 Multimediedesigner, København nord Andreas Frandsen, Ninette Nielsen Agnete Gnistrup, Senia Lundberg Side 1 af 7 Indholdsfortegnelse Indledning s. 2 Valg

Læs mere

Dokumentation. Efter dokumentationsdelen findes der en stilguide, hvor der argumenteres for de endelige valg i forhold til udseendet.

Dokumentation. Efter dokumentationsdelen findes der en stilguide, hvor der argumenteres for de endelige valg i forhold til udseendet. Dokumentation På de følgende sider findes dokumentation for arbejdsforløbet under portefolioprojektet. Dette består primært af forskellige illustrationer af brainstorm, overvejelser vedrørende informationsarkitektur

Læs mere

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S. www.his2rie.dk Kunde Bogforlaget Frydenlund A/S Produkt www.his2rie.dk Opgave Hjemmesiden før Redesign af hjemmesiden www.his2rie.dk, som ejes af forlaget. Min opgave lød på, at udforme et nyt design til hjemmesiden,

Læs mere

srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008

srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008 Gruppe 9: Besir Redzepi, Jacob Pedersen, Garwun Jeffrey Lai og Sean Rørgren srum Fritidsaktiviteter 04-12-2008: 1. Semester. Multimediedesigner Projektstart: 17/11-2008 Aflevering: 4/12-2008 Indholdsfortegenelse

Læs mere

Skærmlayout på websiden

Skærmlayout på websiden Skærmlayout på websiden Af Kaj Søndergaard En bog i et flot layout er dejlig at få i hånden. Man får lyst til at bladre i bogen for at finde ud af om indholdet ser ud til at være værd at ofre tid på. Hvis

Læs mere

Poster design. Meningen med en poster

Poster design. Meningen med en poster Poster design At præsentere et naturvidenskabelig emne er ikke altid lige nemt. Derfor bruges ofte plakater, såkaldte posters, til at fremvise forskning på fx messer eller konferencer. Her kan du finde

Læs mere

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E.

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E. Portfolie Redesign www.gaardbodesign.dk Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013 Jens Jákup E. Gaardbo indholdsfortegnelse design... gestaltlove... opbygning...

Læs mere

det færdige resultat

det færdige resultat grafisk design Under dette fagområde har jeg valgt at præsentere jer for en opgave, jeg har udarbejdet for virksomheden Breinholt. Breinholt er en nyopstartet virksomhed i Odense, der tilbyder spirituel

Læs mere

8 tips og tricks der sender din webshop i superligaen

8 tips og tricks der sender din webshop i superligaen 8 tips og tricks der sender din webshop i superligaen Indhold Intro Kend dine besøgende Gør valget simpelt og vind kunder Sådan får du en optimeret kategoriside Eksempler på to gode kategorisider Brug

Læs mere

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg Opgaven Der skal designes en hjemmeside til en pensioneret revisor, som ønsker at starte en fritids beskæftigelse op, som privat revisor. Han Ønsker en hjemmeside der skal kort fortælle om hans forretning.

Læs mere

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet GRAFISK DESIGN Diner no. 34 Hjemmeside + Visuel identitet Diner no. 34 9 Opgavebeskrivelse Fiktive opgave. Redesign af visuel identitet og design af ny hjemmeside. Materialet skal skabe et genkendeligt

Læs mere

Headeren er for stor når man kommer ind på siden. Det virker irriterende at man skal scrolle for at få indholdet vist.

Headeren er for stor når man kommer ind på siden. Det virker irriterende at man skal scrolle for at få indholdet vist. Ekspertvurdering Antal af eksperter: 1 Tid brugt til evaluere website: 2 timer. Konklusion: Da jeg gennemgik sitet for fejl, mangler og problemer fandt jeg hurtigt ud af, at det største issue var tekst,

Læs mere

LOGOOPLÆG. Folkekirkens Hus I Torsdag den 12. marts

LOGOOPLÆG. Folkekirkens Hus I Torsdag den 12. marts LOGOOPLÆG Folkekirkens Hus I Torsdag den 12. marts 02 Mindmap MINDMAP UD FRA MØDE OG BRIEFING FRA FOLKEKIRKENS HUS DEN DANSKE FOLKEKIRKE Kirkeligt offentligt sted Tro = Kristendom Treenigheden: Jesus,

Læs mere

REDESIGN AF PORTFOLIO 16. jan. 2015

REDESIGN AF PORTFOLIO 16. jan. 2015 REDESIGN AF PORTFOLIO 16. jan. 2015 Christoffer Møller Jarolics CPH Business Lyngby Multimediedesign Udviklingsprocessen af tilblivelsen af dette projekt redesign af portfolio, vil på de følgende sider

Læs mere

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS4, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

4. DEC 5. DEC 8. DEC 2014

4. DEC 5. DEC 8. DEC 2014 1. DEC I dag fik jeg opgavebeskrivelsen og fik et overblik over, hvad der skal laves, ved at gennemgå opgavebeskrivelsen, samt lave en brainstorm og PBS. Jeg er i gang med at finde et alternativ til programmet

Læs mere

Opstart. I gang med Dreamweaver. Læs mere om...

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS5, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2 GRAFISK WORKFLOW Kasper Staal - Portfolio - H2 Opgaven Denne opgave bestod i at design et website til min egen virksomed 3DService.dk. Websitet skulle være responsivt, og indeholde de mest gængse informationer

Læs mere

Van, Olaf, Stine & Nicolette Style and Experience 02-12-2011

Van, Olaf, Stine & Nicolette Style and Experience 02-12-2011 Vi mener, at vi imødekommer brugergruppens behov og ønsker, da vi har skabt et nyt og anderledes design. Vores målgruppe stræber konstant efter nytænkning og søger events de kan deltage i med deres venner.

Læs mere

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

Portfolio Redesign Kamilla Klein 1. Semester eksamen

Portfolio Redesign Kamilla Klein 1. Semester eksamen 2014 Portfolio Redesign Kamilla Klein 1. Semester eksamen Lærene: Ditlev Skanderby Frederik Tang Ian Wisler- Poulsen Jesper Hinchely Merete Geidemann Lützen Morten Rold Thomas Hartmann Erhvervsakademiet

Læs mere

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

Re-design af Bøssehusets hjemmeside Webdesign og webkommunikation, F2012 Iben Kold Thomsen (hold 1) & Morten Mechlenborg Nørulf (hold 2)

Re-design af Bøssehusets hjemmeside Webdesign og webkommunikation, F2012 Iben Kold Thomsen (hold 1) & Morten Mechlenborg Nørulf (hold 2) Introduktion Vores eksamensprojekt er et re-design af Bøssehusets hjemmeside. Bøssehusets er et kulturhus for bøsser, lesbiske og transseksuelle personer beliggende på Christiania. Huset skaber rammerne

Læs mere

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk

foto // billeder fra hjemmesiden Websiden // feriebolig-i-toscana.dk GRAFISK DESIGn Webdesign Min chef ville gerne have lavet en webside til firmaets udlejningshus i Italien. Huset på 200 m² er et traditionelt toskansk landhus i tre etager og ligger i gåafstand fra middelalderlandsbyen

Læs mere

# Redesign af copenhagenskatepark.dk

# Redesign af copenhagenskatepark.dk # 1 Grafisk Design # Redesign af copenhagenskatepark.dk Opgave Dette er en fiktiv opgave hvor jeg har valgt at redesigne copenhagenskatepark.dk's website. Jeg synes det kunne være en spændende udfordring

Læs mere

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie

Eksamensopgave 2012. Aarhusportalen. Melissa Emilie Eksamensopgave 2012 Aarhusportalen Melissa Emilie Indhold Indhold... 1 Aarhusportalen... 2 Projektbeskrivelse... 2 Hvem er kunden... 2 Målgruppe... 2 Hvad ønsker vi at opnå... 2 Temaer... 2 Tidsplan...

Læs mere

Introducering af Flip MinoHD: http://celikshadow.dk/flip/

Introducering af Flip MinoHD: http://celikshadow.dk/flip/ Introducering af Flip MinoHD: http://celikshadow.dk/flip/ Ahmad Hahmoud Besir Redzepi Jeffrey Lai 04/05-2009 2.semester 3. projekt Indholdsfortegnelse: 1.0 Forord 3 2.0 Kommunikationsplan 4 3.0 Navigationsdiagram

Læs mere

NY IDENTITET TIL SCHWARZ

NY IDENTITET TIL SCHWARZ GRAFISK DESIGN NY IDENTITET TIL SCHWARZ Redskaber: Photoshop Illustrator Kundeprofil: Schwarz er en eksklusiv forhandler af senge og tilbehør i topklavlitet. Med deres store sortiment af kvalitetsmærker

Læs mere

IsenTekst Indhold til Internettet. Manual til Wordpress.

IsenTekst Indhold til Internettet. Manual til Wordpress. Manual til Wordpress Sådan opdaterer du din hjemmeside i Wordpress. Dette er en manual til de mest grundlæggende ting, så du selv kan redigere indholdet eller tilføje nyt på din hjemmeside. Guiden er skrevet

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 13. marts, 2014 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13 2.b.

Læs mere

Delaflevering FUA.4 Betina Korsbro, Mi Louise Hansen, Jesper Led Lauridsen og Knud Back

Delaflevering FUA.4 Betina Korsbro, Mi Louise Hansen, Jesper Led Lauridsen og Knud Back Delaflevering FUA.4 Betina Korsbro, Mi Louise Hansen, Jesper Led Lauridsen og Knud Back 1 Indhold 1.1 Generelt i forhold til projektet 1.1.1 Problemformulering Kalundborg kommune har gennem de senere år

Læs mere

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK

ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK ANALYSE AF WEBSTEDET WWW.BILFORHANDLER.DK Denne rapport indeholder en primær analyse af webstedet www.bilforhandler.dk. Vi har kigget på: Det vigtige førstehåndsindtryk af webstedet Brugervenlighed Anvendte

Læs mere

Karens vejledning til WordPress, september 2014 1

Karens vejledning til WordPress, september 2014 1 Karens vejledning til WordPress, september 2014 1 Karens WordPress vejledning september 2014 INDHOLD Hvad er WordPress 1 Generelt om WordPress 2 Frontend og backend 2 Skrive en blog-tekst (indlæg/post)

Læs mere

Grafisk Design. Dansk Center For Organdonation

Grafisk Design. Dansk Center For Organdonation Grafisk Design Dansk Center For Redegørelsen Hvad går opgaven ud på? Denne opgave går ud på at få lavet et redesign af det logo, Dansk Center For fik fremstillet i 2008, af vores kommunikations afdeling.

Læs mere

Multimediedesigner. Vedvarende. energi

Multimediedesigner. Vedvarende. energi Multimediedesigner Vedvarende energi Eksamensprojekt 2. sem. maj. 2014 - jun. 2014 Problemstilling Vedvarende energi er en samlebetegnelse for bioenergi, vindenergi, solenergi og andre teknologier, der

Læs mere

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse

Læs mere

MULTIMEDIEDESIGNER 1. ÅRS PRØVE

MULTIMEDIEDESIGNER 1. ÅRS PRØVE MULTIMEDIEDESIGNER 1. ÅRS PRØVE Eksamensprojekt, 2. semester, forår 2010 TEMA: E-HANDEL Erhvervsakademiet København Nord Udleveret mandag d. 3. maj 2010 Afleveres i 4 eksemplarer senest d. 28. maj kl.

Læs mere

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version

Wordpress 2.7. Manual for redaktør/blogger Webwoman.dk. Denne version er fra 9. marts 2009. Må frit kopieres og distribueres i original version Wordpress 2.7 Manual for redaktør/blogger Webwoman.dk Denne version er fra Må frit kopieres og distribueres i original version 2 Indhold Gennemgående udtryk, du bør kende... 4 Log ind på din hjemmeside/blog...

Læs mere

GRAFISK WORKFLOW H1 MARIA SCHELDE

GRAFISK WORKFLOW H1 MARIA SCHELDE GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være

Læs mere

MANUAL. Siteloom CMS

MANUAL. Siteloom CMS MANUAL Siteloom CMS www.hjerteforeningen.dk/cms Brugernavn: Password: 3. oktober, 2013 BASIS FUNKTIONER 1. Kalender... 4 1.a. Opret... 5 1.b. Rediger eller slet... 9 2. Sider...12 2.a. Opret side...13

Læs mere

Hardeknud gruppe. Brugermanual. Tilegnet redaktører af gruppeweb hjemmeside

Hardeknud gruppe. Brugermanual. Tilegnet redaktører af gruppeweb hjemmeside Hardeknud gruppe Brugermanual Tilegnet redaktører af gruppeweb hjemmeside Indhold Indledning... 4 Om denne brugermanual... 4 Formålet med Gruppeweb... 4 Hjemmesidens opbygning... 4 Redaktører... 5 Log

Læs mere

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside

få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside få en ny og bedre hjemmeside på få minutter Quick guide Del denne quick guide med alle som har glæde af en ny og bedre hjemmeside 1 Alle har ret og råd til en professionel hjemmeside på få minutter GoMinisite

Læs mere

eksamensprojekt 2. sem

eksamensprojekt 2. sem Multimediedesigner Klima 2009 Virksomheder i en klimakontekst eksamensprojekt 2. sem maj - juni 2009 www.cphnorth.dk Trongårdsvej 44 DK 2800 Kgs. Lyngby 1. Opgaven Indledning: I december 2009 skal Danmark

Læs mere

Cindie Mortensen, Merete Koudahl, Pernille Tramp Webdesign, gruppeprojekt exercise 7. Menu A/S

Cindie Mortensen, Merete Koudahl, Pernille Tramp Webdesign, gruppeprojekt exercise 7. Menu A/S Menu A/S Problemfelt MENU A/S (MENU) er en dansk design virksomhed og producent. MENU har specialiseret sig indenfor skandinavisk design samt deres evige stræben efter at lave noget originalt. De repræsenterer

Læs mere

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE GRAFISK PRODUKTION OG WORKFLOW PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE 04 INDHOLDSFORTEGNELSE Dokumentation 05

Læs mere

Jonas Krogslund Jensen info@j-krogslund.dk +45 2635 6096. Iben Michalik ibenmic@hotmail.com +45 2877 0664

Jonas Krogslund Jensen info@j-krogslund.dk +45 2635 6096. Iben Michalik ibenmic@hotmail.com +45 2877 0664 SENIOR LAND Jonas Krogslund Jensen info@j-krogslund.dk +45 2635 6096 Iben Michalik ibenmic@hotmail.com +45 2877 0664 Michael Himmelstrup eycoco@gmail.com +45 2720 7222 Peter Stillinge Dong peterstillinge.dong@gmail.com

Læs mere

Kom godt i gang TAG DEL. - den vellykkede inddragelse på TAGDEL.dk. vores samfund

Kom godt i gang TAG DEL. - den vellykkede inddragelse på TAGDEL.dk. vores samfund Kom godt i gang - den vellykkede inddragelse på TAGDEL.dk Denne manual er udformet til jer, som nu står foran at skulle bruge TAGDEL.dk som et værktøj til at inddrage jeres medlemmer, frivillige og andre

Læs mere

S&E Bazar Fyn. Mads, Asger, Lærke og Alexander WEB-A 11-12-2012

S&E Bazar Fyn. Mads, Asger, Lærke og Alexander WEB-A 11-12-2012 2012 S&E Bazar Fyn Mads, Asger, Lærke og Alexander WEB-A 11-12-2012 Indhold Indledning... 2 Problemformulering:... 2 Problemstillinger:... 2 Kommunikation:... 3 Hvilken målgruppe ønsker vi at henvende

Læs mere

Yosef Saleh, Ilyas Tulumcu Oguzhan Polat, Mohammad Kaddoura Kom/IT C Kl. 1.2

Yosef Saleh, Ilyas Tulumcu Oguzhan Polat, Mohammad Kaddoura Kom/IT C Kl. 1.2 1/ Indholdsfortegnelse Indledning... 3 Dokumentation... 4 Hjemmeside og logo design... 14 Valg af skrifttype... 15 AIDA... 16 Arbejdsroller og opgaver... 17 Logbog for vores proces (Ugevis)... 19 Konklusion...

Læs mere

GRAFISK DESIGN. Læringskoncept for Dansk Rideforbund

GRAFISK DESIGN. Læringskoncept for Dansk Rideforbund Læringskoncept for Dansk Rideforbund Produkt og målgruppe: Udarbejdelse og idéudvikling af et nyt læringskoncept I børnehøjde til Dansk Rideforbund. Det skal fokusere på sikkerhed I ridningen og målrette

Læs mere

Sensus. Grafisk design og tilgængelighed

Sensus. Grafisk design og tilgængelighed Grafisk design og tilgængelighed Mange tilgængelighedsproblemer bliver skabt allerede i forbindelse med udviklingen af netstedets grafiske udtryk. Tilgængelige netsteder er ikke nødvendigvis ensbetydende

Læs mere

3 usability-tests. med udgangspunkt i Køge Boldklubs web site. Gangstertest. Ekspertvurdering. Kortsortering. Side 1

3 usability-tests. med udgangspunkt i Køge Boldklubs web site. Gangstertest. Ekspertvurdering. Kortsortering. Side 1 3 usability-tests Gangstertest Ekspertvurdering Kortsortering med udgangspunkt i Køge Boldklubs web site Side 1 Køge Boldklubs web site Side 2 Gangstertest I gangstertesten har testpersonen fået stillet

Læs mere

Designguide. NemID Designguide / Kontrapunkt / Marts 2010 1

Designguide. NemID Designguide / Kontrapunkt / Marts 2010 1 Designguide h NemID Designguide / Kontrapunkt / Marts 2010 1 Indhold Logo Logo / Minimum afstand / Placering / Co-branding / Fejlagtig brug Elementer Farver / Tal og piktogrammer / Typografi / Supergrafik

Læs mere

Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding

Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding BRAINSTORM Tema: Vinter, alaska, bjerge, blå & hvide farver. Farver: Colourlovers eksempler: http://www.colourlovers.com/palette/605421/crystal_ice_palace

Læs mere

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ******

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ****** Workflow Svendeprøve Emil Momsen BeskrivelseN WorkFlow BeskrivelseN Side - 2 / 8 Arktis Brief Fra kunde Opgave / Indhold Kunden var WWF og opgaven gik ud på at få folk til at blive klar over, hvor alvorligt

Læs mere

SKRIV! GENTOFTE CENTRALBIBLIOTEK 2014

SKRIV! GENTOFTE CENTRALBIBLIOTEK 2014 SKRIV! GENTOFTE CENTRALBIBLIOTEK 2014 SÅDAN SKABER DU EN VEDKOMMENDE TEKST Skriv det vigtigste først. Altid. Både i teksten og i de enkelte afsnit. Pointen først. Så kan du altid forklare bagefter. De

Læs mere

Roskilde Tekniske Gymnasium. Eksamensprojekt. Programmering C niveau

Roskilde Tekniske Gymnasium. Eksamensprojekt. Programmering C niveau Roskilde Tekniske Gymnasium Eksamensprojekt Programmering C niveau Andreas Sode 09-05-2014 Indhold Eksamensprojekt Programmering C niveau... 2 Forord... 2 Indledning... 2 Problemformulering... 2 Krav til

Læs mere

Grafisk Design. Trine Dichmann Knudsen

Grafisk Design. Trine Dichmann Knudsen Trine Dichmann Knudsen Opgaven Designe et layout til en hjemmeside for Højen & Magic Fyrværkeri ApS. Designkrav & ønsker Baggrundsbilleder Tiltalende Moderne Anderledes Mere liv Der udover havde jeg frie

Læs mere

Bilag 2. Noter. Alternativ: Skriv pakkelabel i søgefeltet Klik på linket ved teksten øverst: pakke labels

Bilag 2. Noter. Alternativ: Skriv pakkelabel i søgefeltet Klik på linket ved teksten øverst: pakke labels Bilag 1 Bilag 2 Projekt 1 - usability test og marketing Gruppe: Senia, Agnete, Andreas, Ninette Website: postdanmark.dk Undersøgelsesområde: navigation og funktionalitet Tests: Brugertest (funktionalitet)

Læs mere

Afsluttende projekt(kom/it): E-learning Hjemmeside om ballonprojekt Af: Kevin, Martin og Sara

Afsluttende projekt(kom/it): E-learning Hjemmeside om ballonprojekt Af: Kevin, Martin og Sara Afsluttende projekt(kom/it): E-learning Hjemmeside om ballonprojekt Af: Kevin, Martin og Sara Roskilde Teknisk Gymnasium Dato 02/04/13 08/05/13 Side 1 af 9 Indhold Problem... 3 Overvejelser... 3 Produkt...

Læs mere

GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE

GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE Det var på tide med en ny hjemmeside til privat brug. Jeg valgte at starte helt fra bunden i stedet for at ændre på noget eksisterende.

Læs mere

Grafisk design OPGAVEBESKRIVELSE

Grafisk design OPGAVEBESKRIVELSE OPGAVEBESKRIVELSE Min opgave var at lave og designe en pakke til s marketing og kommunikationsafdeling MarKom. Pakken består af: et hoved element portfolio hjemmeside communication.madebydelta.com to supplerende

Læs mere

SmartWeb Brugermanual

SmartWeb Brugermanual SmartWeb Brugermanual Table of Content Table of Content... 1 Best Practice SmartWeb:... 2 Implementering... 4 Egenskaber:... 5 Filer:... 7 Oprettelse af Kategori... 9 Sider og Tekster:... 11 Slideshow...

Læs mere

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)

Læs mere

Dokumentation. Karen-Louise Fejerskov

Dokumentation. Karen-Louise Fejerskov Dokumentation Grafisk Workflow Et af produkterne, jeg skulle lave, var et redesign af FreQuence s info hjemmeside. A B Punkt 1 Ansvar: Jeg har selv stået for opsætningen af hjemmeside og selv bestemt,

Læs mere

Afsluttende opgave - Kommunikation/IT C Klasse 1.1

Afsluttende opgave - Kommunikation/IT C Klasse 1.1 11-05-2015 Affaldshåndtering Afsluttende opgave - Kommunikation/IT C Klasse 1.1 Hans Rasmussen & Kevin Kumar ROSKILDE TEKNISKE GYMNASIUM Indhold Affaldshåndtering i Grønsted kommune... 2 Krav... 2 Design...

Læs mere

GRAFISK PRODUKTION & WORKFLOW. Endotest website

GRAFISK PRODUKTION & WORKFLOW. Endotest website GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere

Læs mere

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst

Læs mere

Projekt: Kend dine brugere. Tr09mul02 Andreas Münter Jesper Hansen Tommy Pedersen Robin Hansen

Projekt: Kend dine brugere. Tr09mul02 Andreas Münter Jesper Hansen Tommy Pedersen Robin Hansen Projekt: Kend dine brugere Tr09mul02 Andreas Münter Jesper Hansen Tommy Pedersen Robin Hansen Indholdsfortegnelse Introduktion: 3 Marketing: 3 Usability test: 4 Mockup design 6 Opsumering 7 Konklusion

Læs mere

DESIGN MANUAL. Designmanualen beskriver grundelementerne i Who Brands profil, og den giver eksempler og retningslinjer for deres anvendelse.

DESIGN MANUAL. Designmanualen beskriver grundelementerne i Who Brands profil, og den giver eksempler og retningslinjer for deres anvendelse. DESIGN MANUAL Designmanualen beskriver grundelementerne i Who Brands profil, og den giver eksempler og retningslinjer for deres anvendelse. Designmanualen er et værktøj til brug for dem, der i det daglige

Læs mere

Grafisk workflow. bl.udbudsnet.dk

Grafisk workflow. bl.udbudsnet.dk Grafisk workflow. bl.udbudsnet.dk Hvad går opgaven ud på? Opgaven gik ud på at lavet et præsentations website for Udbudsnet. Hjemmesiden skulle bruges til at sælge Udbudsnet, på en messe som hedder BL.

Læs mere

Koncept for decentral formidlingsstruktur i Nationalpark Skjern Å. Oktober 2010

Koncept for decentral formidlingsstruktur i Nationalpark Skjern Å. Oktober 2010 Koncept for decentral formidlingsstruktur i Nationalpark Skjern Å Oktober 2010 Kort om konceptet Borgerinddragelse og lokal forankring har været centrale elementer i det hidtidige arbejde med Nationalpark

Læs mere