det færdige resultat



Relaterede dokumenter
GRAFISK PRODUKTION & WORKFLOW. Endotest website

WORKFLOW & PRODUKTION

portfolio GRAFISK WORKFLOW

Grafisk produktion & workflow

GRAFISK DESIGN. Diner no. 34 Hjemmeside + Visuel identitet

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 SVENDEPRØVE Dorte Damsgaard Larsen

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 WORKFLOW Hjemmeside - Husk hjelmen.

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

Målgruppe Mænd og kvinder i alderen 30 til 60 år, som er interesret i selvudvikling og ønsker et sundt arbejds- og privat liv.

GRAFISK WORKFLOW PHILIP CREAMER AARHUS TECH SVENDEPRØVE NOVEMBER 2016

Grafisk design. Ide. Designprocess. Målgruppe

Portfolio - Grafisk Workflow

TYPOGRAFI OG OMBRYDNING

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

Grafisk Design. Svendeprøve Portfolio Anja Jelstrup Jensen, Kailow

GRAFISK DESIGN CAMILLA VINTER

GRAFISK WORKFLOW Hjemmesidedesign

Dokumentation. Karen-Louise Fejerskov

KT OR LOW PRODUKTION // WORKFLOW

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

Grafisk workflow. Se siden her:

Mit grafiske workflow inkluderer:

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

Produkt. Index side GRAFISK DESIGN

MONIQUE BOOTS-NIELSEN / GRAFIKER

Grafisk Design 70% Skitser

Grafisk Design Louise Schibbye Pedersen Mediegrafiker Svendeprøve 2016

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

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

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

GRAFISK DESIGN DOTHOST HJEMMESIDE

GRAFISK WORKFLOW H1 MARIA SCHELDE

MARIA SKAU MADSEN SVENDEPRØVE

PROJEKTET LAYOUT IDEUDVIKLING - PROCESS FRA IDÉ TIL PRODUKT

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

PORTFOLIO SEBASTIAN NYHOLM. Eksamensprojekt. 1. Semester

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

OPGAVEBESKRIVELSE: Opgaven er en kundeopgave for Janne Berg, studerende til psykoterapeut.

JAN MØLLER JD DESIGN CMK

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

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

portfolio GRAFISK WORKFLOW

GRAFISK WORKFLOW WEBSITE - CHOCOADDICT

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

GRAFISK WORKFLOW. 1 Grafisk workflow

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik.

Dokumentation. Grafisk Design

Sabine Puk Sørensen Svendeprøve portfolio

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

Se hjemmesiden på:

PORTFOLIO TYPOGRAFI & OMBRYDNING

Grafisk Workflow STILHISTORIE. Website lavet i forbindelse med et projekt om stilhistorie. Klik her for at se websitet:

Opgaven. Væsentlighed. Problemstillinger. Browserkompabilitet. Layout. Kvalitetsvurdering. Format. Processer. Komposition og modulopbygning

WORKFLOW & GRAFISK PRODUKTION

grafisk workflow Madmagasinet

Grafisk Design. rafisk Design

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.

grafisk design OPGAVE: EMBRACE-IT VISUEL IDENTITET

GRAFISK PRODUKTION & WORKFLOW

workflow Programmer: Om opgaven: Kvalitetsvurdering: Afsender: Modtager: Cathrine Laulund Web: Dreamweaver Billedbehandling: Photoshop

1. Hovedforløb. Mediegrafiker

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 OPGAVE: EMBRACE-IT WEBSITE

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

Portfolio - sunestenild.dk

GRAFISK DESIGN. Kenneth Friis Petersen

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

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE

GRAFISK PRODUKTIONSFORSTÅELSE

GRAFISK DESIGN 1. HOVEDFORLØB

Grafisk workflow 3. Hovedforløb

GRAFISK WORKFLOW. Proces. Kodning. Fonts:

Grafisk produktion og workflow

NY IDENTITET TIL SCHWARZ

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM

GRAFISK DESIGN. Min personlige e-portfolio

Grafisk workflow. Hjemmeside til Bærkompagniet

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

GRAFISK DESIGN Logo - inderst inde

PROGRAM VALG: InDesign CC Illustrator CC Photoshop CC Dreamweaver CC

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

1 SVENDEPRØVE 2016 GRAFISK DESIGN GRAFISK DESIGN

Grafisk workflow. bl.udbudsnet.dk

GRAFISK WORKFLOW - RESPONSIV WEBSIDE

Produktion og workflow STINE D. LAURSEN

Programvalg Dreamweaver CC, html Photoshop CC 2015

AS ANDERS SØNDERGAARD Portefolio_H Svendeprøve.indd 1 2/17/ :36:39 PM

OPGAVE: WELOVEORGANIC.COM WEBSHOP

GRAFISK WORKFLOW WEBSHOP TIL KLITMØLLER COLLECTIVE

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

Opgaven. Brugervenlighed. Designparametre. Følgende krav var : Research. Målgruppe. Konklusion. sitet ikke bliver for mørkt.

Hjemmeside design til Everyday Health

Grafisk Workflow. Opgaven. Test i forskellige browsere (Usability) Arbejdsgang. Kvalitetsvurdering. Procesbeskrivelse

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow

Transkript:

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.

det færdige resultat

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 25-65 å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 www.netnationen.dk 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)

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: 50 0 20 0 CMYK: 0 0 0 80 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: #666666 Breinholt Håndlæsning Healing Walk & Talk Index Auralæsning CMYK: 6 4 5 0 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