Tema 1. Gruppe 6 Mads Balslev & Kristian Gasberg. Vejledere Yngve Brækka Stensaker & Kristoffer Wendelboe

Transkript

1 Tema 1 Gruppe 6 Mads Balslev & Kristian Gasberg Vejledere Yngve Brækka Stensaker & Kristoffer Wendelboe Link Database Mmda0914/

2 Indledning Til dette projekt har vi fået til opgave, at lave en hjemmeside til en gruppe DJ s, som kalder sig selv for Blue Machine. Ud over dette skal vi kunne lave en database til hjemmesiden, hvor vi kan hente tispunkter og datoer ind på hjemmesidens kalender, som skal kunne vise de forskellige events som Blue Machine arrangere. Blue Machine er en gruppe DJ s som holder nogle gratis events rundt omkring i Aalborg, hvor alle kan møde op og høre elektronisk musik. Blue Machine har lige nu en meget lille hjemmeside, som de gerne vil at folk skal besøge, men deres primære medie de bruger, er facebook som de opdatere med billeder og videoer. Metode Til vores metode har vi valgt at bruge 5 planes of UX. Projektet bliver derfor delt op i 5 lag, hvor vi her forinden afgøre hvordan vi vil gribe disse lag an. Strategy - strategi Under vores strategi vil vi finde ud af hvad Blue Machine er, dernæst vil vi finde ud af, hvilket budskab det er de gerne vil at vi kan få frem via deres hjemmeside. Dernæst vil vi finde ud af hvordan vi kan videregive dette budskab og ramme den målgruppe som Blue Machine sigter efter. Scope Overblik Dette lag bruger vi til at analysere de ting som vi har stillet spørgsmålstegn ved under vores strategi. Vi vil derfor her søge og finde ud af alt om Blue Machine, herudover vil vi kigge på hvad deres målgruppe er, og finde ud af hvordan vi bedst muligt rammer dem. Structure Struktur Under strukturen vil vi kigge på hvad der er vigtigt, at få på hjemmesiden, ud fra de ting vi har fundet frem til i Scopet, og vi vil derfor her lave noget informationsarkitektur. Skeleton Skelet Under skeletet vil vi bruge værktøjet 10x10 til at lave skitser, ud fra det vi har fundet ud af i de forgangene lag, og vil så her finde frem til den bedste løsning at bygge på. Surface Overflade Til sidst vil vi i Surface, ud fra de andre lag, lave vores design og kode hjemmesiden.

3 Strategy Det første vi gør i projektet er at finde ud af hvem Blue Machine er, og hvad de står for, samt hvad de kan tilbyde. Derfor søger vi alt den information vi kan om Blue Machine, derudover har vi på klassen sendt nogle spørgsmål til Blue Machine som vi ønsker besvaret, som muligvis kan give et bedre indblik i Blue Machine For at vi kan ramme kan ramme brugeren med vores budskab samt design, bliver vi nød til at kende Blue Machines målgruppe, derfor skal vi have en målgruppe analyse, hvor vi tager fat i statistikker og artikler som kan give os et indblik i målgruppen. Når vi så har fundet vores målgruppe, skal vi til at strukturere hjemmesiden, samt lave et design som passer til vores målgruppe. Når vi så er kommet frem til et design, som ud fra vores analyse rammer vores målgruppe, begynder vi så at kode hjemmesiden. Scope Blue Machine mener selv at deres målgruppe hedder år, men disse statistikker viser nogle andre interessante tal som man også kan tage højde for. Statistikker viser at der er 10% flere drenge end piger som høre denne form for musik. Og ikke overraskende viser statistikkerne også at det er aldersgruppen år, som høre denne slags musik mest. Der er dog overraskende høje tal i aldersgruppen år. Statistikkerne viser også at det er overvældendende mange hvide mennesker der høre musik i forhold til andre menneske racer, derfor kan vi også konkludere, at musikken mest finder sted i Europa, USA og til dels også Sydamerika. Ud fra denne artikel fortæller den at mennesker som høre denne genre, befinder 6 gange mere tid om dagen på de sociale medier frem for mennesker som ikke høre denne genre. Det betyder derfor også at det er vigtigt for os at brugerne af hjemmesiden let kan finde ind på Blue Machines hjemmeside, som de også selv ser som den primære kommunikation til deres målgruppe. (ukendt, 2014, beatswitch.com) Vi kan derfor konkludere at musikken bliver hørt af de unge mennesker både piger og drenge fra de år, hvilket er en bred målgruppe. Derudover er det en målgruppe som ofte befinder sig på de sociale medier, og derfor er det vigtig at hjemmeside kan vise brugeren ind på deres facebook side.

4 Structure Til strukturering af siden har vi valgt at siden skal være one page, med få menu punkter, Da siden ikke kommer til at indeholde meget brødtekst, og skal være så overskuelig som muligt, da siden blot skal bruges til at give målgruppen information om, de forskellige events som Blue Machine arrangere, samt fortælle dem hvor det foregår og på hvilket tidspunkt. Da hjemmesiden blot skal bruges til at finde ud af hvor og hvornår eventet foregår, skal det være en hjemmeside som brugeren hurtigt kan tilgå, og den bliver derfor oftest brugt på mobilen, derfor laver vi vores hjemmeside via mobile first metoden, hvor vi derfor sørger for at alt hvad vi laver på hjemmesiden bliver responsive. Til hjemmeside skal vi også finde ud af hvilke menuer punkter som skal stå i navbaren. Til hjemmeside skal der være en forside, hvor vi vil give brugeren en fornemmelse af, hvad de kan forvente at finde på siden. Derudover skal vi have en koncept/event side, hvor vi fortæller om de forskellige events som brugeren kan deltage til, samt viser hvor og hvornår, via en kalender og et map, og giver en kort forklaring, af hvad eventet tilbyder af musik. Dernæst giver vi brugeren en lille beskrivelse af hvad Blue Machine er, og hvilken slags musik de kan tilbyde. Til sidst har vi en kontakt side, hvor vi linker Blue Machines facebook side til. Skeleton Til vores skelet har vi brugt 10x10 metoden, hvor vi har skitseret forskellige foreslag, som Er lavet ud fra hvordan vi vil strukturere siden. Her er vi ikke nået til det design mæssige endnu, dette vil vi først kigge på, når vi er enige om hvordan siden skal opstilles. Eksempler på nogle af vores skitser:

5 Som man kan se ud fra vores skitser, har vi skitseret ud fra mobile first, så skitser er derfor lavet til mobil, derefter kigger vi på hvordan hjemmesiden skal se ud på computeren. Ud fra vores skitser, er vi kommet frem til følgende skelet, som vi vil udarbejde vores design efter. Surface Til vores forside vil vi have et stemningsbilled som skal være med til at give bugeren en hurtig fornemmelse af, hvad de kan forvente at finde på hjemmeside. Vi har derfor valgt at bruge et af Blue Machines egne billeder fra deres facebook side. Men da blue machine ikke rigtig har nogle gode stemnings billeder har vi derfor selv krearet et billed, ved at sammensætte 2 af deres billeder, og dernæst gjort billeder sort/hvidt, både fordi at det passer bedre til de farver som vi kommer til at bruge i designet, men også fordi det giver en bedre stemning i billedet i forhold til det oprindelige billede. Vi har brugt hele billedet til venstre, og tilføjet, DJ apparatet fra højre, så man Se hvad det er der foregår på billedet, derefter er det så blevet gjort sort/hvidt. Til farverne på siden, har vi valgt at bruge farverne fra logoet, til at have den helt store indflydelse på siden, og da det hedder blue machine er det derfor også passende at siden har den blå farve som et generelt design. Derudover supplere vi den blå farve med sort og hvid.

6 Til designet har vi også valgt at bruge elementer til at danne baggrunden, disse elementer er audio waves som vi har lavet i PhotoShop. Disse elementer har vi brugt til at støtte op omkring emnet elektronisk musik. Til pilen på forsiden, har vi også valgt at redigere og designe på, da den skal passe til resten af designet, vi derfor også på valgt at tilføje audio waves. Vi fik at vide fra Blue Machines at vi ikke måtte ændre på logoet, så dette har vi ikke gjort, men vi har dog forsøgt at få det til at matche resten af designet, således at det ikke komme til at se forkert placeret ud på siden. Efter vi har lavet designet, opsætter vi et prototype, før vi går i gang med at kode hjemmesiden. Vores prototype ser derfor således ud. Til opsætning af vores elemter på siden, har vi også brugt gestalt, i form af proximity, hvor vi har sat vores logo op ad den tekst som høre til event, således at brugeren ved første øjekast kan regne ud, hvilken tekst der høre til hvilket event. Efter vi har lavet vores prototype, begynder vi at kode ud fra det design, og struktur som vi er kommet frem til.

7 Konklusion Vi kan konkludere ud fra vores projekt, at vi har fået lavet en hjemmeside som appellere til målgruppe på de år, med et design som støtter op omkring temaet elektronisk musik. Vi kan også konkludere at vi har brugt den smule information som vi har fået, til at udfylde hjemmeside mere end den oprindelig, samt gjort hjemmesiden mere attraktiv for besøgende brugere. Derudover har vi også fået kodet en kalender ind på siden, som via en database henter data ind på siden, som viser brugeren hvornår de kan forvente det pågældende event finder sted. Generelt kan vi konkludere at vi har lavet et godt produkt, som har et moderne look i forhold til andre hjemmesider. Process refleksion Mads Balslev og Kristian Gasberg Vi har i gruppen kun været 2 personer i gruppen, det har derfor været vigtigt at vi har kunne hjælpe hinanden med at få et godt resultat. Vi syntes begge at vi har haft et godt samarbejder, hvor Mads har stået for at kode hele hjemmesiden samt skrive log bog (hvilket er første gang nogen af os koder) Og Kristian har stået for at desgine hjemmesiden samt skrive log bog. Mads har haft den ledende rolle i gruppen, da han også har været bedst til at møde op til timerne, hvor Kristian har været forhindret flere gange i starten af semestert. Men generelt har vi haft et godt samarbejder og kommet frem til et produkt som vi begge er meget tilfredse med, da det jo er første gang vi begge har stået alene med at kode en hjemmeside.

8 Litteratur liste Links Nielsen.com Who is the electronic music listener. (online) Nielsen.com Available at: Loynes, A, Scoopmarketing.com Nielsen music 2014 Year-end repport. (online) scoopmarketing.com Available at: Ukendt forfatter, beatswitch.com The EDM audience analysis. (online) beatswitch.com Available at: Bøger Busch, A.M. et al. (2011): Kommunikaton i Multimediedesign. Hans Reitzels Forlag