Dokumentation: Workflow af Hjemmeside redesign

Transkript

1 Dokumentation: Workflow af Hjemmeside redesign Jeg skulle lave et redesign af BB Offsets hjemme side med max 4 undersider. Jeg har været alene om opgaven. Det eneste kundekontakt jeg har haft i forløbet med hjemme siden var et telefon opkald angående nogle farver og logo tilpasning og med henblik på materiale anskaffelse. Layout: Jeg har selv lavet design og layout via wireframe skitse af hvordan siden skal sættes op. Der var ikke givet nogen faste krav andet end den max skulle have 4 undersider. Jeg valgte at lave siden med en 800 px brede og en»auto«højde med 3 undersider. De 800 px blev valgt for at tilgode se så mange computer skærme som muligt. Skrift fonten er»verdana«. Kvalitetkontrol: Alle billeder brugt i hjemmesiden er sat op til farve profilen Adobe RGB 1998 samt i jpg format med PPI 75. Bortset fra logo der er gemt som png for at tilgode se gennemsigtighed. Sprog koden i toppen af min hjemmeside er sat til html»lang=«da««, samt»meta charset=«utf-8««for at kunne tyde danske bogstaver som Æ, Ø, Å. (Korrektur er læst af mig selv). PDF generering: På siden er der lavet mulighed for at download 2 pdf er. Sat op til 200 PPI, og i cmyk i tilfælde af print muligheder. TMT_Dokumentation.indd 1 Internationale standarder: Alle billeder har fået farve profilen Adobe RGB 1998 påført under redigering af hvert billede. Hjemmeside koden er skrevet i html5, samt css 3, pdf er er i version 1,4. Overlappende logo Wireframe RGB Convert Loven om lukkethed Outputdelen: Det er en digital visning af en hjemmeside. Bør vises på en projector eller direkte fra en computer skærm. Internet: Siden er sat op til at være kompatible med browsere som Firefox, Google Chrome og Safari, men den er bygget op hovedsageligt til Firefox. Syntes at hele processen er gået ret flydende jeg havde lavet en go planlægning inden jeg startede på selve projektet. Så der var ikke de store problemer der kunne tvinge mig til at skifte focus. Der var kun lidt xtra justeringer der skulle til for at tilpasse alle kasser med hinanden, men ikke noget vildt krævende. Footer med kontakt info Site Layout Links_target_blank Jeg er ret tilfreds med udkommet. Jeg syntes den lever op til min målgruppe valg. Den skulle virke professionel b2b, men stadig virke miljø rigtig. Jeg har holdt mig til samme farve tema som den oprindelige side har, men tilpasset og ændret layoutet, og overholdt gestalt loven om lukkethed via opdeling af elementer i hver deres bokse. 21/06/

2 Dokumentation: Grafisk Design af plakat Skulle lave og design en A3 plakat der overholder AIDA over mit praktik sted tilpasset en fastlagt målgruppe. Jeg har umidbart ikke haft kontakt med kunden her. Det eneste kontakt var med henblik på materialer og logo ændring over en telefon samtale med afsenderen. Resten har jeg været ene om. Overordnet kommunikation: Afsenderen er mit praktik sted BB Offset i Bjerringbro, der har en målgruppe der strækker sig over et stort område. Faktisk hele Skandinavien dog hovedsageligt B2B, men de laver også tryk for private. BB Offset ligger meget vægt på at levere kvalitets tryk, og miljø bevarelse inden for realitetens grænser. BB Offset er en full-service Grafisk bureau der startede op i Designparametrene: Angående tekst har jeg lagt vægt på at der skal være lidt af det, men det der er skal være letlæseligt og have relevans så jeg har valgt at bruge en helvetica font da det er en kønsløs og neutral skrifttype man kan bruge den i alle sammenhæng næsten, bare ved at tilpasse farver og størrelser. Det er en af de stærke sider ved en grotesk og funktion vigtig font. Illustration valg er en samling af 7 billeder. Til det store billed har jeg valgt et billed ude fra BB Offsets trykkeri for at symboler at de ligger meget fokus på deres trykkeri kvalitet og arbejde. Så derfor et billed med 2 trykker fuld koncentreret omkring deres arbejde virkede som et passende valg for at vise professionaliteten i arbejdet. De 6 små billeder under skal vise en kort historie om hvordan et projekt kommer fra start til slut. Til at illustrerer dette lagde jeg vægt på at de skulle være så lidt personifiseret som muligt for ikke at virke manipulativ, men informativ i min kommunikation som jo også er metoden BB Offset selv bruger i deres kommunikation strategi. Angående farver har jeg valgt at holde mig til et fast farve tema jeg har ladet mig indspirer af BB Offsets egne farver på deres hjemme side med mest vægt på en orange tonet farve hvilken jeg er blevet lidt glad for. Farve koderne er: Orange: RGB: # ce5c34, CMYK: C:0%, M:75%, Y:85%, K:0% Lys grå: RGB: #ced3d8 CMYK: C:23%, M:13%, Y:13%, K:0% Mørk grå: RGB: #808b91 CMYK: C:53%, M:33%, Y:33%, K:14% Mørk blå: RGB: # CMYK: C:100%, M:86%, Y:38%, K:26% Jeg har stortset brugt de samme farver på alle mine dokumenter for at holde en rød tråd igennem hele projektet. Angående form har jeg valgt til plakaten at lave en A3 i høj format samt indrammet indholdet med den orange farve for at skabe mere fokus på billeder og illustrationer inden for rammen. Logoet bryder så ramme formen ved at den bliver en del af rammen for at give lidt liv til plakaten. Det gik ganske flydende syntes jeg. Mit skitse forarbejde var passende der var dog en ting jeg havde glemt da jeg troede jeg var færdig med den først og det var at plakaten manglede de sidste 2 punkter i AIDA modelen så det måtte jeg så lige få plads til ved at ændre lidt i layoutet på plakaten. Jeg er godt tilfreds med det færdige resultat da jeg syntes den overholder AIDA nu. Altså: Attention, Interest, Desire, og Action. Jeg syntes også den passer fint til målgruppen da den viser både professionalitet samt miljø venlig da illustrationer er begrænset få, og den funktionalistiske skrifttype valg. Så jeg tror den ville kunne tale til et større publikum. Jeg kunne dog godt tænker mig at jeg kunne finde et bedre sted at placere det lille tekst felt med produkter da den virker lidt tilfældig placeret hvor den er nu, men prøvede flere steder, og det virkede bedst af de steder jeg prøvede hvor den er nu. Interest Desire Attention Action TMT_Dokumentation.indd 2 21/06/

3 Dokumentation: Grafik og billedbehandling til Folder Jeg skulle tilpasse nogle billeder hentet fra nettet der skulle kunne bruges til et print af en folder, omkring et firmas profil. Som jeg selv har designet og planlagt fra»skratch«i forbindelse med skole projekt til grundforløbet. Jeg har haft kunde kontakt fra min afsender til hvilke billeder jeg skulle bruge og tilpasse som de leverede resten hentede jeg fra en hjemmeside der hedder hvilken skolen leverede en bruger til. Programvalg: Jeg har skiftet lidt imellem vektor grafik og Billeder i format jpg med en PPI på 200 for at give mig muligheden for at justere en smule på dem i InDesign udover det jeg gør i Photoshop. Internationale standarder: Alle billeder er sat til at køre med profilen: Adobe RGB 1998 under work processen og sener ved PDF Gennerering er de blevet til: CMYK FOGRA 39 farve profilen. Farverum/-styring: Når man åbner billedet i Photoshop kommer den med en»popup«besked om den har en profil eller ej hvis ikke den har tilføjer man Adobe RGB 1998 hvis den har en i forvejen bruger man den senere inde i Photoshop og tilføjer Adobe RGB 1998 der. Inden man begynder at redigerer i billederne. Når man så er færdig med redigering går man op i»edit«fanen og convert to profile hvor man gir den Adobe RGB Og gemmer billedet i en ny mappe. Arbejdsmetode: Til farvejustering har jeg brugt»pipette«værktøj til at finde 2 punkter det mørkeste og det lyseste som jeg kan se i»info«vinduet til højre på min arbejdsflade. De punkter har jeg sat for at kan indstille hver farve i RGB rummet så de nogenlunde ligger så ens som muligt i mængden af farverne. Den lyseste del af farverne skal helst ligge imellem , og den mørkeste del skal ligge imellem Det kan indstilles i et justering lag der er koblet til»levels«, der kan findes i værktøj linjen til højre. Til fritlægning har jeg brugt»pen værktøjet«med en»feather«på 1px fordi jeg syntes det giver den bedst mulige beskæring kant. Når jeg har tegnet min fritlægning op går jeg ind i værktøjs vinduet»path«for at converter til en markering. Processen kørte flydende. Med undtagelsen af at jeg først kunne få mit billed materiale lidt sener i projektet. Fordi jeg og firmaet begge skulle være klar til det. Så det blev tilpasset lidt sener end forventet i projektet. Til at starte ud med var storset alle billeder indstillet godt og i go format. Så der var minimalt jeg skulle gøre ved dem. Der var kun nogle få justeringer og fritlægninger jeg skulle gøre. Og så var der lige nogle farveprofiler der ikke helt matchede min egen farveprofil. Som vi skulle bruge der hedder Adobe RGB 1998, og så skulle de ligesættes op til 200 PPI i stedet for de 72 PPI som de var i så de kunne bruges til print. Jeg syntes billeder er blevet udmærket. Da jeg undgik falske pixels ved at sætte dem op til 200 PPI, fordi billederne i sig selv var af god kvalitet. Så mine justeringer kørte uden de helt store problemer ud over det almindelige. Dog kunne jeg gerne på selve printet have ønsket mig en lidt bedre papir kvalitet da jeg tror det ville havde fået billederne til at stå endnu skarper. Info Vindue Levels vindue Asign profile Vælg Adobe RGB 1998 Embed Profil ved start Pipette Punkter Convert til slut TMT_Dokumentation.indd 3 21/06/

4 Dokumentation: Typografi og omrydning ved folder Jeg skulle lave en folder der skulle skabe et profil billed omkring min praktik plads Der hedder BB Offset. Der skulle have satsformen»left Justify«som et krav samt minimum være på 12 sider. Jeg har haft kunde kontakt for at få fat i billed og tekst materialer ellers har jeg været alene om resten. Tekstmæssige valg: Jeg har valgt at køre med fonten»helvetica«. Da det er et let læselig grotesk skrift som er kønsløs. Derfor kan den bruges i næsten alle sammenhæng. Især i dette tilfælde hvor afsenderen satser på at kommunikerer mere på fakta fremfor for følelser. Root skriftstørrelsen er en 10 pkt. light skift i sort med en skydning på 12 pkt. Rubrik er en 10 pkt. bold skrift i en mørk blå farve med en skydning på 12 pkt. Derudover er der lignende skriftstørrelser med få ændringer i mine tabeler. For at få dem til at passe ind i tabel designet. Angående billeder har jeg valgt at der minimum skulle være plads til i hvert fald 2 hele sider, med hver deres store billede fra BB offsets arkiver. Derudover prøvede jeg så vidt muligt at dele hver side op i 4 koloner hvor den fjerde skal være til grafik hovedsageligt. Resten skulle være til skrift. Samtidig ville jeg have plads til at bruge minimum 2 figursats eksempler. Da jeg syntes det giver lidt ekstra liv i foldere som denne. Hvis der bliver lejet lidt med tekst i forbindelse med figurer. Rationelle produktionsmetoder: Statede med at checke mine BASIC præferencer igennem på InDesign. For at checke om den er sat op til at køre Dansk som sprog til ordbog, og BASIC»Paragraph style«ikke var for lang fra min valgte font, og om baseline farver er ok blandt andet. Nogen steder blev jeg nødt til at lave en manuel knibning ved f.eks. overskrift for at få bogstavet til at holde visuel kant. Jeg gør brug af 2 separate mastersides. For at styrer mit layout. A-master, og B-master samt none til forside. Da den ikke har brug for at køre med en master i mit design. Jeg gør brug af i alt ca. 23»Paragraph styles«delt op i mapper for overskuelighedens skyld. Til at kontrollere min tekst. Samt 2»Character styles«. Jeg har forudindstillet en PDF opsætning til export delen af projektet med indstillinger som farve convert. Samt skærepunkter og PPI opløsning. Samt en selv indstillet»preflight«for at holde check på mulige fejl jeg kunne komme til at over se i farten. Ved selve print delen valgte jeg at print folderen ud på en A3 med»long edge binding«. For at være miljø rigtig og spare penge på materialer. For miljøet skal vi jo altid tænke på hvor vi kan. Så jeg lavede mig en skabelon til at lave en 16 sider folder der fyldte i alt 2 A3 ark. Med double side tryk. Processen gik godt. Da jeg endelig fik materialer. Jeg måtte skifte fra at være en 12 side folder til en 16 side for at få plads til nogle store billeder, og for at side mængden kunne passe med 4 sider pr A3 side. Det færdige resultat blev ret godt. Jeg syntes den passer til et stort publikum, men den har stadig en hvis professionel stil til sig, og der er blevet gjort godt brug af adskillige værktøjer i InDesign i skabbelsen af denne folder. Dog ville jeg gerne have valgt noget lidt bedre papir at printe den på. Hvis jeg havde lidt mere tid. Og så kunne min egen papir skære evne nok godt trænge til lidt mere træning. Manuel knibning lav space før bogstav og træk manuelt afstanden fra PDF Template opsætning TMT_Dokumentation.indd 4 21/06/

5 Dokumentation: Resume af hele projekt Afsender: BB Offset er en moderne grafisk fullservice virksomhed, der teknologisk er med helt fremme. Omhyggelighed, erfaring og teknisk indsigt er grundlaget for deres grafiske produktion. BB Offset er både et anpartsselskab, men også en enkelmandsvirksomhed da det kun er en i firmaet der står med en anpart, ud af de nuværende 6 ansatte i firmaet. Hos BB Offset ligger man meget vægt på kvalitet fremfor kvantitet i deres tryk sager. BB Offset er miljø mærket af: FSC, PEFC, Svanen, Blomsten, Der Blaue Enge, og EMAS. Som man kan se på deres hjemmeside. Målgruppe: Deres primær målgruppe er hovedsageligt firmaer med behov for mange tryk. Man kan vel sige at de primært kører B2B målgruppe og mest i det blå og grønne farvesegment Deres sekundær er private. Det er lige meget om det er mange eller få tryk bare de vil have noget tryk. Som kendetegn kan man vel sige firmaer der har behov for brochurer og bøger. Samt visitkort og logo design eller redesign. Det er ikke så ofte lokale kunder BB Offset får, men snarer kunder over hele Danmark samt Norge. Ja faktisk hele Skandinavien. De har ikke som sådan nogle favorit kunder, men de foretrækker selvfølgelig store jobs med behov for mange tryk. Økonomisk, og erhvervsmæssigt er det mere praktisk for et firma som dem. BB Offset modtager dog alle trykopgaver. Kommunikation: BB Offset kommunikerer altid informativt med fakta Når de kommunikerer med deres kunder. De prøver ikke at manipulerer med nogen for at få dem til at flytte sig i nogen bestemt retning. Så det er også formen jeg forsøger at ramme med blandt andet skriftvalg Distribution BB Offset distribuerer altid deres materialer personligt. Det vil sige de tager personligt ud og snakker med deres kunder og aftaler tid for deadline og andet praktisk. Levering af materialer foregår på samme måde. Resten af deres distribution foregår hovedsageligt over telefon og . Jeg selv vil gøre det samme, og måske tage et kig i BB Offsets kunde kartoteker. Logo redesign: Logoet lavede jeg en del tidligere end planlagt pga. materiale komplikationer. Så jeg måtte improvisere. Ved logoet ændrede jeg farven og gav den en lille tilt i en 30 graders vinkel. Inden jeg kom i kontakt med BB Offset. Hvor de så nævnte for mig at jeg nok ikke burde tilte logoet da det så kom til at ligne to 6 er frem for to b er. Så jeg måtte lige gennemtænke logoet på ny, og kom så op med et ganske okay eksempel. Altsammen tegnet op med»pen tool«i Adobe Illustrator. Hvor jeg lavede 2 udgaver. En kun i orange og en med lidt mørke blå i. Jeg fik også plads til navnet for endnu mere at vise at der er to b er. Jeg bruger begge udgaver forskellige steder hvor jeg syntes de passer bedst ind i forhold til layout. Igennem hele processen er det gået godt jeg blev dog nødt til at lave om på hvad jeg havde skrevet i tidsplanen fordi jeg ikke kunne få materialer på det tidspunkt jeg troede jeg kunne. Men det lykkedes mig dog alligevel at holde en nogenlunde tidsplan. Konklusion: Alt i alt syntes jeg at projektet blev godt jeg bevarede en fast tema og ide og gennemførte den samtidig med at Jeg havde målgruppen i tankerne selvom det var en meget stor målgruppe. Oprindelige logo Logo redesign 2 BB Offset Logo redesign 1 Logo redesign 3 BB Offset TMT_Dokumentation.indd 5 21/06/