RAPPORT Projekt 4: Website design 10-28.11.2014 Gruppe A3: Anastasia Keller, Jakob Plenge, Rasmus Bernhard, Benjamin Vinje, Raquel Hesdorf



Relaterede dokumenter
PROJEKT 4: WEBSITE DESIGN

Brief. Placering Keld og Hilda optræder Telt Morgenmad (ikke inkluderet i prisen) Telt 2

Hjemmeside design til Everyday Health

afsender Aarhus Folk Festival

Grafisk produktion & workflow

OPGAVEBESKRIVELSE. Grafisk design process for Kolding Motion, logo, frontend hjemmeside samt t-shirt og skilt.

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

GRAFISK DESIGN G H1 H2 H3 HOVEDFORLØB 1 AARHUS TECH 2013 H1 SIDE 1 / 11

Grafisk Design. fra idé til visuelt udtryk Benett

sweetbot.design Kodning og design af hjemmeside Navne: Emma Blæsbjerg, Michell Aagaard Dranig og Andreas Oliver Hansen

GRAFISK PRODUKTIONSFORSTÅELSE

Grafisk design. Ide. Designprocess. Målgruppe

WORKFLOW & PRODUKTION

Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016

Banner projekt. 1.semester

Grafisk Design 70% Skitser

det færdige resultat

Portfolioudvikling. Line la Fontaine. Multimediedesigner

srum Fritidsaktiviteter : 1. Semester. Multimediedesigner Projektstart: 17/ Aflevering: 4/

Disse har alle sammen hjulpet til at skabe min hjemmeside. Ved at give inspiration og få ideerne ned på papir, før de blev vist til omverdenen.

GRAFISK DESIGN. webdesign af pl.dk

Stine Dorry Meulengracht Madsen Rapport Multimedie og kommunikation

GRAFISK DESIGN DOTHOST HJEMMESIDE

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

GRA DESIGN. HEARTS & MINDS

GRAFISK WORKFLOW. 1 Grafisk workflow

1 // Grafisk design. Hjemmesiden før. Kunde. Produkt. Opgave. Målgruppe. Bogforlaget Frydenlund A/S.

PROGRAM VALG: InDesign CC Illustrator CC Photoshop CC Dreamweaver CC

FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

Project 5: Portfolio Remake

Programvalg Dreamweaver CC, html Photoshop CC 2015

Gruppe: 2 Hold: MulB Årgang 2013 Lærere: Merete Geldermann Lützen & Jesper Hinchely

grafisk design grafisk sign Jeppe Nedergaard

GRAFISK DESIGN. Rune Hjørringgaard

OPGAVEN PROGRAMVALG. Jeg har brugt Illustrator til at lave logo og ikoner.

E-magazine: Stop spild af mad PROJEKT 2, SEMESTER 2, MulA, marts 2015

Gruppe 15. Redesign af bageriet FeelGood Bakery s website. Gruppen Består af: Nanna Søderquist Christian Thorsø Rolf Josephsen Søren Henrik Wilhardt

Produkt. Index side GRAFISK DESIGN

Projekt 5 Eksamens opgave Re-design af portfolio Af Jonas Lunding

For at finde en stil til hjemmesiden, starter jeg med at lave et moodboard af alle Mikkalina Glas s produkter.

Vi glæder os til at arbejde sammen med jer! De bedste hilsner. Sebastian Hansen og Bjarke Nielsen HeltSimpelt.dk

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

kollegiekokkenet.tmpdesign.dk Side 1

grafisk design Se webappen på din mobil

T o b i a s W e x i ø S o n n e MultiMedieDesigner CPH-Business 1/26

Udarbejdet i uge 23-24, 2014 Michelle Ploug Hansen 02 Grafisk Design

Grafisk workflow. Se siden her:

KALAS FESTIVAL. Link til hjemmesiden: Laura Lundby Gravesen

Esrum Sø Sport og Fritid

Jeg kan tilbyde jer at arbejde selvstændigt eller i et team, er god til at håndtere stress ved tunge projekter og alt for korte deadlines.

Et krav til portfolien var at det skulle udvikles fra bunden uden brug af CSS-frameworks, samt HTML og CSS skulle valideres uden fejl.

Stilen skulle gerne være feminin og primærfarven rosa.

MÅLGRUPPE Alle typer af boligselskaber, ejer- og andelsforeninger samt div. institutioner (store som små) på Sjælland. Ikke private kunder.

UDFORDRINGEN. modul 4 - udfordringen. Opgaven I vores sidste modul lød opgaven for vores gruppe på at lave en ja-kampagne

Grafisk workflow. bl.udbudsnet.dk

Grafisk Design OVERSIGT. 1 Opgaven A. Opgavebeskrivelse B. Målgruppe C. Brainstorm D. Moodboard

FORSIDE KONCEPTBESKRIVELSE LOGO DON TS RESPEKTAFSTAND FARVEVALG TYPOGRAFI FOTOSTIL DESIGNMANUAL

Delaflevering. Webdesign og webkommunikation, (hold 2), IT Universitetet, f2011. Kim Yde, Kenneth Hansen,

Afsluttende opgave Webdesign Den 24. maj 2007 Klasse 1.2

grafisk design OPGAVE: EMBRACE-IT VISUEL IDENTITET

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

GRAFISK DESIGN Logo - inderst inde

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

GRAFISK PRODUKTION & WORKFLOW. Endotest website

GRAFISK WORKFLOW. Proces. Kodning. Fonts:

Indholdsfortegnelse Idéen bag logo Idéen bag website Farveversioner af logo Webdesign Videoen: Visuelle tanker Stil Speciel effects Motion Design

PRIMÆRE LOGOTYPE SEKUNDÆRE LOGOTYPE

GRAFIK & BILLEDER BESKRIVELSE AF. Graphic MEGET MERE END ET GRAFISK HUS

GRAFISK DESIGN 1. HOVEDFORLØB

Grafisk produktion & workflow: Alt til forfesten

Website design, projekt 4

MONIQUE BOOTS-NIELSEN / GRAFIKER

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

GRAFISK DESIGN. Kenneth Friis Petersen

GRAFISK DESIGN SVENDEPRØVE Redesign & kodning af website PETER HOLM SVENDEPRØVE 2013 / 5

WorkFlow. Svendeprøve Emil Momsen. BeskrivelseN ****** BeskrivelseN ******

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

NY IDENTITET TIL SCHWARZ

Vend billedet... med de 10 bud for B2B-webdesign. Quick Guide til bedre markedsføring

Grafisk design 5 STK. ØL / DRINKS / VAND. Opgaven. Farver. Målgruppe. Logo. Stil og stemning Familie, hygge og samvær.

EKSAMENS PROJEKT DECEMBER 2013 JANUAR Lærere: Thomas Hartmann. Jesper Hinchely. Ian Wisler-Poulsen. Morten Rold. Merete Geldermann Lu tzen

GRAFIK og. Svendeprøve Juni Pia Søgaard

Grafisk Design. Trine Alexandersen 2. HF 2016

Billedbehandling. Roll-up banner til Kvickly i Ribe

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

LOGO - JM Entreprenør

JB Plastics visuelle identitet Et nyt logo... 2 Visitkort og brevpapir... 4 PowerPoint Designprocessen... 6

Grafisk Workflow. Website til European Blues Challenge

WORKFLOW & GRAFISK PRODUKTION

Se hjemmesiden på:

Lav en hjemme side der kan sælge fly billetter til en stor i Europa.

PROJEKT 3 VISUALISERING AF DATA

GRAFISK DESIGN CAMILLA VINTER

Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

Grafisk workflow. website til duckhead music

GRAFISK WORKFLOW Hjemmeside - Husk hjelmen.

Guds Fred Grafisk produktionsforståelse

Redtape.dk Grafisk Design

Transkript:

RAPPORT Projekt 4: Website design 10-28.11.2014 Gruppe A3: Anastasia Keller, Jakob Plenge, Rasmus Bernhard, Benjamin Vinje, Raquel Hesdorf 1 Web-agency Den første del af opgaven var at skabe en web-agency af vores gruppe og at finde på en god måde på at præsentere den til en markedsføringsgruppe. Vi besluttede med det samme at vi skulle lave et website for vores agency, der ville inkludere oplysninger om vores kompetencer og beskrive de tjenester vi kunne levere til vores kunder. Vi tænkte også på at lave et logo til vores web-agency. Vi opsamlede oplysninger om alle gruppemedlemmers kompetencer, samt deres Belbin typer, der står i tabellen nedunder. Navn Programmering Design Virksomhed (Belbin) Rasmus html Photoshop, Kommunikation, Illustrator Specialist, Anastasia html, css, jquery Photoshop, Illustrator, Edge Animate, tegning Teamworker Kommunikation, projektledelse, koncept udvikling Benjamin html, css Photoshop Samarbejde, teknisk viden, Specialist Raquel Photoshop, Illustrator Jakob html, css, jquery, php Photoshop, Illustrator, Edge Animate, InDesign, Dreamweaver Projektledelse, kommunikation, ansvarsbevidst, selvstændig Andet opfindsom, nørd Sætter struktur, resultatorienteret, kreativ; Koordinator Kreativ, grundig, opfindsom Kreativ, perfektionistisk, nytænkende, innovative (funktionalitet) Rolle Webudvikler, webdesign, gamedesign Projekt koordinator, koncept udvikler, logo design Webudvikler, webdesign Plant Designer, developer: Koordinator, Specialist, Plant Henholdsvis fordelte vi rollerne sådan: Anastasia projekt leder, webdesigner Jakob webdesigner, webudvikler Raquel koncept udvikler, web-designer Benjamin webdesigner, webudvikler Rasmus webdesigner, webudvikler

Efterfølgende lavede vi brainstorming omkring vores web-agency s identitet med vores kompetencer i tanker. Brainstorming proces Vi valgte 3 hoved kriterier, som vi tror karakteriserer vores web-agency bedst, såsom: Innovativ/Nytænkende fordi vi ville lave moderne design og finde på originale ideer Fleksibel fordi vi kan godt tilpasse os til ændringer undervejs Kundebevidst fordi vi sætter høj pris på kunders værdier og branding Dem brugte vi til at udarbejde et logo. Så fandt vi på navnet til vores agency: WebIt og designede et simpel logo, som står nedunder: Vi brugte orange (RGB: 243 153 67, HSB: #F39943) og grå (RGB: 84 84 84, HSB: #545454) for at positionere vores agency, som moderne, samt kompetent og kreativ. Så udarbejdede vi et website: http://webbureau.jakobplenge.dk/. Websitet inkluderer oplysninger om vores hoved kompetencer: Responsive design, Avanceret development, Brand og Profile ekspertise og Modtager statistik og analyse; en liste af tjenester vi leverer, team-medlemmernes roller og eksampler på vores tidligere værker.

Vi brugte websitet til at præsentere vores agency til markedsførerne under vores briefing møde. 2 Design Brief Den 17. oktober mødte vi med markedsføringsgruppen. Under mødet fik vi design brief fra dem om hvad vi skulle lave for dem. Herunder står der en forkortet version af design briefet. Opgave: at designe et website som repræsenterer deres nye produkt - en festival for ældre. Sekundær opgaven var at designe et logo til organisation og evt. til festivallen. Først ville de have at vi finder på navne til både deres organisation og festivallen. Vi forslog at de gør det selv, fordi der var ikke nok tid for os at udarbejde identitet koncepter både til organisationen og deres produkt i så stor omfang. De budte på navne næste dag, hvorfra gik vi i gang med logoerne. Festvallen: En festival for ældre med live musik, dans klasser (folkedans, standarddans, linedans) og danseshow, samt optræden fra de kendte musikkere: Keld og Hilda, Monrad og Rislund. Der ville også bydes på skak og petanque turneringer, foredrag om kost og motion, dansk traditionel mad og kagesmagsprøver. Festivallens formål er at bringe ældre sammen: ældresamvær. Der forventes, at de ældre besøgere møder nye venner, som de kan holder kontakten med efter festivallen, og at det kan motivere dem til at være mere sociale i dagligdagen. Organisationen ønsker også at gøre festivalen en fast tradition hvert år, som de ældre kan se frem til. Der forventes at minimum 1000 ældre vil deltage gennem hele weekenden i festivallen. Dato: 15 17 maj 2015 Sted: Valbyparken Organisationen er en interesseorganisation for ældre med hovedsæde i København. Dens formål er at få de ældre til at være mere sociale med andre på deres egen alder. Organisationen har fokus på samvær. De arrangerer forskellige aktiviteter som dans, spil, musik, mad og vin, der er med til at skabe styrket samvær og glæde. Målgrupper: Markedsfører identificerede 4 målgrupper, eller segmenter, der står nedunder. Segmentering Mand og kvinde på 65+ i forhold og socialt anlagt med deres egen alders gruppe Mand og kvinde på 65+ ikke i forhold og socialt anlagt med deres egen alders gruppe Mand og kvinde på 65+ i forhold og sjældent social anlagt med deres egen alders gruppe Mand og kvinde på 65+ ikke i forhold og sjældent socialt anlagt med deres egen alders gruppe

I forhold Ikke i forhold Socialt anlagt 1 2 Sjældent sociale 3 4 Markedsførerne valgte 1 Primær målgruppe: segment 2 - Mand og kvinde på 65+ ikke i forhold og socialt anlagt. Grunden var at det er mere sikkert at de dukker op målet af minimum 1000 besøgere på festivallen rammes. Sekundære gruppe, især dem der ikke er så socialt anlagt, skulle også rammes, hvis muligt, med håbet at de vil deltage, og på den måde ende med at være mere sociale. Design krav: Markedsførernes forventninger omkring designen var at den skulle være: overskueligt og let at læse for ældre enkelt og klassisk med få klik og nem adgang til information Content krav: Markedsføringsgruppen stillede også krav om websitets indhold, som de gav til os under mødet. Websitet skulle indeholder oplysninger i de følgende kategorier: Om festivallen Om organisationen Festivallens tidsplan og aktiviteter Billetter: priser og mulighed for at bestille og udskrive billetter o Også tilbud på 20% rabat pr. overnatning i Hotel Rossini, hvis man køber weekendbilet Transport: afgangstider fra Odense, Kolding, Århus, Ålborg 3 Logo design Da vi fik navne på organisationen og festivallen, gik vi i gang med at udarbejde logoer. Organisationens navn: Social samværsglæde Hovedstaden Festivalens navn: Samværsfestival for ældre Traditionen tro Vi tog udgangspunkt i organisationens hoved værdier: Samvær og Glæde.

Farvevalg: Vi har også valgt paletten af 5 farver til logoer og hjemmesider. Lilla er hoved farve, den står for respekt og visdom, samt livlighed (i en moderat grad, ikke for aktiv) Mørkerød (Burgundy) er mere dynamisk, samt traditionel. Den står også for modenhed og omsorg. Den symboliserer også god kvalitet (som god rød vin). Grøn er forårs farve, da festivalen foregår i maj. Den tilføjer friskhed og glæde. God kontrast til rød og lilla. Orange står for glæde og optimisme, men brugt kun lidt (til telte) for højdepunkter og kontraster. Grå er god til baggrund eller for at afbalancere andre farve. Så udarbejdede vi to logoer: Logo til organisationen Logo til Festivalen

4 Website udarbejdelse Efter mødet med markedsføringsgruppe, mødtes vi at konstruere hjemmesidens struktur. Vi valgte at have 6 menupunkter. Her er den oprindelig struktur: SamværsFestival Velkommen Program Billeter Transport Om os Om festivalen Tider og aktiviteter Priser Afgangstider information Om organisation Kort af Valbyparken Bestilling Kort fra Hovedban Kommentar Vores aktiviteter Banner for Hotel på d. højre side af hver underside Senere har vi ændret strukturen til en enklere version, for at lave websitet mere brugervenlig for ældre. Det var muligt, fordi der var kun 2 underpunkter i hver menupunkt. I løbet af information design processen så vi at underpunkterne var ikke nødvendige. På den anden side kunne vi selvfølgelig lave færre menupunkter ved at opsamle alle praktiske oplysninger under menu Information. Men det har vi fravalgt, fordi vi ville lave hjemmesiden som overskuelig og brugbar som muligt. Den aktuelle struktur ser sådan ud: SamværsFestival Velkommen Program Billeter Transport Om os Efter websitets struktur var klar gik vi i gang med grafiske elementer til websitet. Ud over logoer har vi designet flere grafiske elementer til websitet, såsom: 2 billede-stribe med billeder af eksempler på aktiviteter og oplevelser, som festivalen byder på 2 kort: et kort af Valbyparken og et kort af ruten fra Kbh Hovedbanegård til Valbyparken. På Valbyparken-kortet kan man se 3 telter, hvor aktiviteterne vil foregå, med ikonerne omkring teltene, der peger på disse aktiviteter samt praktiske henvisninger, fx cafe og WC. Ikoner-banner med beskrivelse af ikonerne brugt på kortet. Meningen er at give de ældre bedre overblik over aktiviteterne og alle praktiske oplysninger.

Reklame-banner omkring hotellets tilbud. Der var først lidt forvirring omkring hvilke farve at bruge til reklame, da farverne på hotellets website var anderledes end farverne i vores pallet. Men heldigvis så vi at de passede fint på websitet, og skiller sig ud i forhold til andre elementer på festivallens website, hvilket må være en fordel for en reklame. Alle grafiske elementer var lavet i Photoshop og Illustrator. Ud over de grafiske elementer, har vi fremstillet 2 tabeller (Program og Transport) og 2 formularer (Billetbestillings- og - formularer) med hjælp af kodning. Jakob, som var hoved webudvikler i gruppen, lavede en skabelon til websitet, med lilla baggrund på forsiden og en simpel menu, svarende til vores udarbejdet struktur. Vi fordelte opgaverne omkring at lave forskellige sider mellem hindanden, hvorefter Jakob lagde alle koderne sammen til et endeligt website. Til sidst redigerede vi det og præsenterede til markedsføringsgruppen d. 26. oktober. Markedsførere var meget glade for websitet og fandt ikke noget ting at redigere videre. Alle koder er skrevet i valid HTML5, CSS3 og jquery. Til sidst validerede vi alle koderne. Så tjekkede vi for sidste fejl, som vi rettede løbende. Her er resultatet på vores arbejde: http://www.festival.jakobplenge.dk/ Vi takker alle projekt deltagere for produktiv og berigende samarbejde. Vi håber lærerne kommer til at nyde vores website.