Visualisation of Data Project Udarbejdet af Mul A: Team B1 Rasmus Bernhard Casper Christiansen, Ossama Freije Raquel Hesdorf Team B2 Mette Tarp Jørgensen Christian Coppola Louise Bonke 1
Indhold Part 1. Visual Identity... 3 Introduktion, WBS og Brainstorm... 3 A logo for JB Plastics... 5 A layout for the letterhead... 7 A layout for the business cards... 8 A PowerPoint template... 9 Part 2 - General Assembly Presentation... 10 Team B1: Visualization of data from JB Plastics annual report for a presentation at the general assembly... 10 Team B2: Presentation of how JB Plastics will do business after a new series of EU and Danish legislations are passed... 12 Online præsentation - website... 14 Part 3 - Report... 16 Planlægning... 16 2
Part 1. Visual Identity Introduktion, WBS og Brainstorm Til dette projekt blev vi introduceret til en virksomhed ved navn JB Plastics A/S. Her var der nogle læringsmål, som vi skulle komme igennem. Nogle af disse mål var: Lære at arbejde som konsulenter for et andet hold som ingen erfaring havde inden for design og visuel præsentation Lære at arbejde med Adobe-programmerne Illustrator, Photoshop og Edge Animate Planlægge projektet og tilpasse sig de ændringer der kan forekomme Sælge det produkt vi har gennemarbejdet til et andet team Vi startede med at planlægge hvordan vi skulle gribe projektet an. Til at starte med fik vi oprettet en Facebook gruppe, så vi hele tiden kunne være opdateret på, hvad resten af gruppen lavede. Herefter talte vi om, hvad vi ville lave de kommende dage, så vi fik bedre overblik over, hvad der skulle gøres først. Vi blev enige om at vi begynde med at lave et logo, da vi ikke kunne få lavet business card og letterhead, før det var færdigt. Til sidst satte vi os ned og lavede en brainstorm for at få alt det vigtige på plads. Ossama 3
I første del af opgaven udarbejdede Rasmus en WBS, en gennemgang af brainstorm, og lavede på baggrund af de vigtigste punkter en simplere og mere overskueligt oversigt. Det, at vi brugte tid på at udarbejde en form for brainstorm, og det at have en ide som alle kan blive forholdsvis enige om, giver et bedre udgangspunkt. Det kan gøre det lettere at komme i gang. Således var det i vores tilfælde. En fejl, vi begik, var, at der kun blev udarbejdet en WBS til den første del af projektet, altså fra den 20.okt. og frem til første møde, der foregik den 30. okt. Dette kunne have resulteret i en mere ustruktureret gennemførelse af det givne projekt. Den WBS som der blev udarbejdet i første del af projektet skulle være gennemgående for hele projektet frem til den endelige afleveringsdato. Selvfølgelig ville der have været udsving og uoverensstemmelser i forholdet mellem den tid, vi havde afsat og den tid, vi rent faktisk brugte på de enkelte dele af projektet, men vi tror dog, at det virker som en hjælpende hånd. En rød tråd igennem projektet. 4
Den WBS som blev udarbejdet til første del, stemte godt overens med vores forventninger, og alt blev faktisk lavet og afleveret til det aftalte tidspunkt. A logo for JB Plastics Rasmus Caspers første bud på et logo var der potentiale i, men selvom logoet i sig selv var fint, afspejlede det ikke rigtig JB-plastics værdier som firma og deres produkter. Med henblik på at få bekræftet vores holdning til det første logo, valgte vi at tage kontakt til vores klassekammerater. Logoet minder mig om et medicinalfirma, var en af de tilbagemeldinger vi fik vedr. logoet, hvorfor vi nu var overbeviste om, at vi måtte revurdere vores eksekvering og dermed kreere et passende logo. 5
Som udgangspunkt satte Casper sig ned og prøvede at finde en lighed mellem de bogstaver som indgår i JB-plastics for at se, om man på kreativ vis kunne skabe et mindeværdigt logo med de rigtige associationer. Andre firmaer har ved flere tilfælde lavet logoer, hvori et J og et B er blevet sammenkoblet eksempelvis JBequipments logo, hvorfor dette alene ikke var en mulighed, da vi ville skabe et logo med en vis originalitet. JBequipments-logo Vi valgte at inkorporere P et som en del af J et og P et, da det umiddelbart ikke var noget som man havde set før. Desværre medførte det et problem, nemlig at det var svært at se P et for sig. For at imødekomme problemet prøvede vi at fremhæve bogstaverne på forskellig vis for at opnå det mest tilfredsstillende resultat. Efter adskillige forsøg blev vi enige om et logo, som vi anså for at være både forståeligt, og som rent visuelt havde en beroligende effekt i kraft af typografien og sans-serif skrifttypen (Raavi). Casper havde valgt at benytte sig af sort og pink-lilla til det første udkast til logoet, men da dette farvevalg ikke kunne begrundes på fornuftig vis, udover at det var pænt, ville vi prøve nogle farver af, der stemte overens med en virksomhed, der producerer plasticprodukter. Vores farvevalg endte med at blive blå og en form for limegrøn. Begrundelse bag er, at blå betragtes som en rolig farve, der vækker pålidelighed, og som gør kunderne mere tilbøjelige til at købe det pågældende firmas produkt. Den limegrønne farve giver derimod et ungdommeligt pust og forbindes med et firma, som værner om miljøet. Casper 6
Illustration der viser fire forskellige udkast til logo, samt det endelige resultat. A layout for the letterhead Mette udarbejdede et letterhead til JB Plastics brevpapir. Designet blev lavet enkelt og farverne er valgt ud fra JB Plastics logo. Øverst i midten er logoet placeret, og så er der lavet en footer med oplysninger omkring adresse, telefonnummer, mailadresse og hjemmeside. I midten af dokumentet er der lavet en skabelon, så der kan indsættes en overskrift og en underoverskrift. Anvendte farvekoder: Grøn: Blå: R: 198 R: 12 G: 220 G: 78 B: 119 B: 111 #c6dc77 #0c4e6f Mette 7
A layout for the business cards Casper prøvede at lave et visitkort, der var enkelt og stilrent, ved at begrænse indholdet af små detaljer. Informationerne på forsiden er fordelt på en overskuelig og ret traditionel måde. Vi mener, at informationernes opbygning ikke behøver nogen optimering, da det nok kun vil være til forvirring for modtageren. Designet på bagsiden af visitkortet, er en form for plastikskål, der er placeret på hovedet, da det var en ideel måde at få virksomhedens vare til at komme til udtryk. Den centrale del af bagsiden er et JB-plastik logo, da der helst ikke skal herske nogen tvivl om, hvem der er distributøren. Vi har valgt at bruge de samme farver, som indgår i logoet, til den resterende grafik på visitkortet for at skabe en vis harmoni. Casper 8
A PowerPoint template Til at præsentere vores logo, brevpapir samt visitkort valgte vi at udfærdige en PowerPoint-præsentation. PowerPointen er holdt i enkel stil for at fremhæve elementerne. Vi lagde ud med at præsentere vores arbejdsopgaver. Efterfølgende fulgte info om baggrunden for vores design, herunder målgruppe, kundeklientel samt beskrivelse af produkterne. Herefter fulgte info omkring logodesignet, herunder farvesymbolik, designvalg samt udtryk og virkning. Brevpapiret og visitkortet blev præsenteret, og ligeledes blev der forklaret farvevalg, design og informationer. Controllerne var tilfredse med præsentationen. Louise 9
Part 2 - General Assembly Presentation Team B1: Visualization of data from JB Plastics annual report for a presentation at the general assembly I anden del af projektet skulle der udarbejdes nogle diagrammer på baggrund af de tabeller og tal, som vores controllere havde udarbejdet. Diagrammerne er blevet holdt i en let farve og fremstår enkle. Farverne er enkle men står i kontrast til hinanden, hvilket gør det lettere for personen, der ser dem, at skelne imellem hvad der er hvad. Vi valgte at præsentere det online igennem en hjemmeside, som Louise havde lavet. Vi brugte Louises hjemmeside som skabelon til både B1 s og B2 s præsentation. B1 s opgave var at gøre de tal (tabeller), som controllerne havde givet os, mere præsentable, og det gjorde vi ved at omskrive tallene til diagrammer. Ved hjælp af disse diagrammer skulle controllerne være i stand til at videregive deres information på en mere pædagogisk måde. En af controllerne havde udarbejdet et dokument, der forklarede os lidt om, hvad nogle af tallene betød. Dette gav os et overblik og gjorde det nemmere at komme frem til hvilken type diagram, der skulle bruges. Vores fokus lå meget i at lave så enkle, men stadig udstående diagrammer som muligt. Diagrammer der var lette at forstå, samt sagde en masse. Det, at diagrammer er lette at tyde, giver overskud, og gør det lettere at forstå dem. Dette gjorde også, at vores controllere ville have nemt ved at fortælle og forklare til deres generalforsamling. Rasmus 10
Raquel ville hellere designe diagrammerne og danne nyere formere for diagrammer, som blev skabt via Info Graphics, hun ville gerne udfordre sig selv. Eftersom at vi skulle arbejde sammen med Finansøkonomerne valgte hun at fokusere på controllernes fremlæggelse, og det gik meget godt. Eftersom hun selv har haft erhvervsøkonomi på C niveau, forstod hun godt konceptet omkring udbud og efterspørgsel. Raquel tog ansvaret for to diagrammer. Hun sad med dem hele dagen/ aftenen og undersøgte Google research for Info Graphics diagrammer. Her fandt hun to, som hun blev inspireret af. Det var lidt svært, eftersom hun prøvede at danne dem i Photoshop og illustrator, hun benyttede sig af flere forskellige værktøjer, hvilket viste sig at blive en læringsproces i sig selv. Dagen efter skulle gruppe B1 samles for at gennemgå de forskellige diagrammer, samt for at få en hjemmeside klar. Da Raquel satte sig sammen med sin del af gruppen, erfarede hun, at Rasmus havde været i kontakt med controllerne for at finde ud af, hvilke tal og procenter vi skulle benytte os af. Det Excel ark, vi havde fået uddelt, var vi ikke helt sikre på mht. hvilke tal, der skulle omdannes til diagrammer. Vi havde nogle ideer, nogle af dem var rigtige, andre ikke helt. Dog nåede vi til enighed. 11
Eftersom tiden var knap, måtte vi tænke hurtigt i gruppen, og derfor måtte Rasmus tage sig af de sidste diagrammer, nu hvor han var i gang. Raquel ville høre angående hjemmesiden, der skulle oprettes og afleveres tirsdag d. 4. november kl. 8.30, men da vi kom bagud i processen valgte hun at sætte sig sammen med Louise fra gruppe B2 og bruge Louises website (til gruppe B2) som skabelon til vores website. Dette havde dog den fordel, at gruppe B1 og B2 kunne aflevere et færdigt resultat med en sammenhæng og ensretning i layoutet. Da Raquel ikke kunne nå at færdiggøre arbejdet grundet personlige årsager, tog Rasmus over og fik færdiggjort hjemmesiden, samt uploadet og afleveret den. De grundlæggende udfordringer var umiddelbart, at afleveringsfristen mht. diagrammer og en online præsentation blev overskredet, og at der var problemer med kommunikationen mellem gruppe B1 og controllerne samt internt i gruppen. Team B2: Presentation of how JB Plastics will do business after a new series of EU and Danish legislations are passed I anden del af vores opgave skulle vi deles op i gruppe B1 og B2. I gruppe B2 fik vi udleveret nogle grafer, der beskriver hvordan JB Plastics virksomhed vil drive deres forretning efter at nye EU- og Danske regler er blevet indført. De nye regler har både indflydelse på produktionen og på markedet. Graferne var for os i Raquel multimediedesignerklassen ikke lige til at overskue, så vi fik dem forklaret af controllerne og blev bedt om at gøre dem mere gennemskuelige. Da vi har været 3 personer i gruppe B2 - Christian Coppola, Louise Bonke, og Mette Tarp Jørgensen - valgte vi at uddelegere opgaverne. Louise stod for HTML-siden, da vores grafer skulle præsenteres online, og Christian og Mette delte de 7 grafer imellem sig og valgte her selv, hvad de ville gøre med dem for at gøre dem mere præsentable. Mette arbejdede med følgende grafer: Maksimalpris, Uelastisk Produkt (kort sigt), Uelastisk Produkt (lang sigt), samt Styktilskud til Producenten. 12
Alle Mettes fire grafer er blevet lavet i Abobe Edge Animate, hvor hvert objekt kommer svævende ind på siden i en bestemt rækkefølge. Rækkefølgen havde controllerne beskrevet for os, så vi ikke selv skulle sidde og finde hoved og hale i graferne, så det var ret ligetil. At arbejde i Adobe Edge Animate var dog ret udfordrende til at starte med, da vi kun havde haft få undervisningstimer til at lære programmet kende. Udarbejdelsen af denne opgave blev derfor klaret med youtube-tutorials og ved at eksperimentere med keyframes og funktioner. Da den første graf var færdiglavet, gik det dog lidt lettere med de tre andre. Farverne i graferne er valgt på baggrund af farverne i JB Plastics logo, hvor vi jo har valgt den grønne og den blå farve. Den direkte farvekode, (#C5DC79) er dog kun brugt i de grønne linjer der beskriver udbuddet. Den grønne farve går igen, men i nogle mildere farver, så det passer til en graf. Mette Christian udarbejdede graferne for Minimalpris, Stykafgift og Positive Eksternaliteter. Disse blev holdt i samme farvepalette som resten graferne, men blev i første omgang udarbejdet i Illustrator. For at give dem en smule mere liv, blev de dog alligevel senere bearbejdet i Edge Animate, hvor de fik tilføjet fade- og slide-effekter. I forbindelse med at forme graferne i Illustrator, var der en smule udfordringer, der dog primært handlede om at 13
blive fortrolig med programmet, samt at det viste sig tilsyneladende ikke at være muligt at overføre en fil som et antal enkeltobjekter fra Illustrator til Edge Animate. Herved endte det med at blive en tidsmæssig udfordring at få nogle lidt mere spændende animationer ud af de tre grafer. Christian Online præsentation - website Louise har udarbejdet en online præsentation, som controllerne skal bruge til at fremvise animationer, der illustrerer deres informationer. Tanken bag online-præsentationen, som i vores tilfælde er et website, er, at animationerne skal træde i forgrunden og være det centrale på sitet. Websitet er et statisk site og er holdt i en meget enkel stil. JB Plastics logo bliver præsenteret øverst i venstre hjørne. Nedenfor til venstre ses menuen, hvor de tilhørende links henviser til hver sin animation, der ved aktivering træder frem i centrum på sitet. Til højre for animationerne ses en kort beskrivelse af relevant indhold, der skal bruges til at støtte op om animationerne. Websitet er holdt i neutrale farver: En lys grå som baggrundsfarve, indholdet præsenteres på en hvid baggrund. For at skabe sammenhæng mellem site og logo og for at gøre sitet mere levende uden at fjerne fokus fra animationerne, er det besluttet at lade den grønne farve fra logoet gå igen, ved at bruge den som ramme på menupunkterne. Når menupunkterne aktiveres, skifter den grønne ramme fra at have kantede former til at have bløde former - igen for at give en anelse dynamik. Den grønne farve fra logoet er ligeledes genanvendt i animationerne. For at skabe ro og enkelthed på sitet er der kun anvendt en enkelt font, Raavi, som er genbrugt fra logoet. Raavi er en enkel og elegant skrifttype, som passer godt til den stil, vi ønsker. For at fonten ikke bliver for dominerende, er der valgt en sort farve, der tangerer i retning af en meget mørk grå. 14
Anvendte farvekoder: body (grå) #E3E0E0 content (hvid) #FFF links (grøn) #C5DC79 font color (grå-sort) #111111 Vi er godt tilfredse med resultatet - det samme gav controllerne også udtryk for, at de var. Louise 15
Part 3 - Report Planlægning Da tiden var knap, valgte vi at skrive rapporten således, at vi hver især skulle skrive en del om det, vi havde bidraget med til projektet. Vi oprettede et google docs dokument, som vi alle sammen havde adgang til. Her skulle vi sætte vores afsnit ind, og til sidst skulle vi samle det hele i et word dokument. Mette Opsætning og layout (rapport): Mette, Louise og Christian. 16