Portfolio af Josefine Mundt. < /> Design & Layout

Transkript

1 Portfolio af Josefine Mundt < /> Design & Layout

2 Opgaven // Kunden MediaXpress skal have et nyt underfirma,, hvis formål er at sælge hjemmesideløsninger til mellemstore og store virksomheder. Tanken bag firmaet, er at den pågældende virksomhed, som køber denne løsning, ikke længere skal bekymre sig om sin hjemmeside. Virksomheden ville købe en totalløsning, som indbefatter en nyopsat hjemmeside, samt udarbejdelse og udsendelse af virksomhedens nyhedsbreve. Det årlige antal udsendte nyhedsbreve, vil være aftalt på forhånd med virksomheden. Desuden vil virksomheden altid have mulighed for at få opdateret og ændret i sin side efter behov uden merpris. Virksomheden vil have en direkte kontakt og dialog med den person der sidder med deres hjemmeside. Opgavebeskrivelse Design af hjemmeside og visuel identitet til et nyopstartet underfirma af MediaXpress. Sælgeren til (), skal have en hjemmeside, som hun derudfra kan sælge sine løsninger til virksomhederne. Siden skal være simpel og overskuelig. På siden skal være store billeder af firmaet og dets ansatte, så firmaet udadtil viser personlighed og professionelisme. Sælgeren har faste meninger om hvad hun vil have i layoutet af hjemmesiden, så hun føler at det er noget som hun kan stå inde for og derved bedre sælge løsningerne. Derfor er det min opgave at finde det frem som hun har i sine tanker. Da firmaet,, er helt nyt, skal jeg udover hjemmesiden designe logo, visitkort, brevpapir og sælgerens præsentation af. Udfordring Hjemmesiden skal bygges op i et nylavet system, som direktørens søn har lavet. Systemet er under udarbejdelse og derfor er alt endnu ikke muligt, så jeg er begrænset på mange områder og må konstant være i dialog med sælger og systemudvikler. Og selvfølgelig også tekstforfatteren som har til opgave at udarbejde teksten til sitet. Programmer Til opgaven vil jeg benytte Illustrator (CS6) til logoudarbejdelse, Photoshop (CS6) til design af hjemmesiden og InDesign (CS6) til layout og opsætning af visitkort, sælgers præsentation og brevpapir. Brainstorm Udfra møde med sælgeren og hendes ønsker lavede jeg en brainstorm med tanker og idéer, Se her ved siden af, hvad der kom op. Målgruppe Målgruppen er som sagt mellemstore til store virksomheder, der ønsker at deres hjemmeside altid skal fungere og køre uden problemer, altid være opdateret og samtidig skal de intet gøre selv. Dvs. en virksomhed, som gerne vil bruge sin tid på noget andet, og som samtidig gerne altid vil have en fuld opdateret hjemmeside. Tanker & idéer fra mødet afslappet rene liljer personligt blå farve ansvar tekst centreret min. 6 billeder slider på forsiden hjemmeside hængekøje slap helt af vi varetager alt skiftende store billeder professionelt service tekst på billeder, beskrivende/info nyhedsbrev bygningen arbejdsmiljø- / kontorbilleder grafisk afdeling evt. sort/hvid Portfolio af Josefine Mundt I 2

3 Design valg // moodboard Font til tryk & Web Jeg har valgt fonten Helvetica, da den er meget læsbar. Til web har jeg valgt at bruge Arial, da den ligner Helvetica en del og er rigtig god på en skærm. Og som kontrast til disse to er Century Gothic, som jeg bruger både på web og på tryk. Helvetica ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ! # %&/()=?` ^ * _-:;.,<>+ Arial ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ! # %&/()=?` ^ * _-:;.,<>+ Century Gothic ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ! # %&/()=?` ^ * _-:;.,<>+ Farver til tryk & Web Jeg vil primært bruge følgende farver, som er navngivet, til tryk og web, men indenfor farverummet, som jeg har lavet, er det muligt at jeg tager fat i andre farver, som ligger indenfor dette. Farvevalg Pantone 423 CMYK: 0, 0, 0, 50 RGB: 127, 127, 127 CMYK: 0, 0, 0, 20 RGB: 204, 204, 204 Pantone 420 CMYK: 100, 0, 0, 40 RGB: 0, 110, 157 Pantone 7469 Portfolio af Josefine Mundt I 3

4 Logo // Logo udarbejdelse Jeg begynder med at prøve nogle forskellige fonte af til logoet, som er forkortelsen for. Selve navnet, skal stadig fremgå, da firmaet MediaXpress har eksisteret i mange år og derfor skal dets eksisterende kunder stadig kunne genkende navnet i det nye underfirma. Bomærket Umiddelbart finder jeg den øverste ITC Anna, Regular, mest interessant, da den skal lægge sig lidt væk fra Metroxpres logo, hvilket godt kan være lidt en udfordring. Jeg leger lidt med bogstaverne og sætter dem meget tæt på hinanden, så de overlapper hinanden. Jeg forsøger mig med farverne, samt ændre størrelsen på prikken over i et, men syntes ikke helt det fungerer og synes samtidig også at det minder for meget om Metroxpres. Derfor beslutter jeg mig for selv at tegne et i Illustrator, som jeg vil beskrive mere under Grafik & Billeder, men resultatet kan ses her. mxi logo med farver ITC Anna, Regular American Typewriter, Regular Dodger, Regular Helvetica (T1), Ultra Compressed ITC Eras, Book Nasalization, Medium logo gråtoner 150 mm på det bredeste led 10 mm på det smalleste led Navnetrækket Navnetrækket er skrevet med fonten Sunset, da den giver associationer til IT og skrivemaskine-skrifter. Og da firmaet beskæftiger sig med webløsninger, synes jeg den giver en god kontrast til bomærket (), som jeg med vilje har givet de bløde former for at få budskabet frem om, som et personligt og trygt firma, med bløde værdier, men samtidig også professionelt. Farven på navnetrækket kan enten være den lyse grå eller den mørkere grå, afhængig af baggrunden den skal stå på. Det endelige logo Bomærket og navnetræk skal stå i nærheden af hinanden, dvs tæt på hinanden i alle tryk- og websager. Dog kan bomærket sagtens stå alene i enkeltstående sager, hvor der eventuelt kun er et meget begrænset område/plads til logo, men navnetrækket skal ikke stå alene, da det kun er lavet som supplerende info til bomærket. logo sort/hvid logo Negativ Portfolio af Josefine Mundt I 4

5 Paperline & Præsentation // Hvem er mxi? Hvem er mxi? Brevpapir & visitkort Paperline detaljer Brevpapir: 100g ubestrøget A4 210x297 mm Konvolut: 100g ubestrøget M65 223x112 mm Visitkort: 300g bestrøget A7 85x54 mm Hos er vi specialister i business-to-business kommunikation på mange forskellige platforme, hvor vi præsenterer vores kunders vigtigste budskaber. I en moderne virksomheds marketing spiller den digitale kommunikation en voksende rolle, og i dag får mange et førstehåndsindtryk af en virksomhed på nettet. Derfor skal man, som virksomhed gøre sig visse overvejelser omkring hvilke signaler, man ønsker at sende : Skal det være en enkel og stationær website, eller ønsker man at have en dynamisk hjemmeside i bevægelse, der kan afspejle og fortælle om virksomheden og dennes udvikling. er af den opfattelse, at et website bør være et levende medium, der giver en unik oplevelse for dine kunder. eget forlag og mediehus i baghånden er et datterselskab af MediaXpress A/S, som udgiver BYGGERI+ arkitektur Indret.dk Bygge- & Anlægsavisen Flyttemagasinet m.m. Vi arbejder kontinuerligt på at forbedre og udvikle nye produkter, der kan maksimere relationen til kunder og samarbejdspartnere. Som samarbejdspartner kan MediaXpress A/S stå for at producere dit salgsmateriale fra A til Z. Vi har mange års erfaring omkring udvikling og produktion af alt fra brochurer og annoncekampagner til nyhedsbreve og hjemmesider. Fælles for alle produkter er, at vi er konkurrencedygtige både på prisen og kvaliteten. Hvem er mxi? Hvad kan mxi tilbyde? Hvad kan mxi tilbyde? Widex A/S Nymoellevej Lynge Att: Mette Pedersen Som samarbejdspartner kan vi producere færdigt materiale ud fra stikord og ideer. Ved hjælp af tekstforfatning med journalistisk flair skaber vi salgsfremmende kommunikation, som har et klart budskab og en klar målgruppe. Vi arbejder målrettet med at få vores kunders budskaber direkte ud til de rette personer. Stikord og ideer Produktion af professionelle websites Tekstforfatning med journalistisk flair Grafisk produktion og support Produktion af nyhedsbreve og kontinuerlig udsendelse Løbende opfølgningsmøder Hoste og udvikle nye websites og undersider til eksisterende websites mange af vores kunder oplever følgende problemstillinger : et samarbejde med mxi betyder følgende : Tidsbesparelse High-end content Grafisk udførelse af højeste karakter Professionelt website Få det gjort! 20. januar 2014 Tilbud på webløsning Man kan fremad se, at de har været udset til at læse, at der skal dannes par af ligheder. Dermed kan der afsluttes uden løse ender, og de kan optimeres fra oven af at formidles stort uden brug fra presse. I en kant af landet går der blandt om, at de vil sætte den over forbehold for tiden. Vi flotter med et hold, der vil rundt og se sig om i byen. Det gør heller ikke mere. Men hvor vi nu overbringer denne størrelse til det den handler om, så kan der fortælles op til 3 gange. Bredgade 36, 1. sal forhuset 1260 København K Telefon: Bredgade 36, 1. sal forhuset 1260 København K Telefon: Tekstforfatning Salgsfremmende + kommunikation + Klart budskab til målgruppen Grafisk produktion Vi vil gerne have sendt nyhedsbreve ud, men hvem har tid, hvem skal skrive det, og hvordan skal vi sende det ud? Vi vil gerne have artikler liggende på vores website og planlægge disse fortløbende, så vores website er i bevægelse og dynamisk, men hvem skal skrive disse og lægge dem ud på vores website? Vi vil gerne have vores historier fortalt og vist på vores website, nyheder fra f.eks. messer, event osv. men hvem skal sørge for dette Hvis det er træet til dit bord der får dig op, er det snarere varmen over de andre. Selv om hun har sat alt mere frem, og derfor ikke længere kan betragtes som den glade giver, er det en nem sammenstilling, som bærer ved i lang tid. Det går der så nogle timer ud, hvor det er indlysende, at virkeligheden bliver tydelig istandsættelse. Det er opmuntrende og anderledes, at det er dampet af kurset i morgen. Der indgives hvert år enorme strenge af blade af større eller mindre tilsnit. Jeg ser frem til et godt samarbejde. Med venlig hilsen Salgschef Janni Thornborg Sørensen Pakke løsninger kontakt Website 3-5 sider Design Tekst Foto Domæne Hosting Kontakt formular Ubegrænset support / Help desk SEO venlig Website 5-15 sider Design Tekst Foto Domæne Hosting Kontakt formular Ubegrænset support / Help desk SEO venlig Website fra 16 sider Design Tekst Foto Domæne Hosting Kontakt formular Ubegrænset support / Help desk SEO venlig Janni Thornborg Sørensen Salgschef for Mobil: Mail: jts@mxi.dk MediaXpress A/S Bredgade 36, 1. sal, forhuset DK-1260 København K Tel: referencer Mediaxpress A/S Indret Byggeri+arkitektur Pris kr ,- Pris kr ,- Pris fra kr ,- abonnement kr ,- abonnement kr ,- abonnement kr ,- Bygge & Anlægsavisen tilvalg (variabel pris) tilvalg (variabel pris) Produktion og udsendelse af nyhedsbreve Produktion og udsendelse af nyhedsbreve Tekst og artikel forfatning med egne journalister Tekst og artikel forfatning med egne journalister Webmaster systemudvikler Ulrik Hjort Andersen Emil Gundesen Janni Thornborg Sørensen Salgschef Mobil: Mail: jts@mxi.dk Bredgade 36, 1. sal forhuset DK København K Tel.: Bredgade 36, 1. sal forhuset DK København K Tel.: Grafisk produktion og support Løbende redaktionsmøder/ opfølgningsmøder Kontakt fra grafisk afdeling halvårligt Grafisk produktion og support Løbende redaktionsmøder/ opfølgningsmøder Kontakt fra grafisk afdeling halvårligt grafisk afdeling Chefredaktør Benny Leick, Maria Agergaard, Josefine Mundt Mikkel Dissing Sandahl Præsentation Når sælger for skal ud og sælge webløsninger, så har hun brug for en præsentation af firmaet, udover hjemmesiden. Denne præsentation har jeg, i samarbejde med en kollega udarbejdet som en interaktiv pdf. interaktive links til andre sites, som har opbygget og nu varetager Portfolio af Josefine Mundt I 5

6 Inspiration & valg // Det digitale produkt Jeg startede med at lave inspirationssøgning på nettet med sælger. Og udfra sælgers ønsker og mine egne ideer kom jeg frem til følgende valg: Store stemningsbilleder af kontoret og firmaets bygning Teksten på de enkelte sider skal være centreret på siden Menuen skal stå i venstre side med transparent baggrund Forsiden skulle have skiftende billeder Kontaktformularen skulle være helt flad Man skal kunne scrolle ned og komme til de forskellige undersider alt imens billederne skal slide i baggrunden Det skal være en nem og overskuelig side, som er rar at se på. Umiddelbart er det ikke nødvendigt at man kan se at det har noget med hjemmesider at gøre, da det ifølge sælger kun er de kunder/virksomheder, som hun besøger der vil bruge den og de ved hvad det drejer sig om. Siden skal repræsentere firmaet og ikke produktet. Her ses et forslag med en fed effekt på hvordan forsidebilledet skifter blødt fra et til et andet, samtidig med det har billederne et filter over, men sælger var desværre ikke hooked på idéen. På denne side scroller man ned henover skiftende billeder i bagrunden. Dvs. én lang side, så undersiderne ligger i forlængelse af hinanden. Her var den grundlæggende idé med stort forsidebillede og menuen i siden på transparent baggrund Layout Fontvalg Jeg har valgt Arial til erne, footer og brødteksten. Til overskrifter og bokstekster har jeg valgt Century Gothic, da jeg synes at disse to fonte giver en god kontrast til hinanden. Her er et eksempel på en flad kontaktformular. Størrelse Størrelsen på siden er 1366 x 768 px, da de store baggrundsbilleder helst skal fylde hele skærmen hos de forskellige kunders/ virksomheders skærmstørrelser. Meningen er jo selvfølgelig at siden skal kunne tilpasses de forskellige platforme, så den også er brugervenlig på smartphones og tablets. Browserkompasitet Jeg må desværre indrømme at det er uden for min rækkevidde, idet det er programøren som er udvikler af dette system, som siden sættes op i, der skal sørge for dette. Denne side var også inspiration, da den har stort billede med teksten centreret oven på de enkelte billeder farvevalg Jeg har taget udgangspunkt i at sælger ønskede sort/hvid billeder og et simpelt overskueligt design med store billeder. Udover sort/hvid, har jeg jeg valgt at bruge den blå farve, som jeg også har brugt i logoet til at gå igen på enkelte elementer på sitet. Farven blå symboliserer professionalisme og seriøsitet. I logoet har jeg desuden også brugt 2 nuancer af grå, en mellemtone og en lysere grå. Alle farver og fonte er beskrevet under Designvalg. Portfolio af Josefine Mundt I 6

7 Flowchart & wireframes // Flowchart Forsiden Undersider Eftersom kunden ønsker et site, der er meget brugervenlig og nem at gå til uden alt for mange undersider, så er løsningen blevet, at siden er én lang side således at alle undersider ligger under hinanden og man derved bare kan nøjes med at scrolle ned ad sitet. Der er kun to sider som er decideret undersider til produkter, hvor man kan klikke videre til uddybning af de enkelte produkter/løsninger. transparent blok 220x768px Logo 99x414px 117x134px citat 345x102px transparent blok 220x768px Logo 99x414px 117x134px Index skiftende Baggrundsbillede 1366x768px Baggrundsbillede 1366x768px sort kasse (1366x252px) profil brødtekst 439x(212)px Løsning A Produkter Produktsiden og Referencesiden Footer 1366x32px Kontaktsiden Footer 1366x32px Løsning B transparent blok 220x768px transparent blok 220x768px Support Kontakt wireframes Hver side er næsten ens opsat, dog med små ændringer på nogle stykker af dem. Jeg har derfor lavet wireframes på de forskellige typer sider. Logo 99x414px 117x134px Baggrundsbillede (1366x768px) Logo 99x414px 117x134px Baggrundsbillede 1366x768px Referencer Jeg har desuden sat mål på, for at give et bedre overblik. De størrelser hvor der er parentes om betyder at dennes bredde eller højde ikke er fastsat, idet jeg ikke har den rigtige tekst og derved ikke har kunne sige hvor stor en tekstboks der skal bruges. Derimod der hvor der ikke er parentes om, er det en fast bredde/højde. produkt/ reference 131x156px brødtekst 439x(212)px produkt/ reference 131x156px Footer 1366x32px produkt/ reference 131x156px sort kasse (1366x252px) brødtekst 203x137px billede 203x178px Footer 1366x32px 180x40px knap 260x40px kontaktformular 460x123px 20x20px 60x20px 460x280px sort kasse (1366x252px) Portfolio af Josefine Mundt I 7

8 Layout // Menu og logo vil hele tiden være til syne her i venstre hjørne, også når man scroller nedad Forsiden med skiftende billeder der slider i baggrunden Designet Jeg har udfra kundens ønsker lavet et layout af s hjemmeside med de forventede undersider, Indtil videre er det mumletekst, da jeg endnu ikke har modtaget de rigtige tekster fra tekstforfatteren. Photoshop Jeg har brugt Photoshop til at lave layoutet til hjemmesiden, da jeg på den måde personligt bedre kan danne mig et overblik over de enkelte sider, samt benytte de korrekte størrelser i pixels. Se i lagpaletten hvordan jeg har inddelt de forskellige sider i mapper, så de er nemt at vise frem til kunden/sælgeren og programøren under layoutfasen. Billedvalg Planen var at der skulle komme en professionel fotograf ud og tage billeder af kontoret og medarbejderne, så det bliver lidt personligt, men også så sitet giver et professionelt look. Desværre er løsningen indtil videre den at en sælger fra kontoret selv har været rundt med kameraet og tage billederne. Dette er efter min mening ikke blevet optimalt, da billederne er tomme og triste. Der er ingen personer med og fotografen har ikke tænkt over at fjerne de forstyrrende elementer der er i flere af billederne. Jeg har været inde og billedbehandle/farvejustere billederne, samt crop e dem, så vi kunne få nogle rene linjer frem, men tiden til at gå i dybden og fjerne/tilføje elementer har desværre ikke været der, da hele forløbet med at få sitet på plads, skulle gå forholdsvist hurtigt, så sælgeren på kunne komme i gang med sit salg. Footer med firma adresse Min lagpalette opdelt i sider Portfolio af Josefine Mundt I 8

9 Det endelige Site // Arbejdsproces Samtale med kunden om det nye firma, kvaliteter og strategi Søgning på nettet for inspiration Nyt møde med kunden om forventninger, brainstorming og idéfremlæggelse Udarbejde flowchart og wireframes Finde midlertidige billeder på nettet Udarbejde layout i Photoshop Præsentation af layout for kunden Foretage eventuelle rettelser modtaget fra kunden Møde med programøren om layoutet, mål, farver og fonte Billedredigering og tilpasning til web af modtaget billedmateriale Sende det nødvendige materiale til programøren (logo, billeder, pdf af layoutet, farvekoder, fonte, størrelser o. lign) Resultatet Her kan mit endelige layout af hjemmesiden til ses. Og som forklaret på en af de foregående sider ligger næsten alle undersiderne i forlængelse af hinanden, så man kan scrolle ned fra forsiden og nedad til de underliggende sider. Når man scroller ned til anden side, vil et skifte farve, så man er klar over hvilken underside man er på. Samtidig kan man selvfølgelig også skifte i selve menuen. Den sorte baggrund bagved de enkelte tekster ligger foran billedet, men bagved logo og menu, så mår man scroller op eller ned vil man stadig hele tiden kunne se menu og logo selvom den sorte baggrund kommer op ved menu og logo. Vurdering Jeg er selv tilfreds med resultatet ud fra hvad kunden ønskede, men ville ønske at der forelå noget bedre billedmateriale. Kunden er meget glad og selve kodningen ligger nu hos programøren. Portfolio af Josefine Mundt I 9