GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT

Transkript

1

2 GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT GRAFISK : MEEFRED - RE AF LOGO GRAFISK WORKFLOW: WELOVEORGANIC.COM - WEBSHOP TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL

3 OPGAVE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT

4 GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT OPGAVE: Kunden til denne opgave ville give sin kammerat en plakat i fødselsdagsgave. Plakaten skulle gerne være i B2 format (50x70 cm). Motivet på plakaten skulle være af de velkendte FIFA-kort, men med anden info samt billede. Kunden havde via FIFAs hjemmeside designet det kort han ønskede og gemte det ned som en PNG fil. Udfordringen med opgaven var at PNG-filen var i lav opløsning og hvis det skulle skaleres op i format 50x70 cm med et godt resultat - ville man være nødsaget til at tegne det op fra bunden. Se udgangspunkt herunder: PROGRAMVALG: Til udarbejdelse af selve våbenskjoldet vælges programmet Illustrator da programmet indeholder gode tegne- og effektværktøjer, såsom pentool og 3D-effekter, hvilket vil blive brugt hyppigt til denne opgave. Ansigtet på billedet skal fritlægges og farveprofilen skal ændres. Her vil Photoshop benyttes da det tilbyder mange værktøjer til billedredigering. Til sidst benyttes indesign for at gøre plakaten printklar - InDesign er et godt program til at komprimere filer, der indeholder tung grafik. Det originale billede blev derfor lagt i nederste lag og opbygningen af plakaten startede herfra. Plakaten er bygget op i 5 lag (rækkefølge fra bund til top: Skjold Logoer Billede Ramme og banner Tekst Værdierne i ekstrudering og dybe samt højde har ikke været identiske for alle trekanter, men de er alle opbygget med Forgrund som placering og Plastisk skygge som overflade. Alle farver er snappet op fra originalbilledet med Pipetteværktøjet. Den nederste del af skjoldet er også tegnet op med pen-tool. Fyldet består af en gradient af to farver (opsnappet fra originalbilledet). Dette giver den ønskede dybde effekt man ser i originalen: PROCES: Det originale billede blev sat ind i illustrator for at tjekke om man ved hjælp af en live trace kunne bruge dele af elementerne. Det gav dog ikke et godt resultat og det blev afklaret at alle elementer skulle genopbygges fra bunden. Se herunder resultatet af en live trace: LAG 1 - SKJOLD: Alle trekanterne i den øverste del af skjoldet er tegnet op med Illustrators pen-tool. Det er blevet gjort en anelse råt, da originalbilledet er pixeleret og derfor ikke gør det muligt at se alle detaljerne. For at skabe 3D-effekterne er der benyttet 3D-ekstrudering- og facet : Stregerne har også fået en gradient med en opacitet hvilket giver den ønskede fadeout effekt (de tre streger har hver deres procentværdi i opacitet - men er alle af Radial type: 6 7

5 GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT LAG 2 - LOGO: AGFs logo er blevet downloadet i eps format på nettet og er efterfølgende blevet integreret i dokumentet. Dette gøres for at undgå fejl i links ved åbning på en anden computer. Flaget er rentegnet med pen-tool. LAG 3 - BILLEDE: Billedet er blevet fritlagt i photoshop ved hjælp af Photoshops pen-tool for at sikre den bedst muligt fritlægning. Ydermere er der lagt en indvendig glød på ansigtet for at lave en blødere kant: Ydermere er opløsningen sat op til 200 dpi, billedet er ændret fra RGB-farver til CMYK farver og der er skabt en anelse mere kontrast i billedet: 8 GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT LAG 4 - BILLEDE OG BANNER: Rammen og banneret er som skjoldet tegnet op med pen-tool. På selve rammen er der igen lagt en 3D ekstrudering- og facet og farven er opsnappet fra det originale billede. 3D-effekten hjælper med at få den guldlignende CMYK farve til at ligne rigtig guld. På banneret er der lagt en stroke på med samme 3D-effekt og til sidst er der lavet et forløb i fyldfarven på banneret - på samme måde som bunden af skjoldet. SAMLING: Alle lag er nu udarbejdet og grafikken er nu klar til at blive samlet i InDesign. Der oprettes i InDesign et nyt dokument som har B2 format (50x70 cm) og grafikken placeres på dokumentet og tilpasses i størrelse. ENDELIGT RESULTAT: For at give plakaten et mere eksklusivt udseende er der rundt om skjoldet indlagt en skyggeeffekt: LAG 5 - TEKST: Fremfor at rentegne hvert enkelt bogstav og tal blev der fundet hjælp via hjemmesiden da-font.com. Da den rette font blev fundet blev de ønskede værdier tastet ind og placeret de rette steder. Til sidst blev alt tekst outlinet og fik den rette fyldfarve. Samtlige guldbogstaver har fået følgende 3D-ekstrudering- og facet for at skabe den ønskede effekt fra originalbilledet: Plakaten er nu klar og skal blot eksporteres til en PDF med de rette skæremærker og eksportindstillinger. 9

6 GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT FØR: GRAFIK & BILLEDE: KÜHNEL - FRA LOW RES TIL STORFORMATSPRINT EFTER: KVALITETSVURDERING: Ved at kigge på før og efter billedet er der ikke tvivl om at efter billedet er blevet utroligt skarpt og at opgaven er løst rigtig fint. OPTIMALT RESULTAT: Billeder fra internettet vil typisk ligge i RGB farver og derved er det vigtigt at have i tankerne at CMYK farver opfører sig en del anderledes, da de ofte er en del mere dæmpet. Men ved at give de blå og guldlignende farver 3D-effekter er det alligevel lykkedes at ramme de oprindelige farver samt effekter ret godt. Illustrationen nederst ved siden af wall fremtræder ikke på det endelige resultat - men dette var et valg fra kundens side. Selve billedet er taget med en mobiltelefon, hvilket forklarer kvaliteten derpå. Her kunne man godt have valgt et andet foto, som var taget i en højere opløsning, så skarpheden havde matchet grafikken. Men da kunden ikke havde andet billedmateriale - måtte der nøjes. Der er dog på næste spalte vist et optimalt resultat

7 OPGAVE: MEEFRED - RE AF LOGO

8 GRAFISK : MEEFRED - RE AF LOGO GRAFISK : MEEFRED - RE AF LOGO OPGAVE: Kunden Meefred Design ønsker at få lavet et redesign af sit logo. Grunden hertil er at det oprindelige logo kan gå hen og forveksles med McDonalds - hvilket på ingen måde har noget med Meefred Design at gøre, så det skal ændres for at undgå ballade med den store koncern. AFSENDER: Meefred Design er et grafisk design bureau - dog har virksomheden for nyligt valgt at udvide forretningen og blive til en webshop. Ambitionen er at skabe et brand inde for mode og bolig med produkter fra trykbranchen. Produktsortimentet ser således ud: Plakater Wallstickers/folie Pynt til klinker Diverse møbler i genbrugspap (Reboard) Poloer med print/broderi T-shirts med print Til logoet er der derfor stillet følgende krav: Minimalistisk Tidsløs Illustrationspræget (illustration der kan skilles fra ev. tekst) M et skal være i fokus og skille sig ud - OG ARBEJDSPROCES: For at forstå designprocessen ses herunder udgangspunktet - Meefred Design har selv haft udviklet sit logo et par gange: OPRINDELIGT LOGO: VIDEREUDVIKLET LOGO (DET DER NU ØNSKES ÆNDRET): M et er i begge tilfælde i fokus - men det fungerer ikke rigtig i forhold til et ønske om at det skal være illustrationspræget. Teksten fylder meget og gør logoet svært at arbejde med i opsætninger, da der ikke skal meget til før design vil blive ulæseligt. Tanken er derfor at få det samlet, så det fylder mindst muligt og bliver mere ensartet ift. størrelse. INSPIRATION (DEM MARKERET MED RØD CIRKEL ISÆR): SKITSER DEL 1: design BUDSKAB: Logoet skal udvise at kunderne/forbrugerne handler med en professionel. Logoet skal derfor fremstå knivskarpt, være eksklusivt, have tillidsfaktor og skabe genkendelighed for forbrugeren/kunden. Kombinationen af et M, der har store falde kanter samt en helt spids midte lægger til baggrund for markering af ovenstående skitser. Kombinationen skaber en kontrast som giver en form for fleksibiltet og mulighed for at udnytte M et til den primære tekst Meefred

9 GRAFISK : MEEFRED - RE AF LOGO GRAFISK : MEEFRED - RE AF LOGO SKITSER DEL 2: MEEFRED MEEFRED MEEFRED MEEFRED MEEFRED MEEFRED MEEFRED MEEFRED De to designs yderst til højre er umiddelbart de designs, der ville passe bedst til det Meefred Design står for. Dog er designet med stregerne markeret, da der er potentiale for udvikling - hvorimod designet helt til højre, ser færdigt ud, uden at give ønsket effekt. SKITSER DEL 3 (DEN MARKEREDE ER ENDELIGT LOGO): Ydermere har fonten Lato, regular også været afprøvet - men denne er fravalgt da der er nogle små rundinger i udformningen (se eksempelvis på S og G), der ikke passer ind til det meget kantede og skarpe M: Stregerne er nu blevet trukket over M et hvilket giver en ret fed effekt og giver designet mere sammenhæng. Ydermere er stregen nedenfor bibeholdt, da den fungerer godt til adskillelse af illustration og tekst. 16 Fonten, der er anvendt til Meefred og Design er lavet af fontfamilen Avenir, Medium. På billedet over SKITSER DEL 2 er det fonten yderst til venstre, der er valgt. Dog er andre versioner af samme fontfamilie blevet afprøvet - herunder udgaven Light (yderst til højre) og Roman (de tre i midten). FARVEVALG: De primære farver til logoet vil være sort og hvid: ENDELIG LOGO: Meefred Designs farver er præget en del af gråtoner. Dog er logoet lavet således, at der ikke er noget hvid integreret i logot - dvs. at logoet består kun af én farve og en evt. baggrundsfarve vil derfor trænge igennem hvor der er hvidt. Dette vil give logoet mere dynamik da det ikke blot er sort/hvidt, hvidt/sort eller grå/hvidt - men derimod forskelligt alt afhænigig hvilken baggrund logoet fremtræder på: MEEFRED FONTVALG: Selve M et stammer fra en font der hedder Silver Forte Grunge Grunge. Den er downloadet fra hjemmesiden og ser oprindeligt således ud: AVENIR, MEDIUM VS. LATO, REGULAR 17

10 GRAFISK : MEEFRED - RE AF LOGO GRAFISK : MEEFRED - RE AF LOGO LOGO: CMYK kode: 0, 0, 0, 0 (hvid) CMYK kode: 0, 0, 0, 100 (sort) MOCK UPS: KVALITETSVURDERING: Logoet er endt med at blive utrolig godt faktisk - det passer rigtig godt til kundens ønsker og ambitioner. Det består udelukkende af rene og skarpe linjer - men er samtidig fuld af dynamik og kontrast. Den røde tråd i logoet er ydermere også til at få øje på - nemlig de hvide linjernes tykkelse samt placering. Linjerne har præis den samme tykkelse som Meefred - hvilket giver en ro til øjet og skaber harmoni mellem de 3 grafiske elementer M et består af. 100% (ca. 38x42 mm) Den eneste kritik, der kan sættes på logoet er muligvis sammenhængen mellem M et og Design - det kan godt irriterer øjet en smule, da de to dele ikke flugter sammen på nogen måde. Dog hjælper det, at have en streg imellem dem, hvilket også er nævnt tidligere under SKITSE DEL 3, da det får dem adskilt fra hinanden. 75% (ca. 29x31 mm) 50% (ca. 19x21 mm) 25% (ca. 10x11 mm) 18 19

11 OPGAVE: WELOVEORGANIC.COM WEBSHOP

12 GRAFISK WORKFLOW: WELOVEORGANIC.COM - WEBSHOP GRAFISK WORKFLOW: WELOVEORGANIC.COM - WEBSHOP OPGAVEN OG AFSENDER: Weloveorganic.com er en forholdsvis ny virksomhed, der pånuværende tidspunkt udelukkende sælger økologisk tøj til kvinder. På længere sigt ønsker virksomheden at udvide til mænd og børn. Weloveorganic.com ønsker at få etableret en webshop - da meget af deres salg skal foregå online. De har dog en fysisk butik i Aarhus C - men de ser gerne at de kan få udvidet deres kundekartotek og handler med hele Danmark. MÅLGRUPPE: Tøjet, der sælges ved Weloveorganic.com er forholdsvis klassisk - men bærer præg af mange små detaljer. Tøjet kan kategoriseres som en anelse hippie/konservativt - det er ikke for meget, men heller ikke for lidt. Målgruppen her kan derfor være svær at præcisere, da vi i dagens Danmark ofte er enten eller. Men Weloveorganic ønsker at ramme kvinder i alderen 35+ og deres primære målgruppe er placeret i storbyerne rundt omkring i Danmark eksempelvis København, Odense, Aalborg, Aarhus osv. BUDSKAB: Webshoppen skal være nemt at navigere rundt på og skal være reponsiv så den kan besøges på både store og små skærme. Ydermere skal forbrugeren skal føle sig tryg ved at handle ved Weloveorganic.com. PROGRAMVALG: Webshoppen er opbygget gennem Brackets - så den er kodet helt fra bunden. Ydermere er Photoshop samt Illustrator anvendt til at udarbejde billeder og grafik. InDesign er benyttet til at lave en skitse. Til udgivelsen er der anvendt programmet FileZilla. ARBEJDSPROCES: Webshoppen er bygget op ud fra følgende: Brainstorm: farver, stilart, elementer på shoppen, generelt research Udarbejdselse af skitse Kodning Testning Udgivelse KOMPOSITION/MODULOPBYGNING: Grundet tidspres er der ikke udarbejdet et flowchart eller et storyboard. Men der er udarbejdet en skitse i InDesign som skal forestille den endelige forside (dog skal alle billederne være forskellige og de er i den endelige version uden luft imellem da dette så bedre ud). Skitsen kan ses på næste side: 22 23

13 GRAFISK WORKFLOW: WELOVEORGANIC.COM - WEBSHOP GRAFISK WORKFLOW: WELOVEORGANIC.COM - WEBSHOP KODNING: Herunder ses hjemmesidens stylesheet: * { padding: 0; margin: 0; box-sizing: border-box; body { font-family: lato, sans-serif; header { width: 100%; height: auto; header > div:nth-of-type(1) { box-shadow: 0 8px 6px -6px #666; overflow: hidden;.clear { content: ; display: table; clear: both; header.subnav:after { content: ; display: table; clear: both; header div:first-child:after { content: ; display: table; clear: both;.logo { background-color: white; height: 80px; form { float: right; width: 275px; height: 90px; padding-top: 10px; fieldset { border-style: none; font-size: 12px; label, input [type= text ] { width: 40%; input[type= submit ] { padding: 0px; padding-top: 10px; padding-bottom: 5px; border-style: none; font-size: 16px; font-family: lato, sans-serif; background-color: white; h2 { font-size: 16px; width: 245px; height: 35px; margin-left: 35px; margin-bottom: 20px; padding-left: 5px; padding-top: 7px; border: solid 0.5px #666; margin-top: 25px;.subnav ul { display: block; background-color: white; float: right; margin-right: 35px; margin-top: 30px;.subnav ul li { display: inline-block; font-size: 16px; margin-left: 18px; text-align: center;.subnav ul li a { display: block; color: black; text-decoration: none; text-transform: uppercase; border-bottom: 3px solid text-transform: uppercase; border-bottom: 3px solid transparent; letter-spacing:.13rem; border-bottom: 3px solid transparent;.subnav ul li a:hover { border-bottom: 3px solid #666; box-shadow: 0 8px 6px -6px #666; transition: all 0.5s ease;.picture { width: 100%; nav { width: 100%; height: 55px; box-shadow: 0 8px 6px -6px #666; margin-bottom: 30px; nav ul { nav ul li { display: inline-block; font-size: 16px; margin-left: 35px; margin-top: 13px; nav ul li a { display: block; color: black; text-decoration: none; text-transform: uppercase; border-bottom: 3px solid transparent; border-bottom: 3px solid transparent; nav ul li a:hover { border-bottom: 3px solid #666; box-shadow: 0 8px 6px -6px #666; transition: all 0.5s ease; main { width: 100%; main ul li { width: 25%; padding-top: 10px; padding-bottom: 30px; main ul:after { content: ; display: table; clear: both; h1 { font-size: 30px; text-align: left; width: 100%; padding-left: 35px; clear: both; ul { list-style-type: none; img { max-width: 100%; min-width: 100%;.kolonne { width: 100%; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 1%; -moz-column-gap: 1&; column-gap: 1%; h3 { font-size: 24px; margin-left: 130px; margin-bottom: 35px; padding-top: 14px 24 25

14 GRAFISK WORKFLOW: WELOVEORGANIC.COM - WEBSHOP GRAFISK WORKFLOW: WELOVEORGANIC.COM - WEBSHOP h4 { font-size: 24px; line-height: 200%; text-transform: uppercase; margin-top: 25px; margin-left: 90px; h5 { font-size: 18px; line-height: 250%; text-transform: uppercase; margin-left: 90px; aside { width: 30%; height: 300px; section { width: 70%; height: 300px; float: right; border-left: 1px solid black; 26.ikon { font-size: 24px; color: black; letter-spacing: 16px; margin-left: 90px;.nyhedsbrev { font-size: 12px; width: 400px; margin-left: 330px; h6 { font-size: 12px; padding-top: 43px; footer { width: 100%; height: 105px; p { font-size: 14px; line-height: 160%; margin-left: screen and (maxwidth:580px) { h1 { font-size: 20px; padding-bottom: 5px; padding-top: 15px; h2 { width: 40%; margin-bottom: 20px; nav ul li { display: inline-block; font-size: 12px; margin-left: 35px; margin-top: 13px; form, { display: none; fieldset { display: none; main ul li { width: 50%; padding: 0; margin: 0; nyhedsbrev { display: none; h6 { display: none; aside { width: 100%; margin: 0; height: 220px; section { width: 100%;.kolonne { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; -webkit-column-gap: 1%; -moz-column-gap: 1&; column-gap: 1%;.ikon { margin: 0; margin-left: 35px; h3 { margin: 0; margin-left: 35px; margin-top: 20px; margin-bottom: 30px; h4 { margin-left: 35px; h5 { margin-left: 35px; footer { width: 100%; height: 40px; 27

15 TESTNING: Hjemmesiden er blevet test løbende via Brackets. Det er dog ikke 100% retvisende - men er en fin indikator for hvorledes hjemmesiden fungerer i de forskellige størrelser. Siden er blevet testet følgende browsere og fungerer umiddelbart fint. Dog er der nogle ting som rykker sig en anelse på iphone SE - nemlig Kurv og beløb og Nyhedsrevet - men da der ikke er 100% forståelse overfor dette er det ikke muligt at rette på nuværende tidspunkt (det er nemlig forsøgt en del gange). Hjemmesiden er testet på følgende: Safari (på både mobil og computer) Chrome på både mobil og computer) BILLEDER AF DET ENDELIGE RESULTAT: Mobil (venstre) og Desktop (næste side): KVALITETSVURDERING: Webshoppen er langt fra bygget færdig og det skyldes manglende tid og komptencer op til dette hovedforløb. Dog fungerer hjemmesiden fint og designet lægger utrolig godt op af skitsen (hvilket ikke er ændret siden den blev lavet) - og det er et stort plus. Men udgangspunktet er produceret og med mere tid ville det kunne opfylde kundens krav og blive en god webshop til dem. P.S. jeg er klar over at dette ikke er fyldestgørende til at dække dette kompetenceområde - der skal gåes mere i dybden med selve koden. Men jeg har simpelthen ikke kunne evne dette, da jeg ikke sidder med web til dagligt og først lige er kommet fra Frontend kursus. UDGIVELSE: Hjemmesiden er udgivet ved hjælp af programmet FileZilla. Der var ingen problemer med upload og den endelige hjemmesiden kan ses her:

16 OPGAVE: MEEFRED - MANUAL

17 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL OPGAVE OG AFSENDER: Meefred Design er et grafisk designbureau inde for tryksager samt en webshop, der sælger diverse print/tryk til boligen. Det er en forholdvis nyopstartet virksomhed, der stadig udvikler deres koncept. Logoet er dog kommet på plads, og Meefred Design ønsker derfor at få en designmanual hertil - da denne vil gavne eventuelle eksterne leverandører af eksempelvis webproduktion til virksomheden. MÅLGRUPPE: Designmanualen er til intern brug for virksomheden - der er derfor ikke som sådan en målgruppe. Dog er det et krav, at designmanualen er let at overskue for en evt. ekstern leverandør. design-manualen skal bruges internt i virksomheden. Fonten der er anvendt er Avenir. Den er anvendt i følgende udgaver: Avenir - light (udelukkende til paginering) Avenir - black (udelukkende til paginering + indholdsfortegnelse) Avenir - medium (indholdsfortegnelse str. 12/20 punkt) Avenir - medium (brødtekst str. 12/15 punkt) Avenir - medium (illustrationstekst str. 10/13 punkt) Avenir - medium (farvebokse tekst str. 8/15 punkt) Avenir - heavy (overskrift str. 18/22 punkt) Avenir - heavy (mellemrubrik str. 16/15 punkt) ÆSTETIK & METODER: Designmanualen er udarbejdet i InDesign da programmet har en masse metoder, der kan lette arbejdsgangen når man skal lave en opsætning af flere sider. Følgende værktøjer fra InDesign er blevet benyttet undervejs i arbejdsprocessen (OBS. der vil ikke forekomme uddybelse af alle benyttede værktøjer i denne portfolio): Dokumentopsætning med spalter og marginforhold Indstilling/Benyttelse af grundlinjenet Indstilling af ordbog + korrekte anførselsestegn DOKUMENTOPSÆTNING MED SPALTER OG MARGINFORHOLD: FORM OG KOMPOSTION: Da designmanualen udelukkende er til intern brug er der ikke lavet nogen specifikke krav til kompositionen - dog skal designmanualen være let at have med rundt og den skal følge Meefred Designs retningslinjer for design af marketingsmateriale. Formatet på designmanualen er 300x210 mm - og det er lavet i tværformat da det ofte anses for at være en anelse mere eksklusivt. Ydermere skal designmanualen ikke være alt for teksttung og indeholde en del grafik og ved at holde det i tværformat er det muligt at lave designet mere flydende - frem for at sætte elementer ovenpå hinanden. FONTVALG: Meefred Design anvender udelukkende én font til alt deres tryk/print produktion - det var derfor oplagt at benytte denne font da For at holde styr på de forskellige størrelser og anvendelser er der lavet afsnitsformater til ovenstående udgaver for at skabe et bedre overblik over fonte samt lette arbejdsgangen: Der er benyttet en del forskellige udgaver af brødtekst - eksempelvis med punkttegn, uden afstand før/efter m.v. derfor er der oprettet en mappestruktur - dette er for at undgå forvirring ved opsætning. Det samme er der udarbejdet til de primære/ sekundære fonte, prævis af samme årsag som mappen til brødteksten. Mastersider Afsnitsformater (se side 28) Paginering Implementering af tekst + indholdsfortegnelse (word) Tabeller Forankret objekter Objektformater Figursats Effekter Tabulatorer 32 33

18 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL INDSTILLING/BENYTTELSE AF GRUNDLINJENET: MASTERSIDER: På en del af siderne skal der indsættes grafik frem for tekst - derfor er der udarbejdet en B-Master til grafik så paginering m.v. ikke kommer med på disse sider: IMPLEMENTERING AF TEKST + INDHOLDSFORTEGNELSE (WORD): Teksten til designmanualen er skrevet ind i word og skal derfor implementeres ind i InDesign dokumentet. Man kan vælge at få formateringen fra word med - men i denne opgave er dette valgt fra da designmanualen ikke er så teksttung og består af korte afsnit. Dog er indholdsfortegnelsen kommet med da afsnittene står i korrekt rækkefølge og derved blot skal formateres frem for oprettes på ny: TABELLER: På side 23 og 25 i designmanualen er der benyttet tabeller for at kontrollere teksten under boksene med farver. Der indsat ekstra kolonner som ikke benyttes til andet end at sikre at felterne er lige så store som farveboksene. Det er også med til at skabe en god luft omkring både tekst og bokse. De er designet således at man umiddelbart ikke kan se at det er en tabel, da alt grafik/pyt er fjernet derfra. Ydermere er teksten centreret - disse rettelser er foretaget i celleindstillinger. INDSTILLING AF ORDBOG + KORREKTE ANFØRSELSESTEGN: PAGINERING: Pagineringen er meget enkelt opsat og er udarbejdet på dokumentetets A-Master (tekst). Bemærk at der er lavet et tekstfelt så brugeren altid kan se hvor i designmanualen han/hun befinder sig. Den låses op på hver side ved at klikke CMD+SHIT (mac) eller CRTL+SHIFT (windows): 34 35

19 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL OBJEKTFORMATER/FORANKRET OBJEKTER/FIGURSATS: På side 23 og 24 er der benyttet et objektformat til farveboksene - i denne er der både indlagt figursats og lavet en forankret objekt regel. Dette er lavet for at sikre at boksene har den samme afstand og lægger pænt på linje med hinanden: EFFEKTER: På side 30 og 31 er der anvendt en skyggeffekt på de to forskellige mock ups - dette er for at skabe lidt mere dynamik og bevægelse til disse da de ellers vil gå meget i et med papiret: MANUALEN: Meefred Design MANUAL TABULATORER: Der er anvendt tabulering til indholdsfortegnelsen for at styre tallenes afstand samt justering. INDHOLDSFORTEGNELSE MEEFRED FARVER OM MEEFRED...7 FARVER / PRINT...22 LOGO FARVER / PRIMÆRE & SEKUNDÆRE / PRINT...23 LOGO / GENERELT...10 FARVER / WEB...24 LOGO / GENERELT / LOGOTYPE...11 FARVER / PRIMÆRE & SEKUNDÆRE / WEB...25 LOGO / GENERELT / RESPEKTAFSTAND...12 BRUG AF LOGO LOGO / GENERELT / LOGOSTØRRELSER...13 BRUG AF LOGO / POSTER: TYPOGRAFI BRUG AF LOGO / VISITKORT:...30 TYPOGRAFI / PRINT:...16 BRUG AF LOGO / ADRESSELABEL:...31 TYPOGRAFI / PRIMÆR & SEKUNDÆR / PRINT...17 BRUG AF LOGO / T-SHIRT: TYPOGRAFI / WEB...18 BRUG AF LOGO / POLO:...34 TYPOGRAFI / PRIMÆR & SEKUNDÆR / WEB

20 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL MEEFRED LOGO OM MEEFRED 7 10 GENERELT / LOGO GENERELT / LOGO / LOGOTYPE 11 OM MEEFRED : Meefred Design er et grafisk design bureau med ekspertise i fremstilling af tryksager samt visuel identitet herunder skabelse af ny identitet eller udvikling på eksisterende identitet. Ydermere er Meefred Design en webshop, der sælger print/tryk produkter til boligen samt print/ broderi på tekstil materialer. Det kan være plakater, lamper, folie, t-shirts m.v. LOGO / GENERELT: Logoet skal favne bredt da målgruppen både kan være erhvervskunder såvel som privatkunder. Udgangspunktet til logoet er derfor, at det skal være knivskarpt, skille sig ud af mængden og have stor brandværdi. For at skabe ovenstående bør logoet være illustrationspræget, da det skal bruges til at vække den visuelle del af hjernen hos forbrugerne/kunder og på den måde skabe en genkendelighed og på længere sig et brand for Meefred Design. Idéen har altid været at den primære del af logoet skal bestå af M et her skal man dog have in mente at større koncerner også drager brug af selvsamme bogstav og derfor passe på at man ikke kommer i klemme. Her tænkes eksempelvis på McDonalds der er derfor blevet foretaget en grundig research, for at sikre at logoet ikke er sammenligneligt med andre virksomheder. Da logoet skal anvendes til produkter og derved sidde på forholdsvis små etiketter, har det været vigtigt, at holde det forholdsvis kvadratisk. Det skyldes, at et bredt eller højt logo vil ende med at blive så småt, at det vil blive ulæseligt i små størrelser og det stemmer ikke overens med at det skal fremstå knivskarpt. Ydermere skal logoet eksempelvis også sidde på plakater og her det også godt at det ikke tager for meget plads i enten bredde eller højde, da det ikke er det primære men blot skal bruges som signatur. En anden detalje i forhold til designet er, at logoet kun skal bestå af én farve og en/ et bagvedliggende farve/billede derfor skal kunne træde igennem dele af logoet dette er for at give logoet et unikt præg og skabe noget fleksibilitet på de medier det nu en gang skal fremtræde på. Meefred Design logo - almindelig: Meefred Design logo - negativ: LOGO / GENERELT / LOGOTYPE: Som nævnt på forrige side var det vigtigt at logoet var illustrationspræget dog er det vigtigt at få slået fast at Meefred Designs logo er en logotype og ikke kan bruges som logomark. Det er derfor vigtigt at Design ALTID er en del af logoet på længere sigt kan man dog overveje om man kan benytte logoet udelukkende med M et i nogle tilfælde. Dette vil dog kræve en længere undersøgelse, som kræver at Meefred Design har opbygget sig en fornuftig kundekreds. Potentiel logomark: 38 39

21 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL 12 GENERELT / LOGO / RESPEKTAFSTAND GENERELT / LOGO / LOGOSTØRRELSER TYPOGRAFI / PRINT TYPOGRAFI / PRIMÆR & SEKUNDÆR / PRINT 17 LOGO / GENERELT / RESPEKTAFSTAND: Meefred Designs logo er ikke designet til at gå helt til kant og rent visuelt vil det ikke se godt ud. Der skal derfor benyttes en respektafstand fra kanter og elementer til logoet. Afstanden er ikke fastlagt men der skal benyttes samme afstand hele vejen rundt om logoet, her skal der tages udgangspunkt i logoets yderste punkter (toppen af M et og yderst på stregen): Angiver hvor på logoet der skal tages højde for afstanden mellem designformat og logo. LOGO / GENERELT / LOGOSTØRRELSER: 100% 75% 50% 25% 10% TYPOGRAFI / PRINT: Meefred Designs logo er bygget op af to fonte. Den ene font er udelukkende benyttet til at skabe det store M og hedder Silver Forte Grunge Grunge den er meget illustrationspræget og er bearbejdet samt vektoriseret via Illustrator. Fonten ser dog således ud: Silver Forte Grunge Den anden font benyttes til teksten MEEFRED samt og hedder Avenir dette er en klassisk Sans Serif skrifttype og den fås i mange udgaver. Til Meefred Designs logo er der anvendt Avenir, Medium. TYPOGRAFI / PRIMÆR & SEKUNDÆR / PRINT: PRIMÆR FONT AVENIR: Avenir Light AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå Avenir Medium SEKUNDÆR FONT AVENIR NEXT: Avenir Next Ultra Light AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå Avenir Next Regular Angiver designformatet. Avenir fås ydermere i tre udgaver: Avenir Avenir Next Avenir Condensed AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå Alle tre udgaver kan benyttes til tryksager. På næste side ses hvilke der er primære og sekundære fonte til print udgaven Avenir Condensed er valgt fra, da den bliver for smal og derved ikke hænger godt sammen med Meefred Designs visuelle designprofil som er mere kvadratisk: Avenir Heavy AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå Avenir Heavy AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå 18 TYPOGRAFI / WEB TYPOGRAFI / PRIMÆR & SEKUNDÆR / WEB 19 TYPOGRAFI TYPOGRAFI WEB: Fonten Avenir fås også til web den fås i to kategorier til web og igen i forskellige udgaver. Meefred Design vil gerne fastholde samme typografiske samt visuelle identitet på print såvel som web og fonten er derfor indkøbt og Avenir danner derfor rod til alt typografi for virksomheden. Men da fonten ikke er gratis er der kun indkøbt én af fontene hvilket naturligvis er den samme som primære font til print nemlig Avenir. Grundet det økonomiske perspektiv til en forholdsvis nystartet virksomhed er der valgt en gratis font fra Adobe CC pakken nemlig Lato fonten. Den fås også i mange udgaver og minder lidt om Avenir. Forskellen er dog at mærke på de to fonte da Lato ikke er helt ligeså skarp i kanterne som Avenir så den sekundære font skal udelukkende benyttes i nødstilfælde. TYPOGRAFI / PRIMÆR & SEKUNDÆR / WEB: PRIMÆR FONT AVENIR: Avenir 35 Light AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå Avenir 55 Roman AaBbCcDdEeFfGgHhIiJjKkLlMm NnOoPpQqRrSsTtUuVv WwXxYyÆæØøÅå Avenir 85 Heavy SEKUNDÆR FONT LATO: Lato 300 Light AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå Lato 500 Medium AaBbCcDdEeFfGgHhIiJjKk LiMmNnOoPpQqRrSsTtUu VvWwXxYyZzÆæØøÅå Lato 700 Bold AaBbCcDdEeFfGgHhIiJjKkL- AaBbCcDdEeFfGgHhIiJjKk lmm NnOoPpQqRrSsTtUuVv LiMmNnOoPpQqRrSsTtUu WwXxYyÆæØøÅå VvWwXxYyZzÆæØøÅå 40 41

22 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL 24 FARVER / WEB FARVER / PRIMÆR & SEKUNDÆR / WEB 25 FARVER / WEB: Til web går meget af det samme igen som ved print. Meefred Design har udvalgt farver i de forskellige farvespektrer man som regel støder på inde for den digitale verden det er igen vigtigt at disse farvekoder overholdes og at der ikke blot laves farvekonverteringer på computeren! FARVER / PRIMÆRE & SEKUNDÆRE / WEB: PRIMÆRE FARVER: RGB / RGB (WEBSIKKER) / HTML: SEKUNDÆRE FARVER: RGB / RGB (WEBSIKKER) / HTML: FARVER De forskellige farvespektrer der er tale om er følgende: RGB RGB (websikker) HTML Farvevalget til de primære farver er meget standard og skal benyttes i de fleste tilfælde grunden hertil er at logoet i sig selv skaber liv da det bagvedliggende vil træde igennem og derfor skabe noget fleksibilitet til logoet. Dog er der også en række sekundære farver som er udvalgt og disse kan benyttes til at pifte standard sort/hvid marketingmateriale op med. Farverne er dog alle dæmpet da det skal stemme overens med Meefred Designs minimalistiske stil. Det skal naturligvis nævnes at farverne må benyttes til logo, fonte og marketingmateriale. 0,0,0 255,255, FFFFFF # #FFFFFF 255,204, ,247, ,153,0 FFCCCC FCF7CD CC9900 #FFCCCC #FCF7CD #CC ,204,204 29,54,97 204,204,204 99CCCC 1D3661 CCCCCC #99CCCC #1D3661 #CCCCCC 22 FARVER / PRINT FARVER / PRIMÆR & SEKUNDÆR / PRINT 23 FARVER / PRINT: Meefred Design har udvalgt farver i de forskellige farvespektrer man kan støde på inde for trykbranchen det er vigtigt at disse farvekoder overholdes og at der ikke blot laves farvekonverteringer på computeren! De forskellige farvespektrer der er tale om er følgende: CMYK PANTONE RAL Farvevalget til de primære farver er meget standard og skal benyttes i de fleste tilfælde grunden hertil er at logoet i sig selv skaber liv da det bagvedliggende vil træde igennem og derfor skabe noget fleksibilitet til logoet. Dog er der også en række sekundære farver som er udvalgt og disse kan benyttes til at pifte standard sort/hvid marketingmateriale op med. Farverne er dog alle dæmpet da det skal stemme overens med Meefred Designs minimalistiske stil. Det skal naturligvis nævnes at farverne må benyttes til logo, fonte og marketingmateriale. FARVER / PRIMÆRE & SEKUNDÆRE / PRINT: PRIMÆRE FARVER: CMYK / PANTONE / RAL: 0,0,0,100 0,0,0,0 60,40,40,100 Black C Cool Gray 1C Black C SEKUNDÆRE FARVER: CMYK / PANTONE / RAL: 0,28,14,0 3,0,27,0 18,38, 100, C , 4, 22, 0 100, 83, 35, 21 60,40,40, C BRUG AF LOGO 42 43

23 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL 28 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL 29 BRUG AF LOGO / POSTER 32 BRUG AF LOGO / POSTER: 30 BRUG AF LOGO / T-SHIRTS BRUG AF LOGO / T-SHIRTS 33 BRUG AF LOGO / T-SHIRT: BRUG AF LOGO / VISITKORT BRUG AF LOGO / ADRESSELABEL BRUG AF LOGO / VISITKORT: BRUG AF LOGO / ADRESSELABEL: BRUG AF LOGO / POLO BRUG AF LOGO / POLO: MEETA CECILIE FREDBERG indehaver & grafiker ADRESSE: Skejbygårdsvej 19K, st. lej Risskov TELEFON: MAIL: meeta@meefred-design.dk HJEMMESIDE: meefred-design.dk 44 AFSENDER: MEEFRED SKEJBYGÅRDSVEJ 19K, ST. LEJ RISSKOV 45

24 TYPOGRAFI & OMBRYDNING: MEEFRED - MANUAL KVALITETSVURDERING: Designmanualen er blevet rigtig god og fremstår meget professionelt. Ydermere overholder overholder den Meefred Designs designprofil og er informativ. Der er benyttet forskellige værktøjer som har gavnet arbejdsprocessen og der er en god blanding af teori og grafik - hvilket skaber gode kontraster samt dynamik til designmanualen. 46

25