Dokumentation Ørskov -Bjørn Nyborg

Beskrivelse & Dokumentation Bjørn Nyborg

Indholdsfortegnelse

Beskrivelse af GF Projekt 2013 3......................Synopsis uddybet 4.......................Kernefagligheder 5..............................Overordnede 6............................Grafisk Design 8..........Typografi og ombrydning 10....Grafik og billedebehandling 12......................Grafisk Workflow

Opgaven: Jeg skal fremstille marketingsmateriale om Ørskov Gruppen, i form af en plakat, en profil brochure og en lille hjemmeside.

Afsender: Min afsender er Ørskov Web og grafisk design, som er en del af Ørskov Gruppen A/S, i Ørskov Gruppen er der 25 ansatte, og de 19 af disse arbejder på den ene eller anden måde med Web og/ eller grafisk design. I 1982 blev Ørskov Gruppen etableret af Gunnar Ørskov, han startede med at holde kurser og foredrag. I 1986 startede Annie Ørskov reklame bureauet, Og i år 2000 starter en af de ansatte på reklame bureauet, starter på at lave lidt hjemmesider og derfra har det udviklet sig til det der i dag hedder Ørskov Web.

Gruppen

Målgruppe: I interviewet har Ørskov Gruppen svaret at de ikke har en bestemt målgruppe, men prøver på at være så brede som muligt.

Min målgruppe er: Større virksomheder (50+ Medarbejdere) som trænger til en fornyelse af deres grafiske udtryk, og som ønsker en stabil, moderne og erfaren virksomhed til at hjælpe dem med dette.

Kommunikationsstrategi: Ørskov Gruppen har heller ikke en speciel kommunikationsstrategi, så her har jeg også valgt at lave min egen.

Jeg har valgt at være både informativ, og lidt manipulerende, på den måde at jeg har mange facts om Ørskov Gruppen, og viser konkrete eksempler på deres arbejde, men samtidig fortæller jeg også at det er Ørskov Gruppen at kunden mangler til at løse deres projekter og markedsføring.

Distribution: Materialet skal om deles af sælgerne. Ørskov Gruppen får sine kunder primært gennem personligt salg, derfor vil jeg lave noget som sælgerne kan have med ud til kunderne. På denne måde kan jeg ramme målgruppen selvom den er meget spredt.

Ørskov Gruppen | 3/16

Kernefagligheder Grafisk Design - Typografi og Ombrydning - Grafisk og billeder- Forst책else for grafisk workflow

Overordnede: Opgave beskrivelse Opgaven er at jeg skal fremstille markedsføringsmateriale for min tirsdagspraktik, materialet skal bestå af: • En profil brochure • En plakat • En hjemmeside • Og et nyt logo Ansvar for opgaven Jeg har selv haft 100% ansvar for at opgaven blev løst, men jeg har dog flere gange lige hørt folk omkring mig, hvad de mener om det jeg har fået lavet, og om de har ideer til noget der kunne gøres anderledes. Så jeg har benyttet mig af kollegial support.

Målgruppebeskrivelse Større virksomheder (50+ Medarbejdere) som trænger til en fornyelse af deres grafiske udtryk, og som ønsker en stabil, moderne og erfaren virksomhed til at hjælpe dem med dette.

Ørskov Gruppen | 5/16

Grafisk Design Opgaven: Jeg har lavet en plakat for Ørskov Web, som en del af dette projekt.

Design Parametre: Tekst Jeg har brugt Myriad Pro her til plakaten, som jeg har brugt hele vejen gemmen mit projekt, dette har jeg gjort for at bevare en genkendelses værdi i alle mine produkter. Jeg har bestemt mig for at der ikke skal være alt for meget tekst på plakaten, men et kort præcist budskab, og så en klar “action” så folk ved hvem de skal kontakte, eller hvor de skal gå hen, når plakaten har vist dem et behov.

Illustrationer Jeg har valgt at vise nogle forskellige vektoriserede Applelook-alike produkter, som indeholder Bork Havn Musikfestival‘s hjemmeside, som er en af de hjemmesider Ørskov Web har lavet i et responsive webdesign, jeg har valgt at bruge apple lignende produkter, fordi det er blevet et udtryk for kvalitet og det moderne. Og dette er nogle af de ting jeg gerne vil vise at Ørskov Gruppen er. Jeg har øverst i venstre hjørne sat logoet for Ørskov Web som en lille afsender, og igen for at give lidt genkendelsesværdi.

På samme måde har jeg også lavet et genskin under enhederne, for at føre den røde tråd fra web-bannerne videre.

Farver Jeg har valgt at bruge den gradient som jeg har på alt der hedder Ørskov Web, både på hjemmesiden, og i min brochure, på denne måde kan jeg holde en rød tråd fra den

Ørskov Web det ene sted, til det andet sted. Den blå farve udtrykker fred, ro og harmoni, sikkerhed og samarbejde.

Form Min plakat er i et beskåret A3 format, dette format er valgt fordi at det er det vi kan printe her på skolen, plakaten er tiltænkt at hænge op nede i Skjern Kulturcenter, da Ørskov Gruppen ikke bruge penge på at markedsføre sig selv, men de sponsorere Skjern håndbold. Det er også et sted der kommer mange forretningsfolk.

Vægtning Jeg har forsøgt at vægte æstetik og funktion lige højt, dette har jeg prøvet på at opnå ved at lave et stilrent layout, og nogle simple effekter, på denne måde undgår man at det bliver noget rod, og jo færre elementer, jo mindre støj er der. Jeg brugte en del tid på at få formuleret den rigtige overskrift, da jeg gerne vil have sendt et klar budskab, og eftersom det omhandler “Responsive Webdesign” var jeg nødt til at beskrive hvad det er med meget få ord, da det ikke er noget der indgår i alles daglige tale.

Proces Jeg startede med at skitsere det ned på papir, i starten arbejdede jeg med at have en plakat for hele Ørskov Gruppen, men så var det svært at have en klart budskab når man arbejdede med flere afdelinger, så jeg valgte kun at lave om Ørskov Web. Kvalitetsvurdering Jeg er godt tilfreds med produktet, synes jeg har opnået et stilrent resultat, og har holdt den røde tråd fra de andre Web produkter, gennem skriften og den blå farve.

Ørskov Web logo Et lille logo som afsender.

Rubrik Kort præcis overskrift, i Myriad Pro Bold Apple-Look- Alike Vektoriserede enheder som til forveksling kunne ligne apple.

Attention Interest Desire Action

Action Min action består af en adresse, en hjemmeside og en live QR kode.

Ørskov Gruppen | 7/16

Typografi og ombrydning Opgaven Jeg har her lavet en profilbrochure, som Ørskov Gruppen‘s sælgere kan have med ud til kunderne.

Tekstmæssige valg: Skriftvalg Jeg har valgt at bruge Myriad Pro som min primære skrifttype. Myriad Pro er en sans-serif skrift, hvilket gør at den er mest funktionel på skærmen, og mindre funktionel på det trykte. Jeg har valgt, at det skal være den samme skrift der går igen på skærmen og på det trykte.

Og eftersom serif skrifter er virkelig dårlige på skærm, hvor at en sans-serif stadig er læsbar på tryk. Har jeg valgt en sans-serif.

Satsform Jeg har valgt at bruge både justeret og venstrestillet, på de layout jeg har med en enkelt spalte har jeg brugt justeret og i de layout med de smalle spalter har jeg brugt venstrestillet, fordi at spalterne blev smalle, så det var umuligt at justere det ordentligt.

Punktstørrelse/skydning Jeg har valgt at bruge str. 10/12 på min brødtekst, det har jeg af den grund at min målgruppe ikke inkludere børn eller ældre, derfor kan jeg godt gå ned i en 10‘er, og da mit format på brochuren allerede er forholdsvis lille, ville det ikke give mening at vælge en større skrift, så her har jeg valgt at nedprioritere læsbarheden en anelse, men slet ikke så meget at det bliver svært at læse.

Linjelængde Da jeg har en lidt lille skriftstørrelse har jeg valgt at have forholdsvis korte linje, da det højner læsbarheden. På det layout med en enkelt bred spalte har jeg ca. 65 tegn på en linje, hvilket er tæt på det optimale. Og i de andre layout‘s med spalter kommer jeg langt ned, hvilket giver god læsbarhed.

Register Jeg har hele tiden sørget for at billederne har kanter det flugter min marginer i mit layout, og billederne på enkelt spalte layoutet har jeg “stillet” på den linje der holder register med de kursive tekstbokse.

Figursats Jeg har brugt figursats i enkelt side layoutet, ved at lave en form med pentool og lægge textwrap på den.

Neutralisering Jeg har neutraliseret de store overskrifter, dette er gjort med “Kerning og Tracking”. Jeg har også den automatiske funktion “ligatures” slået til, for at hjælpe til at danne nogle bedre ordbilleder.

Produktionsmetoder Jeg har lavet alle de forskellige layouts på mine mastersider, og benyttet dem. Jeg har også benyttet mig af paragraph styles. Jeg har også downloadet et print preset som jeg kan bruge til at eksportere min fil som booklet via. en postscript fil.

Billederne holder register med layoutet

Jeg har valgt at bruge venstrestillet til de smalle spalter.

Jeg har lavet figursats ved at lave en figur med pentool, ovenpå mit billede, og så lagt text wrap på det.

Jeg har neutraliseret de store overskrifter

Min spalte bredde er ca. 65 tegn, hvilket giver en god læsbarhed.

Ørskov Gruppen | 9/16

Grafik og billedebehandling Opgaven Jeg har her valgt at tageudgangspunkt i profilbrochuren.

Programvalg Jeg har brugt Photoshop til alt redigeringen, jeg har holdt filerne i PSD format hele vejen, fordi så bevare jeg flest mulige data, og så spiller det fint sammen med indesign.

Farvestyrring Jeg har holdt billederne i Adobe RGB (1998) helt indtil eksportering af PDF, dette har jeg gjort fordi RGB er et stort farverum, og jeg vil gerne have flest nuancer så længe som muligt.

Proceduren for billedebehandling 1. Åbner billedet i photoshop og ser om der er en profil på, ellers assigner jeg en. Hvis den allerede har en som ikke er Adobe RGB konvertere jeg den.

2. Jeg laver mine redigeringer, kontrast, skarphed osv.

3. Jeg justere lys og skygge, så billederne ikke brænder ud på hvidt papir, eller sort i sort.

4. Jeg arkivere mine billeder som PSD, og hvis det er til web laver jeg også en PNG fil for at minimere fil størrelsen.

Opløsning Jeg holder alle mine billeder til print i 180ppi, så har jeg mulighed for at skalere en smule i indesign, jeg sætter så en preflight option i indesign der siger at billederne ikke må komme under 150ppi.

Alle billeder til Web holder jeg i 72ppi, ikke fordi det gør nogen forskel, fordi en pixel er nu engang en pixel når vi snakker skærm/web.

Arbejdsmetoder Jeg har for så vidt muligt forsøgt at arbejde i en ikke-destruktiv arbejdsgang, dette vil sige at jeg har benyttet mig af masker, lag, smart objects, og smart filters så vidt muligt.

Min brug af Smart Objects med Smart Filtre, gør at jeg kan gå ind og rette i et filter længe efter jeg har tilføjet, dette kan man ikke gøre med andre filtre.

Jeg har brugt lag rigtig meget, og sørget for at holde styr på dem med navngivning og sortering i mapper.

Jeg har også været inde og gjort brug af 3D værktøjet til at rotere mine billeder af hjemmesiderne, så de blev helt som jeg ønskede det. Til fritlægning har jeg brugt markeringsværktøjer og pentool, som jeg så har lavet til masker.

Proces De fleste billeder har jeg taget via. screenshots på Ørskov‘s ISSUU profil, eller fra de hjemmeside de har lavet, og efterfølgende redigeret dem i photoshop evt. med noget 3D rotation for at få det til at se lækkert ud. I starten var det meningen at jeg ville have haft fat i nogle af de tryksager de havde lavet og selv fotograferet dem, men for at følge men tidsplan fik jeg ikke tid til dette.

Kvalitetsvurdering Jeg er rimelig godt tilfreds med mine billeder, jeg har fået gjort brug af mange værktøjer i photoshop, og det ser godt ud på print. Jeg har også fået holdt den røde tråd i billederne via. spejlningerne og baggrundsfarverne.

Dog ville jeg gerne have haft nogle billeder med jeg selv havde taget.

FØR

EFTER

Billedet er lavet sort hvid, via. justeringen “Black & White” derefter konverteret til grayscale.

+

Sammensætning af screenshots, 3D Rotation og placering, og spejlning vha. layer mask.

+

Fjernelse af menu vha. content aware, blending modes på logo, visualisering af pagecurl i venstre hjørne.

Ørskov Gruppen | 11/16

Grafisk workflow Opgaven Jeg har valgt at her tage udgangspunk i hjemmesiden.

Layout Jeg har selv lavet hele mit layout og design først, dette har jeg gjort i photoshop i en stor PSD fil, så er det nemt derefter at eksportere sine forskellige elementer som PNG filer, eller at skrive CSS udfra. Jeg har lavet den i et responsive layout, så det vil sige at den tilpasser sig til din skærm ned til en min-bredde på 700 pixels. På denne måde kan jeg udnytte både de store skærme, og jeg kan sørge for at brugere på en lille skærm ikke bliver nødt til at scrolle frem og tilbage.

Kvalitetskontrol Mine billeder har jeg gennem redigering osv. arbejdet med i Adobe RGB, og konverteret til sRGB ved eksportering til PNG, fordi at sRGB er den farveprofil der er flest skærme der bruger.

Mine koder har jeg hele tiden tjekket løbende både i Firefox, Safari, Chrome og Internet Explorer ned til 8‘eren.

Mine krav til 8‘eren har dog kun været at mit indhold skulle blive vist korrekt så man kan læse det hele. I de andre browsere har mine krav været at alt så rigtigt ud, og lignede min wireframe så meget som muligt.

Standarder Jeg har benyttet mig af HTML5 og CSS3 tags, da dette er det nyeste, og efterhånden understøttet de fleste steder, IE 8 og ned understøtter dog ikke, men her har jeg valgt at prioritere de 95% som IKKE bruger IE 8 og nedefter.

Dog vises siden fint i IE 8, der mangler bare nogle effekter.

Output Jeg har uploadet min hjemmeside til mit eget webhotel via. FTP, så den er tilgængelig for alle der vil se den.

Internet WWW Min hjemmeside er fuldt kompatibel med Firefox, Safari, Chrome og Internet Explorer 8+, på denne måde er det kun IE 7 (0,8%) og IE 6 (0,1%) der ikke ser siden korrekt.

Jeg har valgt ikke tjekket hjemmesiden i Opera (1,6%).

Jeg har hele tiden forsøgt at lave en hjemmeside som alle kan finde ud af at bruge, derfor har jeg holdt mig til en normal horisontal menu, og en simpel dropdown menu.

Proces Jeg startede med at skitse lidt ned på papir, og finde inspiration, herefter har jeg lavet hele mit design og layout i photoshop. Dette gør at jeg nemt kan gemme mine elementer hver for sig. Herefter har jeg lavet en skabelon side og tjekket dens browser kompatibilitet. Derefter har jeg duplikeret siden og rettet indholdet, så alle siderne er udfra samme skabelon. Nogen er så modificeret mere end andre. Men selve fundamentet er det samme. Til sidst fik den ide til den responsive del. Det lykkedes mig på trods af at jeg ikke havde taget højde for dette fra starten.

Jeg har løbende hørt hvad andre mente og tænkte om det jeg havde lavet.

Kvalitetsvurdering Jeg er tilfreds med min hjemmeside, fordi jeg har kunne holde mig til det layout jeg lavede i photoshop fra starten, og fordi den er så cross browser kompatibel som den er, slideren på forsiden er dog ikke så responsive som den burde være. Jeg har holdt mig til grundreglerne, og har ikke været begrænset.

FIREFOX

CHROME

SAFARI

IE8

Logoer får farve ved :hover vha. et CSS filter.

Overlapninger med z-index

CSS Dropdown menu, med fade-in vha.

CSS3 Animation Cases med tekst der kommer frem ved :hover.

Login demo, med required felter, og slidedown vha. CSS3 animation.

2 overlappende tabeller, hvor cellerne fader in ved :hover

Interaktivt google maps som viser Ørkskov Gruppen‘s lokation.

Ørskov Gruppen | 13/16

Grafisk Design

Web

Gruppen

Ă˜rskov Gruppen | 15/16

By: Bjørn Nyborg