det færdige resultat

Transkript

1

2 grafisk design Under dette fagområde har jeg valgt at præsentere jer for en opgave, jeg har udarbejdet for virksomheden Breinholt. Breinholt er en nyopstartet virksomhed i Odense, der tilbyder spirituel vejledning via forskellige teknikker. Jeg har i arbejdet med virksomheden udført det strategiske arbejde, herunder identifikation af virksomhedens identitet samt udarbejdet den grafiske linje, hvilket kommer til udtryk via et website, en brevlinje samt et.

3 det færdige resultat

4 arbejdsproces brief Efter briefen med kunden gik det strategiske arbejde i gang med at researche virksomheden og branchen som helhed, før den endelige identitet kunne slås fast, og det praktiske arbejde kunne begynde. Allerede fra starten havde kunden og jeg en ambition om, at virksomheden skulle skille sig ud fra konkurrenterne ved at tage sig professionel og troværdig ud. Målgruppen Mænd og kvinder i alderen år. Personer, der tror på alternative midler eller prøver det som en anden mulighed for at få hjælp, svar eller vejledning. Logoet er designet ud fra lotusblomsten, der har en symbolsk betydning i den spirituelle verden, hvor den her er et symbol på menneskets liv. Blomsten har jeg valgt at forenkle, så den er nemmere at afkode, altså mere genkendelig. Jeg har placeret blomsten over i et som et symbol på, at den blomstrer op fra stilken. Jeg har valgt at ligge vægt på Breinholt, da det gør det mere personligt og nærværende at bruge sit navn, da det med sin specielle klang skiller sig ud og skaber genkendelse. Fonten, jeg har valgt at bruge, hedder Continuum. Det er en meget firkantet, enkel, grotesk font (Sans serif), hvor hår og grundstreger har samme tykkelse. Den passer utrolig godt til den forenklede blomst og har også samme karakteristiske firkantede form. har jeg valgt at nedtone ved at justere den ud, så den holder fast for- og bagkant til Breinholt. Design af website Jeg adskiller Headeren og Content delen fra hinanden, hvilket gør sitet mere let og luftigt. Billedgalleriet på indexsiden er opbygget med JavaScript, der står roligt og skrifter igennem billederne. Det skaber liv og stemning på siden og fanger brugerens opmærksomhed. På alle undersiderne bruger jeg samme opsætning for at skabe en sammenhæng gennem hele sitet. Jeg har opdelt Content delen i en right og left Div, hvor teksten altid står i right og et billede, der understøtter temaet i left. De 4 designparametre Form: ikke kan finde min font. Det er en font der er let at læse på nettet, kontra en font med Seriffer. Det grafiske udtryk på websitet skulle selvfølgelig afspejle virksomhedens identitet helt klart. Gennem min research, herunder udarbejdelsen af mit mindmap samt den brief, jeg havde med kunden, kom jeg frem til nogle helt klare signalværdier. Sitet skulle fremstå enkelt, overskueligt og vise tillid og ekspertise inden for faget. Det skulle tilmed udstråle balance og have afdæmpede rolige farver. Her har jeg valgt, at det samlede udtryk på sitet skulle være meget firkantet for at udtrykke det enkle. Farve: Farven er 80 % sort, hvilket gør at den virker mere afdæmpende og rolig for øjet. Den lyse blå farve C50 M0 Y20 K0 er en farve, der symboliserer hav, himmel og natur. Den giver også et indtryk af noget rent og roligt, og samlet set er der også en reference til, at der er mere mellem himmel og jord. Illustration/billeder: Her var det vigtigt, at billederne fik lov at sætte stemningen og tale for sig selv. Det har jeg løst ved at holde de øvrige farver fra baggrundsbilledet i gråtoner og i samme farvekode som logoet. Begge ting gør, at billederne træder mere frem til brugeren. De fleste af billederne har jeg taget sammen med kunden i RAW format og efterfølgende billedbehandlet i Photoshop. Det var vigtig at få kunden med i processen for at få skabt det helt rigtige udtryk i billederne. Alle billederne er valgt, så der er en sammenhæng med logoet for at fremhæve symbolikken med den blå farve, at det er naturen og det spirituelle, der er i centrum. Typografi: Der var ingen standard fonte, der passede til mit design. Derfor har jeg valgt at bruge en Googlefont, der hedder Titillium Web. Den står rigtig godt til fonten i logoet. Fonten er ikke 100 % websikker, så derfor har jeg valgt at definere en sekundær font, der vil blive vist i de tilfælde, at en browser grafisk design Breinholt SWOT Styrker (internt): Virksomhedens udtryk skiller sig meget ud fra konkurrenterne i form af det grafiske udtryk, som udstråler balance i afdæmpede rolige farver i modsætning til de fleste konkurrenter, der har meget teksttunge websites med prangende farver. Svagheder (internt): Der er ikke mange, der har kendskab til virksomheden endnu, og min kunde har ikke mange års erfaring som mange andre i branchen. Det kan ligeledes være en svaghed at være mand i en kvindedomineret branche. Målgruppen vil måske foretrække en kvinde, da det er dem, de har mest kendskab til. Muligheder (eksternt): Øge virksomhedens synlighed via søgeoptimering, så siden dukker op på Google som en af de første. Det kunne være en mulighed at deltage i messer for at få erfaring og få kontakt til kunderne. Trusler (eksternt): Konkurrenterne, som både har kendskab og ligger højt på Google. Økonomisk krise mange har ikke de ekstra penge til at bruge på sig selv. Brugervenlighed Det er nemt at navigere rundt på sitet, da alle links til undersiderne er placeret i headeren. For at gøre opmærksom på at det er link, har de understregning, når musen passerer dem. Jeg har valgt at fremhæve kontaktlinket og facebook ved at flytte det fra listemenuen til toppen af headeren, da det oftest er det, brugeren leder efter. Jeg har ligeledes placeret et link til mailkontakt under slideren, hvilket går igen på alle sider. Ud over at logoet er et link til forsiden, har jeg også lavet et almindeligt forsidelink i menuen, da målgruppen ikke nødvendigvis ved at et klik på logoet kan føres tilbage til forsiden. Sitet har en bredde på 960 px for at sikre, at brugere med mindre skærme også kan se siden i et fuldt format. Til de, der har større skærme, vil baggrunds- Grafisk identitet brevlinie website billedet udvide sig og tilpasse sig til den aktuelle skærmstørrelse, den er tilmed testet til de mobile platforme. Sitet er dynamisk opbygget i divér, og det vil i fremtiden kunne udvide sig efter indholdet, hvis kunden ønsker at udvide sitet med flere billeder eller tekster. TEKNISK DESIGN Sitet er primært bygget op i Dreamweaver med div er i HTML og med et eksternt Style Sheet til at styre udseendet på sitet. Jeg har dog integreret noget JavaScript på indexsiden til styring af galleriet og lidt php til kontaktformularen. Alle mails er skjult for at beskytte mod hackere. Sitet består overordnet af en indexside og ni undersider. Søgeoptimering Jeg har efterfølgende fået lavet søgeoptimering på sitet, da Google i starten ikke kunne finde sitet, og figurerede derfor kun på en ekstern hjemmeside ved navn kvalitetsvurdering Generelt er sitet designet i et simpelt layout, hvor der også er tænkt på brugervenligheden i forhold til målgruppen. Jeg er meget tilfreds med resultatet og synes, at denne virksomhed skiller sig ud fra konkurrenternes og ser mere professionel ud. Kunden er meget tilfreds med sitet og synes, at jeg har ramt plet med det grafiske udtryk. Teknisk information website Browsertjek: Safari, Firefox, Crome, Internet Explorer 8,9, Ipad og Iphone. Format: Max width 960 px Billedopløsning: 72 PPI Filer: PNG, GIF, JPEG Farver: RGB, RGBa Hosting: Unoeuro Donæner: Breinholtclairvoyance.dk (breinholt-clairvoyance.dk)

5 Moodboard logo-udkast Prisliste opbygget med tabel Breinh olt B re i n h o l t B r e i n h o l t B r e i nh olt Mindmap Menu opbygget med lister og show/hide elementer B reinh olt Fade slideshow med JavaScript Farvevalg B rec i n holt l a i r v CMYK: CMYK: RGB: 242/ 242/ 242 RGB: 154/ 204/ 204 RGB: 102/ 102/ 102 Pantone: 7541 C Pantone: 630 C Pantone: 425 C Web: #f2f2f2 Web: #8dcdd1 Web: # Breinholt Håndlæsning Healing Walk & Talk Index Auralæsning CMYK: Opbygning med eksternt CSS style Sitemap o y a n c e Priser Seancen Profil 100 % baggrundsbillede Kontakt grafisk design Breinholt Grafisk identitet brevlinie website