!!! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Ugeopgave. Tilia Russel Kristine Paaske Judie Bahr Nadia Abdel Hadi Louise Norsker.

Transkript

1 Ugeopgave Tilia Russel Kristine Paaske Judie Bahr Nadia Abdel Hadi Louise Norsker Hold A, Gruppe 7 1

2 Indholdsfortegnelse Idé og konceptgenerering 3 Wireframes 3-4 Styleguide 5 Storyboard 6 Kreativt brief 7 Mock up Screenshot Screenshot og link til scrumboard 13 Billede af Burndown Chart Link til website 14 Refleksion Udkast til backlog

3 Idé og konceptgenerering For at få et oveblik over vores ønsker og idéer til dette projekt, startede vi ud med idé og konceptgenerering. Vores kunde er Kræftens bekæmpelse der i samarbejde med Tryg fonden, har fået udarbejdet deres kampagne site som skal sætte fokus på unges alkoholvaner, samt forældrenes holdning og viden omkring dette. Vores primære opgave er, at få mere "liv" på sitet ved brug af animation og interaktivitet - dog uden at re-desgine hele sitet. Med det menes der, at sidens opbygning (bokse) skal forblive den samme. Vi var alle enige om, at holde os til den originale stilart der er brugt på sitet hvilket er Flat Design. Ved udgangspunkt i Flat Design har vi besluttet at animere nye karakterer til siden, samt få tilføjet Sprites på dem. Dette vil foråbentlig medvirke til en mere "levende" oplevelse for besøgende på sitet. Ydermere vil vi tilføje Sprites på billeder i diverse bokse på sitet, som vi også selv re-designer. Med hensyn til brug af farve-skala, har vi i tankerne at skabe en mere ensartet oplevelse for brugerne. Vi vil derfor tilpasse enkelte farver i bokse, således at der bliver skabt en mere rolig helhedsfølelse. Wireframes 3

4 4

5 Styleguide 5

6 Storyboard 6

7 Kreativ Brief Hvem er afsenderen? - Kræftens bekæmpelse og Tryg fonden Hvem er målgruppen? - Forældre til unge mennesker, samt de unge. (13-50) Hvad er budskabet? - At informere unge og deres forældre omkring alkohol samt holdningen til dette Præsentation? - Gennem re-designet animation samt interaktivitet Hvad er formålet? - At ændre unge og deres forældres holdning til alkohol gennem en let tilgængelig platform Hvad skal målgruppen tænke? - At det er sjovt, at få viden om alkohol Kommunikation - stil og tone? - Ungdommelig, sjov, genkendelig, let tilgængelig Via hvilke medier kommunikerer vi? - Nettet 7

8 Mock up 8

9 9

10 Screenshots 10

11 11

12 12

13 Billede og link til scrumboard 13

14 Billede af Burndown Chart Link til website Refleksion Dag 1 Her fik vi præsenteret kunden og opgaven, hvilket førte en masse idé og konceptgenerering med sig. Vi fik udarbejdet et overordnet koncept, planlagt hvilke animationer vi skal have lavet samt påbegyndt skitseringen af disse. 14

15 Derudover fik vi udarbejdet et Kreativ Brief som gav os et samlet overblik over, hvilken målguppe vi skal fokusere på, vores budskab etc. (Se Kreativ Brief) Vi begyndte ydermere på vores layotdiagram, som vi anså som en vigtigt prioritering for opgaven, da det vil hjælpe os med hensyn til at kode vores opgave. Dag 2 Vi startede dagen ud med et SCRUM møde, hvilket gav os et overblik over hvor langt vi er nået fra Dag 1, hvad vores primære opgaver er for Dag 2, samt hvilke problemer vi et stødt på undervejs. Vi vil i dag fokusere på, at få designet vores karakterer i Illustrator, samt få udarbejdet Sprites til disse. Derudover skal vi have laet vores koncept helt færdigt, såfremt at det fremstår klart og tydeligt i henhold til udarbejdelse af resten af opgaven. Vi skriver ydermere på vores refleksion hver dag, hvilket sandsynligvis vil give et overskueligt og tydeligt indblik i hvordan vores proces forløber fra start til slut. Dette vil forhåbentligt medvirke til, at andre kan designe videre på vores opgave, samt forstå konceptet til fulde. Dag 3 Vi fik holdt SCRUM møde og uddelegeret dagens opgaver i mellem os. Disse bestod i dag af at få lavet story boards, således at vores wireframes kunne blive færdig udarbejdet. Endvidere skulle vi designe og animere headeren på forsiden af sitet. Ydermere fik vi færdiggjort layotdiagram og mock-up er også blevet lavet. Nu ligger fokus på kodningen, hvor vi ved brug af HTML, CSS og JQ vil få udarbejdet scenerne til vores valgte quiz. Vi har valgt at arbejde med testen "Den virtuelle teenager", som er en ud af tre quizzer man kan vælge inde på sitet. Det skal hertil tilføjes, at vi har fået kodet vores sprites til quizzerne på forsiden, hvor vi har animeret sprites til disse frem for de nuværende animations billeder. Dag 4 Efter det daglige SCRUM møde fik vi igen uddelegeret dagens opgaver. I dag er fokus hovedsageligt på, at få kodet sprites og scene til vores valgte quiz. Vi har valgt, at vi gerne vil prøve og kode scener til quizzen, således at den fungerer interaktivt. Dette vil forhåbentlig medvirke til, at bruger vil føle sig mere involveret og dermed vil finde det mere interessant at færdiggøre quizzen. Vi har arbejdet lidt med lyd til quizzen, men her har vi en del problemer og vi er ikke sikre på, om det vi kan lave er tilfredsstillende. Derfor har vi i Trello valgt, at placere den under "Blocked - problem", da vi dermed kan kigge på det senere i dag eller i morgen. Vælger vi at lyden ikke kan blive tilfredsstillende, så vil vi beskrive idéen bag tydeligt, således at det kan implementeres senere hen af en anden gruppe. Dette bliver i så fald beskrevet i vores backlog. 15

16 Dag 5 Vi har efter det daglige SCRUM møde fået uddelegeret opgaver, samt fået et overblik over hvor langt vi er nået - og hvor langt vi vurderer at komme her på sidste dagen for vores projekt. Vi har haft en del sygdom blandt gruppe medlemmerne og dette har uden tvivl skat ubalance i vores udførelse af denne opgave. Vi har alle bidraget på trods af fravær, men det er klart at man ikke kan opnå det resultat vi havde forventet, når energi niveauet ikke er optimalt. Fraværet har resulteret i, at vi har besluttet ikke at kode alle vores scener til vores valgte quiz, samt nedprioriteret lyd implementeringen. De ovenstående opgaver som vi har nedprioriteret er beskrevet i vores backlog, således at det er muligt at få disse implementeret uafhængigt af os. I dag skal vi have skrevet refleksion færdig, det samme gælder for backlog. Derudover er der små opgaver som screenshot af burndown chart, links til færdig produktion samt SCRUM board, at få samlet rapporten, valideret koderne og ikke mindst at få det hele til at fungere på sitet. Vi konkluderer, at vi har fået udarbejdet et tilfredsstillende stykke arbejde på trods af udfordringer mht. sygdom og implementering. Havde vi haft mere tid til udførelsen af opgaven, havde vi sandsynligvis nået tættere på at få implementeret og kodet hvad vi mangler. Dog anser vi vores rapport som værende komplet i henhold til, at kunne overtages af anden part. Udkast til backlog Vi har her udarbejdet en liste over prioriterede opgaver, som vi ikke fik implementeret i vores opgave. Lyd Vi ønskede at tilføje lyde til vores animationer, både i form af korte lydklip på forsiden når man "hover" over quizzerne, samt i forbindelse med når bruger tager quizzen. Vi ønsker lyde der harmonerer med konceptet på sitet, hvilket eksempelvis kunne være når man "hover" over ølflasken på quizzen "Hvad ved du om unge og alkohol?", så hører man lyden af en ølflaske der "skåler" med en anden ølflaske. Vi har ikke et facit på implementeringen af lydene, det er nærmere en beskrivelse af, hvad vi ønsker og hvad vi anser som passende bedst til sitet og vores redesign. Sprites til scener i quiz 16

17 Vi ønskede ydermere, at kode sprites til hver enkelt scene i vores valgte quiz "Den virtuelle teenager". Denne implementering viste sig dog, at være for stort et arbejde i henhold til vores tidsramme. Vi fik udarbejdet to scener, hvilket forhåbentlig vil give et klart overblik over, hvilken stil vi ønsker i henhold til den resterende implementering af scenerne. Her skal det tilføjes, at vi ikke havde evnerne til at kode boksen med tid og buttons, disse er dog beskrevet i wireframes, således at de kan kodes ind efterfølgende. Dog har vi fået lavet animationen samt baggrunde til scenerne, så på sin vis er det selve kodningen af spriten samt udarbejdelsen af svg. filer i henhold til dette der blokerer for videre implementering. Hover til forsiden Vi har udarbejdet sprites som vi har erstattet med de oprindelige animererede billeder på forsiden og disse er vi i og for sig tilfredse med. Vi har dog prøvet at tilføje en "hover", således at de kun bevæger sig når man kører musen over billedet. Dette har vi ikke kunne få til at fungere. Vi har ikke et krav om, at dette skal være en del af vores re-design, men vi har en formodning o, at det ville skabe en god dynamik til siden. Som det ser ud nu, så er der en del "liv" på siden - hvilket også er vores opgave at implementere, men det kan sandsynligvis også blive en forstyrrende faktor for nogle. 17