Bannerprojekt.

Transkript

1 Bannerprojekt

2 Faktaark Titel: Bannerprojekt (Kulturnatten 2012) URL: Gruppe 5: Morten Møller Nielsen Mathias Andreas Svensson Mikael Lund Kristensen Vi var oprindeligt fire gruppemedlemmer, men efter uoverenstemmelser ophørte samarbejdet med vores fjerde medlem d Dette skete efter aftale med Ian Wisler-Poulsen og Merete Lindemann. Hold: Lærere: Clmul-b12e 1. semester efterår 2012 Ditlev Skanderby Morten Rold Frederik Tang Ian Wisler-Poulsen Underskrift: Morten Møller Nielsen Mathias Andreas Svensson Mikael Lund Kristensen

3 Titel: Bannerprojekt (Kulturnatten 2012) Formål: Formålet med projektet er, at arbejde med animation og forskellige former for grafik samt at arbejde sammen som et team/gruppe. Følgende emner i Flash og Illustrator gennemgås i løbet af projektet: Brugergrænseflade Arbejde med vektorgrafik Arbejde med Bitmapgrafik Arbejde med objekter Animationsteknikker Publicering til internettet Indholdsfortegnelse: Indledning... 1 Læringsmål for gruppen... 1 Interessent analyse... 1 Risiko analyse... 1 Projektplan... 2 WBS (Work Breakdown Structure)... 2 Gantt-chart... 3 Kreativ proces... 3 Idé-generering... 3 Farver... 3 Typografi... 3 Billeder/Illustrationer... 4 Landingpage... 4 Brugergrænseflade... 4 Bagvedlæggende kode... 5 Farver og font... 5 Flash... 5 Banner Banner Banner Konklusion... 6 Evaluering... 6 Litteratur... 7 Bilag... 7

4 Indledning: Kulturnatten er en af Københavns største årlige begivenheder. Den fredag skolerne går på efterårsferie, åbner byen, og skaber en festlig aften, der i næsten 20 år har været en af Københavns mest afholdte og velbesøgte kulturevent. Mere end 250 museer, teatre, biblioteker, kirker, ministerier, parker og pladser over hele byen byder publikum velkommen. Spændende og flotte arrangementer demonstrerer, at byen favner bredt, når den viser sine mange sider af kulturlivet frem. Læringsmål for gruppen: 1. Blive bedre til flash 2. Inddrage teori i projektet 3. Blive bedre til at lave estimat og lave et gantt-kort i ms-projekt (eller lignende), for at kunne fastslå hvornår visse ting skal laves 4. Blive bedre til at opbygge en HTML side, samt definere sidens samlede layout med CSS 5. Blive bedre til at redigere og tegne billeder i Illustrator og Photoshop 6. Blive bedre til at organisering og gruppestyring Interessent analyse: Formålet med interessentanalysen er, at give projektgruppen overblik over hvilke personer, der har interesse i projektet. Ved at lave en interessentanalyse sikrer vi (projektgruppen), at kampagnen lever op til de succeskriterier, der er fastlagt ud fra de nøglepersoner, som bliver berørt eller er direkte involveret i projektet. Vi identificerer ressourcepersoner (os selv) og kan planlægge en hensigtsmæssig kommunikation og involvering af interessenterne (se bilag 1). Risiko analyse: Formålet med risikoanalysen er at komme diverse risici i forkøbet, som i værste fald kan få fatale konsekvenser for projektet. Ved hjælp af risikoanalysen kan man skabe rum i planlægningen, så projektplanen kan omstruktureres og deadline overholdes. Ved at definere hvilke hændelser der kan få betydning for projektets gennemførelse, kan vi imødekomme katastrofesituationer med en plan B. Vi har valgt at anskue risici fra to sider: ved at forebygge at et problem opstår (forebyggende), og hvordan vi kommer videre hvis et problem opstår (afbødende). Vi har lavet en risikoanalyse i starten af vores projekt, så vi bedre har kunne tackle de kommende problemmer i projektet (se bilag 2). 1

5 Projektplan: Et projekt er en ikke-rutinemæssig arbejdsopgave, med et klart mål og deadline for hvornår projektet skal være færdigt. Der er ukendte faktorer og risici, som ikke kendes på forhånd. Begrænsede ressourcer og omkostninger, har indflydelse på projektet. WBS (Work Breakdown Structure) I vores indledende fase har vi gjort vi brug af WBS-metoden, for at bryde projektet op og overskueliggøre de forskellige opgaver. Vi har brugt postit s, skrevet de forskellige opgaver derpå og delt dem i kategorier. Work Breakdown Structure Bannere Banner 1: Grafiske elementer, alting blev tegnet ud fra bitmapgrafik og billeder hentet fra internettet. Flash animation: tegnede skyline n ved hjælp af maske og classic tween. Flash animation af tekst og dato via Motion Tween. Flash Actionscripting af linking og animationer. Banner 2: Gradieret baggrund. Flash animation: Tekst og logo animeret er classic tweens og motion tweens. X et er animeret med motion tweens. Flash Actionscripting af linking og animationer. Banner 3: Gradieret baggrund. Gardiner tegnet i illustrator. Tekst og dato via classic tweens. Flyende stjerne via motion tweens Flash animation af bevægende skyline via Motion Tween.. Flash Actionscripting af linking og animationer. Landingpage Design Design udformet udfra projektkrav omkring ensartethed med bannere og landingpage Opsætning Standard xhtml/css kodning via Dreamweaver Teksten er mumletekst. 2

6 Menuen er håndkodet ud fra en unordered list. En stor kasse hvor al indholdet er. Produkter Udførsel Arbejde på skolen og hjemme hos gruppemedlemmerne brainstorming, skitser m.m Rapport Udførsel Arbejde på skolen og hjemme hos gruppemedlemmerne Arbejde sammen, uddelegere opgaver, samt læse hinandens små dele og diskutere dem. Evaluering Diskutere hele processen igennem. Gantt-chart Efter vi har gjort brug af WBS, har vi udarbejdet et Gantt-chart for at få overblik over projektperioden. Vi har brugt Microsoft-project til at udarbejde vores projektplan. Her er de forskellige delopgaver og faser sat ind, og vi har tilføjet vigtige milepæle i projektforløbet (se bilag 3). På Gantt-chartet fremgår det, at vi har overskredet en enkelt milepæl. Da det er en intern milepæl for gruppen, og ikke overfor kunden, har vi kunnet indhente projektplanen igen. Overordnet set har projektplanen holdt, ved at gruppen har udvist engagement og arbejdsiver Kreativ process: Idé generering/skitser (mock-ups) Vi startede med at lave et mind-map, for at få tankerne omkring Kulturnatten ned på papir og danne overblik. Vi lavede en brainstorm for at finde på idéer til projektet. Herefter blev de første løse skitserlavet på papir. De er senere blevet farvelagt for bedre at kunne se idéerne (se bilag 4 og 5). Farver Vi har benyttet en mørk blå som baggrund på bannere og header på landing-page. Som kontrast hertil har vi brugt hvid og gul (og rød på et enkelt banner). Typografi Vi har benyttet fonten monaco til logoet samt den resterende tekst på vores bannere. På vores landing-page har vi #2E3192 #F7F7E3 #CC0000 3

7 benyttet den web-venlige helvetica. Sidstnævnte font er også benyttet i denne rapport. Både monaco og helvetica er sans-serif fonte. Da en side af den type vi har lavet ofte vil være teksttung med megen information har vi valgt at dele de enkelte sider i spalter for at fremme overskueligheden/læseligheden. Teksten i spalterne er med lige margener af samme årsag. Billeder/Illustrationer Skylinen, som er et gennemgående element i vores projekt, er tegnet i Illustrator. Den indeholder kendte kulturelle vartegn for København (Tivoli, Operaen, Planetariet mv.). Vi har fundet billeder af de forskellige bygninger på nettet (alle i jpg format) og tegnet vector grafik ovenpå dem i Illustrator. Baggrunden på vores landing-page er et aftenbillede af København, som er fundet på nettet og efterfølgende behandlet i Photoshop. Her er det blevet skaleret ned i størrelse, så det passer til vores website. Desuden har vi ændret i farvekurverne således farverne er blevet dæmpet. De øvrige billeder på siden er ligeledes fundet på nettet og behandlet i Photoshop. Landing-page: Siden er skrevet i XHTML med et eksternt stylesheet (CSS). Vi har gjort brug af Adobe Dreamweaver i udarbejdelse af siden. Den er valideret i XHTML på validator.w3.org. Siden er testet i Chrome, Firefox, Safari og Explorer. Sidstnævnte har et problem med at vise de rounded edges, der er i bunden af det hvide tekstfelt midt på siden. Brugergrænseflade Baggrundsbilledet fylder hele baggrunden, og er blevet redigeret i Photoshop ved at ændre farvekurverne, så det ikke virker støjende i forhold til vores valg af farver på siden. Vi har bestræbt os på at bygge siden enkelt op og har været opmærksomme på undersøgelser/principper vedrørende genkendelighed på websites. Derfor er sidens forskellige elementer placeret, hvor sidens brugere højst sansynligt forventer at finde dem (princip om ekstern genkendelighed). For at bedre navigationen/ wayfinding i menuen er der en hover, og en selected effekt således man kan se hvor man befinder sig på siden, og hvor man kan gå hen. Menuen er i en sort ramme så det tydeligt fremgår at elementerne heri hører sammen (princip om lukkethed). Elementerne er desuden i ens rammer (princip om ensartethed) og placeret tæt på hinanden (princip om nærhed). De forskellige undersider er lavet ud fra de samme linjer og grids (princip om linjer og grids), hvilket giver brugeren en følelse af sammenhæng på siden (princip om intern 4

8 genkendelighed). Generelt er der tre spalter med information pr. side. På enkelte sider (eksempelvis kort-siden ) er der kun en spalte med tekst, mens kortet fylder to spalter, således linjerne for siden bliver bevaret (se bilag 6). Vi har valgt at have et søgefelt for at sikre os, at brugeren nemt kan finde frem til den information de kan have brug for, for at deltage i Kulturnatten. Bagvedlæggende kode Selve siden er en div der er blevet centreret. Øverst er der endnu en div, som udgør sidens header. Heri er vores logo indsat som baggrundsbillede. Under denne er der endnu en div. Her er menuen er placeret, som en unordered list der er sat til inline således den står på linje. Vi har lavet en selected class, som angiver hvor du befinder dig i menuen. Den hvide boks med indhold er en div, der ligger under menuen. Denne boks er generelt delt i tre spalter ( divs ). Den har desuden rounded corners i bunden. Farver og font Farverne på siden er primært mørke (sort og blå). Baggrundsbilledet er lyst i bunden og helt sort i toppen, så det passer sammen med menuen og headeren som er sort/blå. Den hvide og gule tekst herpå står i kontrast til de mørke nuancer. Den store indholdskasse med tekst er helt hvid, for at danne kontrast til den sorte tekst. Flash: Med udgangspunkt i skitseforslag har vi udarbejdet tre reklamebannere for Kulturnatten med en gennemgående visuel stil. Skylinen (eller elementer herfra) går igen på samtlige bannere ligesom font, logo, udvalgte farver og baggrund. De forskellige elementer på bannerne er lavet i Adobe Illustrator og derefter importeret til Adobe Flash. Vi har lavet et mock-up, hvor bannerne er sat ind på en allerede eksisterende webside (se bilag 7). Banner 1: Fuld banner x 60px Skylinen bliver tegnet på banneret ved hjælp af en maske og en classic tween som gradvist afslører byen. Kulturnatten logoet og datoen kommer til syne ved brug af forskellige motion tweens. Et action-script looper animationen tre gange, hvorefter den stopper. Banner 2: Wide skyscraber x 600px Tekst, logo og dato er animeret med classic tweens og motion tweens. Det roterende X er skaleret op og i den gule farve, så det skaber et godt blikfang. Vi har kun benyttet en enkel bygning fra vores skyline, da dette passede bedst til bannerets dimensioner. 5

9 Banner 3: Medium rektangel x 250px Ved at bruge motion tweens, har vi skabt dynamik og blikfang i den pulserende by og den blinkende nattehimmel. Gardinerne og den røde farve er inddraget for at skabe associationer til teaterverdenen. Konklusion: Vi er overordnet set tilfredse med resultatet af vores bannerprojekt og mener vi har imødekommet de krav, som har været stillet i opgaveformuleringen. Ved at gøre brug af forskellige teknikker og teorier, som vi er blevet præsenteret for på uddannelsen, er vi kommet frem til en samlet løsning, hvor brugbarhed, genkendelighed og koncept er i højsæde. Evaluering: Mikael Lund Kristensen Jeg er godt tilfreds med projektet som helhed. Der er blevet arbejdet med forskellige dele af Adobe-pakken og der er udvist stor initiativ fra min projektgruppe. Det har været spændende at være med i projektplanlægningen, og lidt af en udfordring at arbejde med hele projektplanlægningsfasen. Vi har haft lidt intern kommunikationsvanskeligheder (som nævnt i faktaark), men jeg synes vi har tacklet det på en professionel måde. Er meget tilfreds med det endelige produkt, hvor den gennemførte designlinje på bannere og landing-page giver et samlet helhedsudtryk. Mathias Svensson Jeg har har arbejdet mest med html og css i forhold til flash, fordi jeg følte at jeg kunne bringe mest til gruppen ved at gøre dette. Vi fik en god side, og jeg fik genopfrisket og lært noget nyt, men flash fik jeg ikke øvet mig så meget i. En anden gang ville jeg måske fokusere mere på det jeg har svært ved end at gøre gruppen en bjørnetjeneste (jeg fik ikke øvet mig så meget i flash, de andre fik ikke øvet sig så meget i html). Men ellers har det været et fornuftigt forløb og der blev arbejdet hårdt, og projektet blev godt ifølge vores mening. Morten Møller Nielsen Min egen (og gruppens) indsats har fra starten været struktureret og målrettet. Der har været udfordringer undervejs. F.eks kommunikativt og med nogle af vores tidsestimater i Gantt-skemaet. Generelt har de problemer, vi har stødt på, været af planlægningsmæssig karakter. Her har dårlig kommunikation og undervurderede tidsestimeringer medført at deadlines er skredet og milepæle er blevet misset. 6

10 Jeg er stolt af vores færdige resultat, som jeg synes er meget gennemført. Projektet har en gennemgående visuel stil, som i høj grad er resulatet af en god indledende planlægnings- og brainstorm-fase. Litteratur: 20 Designprincipper. Wisler- Poulsen, Ian. 1. udgave, 1. oplag. Grafisk Litteratur Slides fra Fronter Flash CS5 - The Missing Manual Bilag: Bilag 1 - Risikoanalyse Bilag 2 - Interessentanalyse Bilag 3 - Gantt-chart Bilag 4 - Skitser Bilag 5 - Logoforslag Bilag 6 - Linjer og grids Bilag 7 - Bannere på webside 7

11 Bilag 1. Risikoanalyse Projekt: Bannerprojekt - Grp. 5. Udfyldt af: Grp. 5 Dato: Sandsynlighed (1-5) Risikotal (K x S) Handlinger Forebyggende Afbødende Hvad kan gå galt Konsekvens for projektet (1-5) Afstemning af ambitioner Indeledende præfase møde Definition af projektets omfang Tidspres Grundig planlægning Øge antallet af arbejdstimer Opsøge viden Trække på hinandens ressourcer og overholde planlagte aftaler De udførendes kunnen Arbejdsfiler ligger også lokalt på vores computere Arbejdsfiler ligger i dropbox Uheld, tyveri eller hærværk Indgå kompromiser for at overholde deadlines Samarbejde Indeledende præfase møde, grundig planlægning, afstemning af forventninger Holde møde angående situationen Lave gruppekontrakt/ projektplan Misforståelser i kommunikation Øge arbejdstimer og/ eller droppe dele af projektet Lave gruppekontrakt/ projektplan Overholdelse af indbyrdes aftaler Omstrukturere fordeling af arbejde Ændringer undervejs Gøre det muligt i projektplanen

12 Bilag 2. Interessentanalyse Projekt: Bannerprojekt - Grp. 5. Udfyldt af: Grp. 5 Dato: Håndtering af interessenten Samlet vurdering af interessentens bidrag/position Interessenten kan opleve følgende ULEMPER ved projektet Interessent Interessenten kan opleve følgende FORDELE ved projektet Vigtig interessent Løbende kommunikation og feedback Vi opfylder ikke kundens behov Kunden Vi overholder aftaler/mål/ deadlines Vigtig interessent Lave brugertests og analyse af målgruppen Misforståelse af kampagnens budskab. Utilfredstillende mængde af information og dårlig brugergrænseflade Målgruppen Et gennemført produkt som helhed mht. kommunikation (visuelt og informativt) og brugervenlighed Vigtig interessent Løbende kommunikation og feedback. Grundig planlægning. Dårligt indbyrdes kommuikation og samarbejde Projektmedlemmer Læring, samarbejde og planlægning Vigtig interessent Vi udviser initiativ og arbejdslyst At vi har misforstået opgaven Undervisere At vi har forstået opgaven og vist at vi har tilegnet os viden Ingen Opdatering af vores portfolio Projektmedlemmernes kunnen Finde nye samarbejdspartnere Kommende arbejdsgiver/ kunder Inspiration Ingen Ingen Upload til internettet Andre/ kommende studerende

13 Bilag 3. Gantt-chart

14 Bilag 4. Skitser

15 Bilag 5. Logoforslag KULTUR NATTEN KULTURNATTEN

16 Bilag 6. Linjer og grids

17 Bilag 7. Bannere på webside