Website design, projekt 4

Website design, projekt 4 Mette, Nikolaj, Alexander, Julie I dette projekt har vi fået et design- brief af markedsføringsøkonomerne. Designet- briefet omhandlede, at vi skulle lave en hjemmeside omkring en ny slags festival for 65+ personer. CPH business

Website design, projekt 4 Indholdsfortegnelse Indledning:... 3 Projekt planlægning:... 4 PBS:... 4 WBS:... 4 Risiko håndtering... 5 Risiko matrix (1.1)... 6 Design breif:... 7 Stakeholders:... 9 SWOT:... 10 Informations arkitektur:... 11 Medie og platform:... 12 Visuel identitet:... 12 Farver:... 12 Logo:... 13 Grafik og billeder:... 14 Piktogrammer:... 14 Designprincipper:... 15 Usability/brugbarhed:... 22 Bilag:... 23 Bilag 1:... 23 Bilag 2:... 24 2

Indledning: Vi er en virksomhed, Time Gab Festivals, der skal skabe en begivenhed for målgruppen i alderen fra 65+. Vi som multimediedesignere har fået til opgave, at skabe en simpel hjemmeside, som passer til målgruppen. For at skabe denne hjemmeside har vi brugt nogle forskellige hjælpemidler, som hver især vil blive forklaret i denne rapport. 3

Projekt planlægning: PBS: PBS står for Produkt Breakdown Structure. PBS er et værktøj som bruges til at finde ud af hvilke komponenter/enheder, det igangværende projekt består af. Vi har valgt at lave en PBS (nedenfor), for at få forståelsen af, hvad vi vil have og hvad der skal være på vores hjemmeside. 1. Time Gap 1.1 Menu 1.1.1 Forside 1.1.2 Mission 1.1.3 Kunstnere 1.1.4 Program 1.1.5 Kontakt 1.2 Køb billet WBS: WBS står for Work Breakdown Structure. WBS er et værktøj som bruges til at finde vejen hen til det endelige resultat. I dette projekt, vejen hen til vores færdige hjemmeside. 1. Time Gap 1.1 Illustrator 1.1.1 Wireframe 1.1.2 Skitse arbejde 1.1.3 Logo 1.1.4 Piktogrammer 1.2 Photoshop 1.2.1 Udkast til hjemmeside 4

1.2.2 Komposition 1.3 Html 1.3.1 Hjemmeside 1.4 Kompetence kort 1.4.1 Søjlediagram 1.4.2 Forklaring af html 1.5 Rapport 1.5.1 Skrive rapport 1.5.2 Rette rapport Risiko håndtering Når man opsætter en risikoanalyse, så kommer man problemer der kan opstå undervejs i projektet, i forkøbet. Ved en risikoanalyse, finder man ud af, om det er nødvendigt at have en plan B. Vi har lavet en risiko matrix (1.1), som giver et svar på, om det kan betale sig at udføre opgaven/projektet, samt om der er behov for en plan B. Hvis mange eller alle af de risici man har fundet ligger henne i de røde felter, bliver det svært at argumentere for, at projektet/opgaven vil lykkes, og i sådan et tilfælde, er det vigtigt, at man har en plan B. Hvis risiciene ligger i de gule felter, så skal man være opmærksom på, at der kan gå noget galt, og der er en moderat chance for at det sker. De grønne felter er for de små risici, som ikke er noget projektet umiddelbart kan ødelægges af, hvis risiciene befinder sig i de områder. Målet med vores risiko analyse var at forudsige de problemer som kunne opstå, og finde ud af om vi skulle have en plan B. Mange af vores risici lå i et gult felt, men da sandsynligheden for at dette ville ske var på det laveste, så valgte vi, at vi ikke behøvede at udarbejde en plan B. 5

Risiko matrix (1.1) 5 4 Sandsynlighed 3 c 2 d 1 e a,b,f,g,h,i 1 2 3 4 5 Indflydelse Forudsigelighed: Sandsynlighed*indflydelse*f orudsigelighed: a. Vi møder ikke op 1 5 b. Intet breif 1 5 c. De ældre ikke vil på festival 5 75 d. De ikke kan finde ud af hjemmesiden 5 30 e. Sygdom(os og mak) 3 9 f. Alt data bliver slettet(vores arbejde) 5 25 g. Ingen festival plads til rådighed 2 10 h. Ingen bands 5 25 i. Ingen boder 5 25 6

Design breif: Her er design- briefet fra markedsføringsøkonomerne: Kære multimedie- elever Background information on your company and project Vi er en virksomhed, Time Gab Festivals, der skal skabe en begivenhed for målgruppen i alderen fra 65+. Vi ønsker at lave en festival for denne målgruppe, med gamle musiker/bands fra deres ungdomstid, som gerne skulle tiltrække målgruppen. Til festivalen vil der være koncerter, aktiviteter osv. En af risikoen ved dette kan være, at budskabet ikke kommer frem til målgruppen og derved vil vores markedsføring være spild af penge. Vi skal sørge for, at målgruppen får set vores markedsføring i tide, så de kan nå at købe billetter. Projektet bliver igangsat, da vi mener, at der er manglende fokus på denne aldersgruppe, hvad angår musikken og aktiviteterne på festivaler. Festivalen skulle gerne opnå mange tilfredse gæster, der skal kunne nyde festivalen med massere af god musik med deres venner, partner osv. Competitor information Vores primære konkurrenter er Roskilde Festival, Samsø Festival og Skanderborg Festival Description of the target audience Vores målgruppe er som sagt ældre personer fra alderen 65+. Disse personer skal helst have en speciel relation til musik- genreren, da vi ønsker at finde de bedst mulige kunstnere for netop denne målgruppe. Kunstnerne skal helst være specifikt rettet mod denne målgruppe, altså noget vores målgruppe har lyttet til tidligere i deres liv. Core message or propositions Ønsker De tilbage til ungdommen? Her har du muligheden: Time Gab Festivalen Main benefits of the product or service Produkterne vi tilbyder er - Koncerter med diverse kunstnere o Pink Floyd 7

- - o Rolling Stones o Genesis o The Who o Elton John o Bruce Springsteen o ABBA o Elvis Costello o Brøderne Olsen o Bob Dylan o Paul McCartney o Birthe Kjær o The Siblings o KISS Forskellige aktiviteter på festivalen o Karaoke o Tema- hjørner! Tidslommer Barer og madboder o Samarbejdsaftale med:! Øl producent! Madlevering! Sceneopsætning The response you want from the project Vi vil gerne skabe en relation mellem ældre mennesker og festivaler, da vi mener at vores målgruppe mangler netop en festival for dem selv. Målet med sådan en festival, for netop denne målgruppe er, at de ældre ikke skal blandes ind med de unge til festivaler, da deres interesser er meget forskellige. Vi ønsker, at skabe en tradition, hvor vi opnår en større kundebase med årene. Forslag til hjemmesiden - Om festivalen o Vores historie 8

- - - - - - - Billetservice Disse kunstnere kommer i år Kontakt os Video pop- up med kunstnere, der kommer Blogindlæg fra andre Samarbejdspartnere i bunden af siden Nedtælling til koncerten Stakeholders: Dette er vores stakeholders: (1 1 ) Læger/Sygeplejesker (2) Bands (3) Udlejere af sovepladser/telte/koncertscener (4) Time Gaps direktør (5) Markedsføringspersoner (6) Person som får aftaler i hus med hoteller (7) Konkurrenter (8) Beboere i området hvor koncerten afholdes Vores stakeholders- analyse består af 3 trin. Det 1 trin gik ud på, at finde alle de personer og organisationer, som ville have noget at gøre med dette projekt. Vi fandt 8 stakeholders, som vi vil gå mere i dybden med i trin 2. I trin 2 opførte vi en tabel (se bilag 1), hvor vi fokuserede på de individuelle stakeholders. I tabellen kiggede vi på, hvor meget interesse og indflydelse de forskellige stakeholders skulle have i dette projekt. Desuden fandt vi også ud af, hvilke konflikter som kunne opstå, samt hvad for en rolle de individuelle stakeholders skulle have. Til sidst i trin 2 afgjorde vi, hvad de enkelte stakeholders skulle have til opgave, og hvilken strategi vi som gruppe, skulle lægge for de forskellige stakeholders. I trin 3, satte vi vores stakeholders op i et koordinatsystem (se bilag 2). På denne måde finder 1 Tallene bliver brugt i grafen i bunden af siden 9

vi ud af, hvem der er meget vigtige i projektet, og hvem der er mindre vigtige for projektet. Koordinatsystemet er delt op på den måde, at langs y- aksen vises der hvor meget magt en stakeholder har i projektet. Langs x- aksen vil man kunne se, hvor interesseret den individuelle stakeholder er i projektet. SWOT: Vores SWOT- analyse viser et overblik over vores styrker, svagheder, muligheder og trusler som gruppe. Analysen giver et godt overblik over hvad vi kan, og hvad vi ikke kan, hvilket kan hjælpe projektet med at give et realistisk hensyn til ambitioner og mål. Desuden kan den hjælpe til hvad vi skal passe på og hvad vi har mulighed for med projektet. 10

Informations arkitektur: Det er en meget simpel informations arkitektur vi har udarbejdet, da hjemmesiden skulle være meget simpel, pga. den skulle tilpasses ældre personer på 65+ år. Vi har derfor undladt at lave underpunkter i menulinjen, for ikke at skabe en større forvirring en nødvendigt hos brugerne. Vi har valgt få menupunkter, som også er for overskuelighedens skyld. Informations arkitekturen på en hjemmeside bruges som en slags skabelon for, hvordan indholdet på siden skal struktureres og forløbe sig. Primær navigation Vi har brugt en global informations arkitektur som den primære navigation på hjemmesiden. Vi har valgt at bruge en global informations arkitektur, da den er meget simpel og overskuelig. Uanset hvor på vores hjemmeside du befinder dig, kan du med ét enkelt klik bevæge dig til enhver anden side. Derfor er denne form for informations arkitektur god til simple hjemmesider, og derfor også til vores hjemmeside, da den skulle være så enkel som muligt. Sekundær navigation Som sekundær navigation har vi valgt at lave en highlight effekt på det valgte menupunkt. Da vores menupunkter ingen undermenuer har, så syntes vi, at highlight effekten er den optimale måde at informere brugeren om hvor på hjemmesiden man har placeret sig. 11

Medie og platform: Vores hjemmeside, Time Gap, skal kun være tilgængelig via computer, og ikke mobiltelefoner, tablets eller andre enheder. Grunden til at vi har foretaget dette valg er fordi, at ældre personer primært bruger computer som den eneste enhed. Det ville være spild af tid og ressourcer at udvikle hjemmesiden til enheder som muligvis ikke ville blive brugt og set. Visuel identitet: Farver: Dette er vores valgte farver til hjemmesiden: 12

Logo: Dette er vores udarbejdelse af et logo til hjemmesiden. Farverne i logoet består af primærfarverne. Logoet er en blanding af et gammelt bord- ur og en tidsportal. De orange farver i logoet laver to fokuspunkter. Ét fokuspunkt på virksomhedens navn, og ét fokuspunkt på den inderste cirkel, som har til hensigt at symbolisere en tidslomme. Skrifttypen i logoet er Helvetica 45 Light. 13

Grafik og billeder: Piktogrammer: Program Hus Mikrofon Skydeskive Telefon Vi har brugt forskellige piktogrammer i vores menulinje, som er arrangeret under menupunkterne i menulinjen. Disse piktogrammer kommer frem når musen er henover et menupunkt. Dette skaber et anderledes og sjovere design. Samtidig giver piktogrammerne en genkendelighed, idet de skal forestille menupunktets navn i billedformat. Dette giver dermed ordblinde personer en hjælpende hånd, da de kan tyde billedet, frem for ordene i menulinjen. Piktogrammerne er med til at give forståelse af ordet og dermed gøre hjemmesiden lettere at navigere rundt på, idet ikonerne vil vise sig, når musen er ved et menupunkt. 14

Designprincipper: Vi har brugt designprincippet om nærhed i menuen samt inde på siden Kunstnere. På siden Kunstnere er kunstnernavnene tæt på det tilhørende billede af kunstneren. Dette gør, at vi ved hvilket kunstnernavn hører til hvilket billede. Derudover har vi på hele vores hjemmeside brugt designprincippet om Lukkethed ved at bruge kasser til at afgrænse alle elementer som hører sammen. Forside Designprincippet om billeder. Billeder tiltrækker opmærksomhed, bidrager til forståelse og huskes bedre end ord. 2 På forsiden ses det store billede lige under menuen, og dette skaber opmærksomhed og lyst til at se mere. Derudover har vi brugt piktogrammer under hvert enkelt menupunkt, 2 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 12 15

som bidrager til en forståelse, og som designprincippet siger og huskes bedre end ord., derfor har vi valgt at bruge piktogrammer, da man dermed kommer til at huske menupunktet bedre. Designprincippet om ensartethed. Ensartede elementer har en større relation end ikke- ensartede elementer. 3 Vi har brugt designprincippet om ensartethed i menuen, da alle menupunkterne får en highlight- effekt og et piktogram under sig, når musen føres henover menupunktet. Ved at bruge dette designprincip, så skaber man en relation mellem de enkelte punkter og dermed kan man se, at de hører sammen. Designprincippet om farver. Farver kan gruppere elementer, skabe opmærksomhed & fremhæve æstetik. Farver kan desuden skabe et mere forståeligt design. 4 På hjemmesiden har vi brugt de samme farvekoder til flere elementer, for at skabe ro. Hvis der blev brugt en masse forskellige farver, ville man komme væk fra designprincippet ensartethed, og dermed skabe uro. Ved at bruge de samme farver hele vejen igennem hjemmesidens design, fremhæver man designet som roligt og enkelt. Designprincippet om genkendelighed. Brugbarhed optimeres, når ensartede elementer opleves på en genkendelig måde. 5 Vi har på vores hjemmeside brugt piktogrammer som en form for ekstern genkendelighed. Man kan f.eks. genkende menupunktet kunstnerne på mikrofonen. 3 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 34 4 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 40 5 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 60 16

Designprincippet om grupper. Ved at samle elementer i grupper eller klumper gøres den samlede mængde information lettere at huske og behandle. 6 Vi har samlet sammenhørende elementer i grupper, som for eksempel i menuen og nedtællingsbåsen. Designprincippet om linjer. Elementer placeret, så de følger en linje, opfattes som sammenhørende, og designet opleves som struktureret. Linjen kan være lige eller buet. 7 Sammenhørende elementer på vores hjemmeside er placeret efter en linje. Designprincippet om luft. Elementer har brug for luft omkring sig, ellers risikerer designet at virke klemt. Mængden af luft kan bruges til at skabe opmærksomhed. 8 Vi har brugt luft i vores design på hjemmesiden, da der dermed vil blive skabt fokus og opmærksomhed på de enkelte elementer. Vores design skulle være overskueligt og dette er luft et godt hjælpemiddel til at få skabt. Designprincippet om lukkethed. Elementer, der er lukket inde i rammer eller bag linjer, har en større relation end elementer, der er uden for rammerne eller på den anden side af linjerne. 9 Vi har brugt kasser til at indramme sammenhørende elementer på vores hjemmeside, netop for at skabe en relation. Disse kasser gør samtidig at der bliver skabt en lille distance mellem ikke sammenhørende elementer. 6 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 78 7 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 96 8 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 100 9 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 104 17

Designprincippet om nærhed. Elementer, der er tættere på hinanden, har en større relation end elementer, der er længere fra hinanden. 10 Vi har brugt designprincippet om nærhed mange steder på vores hjemmeside. F.eks. er det brugt i vores festival start - nedtælling, til at gruppere dage, timer, minutter & sekunder. Vi ved, at de hører sammen, pga. nærheden. Mission På denne side har vi brugt nogen af de samme designprincipper som på forsiden. Designprincippet om ensartethed. Designprincippet om farver. Designprincippet om genkendelighed. 10 20 designprincipper - Wisler- Poulsen, Ian Grafisk Litteratur s. 110 18

Designprincippet om grupper. Designprincippet om linjer. Designprincippet om luft. Designprincippet om lukkethed. Designprincippet om nærhed. Kunstnere På denne side har vi brugt nogen af de samme designprincipper som på forsiden. Designprincippet om billeder. Designprincippet om ensartethed. Designprincippet om farver. Designprincippet om genkendelighed. 19

Designprincippet om grupper. Designprincippet om linjer. Designprincippet om luft. Designprincippet om lukkethed. Designprincippet om nærhed. Program På denne side har vi brugt nogen af de samme designprincipper som på forsiden. Designprincippet om ensartethed. Designprincippet om farver. Designprincippet om genkendelighed. Designprincippet om grupper. 20

Designprincippet om linjer. Designprincippet om luft. Designprincippet om lukkethed. Designprincippet om nærhed. Kontakt På denne side har vi brugt nogen af de samme designprincipper som på forsiden. Designprincippet om billeder. Designprincippet om ensartethed. 21

Designprincippet om farver. Designprincippet om genkendelighed. Designprincippet om grupper. Designprincippet om linjer. Designprincippet om luft. Designprincippet om lukkethed. Designprincippet om nærhed. Usability/brugbarhed: Formålet med vores hjemmeside var, at lave den så simpel som overhovedet muligt. Hjemmesiden skulle være simpel og overskuelig, så personer på 65+ år, ingen problemer vil have med at navigere rundt og forstå hjemmesiden. For at skabe en simpel hjemmeside har vi brugt mange designprincipper. Vi har f.eks. brugt nærhed, genkendelighed, farver som hver især er et designprincip. Vi har også valgt at bruge den globale navigations struktur, som giver en simpel tilgang til hver enkel side. Brugbarheden på hjemmesiden er enkel og ligetil, derfor passer den godt til vores målgruppe på 65+ år. 22

Bilag: Bilag 1: 23

Bilag 2: 24