Bannerprojekt 2013 Merete Geldermann Lützen Jesper Hinchely http://designduck.dk/tli/eksempelside/ Multimediedesign Hold B Sebastian Bryggemann Tramp cph-st70@cphbusiness.dk Andreas Münter cph-em38@cphbusiness.dk Mads Emil Lindegaard Henriksen cph-mh379@cphbusiness.dk
Indholdfortegnelse Side 1. Indholdsfortegnelse 2. Indledning 2. Projektbeskrivelse 2. Gruppens mål 3. Bannerne - Skyskraberen - Fuld banner 4. - Medium rektangel - Eksempelside 5. Landingpage 6. Læringsprocess - Andreas Münter - Mads Emil Lindegaard Henriksen - Sebastian Bryggemann Tramp 7. Konklusion 7. URLs 1
Indledning The Lonely Island s kække udtryk har i lang tid sat dem på verdenskortet som et af de største comedy-band til dags dato. Drengene har siden folkeskolen lavet musik sammen, deres kemi og sammenspil er helt specielt og det kan man mærke i deres musik. Drengene har vundet adskellige Emmy-awards for deres hits Dick in a Box, Jizz in My Pants og Like a Boss, der samtidig har hittet over alt i verdenen. Bannerprojektet på multimediedesigner uddannelsen er andet projekt på første semester. Vi har fået stillet til opgave at lave 3 bannere i forskellige størrelser for et valgfrit band, tage et screenshot af en tilfældige hjemmeside og så derefter indsætte de respektive bannere ved hjælp af CSS samt linke videre til en landingpage. Projektbeskrivelse Vi har valgt at arbejde med det amerikanske comedy band The Lonely Island (TLI). Bandet er kendt fra Saturday Night Live (SNL). SNL er et amerikansk comedy program, som dansk tv har lavet en parodi på kendt som Live fra Bremen. Bandet valgte vi pga. deres, til tider, flabede og useriøse udtryk hvilket vi synes kunne give en sjov drejning på opgaven. Til projektet skal der produceres følgende: Tre bannere i forskellige størrelser (468x60px, 160x600px & 300x250px). En eksempel-side hvor man kan se alle tre bannere i funktion, fx nyhedsside. En landingpage som bannerne linker til. Skal være lavet i HTML5 med et separat styleheet i CSS. Hele projektet skal have en tydelig rød tråd som gør at man føler en sammenhæng mellem de forskellige dele af projektet. Ved hjælp af vores viden indenfor Photoshop, Illustrator, Edge animate, HTML5 og CSS vil vi udføre dette projekt. Gruppens mål At udvide vores viden inden for animering, arbejde på vores vektorgrafiske færdigheder og bruge seperate style-sheets til HTML5. Dernæst har formålet også været at skulle arbejde som en gruppe, såvel som at udvikle vores selvstændige færdigheder. Det har været vigtigt for os at opgaverne er blivet fordelt rundt i gruppen, så alle parter i teamet føler at de har fået overskuelige, dog udfordrende, opgaver. Hermed giver det den største mulighed for succes og ny læring. 2
Bannerne Det fremgik af opgavebeskrivelsen at de tre bannere skulle have en konsistent visuel stil, hvilket vi har haft meget fokus på. Det var det første vi som gruppe satte os ned og besluttede. Temaet vi har valgt er umiddelbart meget enkelt, men vi syntes at den klare gule farve komplimenterer vores valg af en sort baggrund. Nedenunder ses de farver vi har brugt. #ccc #ffffff #fef200 #040404 #1d1919 Skyskraberen (160x600px) Da dette banner er meget højt og smalt er det vigtigt at arbejde med noget som giver mening i højden. Derfor har vi valgt at arbejde med en gammel kendt sang fra TLI, Jizz in my pants, som var med til at bandet blev rigtig kendt på verdensplan. Som i de to andre bannere holdes stilen med den mørke baggrund og den meget markante gule tekst, samt den gennemgående The Lonely Island tekst. Alle elementer i animationen er vektorgrafiske, altså er det blevet udarbejdet i Illustrator for at få den højeste opløsning. Fuldbanner (468x60px) Det fulde banner indeholder en masse elementer fra Illustrator. Alle objekterne i animationen er udarbejdet i Illustrator, selv teksten er blevet lavet heri. Et forholdsvist simpelt men effektivt banner, der gør brug af skiftende opacitet og bevægelse på x-aksen. Figurene er tegning i hånden i Illustrator. 3
Medium Rektangel (300x250px) Banneret starter med at vise covers fra tre succesfulde singler fra The Lonely Islands nye album The Wack Album, ved at glide dem væk fra banneret. Hvert cover består overordnet af forskellige farver. Det sidste cover bliver faded ud, hvorefter at musikgruppens ansigter enkeltvis popper op nedenfra. Derefter glider der et gult banner (vektorgrafik) ovenfra og ned med musikgruppens navn. Til sidst fader en tekst frem i midten, hvor læseren får at vide, at TLIs nye album er udgivet. Banneret begynder derefter forfra, så det er muligt for læseren at få det hele med. Eksempelside Ved udarbejdelsen af vores eksempelside, har vi som det første indsat vores screenshot af en nyhedsside under <body> i vores nyoprettet HTML-fil. Derefter indsatte vi hvert banner under <body>, samt koderne for at køre deres javascripts i <head>. For at få placeret vores bannere til de ønskede steder på vores nyhedsside, etablerede vi et internt stylesheet (CSS) under <head> i samme HTML-fil. For alle tre bannere samt vores screenshot har vi benyttet os af positionsværdien absolute, som gør at hvert element bliver placeret i forhold til det første overordnet element. 4
Landingpage Vi har valgt at arbejde ud fra loven om enkelthed. Landingpagen er udført så simpelt som muligt, med links som linker videre til TLIs officielle side, med mulighed for at klikke sig tilbage til vores site. Siden er designet med samme farve koder som går igen i alle vores bannere, for at få en fornemmelse af helhed for brugerne. Udover det er der et simpelt javascript, som muliggør at man kan få info om bandet uden at man skal videre til en anden side. Når der klikkes viser javascriptet en div boks, med information, og skjuler den når der klikkes på den eller banneret med info igen. Da vores band er så særlige at de ikke giver koncerter, endnu, har vi ikke fundet det vigtigt at lave en reklame for billetter til koncerter mv. Siden er udført i HTML5 med et separat CSS stylesheet. K.I.S.S KEEP IT SIMPLE AND STUPID 5
Læringsprocess For mig har projektet været en god mulighed for at lære lidt ud over hvad der blev forventet af os. Jeg er meget lærenem, når jeg først får hands-on. Derfor faldt hele Edge animate delen mig meget nemt og jeg har brugt det overskud til at lære lidt javascripting og arbejdsmetoder dog skal det nævnes at jeg er blevet hurtigere til at bruge Edge animate, da jeg nu ved hvordan interfacet fungerer. Jeg har lært hvordan et par af mine klassekammerater arbejder, som gruppe, og det har været en ganske positiv oplevelse. De har været meget åbne for idéer og arbejdet har været utroligt nemt. Det er første gang jeg har haft muligheden for at benytte programmet Skype, som et arbejdsværktøj, og det har hjulpet meget for kommunikationen i gruppen. Andreas Münter, multimediedesign, hold B Jeg føler at hele dette projekts forløb har gået godt ikke kun det færdige produkt, men også det at arbejde som et team. Vi har taget imod dette projekt med en positiv tilgang. Teamet har været meget åbne for idéer og muligheder - bl.a. beslutningen om hvilken musikgruppe vi skulle arbejde med, eller hvordan vores landingpage skulle fungere. Vi har flere gange sat os sammen efter skole for at komme med input samt hjælpe hinanden. Under efterårsferien har vi benyttet Skype til at kommunikere med hinanden, og det har virket upåklageligt. Jeg kunne sagtens finde på at samarbejde med dem igen i fremtiden. Adobe Edge Animate og Adobe Illustrator er for mig to nye programmer, som kræver yderligere øvelse. Dog føler jeg at Edge Animate har været nemmere at lære, eftersom det minder en smule om normal videoredigering. En vigtig del af hvad jeg har lært i Edge Animate må være det at benytte sig at labels (giver et bedre overblik, da det nemt kan blive uoverskueligt med flere elementer), og triggers samt open actions i banneret (triggers har vi brugt til at loope vores bannere open actions til at indsætte et klikbart link). Mht. til Illustrator føler jeg at jeg har brugt for at gennemvgå flere tutorials, hvis jeg vil forbedre min færdigheder inden for vektorgrafik. Men overordnet føler jeg at jeg har vist potentiale i begge programmer, og jeg er ret tilfreds med mit arbejde. Til sidst var det også rart, at få arbejdet yderligere indenfor HTML og positionering i CSS, i forbindelse med at teste mine færdigheder. Mads Emil Lindegaard Henriksen, Multimediedesign, Hold B I forløbet har jeg lært at bruge EdgeAnimates basale funktioner, hvilket helt klart har givet mig et bedre grundlag for at arbejde i programmet fremover, det samme gælder Illustrator som virkelig har åbnet mine øjne for vektorgrafikken og dets muligheder. Det at kunne lave elementer/objekter i så høj en opløsning vil virkelig hjælpe mig fremover, fordi det netop vil kunne give det arbejde jeg laver udenfor skolen et ekstra pift. Derudover er det et fantastisk tegneprogram som jeg med garanti også vil kunne komme til at bruge. Det er godt at komme i gang med at arbejde i HTML og CSS igen, hvilket også har været en af de federe ting ved projektet. Netop dette er helt klart en af de ting jeg ikke er så stærk i, men noget jeg virkelig gerne vil udvikle mig i. Jeg har lært at bruge positionering i CSS, og egentlig bare fået genopfrisket de mest basale funktioner som der er i det at kode. Sebastian Bryggemann Tramp, Multimediedesign, Hold B 6
Konklusion Med banner projektet har vi fået styrket vores evner indenfor relevante værktøjer, så som Edge animate, CSS3 og HTML5. Vi har lært hvordan man arbejder effektivt i et team, med arbejdsfordelinger samt overholde mødetider og de retningslinjer der er fastlagt i gruppen. Vores produkt virker som en sammenhængende og velfungerende reklame for vores band, der bunder i et seriøst og effektivt arbejde fra vores side, som er hele gruppen har været godt tilfredse med. URLs Liste over gruppens porteføljer: Mads Emil Lindegaard Henriksen www.mul100.itkn.dk Sebastian Bryggemann Tramp www.mul115.itkn.dk (Erik) Andreas Münter www.designduck.dk/mul Eksempel-side The Guardian http://designduck.dk/tli/eksempelside Landing Page http://designduck.dk/tli/ 7