Indholdsfortegnelse. Midtfyns Bryghus projekt 2 Adnan, Martin, Mette, Sabrina & Tina D

Transkript

1

2 Indholdsfortegnelse Midtfyns Bryghus projekt 2 1. Præsentation til Midtfyns Bryghus Midtfyns Bryghus - gør de blinde seende Vores idé Vi vil gøre Midtfyns Bryghus mere synlige 4 2. Indledning 5 3. Problemformulering 5 4. Metodeafsnit 5 5. Design Visuel identitet Wally Olins termer og udviklingsmetode Udviklingsproces Beskrivelse af logo Valg af skrifttype Valg af farver Delkonklusion Web- og mobildesign Designprocessen The star analysis Brug af designprincipperne Ølflaske i 3D Delkonklusion Interaktion Udviklingsmetode Use cases Kode fra AS Delkonklusion Procesevaluering Konklusion Litteratur- og kildeliste Bøger Hjemmesider Bilag Bilag 1 - Det endelige design Bilag 2 Mindmap Bilag 3 - Udvikling af logo Bilag 4 Mock-up projekt Bilag 5 Brainstorm Bilag 6 Mock-up projekt Bilag 7 - The star analysis Bilag 8 - Valg af farve og skrift Bilag 9 Ølflasken Bilag 10 - Flash kode Bilag 11 - Gantt chart før og efter 32 2

3 1. Præsentation til Midtfyns bryghus Midtfyns Bryghus projekt Midtfyns Bryghus gør de blinde seende Vi har igennem de sidste par uger, fået et stort indblik i Midtfyns Bryghus, alle produkterne og ikke mindst jeres samarbejde med Dansk Blindesamfund. Som I har introduceret for os, er I som noget helt nyt begyndt at designe labels med punktskrift, til fordel for de blinde. Derfor kom vi på en idé, som vi har arbejdet med i løbet af det sidste stykke tid, der har store muligheder for at give jer en masse nye loyale kunder. Jeres målgruppe, som I selv siger, er alle dem som elsker specialøl, men da størstedelen af alt øl bliver solgt til mænd, vil vi udfordrer jer og os, ved at gå efter det helt modsatte med kampagnen og mobilapplikationen. Nemlig kvinderne. 1.2 Vores idé Før internettet kom til live, kunne man via aviser eller andre magasiner promovere sin virksomhed, men i dag med internettet er mulighederne uendelige. Derfor tænkte vi at et kampagnesite, med tilhørende mobilapplikation ville være perfekt til at udvide jeres kundekreds. Jeres samarbejde med Dansk Blindesamfund er meget specielt, og det vil vi lægge meget vægt på. Kampagnesitet handler primært om samarbejdet mellem jer og dem, men er samtidig også krydret med andre gode funktioner, som for eksempel produktoversigt og serveringsforslag. Lige med hensyn til serveringsforslag, er de kvinder som vi har valgt som målgruppe, meget interesseret i madlavning, og derfor kunne det være meget ideelt at give dem inspiration til de daglige gerninger i køkkenet. Udover det handler en af undersiderne om jeres kommende events, og det er her vores målgruppe kan gå ind og tilmelde sig, så de altid kan følge med i hvad jeres næste arrangement er. Som vi skrev i starten har kampagnesitet også en tilhørende mobilapplikation, som kan lede jeres kunder hen til de forhandlere som sælger jeres øl. Mobilapplikationen er, ligesom kampagnesitet, spækket med gode og brugbare informationer omkring jer og samarbejdet med Dansk Blindesamfund. Samtidig med har den også nogle andre virkelig gode funktioner, som vi er helt sikre på, kunne blive til en succes. 3

4 Applikationerne er mere populære end nogensinde og i dag kan man næsten få en applikation til alt og hvorfor skulle I ikke også have det? I har en god virksomhed, et godt fundament og gode loyale kunder. Vi ved det ligger jer meget på hjerte at være nede på jorden, - på den måde mister man ikke sig selv og sin identitet. I mister ikke noget ved denne kampagne, - I vinder kun. 1.3 Vi vil gøre Midtfyns Bryghus mere synlige I, Midtfyns Bryghus, har en god position blandt alle mikrobryggerierne, og har gang på gang bevist at god øl laves hos jer. Vi vil ikke kun fastholde det gode omdømme I har, men øge kendskabsgraden til jer endnu mere. Det skal ske via offline/online medier, såsom kampagnesitet, mobilapplikationen, konkurrencer, Facebook og ølsmagning. Ved hjælp af promotion i form af ovennævnte, kan Midtfyns Bryghus blive endnu større, men stadig holde ved i de gode gamle principper om godt håndværk. I er meget velkommen til at se vores forslag til mobilapplikationen og kampagnesitet, både i bilagene 1 og på dette link Ydermere hvis I er interesseret i, at få mere at vide omkring det, og er det simpelthen ikke en chance, I vil forspilde, kan I altid kontakte os via vores s; Martin Hjort Mette Berg Sabrina Hansen Tina Hansen Adnan Halalovic martin@famhjort.dk mettebergsen@gmail.com sabbie87@hotmail.com superdiddl66@hotmail.com madebymistake2@hotmail.com 1 Se bilag 1 Det endelige design. Se test af vores applikation her: 4

5 2. Indledning Midtfyns Bryghus projekt 2 Her fortsætter vi hvor vi slap projekt 1. Sidste gang fandt vi ud af at kampagnen for Midtfyns Bryghus skulle henvende sig til kvinder mellem år. Derfor lavede vi en masse research, så vi kunne komme på det rette design til både kampagnesitet og mobilapplikationen. I denne omgang handler det om den visuelle identitet og selve designet, samt udarbejdelsen af dette. 3. Problemformulering - Hvordan kan vi lave et kampagnesite og en mobilapplikation der afspejler både Midtfyns Bryghus og Dansk Blindesamfunds identitet? 4. Metode I projekt 1 anvendte vi brainstorming til at komme på idéer til kampagnesitet. Det mock-up vi fandt på i det projekt, er det som vi har brugt til at lave sitet, med kun enkelte ændringer. Til at lave mobilapplikationen udarbejde vi et mindmap 2 for, at spore os ind på selve emnet, målgruppens interesser samt et design der ville virke til små skærme. På den måde havde vi et overblik over vores idéer og kunne samle noget sammen som ville være interessant, og matche websitet. Vi har udover det brugt prototyping for at teste vores design på vores målgruppe. På den måde kunne vi gøre vores applikation brugervenlig og tilpasset brugerens behov. 5. Design Kampagnen for Midtfyns Bryghus skal have en visuel identitet i form af et logo, et kampagnesite samt en mobilapplikation. Den visuelle del omkring kampagnen, vil blive beskrevet i nedenstående afsnit. 2 Se bilag 2 - Mindmap 5

6 5.1 Visuel identitet Midtfyns Bryghus projekt Wally Olins termer og udviklingsmetode Hvis der er nogle som ved noget om corporate identity og branding, så er det Wally Olins. Han har opfundet 3 forskellige betegnelser af identiteter, som en virksomhed kan kategoriseres i; Branded identitet, Endorsed identitet og Monolitisk identitet 3. Sidstnævnte er der vi ligger. At ens identitet er monolitisk, betyder at der er en sammenhæng i ens design at der er én visuel stil igennem alle produkter, og at man fastholder de samme symboler, farver og andre virkemidler. På Midtfyns Bryghus website, er der en klar sammenhæng, og det har vi forsøgt at få over i vores kampagne. Ifølge Matthew Healey er der seks navnetyper; functional, invented, experiential, evocative, referential og acronyms. Vi har valgt at kalde vores applikation for Midtfyns Bryghus og det er dermed navnetypen functional fordi, ud fra navnet Midtfyns bryghus kan man udlede at de brygger øl. Grunden til valget er fordi, at vores applikation kan bruges efter de 6 måneder som vores kampagne kører, blot ved at fjerne få elementer, som sommerfuglen og græsset i designet Udviklingsproces Vi fastlagde ret hurtigt, at vi ville bruge sort baggrund på kampagnesitet for at den matchede Midtfyns Bryghus eget website 4 og derfor blev skriftfarven hvid. Derudover besluttede vi os, at bruge orange og grøn som grundfarver. Den orange farve for at det hele ikke blev for tøset med den anden pige farve lyserød. Dermed havde vi mulighed for at kunne bruge den orange sommerfugl fra Dansk blindesamfund for at matche dem. Alligevel var vi i tvivl med vores logo til vores applikation, da vi ikke vidste hvad der ville se godt ud - hvad der kunne være der nu når størrelsen var begrænset, samt hvad der lige kunne symbolisere vores kampagnesite for Midtfyns Bryghus. Vi har derfor været igennem rigtig mange logo forslag 5 3 Læs mere omkring Wally Olins og corporate identity på 4 Se Midtfyns Bryghus website 5 Se bilag 3 Udvikling af logo 6

7 for at, finde det helt rigtige. På den måde har vi stille og roligt sporet os ind på et simpelt logo som symboliserer os (Midtfyns bryghus kampagnesite) samt dansk blindesamfund. Igennem processen er der skåret meget fra, da vi startede med detaljeret billeder til at det nu består at to elementer med to farver og hvor baggrunden er sort. Den vil derfor gå i et med HTC standard baggrund Beskrivelse af logo Vi bruger to farver til at lave lidt spil på etiketten og sommerfuglen. Farverne vi har brugt er en orange og gul farve, som vi har taget fra Dansk Blindesamfunds eget logo. Etiketten er den vi også bruger på vores 3D flaske og det er samme form på etiketten som de bruger på alle deres øl i deres sortiment. På den måde hænger det sammen på en enkel måde, og det er samtidig en anderledes måde at lave et logo på til en øl fabrikant. Vores gennemgående tema er den orange sommerfugl samt grønt græs. Her tænkte vi straks på KISS 6 (Keep it simple stupid) reglen og konkluderede her, at det grønne græs ville blive for detaljeret til et logo og valgte derfor ikke at have det med. Vores logo kan også sagtens være sort/hvid eller gråskaleret i det af det kun består af to items og tre farver. Den orange/gule gradient vil bliver én farve, men det vil aldrig ødelægge hele pointen uden. Beskrivelse af vores logo ud fra checkpoints by logo design ; Size Da vores logo er meget simpelt og består af få elementer ville det kunne fungere både i stort format og i lille format da der ikke er nogle detaljer der kan gå tabt. Hot Styles Vi syntes vi har formået at skabe et logo der går udenom tidens trends og som er langtidsholdbart. Det kan diskuteres om gradieringen er en hot style, men vores logo fungerer også i en enkelt farve. 6 KISS er en talemåde og betyder at man ikke skal lave unødvendige ting på sit design eller hvad man ellers er i gang med. 7

8 Medias Vi er overbevist om at vores logo kan fungere i alle medier. Det fungerer nu på kampagnesitet og på mobilapplikationen og man kan sagtens forestille sig, at det kunne fungere på print. Identity Vi har opnået, på trods af vores simple logo, at forene Midtfyns Bryghus og Dansk Blindesamfunds identitet i form af etiketten og sommerfuglen. Simplicity Vi har været igennem mange logoforslag, men valgte til sidst det mest enkle af dem. Grunden til dette er, at det fungerede bedst med de simple og enkle elementer vi har valgt. Outstanding Vi mener, at vi har skabt et helt unik logo til det unikke samarbejde mellem Midtfyns Bryghus og Dansk Blindesamfund Valg af skrifttype På vores kampagnesite og mobil applikation har vi brugt to forskellige skrifttyper, vi valgte dog ikke at have noget skrift i vores logo, da vi kun ville vise samarbejdet mellem Midtfyns Bryghus (etiketten) og Dansk Blindesamfund (sommerfuglen). Sommerfuglen kan nemt skiftes ud med et andet item eller fjernes helt hvis applikationen skal forsætte efter, at kampagnen er slut Valg af farver RGB: CMYK: Pantone: 7406 EC Hex: #F9C412 RGB: CMYK: Pantone: 1235 UP Hex: #FEC33B Delkonklusion Ud fra Matthew Healey navnetyper har vi valgt at holde os til navnet Midtfyns Bryghus og et rigtigt simpel logo for at få en genkendeligheds faktor ind over det. Dette gør at vi skaber en sammenhæng til Midtfyns bryghus identitet. 8

9 5.2 Web- og mobildesign Designet til et web- og mobilunivers skal altid overvejes grundigt. Det skal appellere til målgruppen, og det skal fange dem på en måde, så de bliver interesseret og vil vide mere omkring virksomheden/produktet. Her kan du se vores bud, på noget helt specielt Designprocessen Designprocessen igennem projekt 1 var rimelig kort, hvorimod designprocessen i projekt 2, var rimelig omfattende. Det var virkelig her at alle de små ting skulle på plads, - detaljer, farver, fonte, placering af de forskellige ting og symboler. I første omgang lavede vi nogle mockups, som en del af projekt 1 7, hvor vi skulle vise visuelt hvad vi havde tænkt på. Disse mockups startede vi ud med i mandags, og har derfra været igennem en hel del overvejelser omkring designet generelt og indholdet. For at få et større overblik over processen vi har været igennem, henviser vi til nedenstående diagrammer; Som diagrammerne viser, har der været to forskellige designprocesser i gang, både en for mobilapplikationen og en for websitet. Med hensyn til mobilapplikationen, så havde vi i første projekt ikke lagt os særlig fast på designet af denne, men havde blot gjort nogle overvejelser. Så det vi gjorde, det var at brainstorme 8 lave mock-ups og derefter teste det, i form af prototyping. 7 Se bilag 4 Mock-up projekt 1 8 Se bilag 5 - Brainstorm 9

10 Derfra kunne vi træffe en beslutning om designet og begynde at kode. I applikationen har vi taget elementer som græsset og sommerfuglen fra websitet med over i designet, så der er sammenhæng. Det er vigtigt, at der er en genkendelighed. Udarbejdelsen af websitet havde et lidt anderledes forløb. Da lidt af designet allerede var lavet på forhånd, var det nemmere at tage udgangspunkt i dette. Men selvom det ikke er særlig lang tid siden at vi afleverede projekt 1, var der stadig emner som skulle snakkes igennem. Var farverne nu de rigtige, og hvad med opsætningen? Vi beholdte de orange farver, men vi har sidenhen valgt to andre fonte til websitet og derefter brugt den ene til applikationen. For at se alle de designs og idéer vi har været igennem, henviser vi til bilag 6 Mock-up projekt The star analysis The star analysis 9 er et værktøj man kan bruge til at analysere og planlægge et website. Purpose Situation Goal Trend Resources Tradition Den generelle idé med kampagnen er at få gjort mere opmærksom på Midtfyns Bryghus og deres samarbejde med Dansk Blindesamfund, samt at få brugerne ledt hen til de rette forhandlere. Brugerne af websitet og mobilapplikationen, kan være hvor som helst, når de vælger at gå ind på websitet. Målet er at øge kendskabsgraden til Midtfyns Bryghus. Vi har valgt at bruge to forskellige fonte til websitet og valgt at bruge Myriad Pro til mobilapplikationen. Vi har holdt hele websitet i to overordnede farver; sort, orange og grøn 10. Sort til baggrund for at det matchede Midtfyns Bryghus eget website, grøn til vores græs og orange til sommerfuglen som matcher Dansk Blindesamfunds sommerfugl. Vores resurser er vores mandetimer og dermed vores løn. Midtfyns Bryghus bruger kender til deres website og deres design, og bliver ført videre til deres kampagnesite, hvor de kan se en sammenhæng Brug af designprincipperne Vi har brugt designprincipperne CRAP på vores website; Contrast På websitet er kontrasten den sorte baggrund og den hvide eller orange tekst. Sommerfuglene og græsset giver også en god kontrast til det sorte. 9 For at se modellen, se bilag 7 The star analysis 10 Beskrivelse af farver og fonte bilag 8 Valg af farve og skrift 10

11 Repetition Alignment Proximity Vi bruger den sorte baggrund ligesom Midtfyns Bryghus egen website. Derudover bruger vi Dansk blindesamfunds orange sommerfugl. Græsset hænger sammen med sommerfuglen og det er brugt græs på hver underside som bund. Hele vores website er centreret, men vores header, menu og teksten er venstre justeret for at skabe overblik og ro. Alle elementer er placeret naturligt i forhold til hinanden. Det som hænger sammen, hænger sammen og det som er meningen skal være adskilt fra noget andet, er det Ølflaske i 3D Vi har bygget ølflasken 11 i Maya Autodesk og givet den en svag brun farve for at, det minder om de flasker som Midtfyns Bryghus har i deres sortiment. Etiketten vi har tilføjet matcher vores applikationslogo, dog er der detaljen med græsset, som blev for detaljeret på applikationslogo et Delkonklusion Vi har fået designet et website med tilhørende mobilapplikation i et flot design, hvor designprincipperne bliver anvendt og hvor der er tænkt meget over brugen af farve, fonte og symboler. 6. Interaktion Vores kampagnesite er kodet i XHTML/PHP. PHP har vi brugt til at opbygge et nyhedsbrev med, som vores brugere kan tilmelde sig. Til mobilapplikationen har vi brugt ActionScript Udviklingsmetode Det ville være nemt at sige at vi har brugt vandfaldsmetoden, som betyder at man tager tingene skridt for skridt, men det er lige netop den vi ikke har brugt. I stedet for har vi benyttet metoden prototyping. Prototyping betyder at man laver en prototype, tester den af på den enkelte bruger, hvorefter man har mulighed for at tilpasse sit design/opsætning denne proces kan 11 Se billede af ølflasken i bilag 9 - Ølflasken 11

12 gentages, efter hvilket behov man har. Det vi gjorde var at udvælge Anni Grøndal og Merete Østergaard til at afprøve vores design. Vi har optaget testen på video og kan ses på disse links; Use cases Malene kender godt til Midtfyns Bryghus da hun havde en sag om dem under sit jura studie. Her blev hun interesserede i deres øl da hun hørte om sagen mellem dem og Braveheart. Hun er jævnligt inde og tjekke deres sortiment og læse om deres næste events. Karen Petersen kender intet til Midtfyns bryghus, da hun sammen med en veninde får en af deres øl. Hun bliver interesseret og vil straks tjekke deres website ud. Hun opdager vores kampagnesite, og trykker straks på produkter så hun kan se hvad de har i sortimentet. Hun bliver rigtig interesseret og vælger at finde ud af hvilke events der mon kommer. Her tilmelder hun sig øjeblikkeligt nyhedsbrevet for at hun senere altid kan være opdateret. Pernille Svenstrup kender alt til Dansk Blindesamfund da hun er speciallæge i øjensygdomme. Pludselig opdager hun på dkblind.dk at de samarbejder med Midtfyns Bryghus, hvilket hun ikke umiddelbart kan forstå hvorfor. Hun vælger at klikke på linket og trykker straks på menu punktet samarbejdet hvor hun tænker at hun kan læse om hvordan det hænger sammen. 12

13 6.3 Kode fra AS3 Nedenstående beskrivelse handler om det stykke kode 12 vi har taget fra ActionScript 3.0; I dette stykke kode, gennemløber jeg to arrays, og henter eksterne billeder, som vises på undersiden Forhandlere -> Efter Øl i horisontal visning. Det to arrays er hor_ol, der indeholder navn og alkoholprocent i en streng, og hor_ol_images der indeholder filnavnene på de enkelte øl. De to arrays passer parallelt med indekset i de to arrays, så indeks 1 i de ene passer med indeks 1 i det andet. Først gennemløber den hor_ol og opretter en ny linje i listen vha. MovieClip et Hor_list_line_mc. I dette MovieClip er der yderligere to MovieClip, hor_content_mc og hor_image_mc. I gennemløbet af hor_ol oprettes et TextField, der får teksten fra hvert indeks i arrayet og det addes til hor_content_mc MovieClip et. Derefter gennemløbes hor_ol_images arrayet. For hvert element i arrayet oprettes et object der indeholder stien til billedet, det MovieClip som billedet skal addes til, og en reference til en Loader-instans. Billedet loades så vha. Loader-klassen og URLRequest-klassen og når billedet er loadet, kaldes funktionen onlabelimageloaded. Denne funktion sørger så for lægge billedet ind i det dertil hørende hor_image_mc MovieClip. 6.4 Delkonklusion Der er blevet kodet et kampagnesite og en mobilapplikation ved hjælp af XHTML/PHP/AS3.0, og det har resulteret i et fungerende og brugervenligt design, som vi alle er meget tilfredse med. 7. Procesevaluering Vi fortsatte vores beslutning om at karakteren i sig selv ikke var vigtigst, men at vi ville bruge dette projekt på at vi hver især ville lære og dermed arbejde med det som vi ville forbedres i personligt. For at hele tiden at holde styr på tingene og opgaverne fortsatte Martin som projektleder og styrelse af Gantt chart 13. Hvilket har fungeret rigtigt godt da vi hele tiden har haft overblik over alle opgaverne. Med hver vores interesse gik det ret hurtigt op hvem der skulle arbejde med hvad, og 12 Se bilag 10 Flash kode 13 Se bilag 11 Gantt chart 13

14 derfor havde ansvaret for en bestemt del. Vi var selvfølgelig alle inde over alle opgaverne sådan så vi alle vidste hvad der foregik, hvad der blev lavet og hvordan. På den måde har vi alle forbedret os inde for et hovedområde. Vi har igen været rigtig tilfredse med vores 5 mands gruppe og der har slet ikke været nogle problemer med opgaverne da vi alle har forskellige kompetencer på forskellige områder. 8. Konklusion Sætningen smagen af godt håndværk har været central i vores udvikling af kampagnesiden og mobilapplikationen. Vi har i vores valg af farver, fonte og former været bevidste om vores målgruppe, som er kvinder mellem 35 og 49 år, og de traditioner som Midtfyns Bryghus holder ved i brygningen af deres øl. Vi har valgt den orange farve som Dansk Blindesamfund bruger i deres logo og sommerfuglen, dog i en anden form end Dansk Blindesamfunds logo. Vi har derudover været bevidste om at vores målgruppe er veluddannede, voksne kvinder og vi har prøvet at finde balancen mellem feminin uden at det blev for feminint og tøset. Derfor mente vi den varme orange farve var et fint valg til netop vores målgruppe. Vi har i vores design prøvet at skille os ud fra traditionelle øl kampagner, hvor mange af dem må formodes at henvende sig til mænd. Vores mobilapplikation har vi valgt skulle have et anderledes udtryk end kampagnesiden, da det er 2 forskellige medier. Mobilapplikationen har et mere rustikt og gammeldags, næsten eventyrligt udtryk, hvilket vi også mener stemmer udmærket overens med vores målgruppe. Vi har i mobilapplikationen valgt at bruge nogle elementer som også optræder på kampagnesiden som den orange sommerfugl og græsset for at skabe sammenhæng mellem de forskellige medier. Vi mener at det er lykkes for os at fange både Midtfyns Bryghus ånd og skabe sammenhæng til Dansk Blindesamfund i vores kampagneside og vores mobilapplikation. Adnan Halalovic Martin Hjort Mette Berg Sabrina Hansen Tina Hansen 14

15 9. Litteratur- og kildeliste 9.1 Bøger Dolce, J. Android Development with Flash (2010), Wiley publishing, Inc. Rene Birkholms designkompendie Design 2011 (part 2 visual identitet ). 2 sem ALL Documents 1 semester Design. Kimmel, P. UML DEMYSTIFIED (2005), McGraw-Hill/Osborne Beighley, L & Morrison, M. Head First PHP & MySQL (2009), O Reilly Media Inc. 9.2 Hjemmesider (d ) (d ) (d ) 15

16 10. Bilag Bilag 1 - Det endelige design Midtfyns Bryghus projekt 2 Nedenunder ses det endelig design af websitet 16

17 17

18 Nedenunder ses det endelige design af applikationen 18

19 19

20 Bilag 2 Mindmap 20

21 Bilag 3 - Udvikling af logo 21

22 22

23 Bilag 4 Mock-up projekt 1 Nedenstående mock-ups blev udarbejdet i forbindelse med projekt 1, og blev derfor starten på hele vores designproces. 23

24 Bilag 5 Brainstorm 24

25 10.6 Bilag 6 Mock-up projekt 2 Designproces, idéer og forslag til mobilapplikationen 25

26 Designproces, idéer og forslag til websitet 26

27 27

28 Bilag 7 - The star analysis 28

29 Bilag 8 - Valg af farve og skrift 29

30 Bilag 9 - Ølflasken 30

31 Bilag 10 - Flash kode 31

32 Bilag 11 Gantt chart Gantt chart før 32

33 Gantt chart efter 33