Grafisk design OPGAVEBESKRIVELSE

Transkript

1 OPGAVEBESKRIVELSE Min opgave var at lave og designe en pakke til s marketing og kommunikationsafdeling MarKom. Pakken består af: et hoved element portfolio hjemmeside communication.madebydelta.com to supplerende elementer: brief mappe visitkort Portfolio skulle vise vores muligheder, evner, kompetencer og kvalifikationer. Siden det er en portfolio, burde der også være mange eksempler på vores arbejde. Det skulle være nemt at navigre på siden, let at finde MarKom s cases og produkter, både for os, vores kolleger i firmaet og nye kunder. Der var ikke nogle særlige krav i forhold til funktioner eller design. Jeg valgte at følge nogle designretninger, fra vores designguide for at beholde s identitet i vores portfolio og for at gøre den genkendelig. brief er en mappe, vi bruger til nye opgaver. Vi udfylder den sammen med kunderne for at præcisere deres ønsker og krav. Jeg synes den skulle være i den samme stil som hjemmesiden. Derfor brugte jeg de samme forsidebilleder og farver. MarKom s visitkort skulle også passe til MarKom s ny identitet, derfor valgte jeg at bruge de samme billeder, som på hjemmesiden. Aga Lutomska Mediegrafiker svendeprøve juni 2011

2 MÅLGRUPPE Det er mening at siden skal bruges af os MarKom folk, til at vise vores kompetencer til andre og den skal også bruges af vores kunder/kolleger til at finde vores cases og hente inspiration til de næste projekter. Nye kunder fra netværkgrupper og firmaer, der vil eller allerede sammarbejder med og har brug for hjælp til at skabe visuelt identitet eller marketingsmaterialer. Meget ofte er de ingeniørere, forskere, projektledere eller firma- og afdelingledere. Meningen med den nye MarKom s hjemmeside er også at finde nye kunder udefra. BENYTTEDE PROGRAMMER Hjemmeside Dreamweaver til HTML, CSS, JavaScript kodning. Photoshop til grafik og billeder llustrator for rough layout 1 FireBug til online troubleshooing (rettelse af kodningsfejl crossbrowser issues). MarKom brief InDesign, Photoshop Visitkort InDesign, Photoshop DESIGN OG LAYOUT Farver Den røde farve i hover links, piler, class.her i menu, h2 (der viser, hvor vi er på siden), stammer fra s logo 2. Kun de små elementer er røde. Rød er en farlig farve. Den kan meget hurtig se billig eller agressiv ud. Det ville jeg undgå her. Font Til hjemmesidens navn i header brugte jeg vores corporate skrifttype Univers Condensed. Den font er meget let og ren i sit udtryk. Navnet er lavet om til grafik fordi Univers er ikke tilgængellige på alle maskiner. Jeg valgte at lave en hjememside 3 med sort baggrund for at give mest mulige kontrast og opmærksomhed til billeder. Jeg har brugt hvid brødtekst, grå beskrivelser af billeder i gallerier og grå adressefelt for at lege med kontrasten. Sort og forskellige nuancer af grå farve stammer fra s designguide. MarKom brief mappe 4 er designet i de samme farver og med de samme billeder som hjemmesiden. Forsiden af visitkort 5 har hvid baggrund. Det er det samme visitkort som vi bruger i hele huset. Den eneste forskel er bagside med et protræt billeder (de samme som på hjemmesiden). Det gør visitkortet mere personligt. MarKom som er den kreative afdeling i huset burde have visitkort som bliver husket og er lidt anderledes end resten. På s hjemmeside bruger vi til erstatning for Univers som er Arial, der er en standard skrift på alle maskiner. Derfor har jeg også valgt at bruge den her. Det giver mig kontrol over designet. Arial er også meget ren og let at læse, især hvor brugerene blive lidt mere udfordret pga. sort baggrund. Billeder Jeg valgte at lave alle de billeder, der ikke viser vores cases i sort og hvid. Kun billeder, der viser cases er i farver. Det giver dem mere opmærksomhed. Jeg valgte også at lave billeder på visitkort og mapper til sort og hvid. 2/16

3 DESIGN OG LAYOUT Hjememsiden s layout Layoutet på siden er brugervenligt og overskueligt. Jeg synes ikke der er en grund til at lave ting mere kompliceret end der er brug for. Bredden på side er 960 px. Fælles elementer header i 100% bredde med logo, jquery dropdown menu i sidens bredde og adresse felt. Forsider 7 2-spalte Venstre spalte med tekst og links, højre saplte med en lille lightbox galleri eller et sort og hvidt billede. Gallerier 8 1-spalte med jquery galleri, med et stort billede og mange små thumbnails under, eller mange større thumbnails med fade in effekt, der lænker til eksterne sider. Forside 6 1-spalte layout med et stort Accordion galleri viser fem billeder fra fem undersider. Kører automatisk hver 4. sekund. Kontakt side, People in MarKom, Kalendar 9 er også opbygget som 1-spalte sider. INDHOLD OG TEKNISKE SPECIFIKATIONER Selvom vi til vores corporate hjemmeside bruger en CMS Team- Site/LiveSite og til alle vores små hjemmesider og blogge bruger WordPress, valgte jeg at lave vores portfolio i html med elementer fra JavaScript. Planen er at lave en WordPress template, så alle fra MarKom kan arbejde med portfolio siden. Teknisk indhold reset af stylesheet (for at sikre et ens udgangspunktfor alle browsere, fjernes præ-definerede styles) html, css, javascript jquery-accordion menu pluggin, lightbox plugin, fade in effekt, galleri, dropdown menu kontaktformular css3 styling af kalendar pseudoselektor som hver 2. barn CSS-pseudoselektorer, :hover, :active, :visited ul list 3/16

4 Oversigt over opbygning af sitet communication.madebydelta.com 1 Forside Home Online Offline Exhibitions Photos About us Contact Corporate Adverts Exhibitions sets Products People in MarKom Brochures Wall People & Places Our calendar Project sites Newsletters Powerpoint Flash Business papers Posters Branding articles House decorations Cards Roll-up Diverse Design guide Design guide Diverse Design guide 2 CMYK 0, 100, 65, 15 Pantone 200c RGB 172, 4, 57 web #ac0439 4/16

5 Oversigt over sider Forside 3 5/16

6 Oversigt over sider Online communication Corporate Project sites Newsletters Powerpoint Flash Design guide under construction 6/16

7 Aga Lutomska svendeprøve juni 2011 Oversigt over sider Offline communication Adverts Brochures Business papers Posters Branding articles House decorations Museum Cards Diverse Design guide n o ti c u tr s n o c r e d n u 7/16

8 Oversigt over sider Exhibitions Exhibitions Exhibition sets Walls Roll-up Diverse Design guide under construction 8/16

9 Oversigt over sider Photos Products People & places About us People in MarKom Calendar Contact 9/16

10 Opbygning af sitet 1-spalte layout 6, 8 header 100% accordion jquery plugin description galleri i jquery dropdown menu i jquery prev next image footer wrapper pictures med fade effekt og animerede billedetekst controls navigation Forside accordion i jquery 5 faneblade, der skifter automatisk efter 4 sekunder eller på klik. Billeder 2 billeder, der ligger ovenpå hinanden. Når man kører mus over billedet, går opacity på det billede fra 100 % til 0%. Samtidigt kører billedtekst ned og gemmer sig. Når man holder musen over i venstre eller højre side af billedet, kommer der to pile. Man kan navigere med dem og skifte mellem billederne. Når man skifter billede, kommer der billedtekst op. I kontrol panel, kan man se til venstre hvor mange billeder der er på siden og hvad nummer vi ser på nu. Til højre kan man sætte galleriet til at køre automatisk og skifte mellem billederne hver femte sekund. Man kan også navigere mellem billeder ved at trykke på pilene. 10/16

11 Opbygning af sitet 2-spalte layout 7 tekst container tekst links lightbox jquery plugin lightbox jquery plugin container right Når man kliker på billede til højre, kommer der et billede frem med billedtekst. Et eksempel på et stort billede I stedet for jquery lightbox plugin, brugte jeg her enten billeder eller flash animation. 11/16

12 Opbygning af sitet 1-spalte layout med speciale elementer 9 wrap jquery folde ud effekt tabel formular billeder med fade effekt jquery Der er hover effekt på feltet med vores navne og stillinger. Når man kliker på dem, folder de sig ud og viser information om MarKom s medarbejderne. Når man kører musen over billeder, kommer der vores navn. De effekter er lavet ved hjælp af jquery. Kalender er bygget op ved hjælp af en tabel. Jeg har givet hver anden række en farve ved hjælp af css3. ejer den server vores hjemmesider ligger. Eftersom vores sider er lavet enten i CMS LifeSite/ TeamSite eller i WordPress, mangler der nogle koder på serveren, der kan få formmail i html til at fungere. 12/16

13 Aga Lutomska svendeprøve juni 2011 MarKom brief 4 forsider 4 Bagside MarKom brief brief DATO MARKOM KUNDE(R) KONTONR MarKom brief brief DATO MARKOM KUNDE(R) KONTONR DATO MARKOM KUNDE(R) KONTONR Ma MarKom brief brief DATO MARKOM KUNDE(R) DATO KONTONR AFDELING OG OPGAVE AFDELING OG OPGAVE AFDELING OG OPGAVE AFDELING OG OPGAVE AFDELING OG OPGAVE NOTER NOTER NOTER NOTER NOTER Venlighedsvej 4 Venlighedsvej 4 Venlighedsvej Hørsholm 2970 Hørsholm 2970 Hørsholm Danmark communication.madebydelta.com Danmark communication.madebydelta.com Inside FORMÅL Hvorfor er det kunden ønsker opgaven udført? MÅLGRUPPE Hvem taler vi til og hvad ved vi om dem? MarKom brief brief BUDSKAB Hvad vil vi fortælle? brief Danmark Venlighedsvej Hørsholm communication.madebydelta.com communication.madebydelta.com Danmark I MarKom brief mappe har jeg brugt det samme billeder som på hjemmeside. Der er fire kategorier. Alt efter hvad opgaven handler om. For- og bagside er sort for at beholde den i samme stil som hjemmesiden. Selve felter man skal udfylde er hvide. Det er for at gøre det nemmere for os og vores kunder. Vi printer dem selv. KOMMUNIKATIONS- OG SALGSMÅL Hvilken reaktion ønsker vi fra brugeren? PRODUKTET Kort beskrivelse af produktet eller ydelsen? USP & ESP Hvorfor skal nogen vise interesse i produktet? Hvilke behov dækker det? KONKURRENTER Har vores konkurrenter lignende produkter? INSPIRATION Har vi erfaring fra tidligere analyser, kampagner? DEADLINES 1. oplæg / 2. oplæg / til produktion / retur fra produktion BUDGET timer 13/16 MAR

14 14/16

15 Aga Lutomska svendeprøve juni 2011 MarKom s visitkort Nina Okkels Gary Bagside kun MarKom 5 Jørgen Wessing Anne Marie Nielsson Agnieszka Lutomska Nina Okkels Gary Forside hele Grete Buhl Communication Manager MarKom, Venlighedsvej Hørsholm Denmark Tel Direct [email protected] We help ideas meet the real world Christel Ejlersen s standard visitkort MarKom s bagside af visitkort. Som noget nyt har jeg brugt billeder af os på bagsiden, for at gøre visitkort mere personligt. Peder Hjulmand Søby Grete Buhl Jeg har brugt de samme billeder som er brugte på MarKom s hjemmeside. 15/16

16 16/16