WOODKID. The Golden Age. Banner Projekt - 1 Semester, CPH Business, MUL-A13E. Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm

Transkript

1 WOODKID The Golden Age Banner Projekt - 1 Semester, CPH Business, MUL-A13E Casper Birch Buchberg, Natahlie Heiden & Sebastian Nyholm

2 Projektbeskrivelse Vi har designet og animeret tre forskellige bannere der fremvises på en bannerside. Vores bannere henviser til vores simple webshop, som er udviklet i wordpress med eget tema. Der skal være en rød tråd mellem banner og hjemmeside. Bannerside: Indholdsfortegnelse Læringsmål Banner - Casper Birch Buchberg Design & teknik Individuelle spørgsmål Banner - Nathalie Heiden Design & teknik Individuelle spørgsmål Banner - Sebastian Nyholm Design & teknik Individuelle spørgsmål Konklusion Bilag Kontrakt side 2 af 8

3 Læringsmål Vi blev hurtig enige om at opgaven var overskuelig og der var derfor god tid til at løse den, så vi har sat vores læringsmål således, at vi har kunne nå omkring de metoder der findes til at producere bannere. Vi har taget et banner hver, så vi kunne lave tre forskellige bannere med tre forskellige metoder. Det gør det lettere at pinpointe, hvad der bliver flash afløseren. Bannerside Vores bannerside er baseret på politiken.dk da musikkens målgruppe ofte er mere passende til det voksne publikum. Banner 1-468x60 Casper Birch Buchberg Banner x 600 Sebastian Nyholm Banner 2 300x250 Nathalie Heiden side 3 af 8

4 Banner - Casper Birch Buchberg Mit banner har størrelsen 468px - 60px og er blevet udviklet i Hype 2. Jeg valgte at fokusere på woodkids prisvindende musikvideoer, der giver hans sange fylde og fortæller en historie. Banneret er optimeriet til alle platforme og har et animeret fallback gif-image, så hvis javascript er slået fra vil det stadig virke. Stilen på banneret er i sort/hvid og meget tonet ned, så det afspejler hans musikvideo. Der bliver brugt video i baggrunden, som har følgende funktioner i HTML5: repeat, mute & no controls. Dette er gjort for at have fokus på indholdet, brugeren skulle meget gerne blive fanget af det minimalistiske udtryk. Der gerne skulle sætte sig et spørgsmåltegn, hvad er det, jeg må se hvad det drejer sig om. Individuelle spørgsmål Da jeg har haft arbejdet med flash, og arbejdet med HTML, CSS og jquery før var mine mål mere at finde et mere klart svar på hvad afløseren bliver og hvad fremtiden bringer. Jeg har været overbevist over flash afløseren ikke skal findes, men et helt nyt værktøj kun til at producere responsive bannere. Min rolle i projektet har været lederrollen, hvor arbejdsfordeling og kommunikation har været vægtet højt. Jeg har gjort en god indsats og holdt godt styr på hele projektet og sørget for der har været et overblik, så vi har fået løst opgaverne over niveau, med sans for detaljer. side 4 af 8

5 Banner - Nathalie I mit banner har jeg valgt, at arbejde med målene 300px 250px. Da vi som gruppe skulle have en rød tråd igennem vores bannere, har vi valgt nogle gennemgående logoer for kunstneren, som jeg selvfølgelig også har med i mit banner. Derudover valgte jeg, at beskæftige mig med salg af koncertbilletter. Jeg tog et billede af en af deres koncerter til det første slide. Til det andet slide valgte jeg en sort baggrund, koncertinformation og en grøn call to action knap til landingpagen. Teknik Jeg har arbejdet i Edge Animate fra Adobe pakken, hvor jeg har brugt følgende teknikker: billede slide, fade effect, der går fra opacity 100 til 0 og tekst. Bannerslide 1 der slider fra venstre mod højre. Billedets motiv er en af Woodkid s gamle koncerter. Hvilket er relevant for temaet. Bannerslide 2 indeholder koncertinformationer - hvor og hvornår. Derudover har jeg placeret en grøn call to action knap, der fører videre til vores landingpage. På landingpagen kan man købe billetter til koncerterne. Individuelle spørgsmål Jeg har været lidt betænksom med opgaven, da jeg skulle være i gruppe med to meget dygtige medstuderende. Og da jeg har svært ved at følge med i undervisningen, ville det blive en udfordring for mig, at kunne følge med i deres tempo. Men det har vist sig, at de har været gode til at forklare alt for mig, så jeg hele tiden var med. Mine læringsmål har været at forstå opgaveformuleringen og lære at lave et banner, samt teknikkerne ved en landingpage. Det har jeg, efter min mening lært og jeg vil i fremtiden, kunne bruge det til et banner på samme niveau. Jeg har fundet ud af at jeg har alt for høje krav til mig selv, da jeg ikke har haft så meget kendskab til programmerne, som jeg regnede med at have på dette tidspunkt i uddannelsen. Ud fra resultaterne vil jeg mene, at alle i gruppen har gjort en seriøs indsats, nogle mere end andre. Jeg er stolt af at jeg fik nogenlunde styr på Edge, da det var det program jeg kæmpede mest med. side 5 af 8

6 Banner - Sebastian Nyholm Mit banner måler 160px - 600px og er blevet kodet fra bunden af. Banneret er blevet lavet til at promovere Woodkids produkter og dens høje og smalle form giver en god mulighed til at liste billeder (produkter) op, uden at give en forvirret opsætning for modtageren. Den har en hvid baggrund, da den skal holde samme stil som hjemmesiden og produkterne ikke skal fremvises forskelligt. Målet med den er, at den skal fremstå simpel og ren, uden støj og forvirring, som kan forringe beskeden. Ud over farven hvid fra hjemmesiden, bruger banneret typografien og logoet, som er blevet valgt, så man ikke er i tvivl om, hvor man er kommet hen, hvis man klikker på den. Som nævnt er banneret kodet og her er det i ren HTML, CSS og jquery. Den mest anvendte funktion er.animate, da den giver gode muligheder for at animere en banner. Herunder er opacity og height brugt, så teksterne og billederne fader ind og ud eller slider op. Individuel læring Da jeg tidligere har siddet i flash var Edge Animate ikke specielt svært at komme igang med, da brugerfladerne er meget ensformige og det kun er den måde programmet selv koder på, som er forskelligt. Jeg stillede mig derfor den udfordring at kode banneren i jquery, da man kan bruge jquery til at gøre hjemmesider mere levende, hvilket Edge Animate ikke giver muligheden for på samme måde. Med min indsats I dette forløb lærte jeg derfor at skrive basale jquery koder, samt at implementere dem på hjemmesider, som man kan se på landingpagens checkout og i banneret. side 6 af 8

7 Konklusion Teamet Vi har haft god kommunikation gennem hele projektet og vi har kunne udnytte hinandens viden og arbejdsfordelingen har været uddelt fra start og alle har overholdt deadlines. Opdelingen af projektet (et banner hver), har gjort at vi har haft et forskelligt fokusområde og haft noget at foretage os. Adobe Edge, Hype 2 eller håndprogrammeret? Måske noget helt fjerde? Da vi har arbejdet med tre forskellige teknologier så har de klare fordele og ulemper i alle programmer meldt sig på banen. Adobe Edge, er opbygget og er klar vinder hvis det skulle være en flash afløser - da det er veludviklet og man kender mange værktøjer fra Adobes programmer. Hype 2, er et program der kun eksisterer til Mac, det er meget overskueligt og det er lige til at gå igang med. Da det er meget intuitivt at bruge, gør det man har lyst til at lege med det. En af de unikke funktioner er at optage scenen, så når man bevæger elementer på skærmen, gemmer man animationen og pl Håndprogrammering, kræver selvfølgelig at man kender til HTML, CSS3 & jquery. Fordelen er at man har 100% kontrol og koden bliver holdt til minimalt niveau for bedre loadtime. Problemet er dog tiden til at producere banneret og at man skal optimere til crossplatform. Google Web Designer, er i øjeblikket i beta, men reklamegiganten har fat i den lange ende. De har fokus på responsive bannere, youtubeintegrationer, webfonts mm. Det er ikke en flash afløser, men et helt nyt produkt som er skabt til at producere bannere. Det vigtigste er at google er meget interesseret i at lave det bedste bannerreklame program, da de lever af reklamer. Så når de bruger 1 time på at udvikle på det, tjener de penge i den anden ende af reklame indtægter. Google Web Designer - gratis. side 7 af 8

8 side 8 af 8