Produktionsforståelse. Julie Kühnell Hovedforløb 2, november 2017

Transkript

1 Produktionsforståelse 27

2 Tulip Pålækker Kunde: Tulip Pålækker Produceret: september 2017 Opgave: I forbindelse med lancering af Tulips nye spread-pålæg, skulle de bruge en række animerede html-bannere og grafikker til både Facebook og Instagram. Programmer: Photoshop, Edge Animate, Dreamweaver Kvalitetsvurdering: Jeg synes det er ærgeligt, at de endelige bannere ikke endte med at blive hostet, og skulle komprimeres, hvilket resulterede i, at de blev pixelerede. Jeg er dog tilfreds med hvordan bannerne endte, trods den store komprimering. 28 Introduktion

3 1 2 Briefing Skitsering af design Designudkast sendes til kunde Korrekturrunde Godkendelse af design 4 3 Overlevering til kunde Bannere pakkes og testes Bannere godkendes Korrekturrunde Animering af bannere 1 Vi startede med en briefing og Allerede ved telefonmødet startede Jeg brugte Edge Animate til animering af bannerne. Dette program de tilføjet clicktags, så de blev Ved pakningen af bannerne, fik telefonmøde med kunden. Her vi den grundlæggende skitsering af gennemgik vi materialerne vi havde modtaget, og snakkede om kundens ønsker til designet. bannerne i forbindelse med snakken med kunden. har nogle af de samme basale animeringsværktøjer som After Effects, men med HTML-bannere som output. klikbare. Derefter blev de grundigt testet gennem Adform. 29 Processen

4 5 6 Version 1: I den første version af 5 designet arbejdede vi med 3 slides, for at gøre bannerne enkle og mindre informationstunge. Første slide var med produkterne, det andet var food-appeal og splattere med information. Det tredje slide var produkttitlen, hvilket virkede fint, da bannerene stoppede på titlen efter tredje loop. Version 2: Kunden ville gerne 6 have produktbillederne på hele tiden. Derfor endte vi med at lave to slides, med produkterne i det ene hjørne. Vi fjernede logoet, da brandgenkendeligheden og logoet var til stede på produktet. Med kun to slides fik vi også mere tid på det enkelte slide, hvilket gjorde det mindre hektisk og lettere at afkode. 30 Skitsering af design

5 7 8 9 For at effektivisere designprocessen, har jeg brugt Artboards i 7 Photoshop til at udfolde designet på flere forskellige banner-formater. Ved at bruge Artboards var det 8 samtidig også hurtigt at eksportere alle formaterne på én gang. Dette brugte jeg også ved eksporteringen af alle elementerne brugt i banner-animationerne. Efter eksporteringen af alle 9 banner-elementerne, komprimerede jeg dem, ved hjælp af programmet ImageOptim. Dette var vigtigt, da hele banneret maksimalt måtte fylde 100kb. Da elementerne skulle komprimeres en del, blev de desværre noget grynede. Dette kunne havde været undgået hvis elementerne blev hostet eksternt og hentet gennem et link i bannernes kode. 31 Artboards og eksportering

6 Ved animeringen, var det vigtigt at Jeg tilføjede nogle Event-triggertags i bannernes Timeline Actions, øverst. På dette lag skrev jeg Jeg tilføjede et tomt clicktag -lag give hvert slide nok tid, så budskabet kunne aflæses. Samtidig skulle der ikke være for meget bevægelse, da dette hurtigt kunne blive for distraherende. for at stoppe animationen efter det tredje loop, da bannerne kun må køre i 30 sekunder. Adforms clicktag-funktion, som hentede det ønskede target-url fra en manifest.json fil. Derved behøvede jeg ikke at åbne enten Egde Animate-filen eller bannerets kode, for at ændre url en for den hjemmeside, som banneret tager en til, når man klikker på det. 32 Animering af bannere

7 Først sikrede jeg mig at click- 13 Tag-funktionen var til stede på bannerets stage-element. I manifest.json skrev jeg størrelse 14 på banneret, html-bannerets navn og clicktag url. Således kunne man let ændre url inde i manifest.json, uden at skulle åbne bannerets html. Inde i bannerets htlm-fil tilføjede 15 jeg et script der godkendte banneret i Adforms system. Samtidig sikrede jeg mig, at alle http-protokoller var https, så de var sikre og godkendte.. Efter pakningen testede jeg bannerne og clicktags gennem Studio Adform. Herefter blev bannerne overleveret til kunden. 33 Bannere pakkes og testes