Jeg håber du finder portfolioen interessant og inspirerende. Thomas Fredborg Nielsen

MEDIEGRAFIKER PORTFOLIO 2017

Tak, fordi du har valgt at læse min grafiske portfolio i forbindelse med min uddannelse som mediegrafiker. Portfolioen indeholder mine processer igennem de 4 kernefagligheder, Grafisk Design, Typografi & Ombrydning, Billedbehandling og Grafisk Workflow. Jeg håber du finder portfolioen interessant og inspirerende. Thomas Fredborg Nielsen

THOMASFREDBORG MEDIEGRAFIKER PORTFOLIO 2017 Layoutet og forfattet af: Thomas Fredborg Nielsen Udgivet af: Lynge Olsen Group A/S 12/2017 GRAFISK DESIGN TYPOGRAFI & OMBRYDNING BILLED BEHANDLING GRAFISK WORKFLOW 05 24 33 44

Transport med omtanke GRAFISK DESIGN 4

GRAFISK DESIGN Lellinge Container & Kran A/S OPGAVE Redesign af logo, visuel identitet og website for Lellinge Container & Kran A/S OMFANG Redesign logo Branding Website PROGRAMMER Adobe Illustrator Adobe Photoshop Quark Xpress Brackets Se vedlagte bilag Grafisk-Design/Produkter/... GRAFISK DESIGN 5

Jeg vil på de efterfølgende sider præsentere mit grafiske design for transport virksomheden LCK. Virksomheden ønskede en makeover på deres grafiske udtryk overfor deres kunder. Jeg har derfor udarbejdet en komplet visuel guide for deres nye grafiske udtryk. Skulle der være nogen spørgsmål vil jeg mere end gerne svare på dem. GRAFISK DESIGN 6

BRIEF VIRKSOMHEDSBESKRIVELSE: Lellinge Container & Kran A/S L.C.K. er et transportfirma, der tilbyder alsidige transportløsninger. I forskellige kategorier yder de kørsel af alt fra daglige renovationsopgaver til mere avanceret kran- og specialtransport. MÅLGRUPPE: Det er afgørende at kende sin målgruppe, for at kunne præcisere sin markedsføring. Hvem skal jeg fange? Hvordan tænker kunderne? Hvad afgør om de handler hos mig? Dette er blot et par af de spørgsmål, som kan besvares, når ens målgruppe er præciceret korrekt. PRÆCISERET MÅLGRUPPE: L.C.K s målgruppe ligger i den industrielle branche, hvor de har mange storkunder, som de har handelsaftaler med. Industrien er opdelt i mange forskellige brancher inden for: Producerende industrivirk somheder og Industrielle håndværks- og servicevirksomheder. Man kan kun handle hos L.C.K., hvis man er momsregistreret. Det vil sige, at du skal have en virksomhed eller arbejde for en. GRAFISK DESIGN 7

BRAINSTORM _VÆRDIER Der brainstormes på virksomhedens værdier. Hvilke værdier kendetegner LCK og hvordan får jeg disse frem i forhold til det grafiske udtryk? GRAFISK DESIGN 8

MOODBOARD _INSPIRATION Der laves et moodboard som skaber rammerne om den stemning der ønskes i det grafiske udtryk igennem hele projektet. GRAFISK DESIGN 9

SKITSER _PROCES 1/3 Jeg laver så mange skitser på logoet som jeg kan indenfor en kort periode, jo flere jeg har, jo flere mere inspiration har jeg til videre forarbejdelse. GRAFISK DESIGN 10

SKITSER _PROCES 2/3 Jeg udvælger nu 2 logoer fra forrige proces som jeg arbejder videre med i Illustrator. Logoet tager form og jeg har nu valgt hvilken vej jeg vil gå. GRAFISK DESIGN 11

SKITSER _PROCES 3/3 Processen afsluttes ved at rentegne det udvalgte logo fra kundens side. Logoet afbalanceres og bliver optisk justeret i forhold til grafiske udtryk. GRAFISK DESIGN 12

BOMÆRKE _FORME I LCK s bomærke er der en række geometriske forme som underbygger virksomhedens profil. Her i form af det kran-lignende gitter. GRAFISK DESIGN 13

FARVER & TYPOGRAFI _DESIGNELEMENTER CMYK 0 100 86 0 CMYK 40 40 40 100 Museo 100 Museo 300 Museo 500 Museo 700 Museo 900 Museo 100 italic Museo 300 italic Museo 500 italic Museo 700 italic Museo 900 italic Farvevalget holder sig til LCK s nuværende farveskema, hvorimod LCK ønskede en mere moderne og elegant typografi til deres designelementer GRAFISK DESIGN 14

LCK LOGO _FÆRDIGGJORT 8,25 38 8,25 8,25 8,25 8,25 8,25 85 8,25 Med en margin på L ets grundstreg placeres LCK centralt i den røde boks, og en lignende understreg som ses i Cirkel K s logo, efter ønske fra kunden. GRAFISK DESIGN 15

BREVLINIE _IMPLEMENTERING Lellinge Container & Kran A/S Industrivej 7, 4600 Køge Telefon: +45 5666 2411 Fax: +45 5663 8401 E-mail: info@lck.dk CVR-nr.: 50168115 HEADLINE GOES HERE... 29. MARTS 2017 Plane perspicax fiducias conubium santet apparatus bellis. Gulosus ossifragi imputat zothecas. Ossifragi satis frugaliter insectat syrtes. Lascivius apparatus bellis iocari saetosus suis, ut apparatus bellis agnascor zothecas. Concubine plane spinosus insectat utilitas rures. Augustus verecunde amputat bellus saburre. Verecundus quadrupei vocificat pessimus fragilis catelli, semper cathedras amputat perspicax saburre, utcunque saetosus agricolae adquireret rures. Ossifragi agnascor oratori. Bellus ossifragi lucide amputat Medusa, quod Pompeii circumgrediet incredibiliter gulosus concubine, semper oratori vix libere senesceret incredibiliter bellus concubine. Apparatus bellis fermentet saburre, etiam gulosus chirographi infeliciter miscere perspicax apparatus bellis. Optimus saetosus umbraculi suffragarit plane adfabilis oratori, quod zothecas optimus lucide insectat cathedras. www.lck.dk Torben Pedersen ADM. DIREKTØR Telefon: +45 5666 2411 Mobil: +45 5666 2222 E-mail: torben@lck.dk Transport med omtanke Concubine verecunde adquireret fiducias. Agricolae deciperet syrtes, quamquam saburre adquireret gulosus cathedras, etiam Augustus praemuniet matrimonii, quamquam pretosius cathedras lucide circumgrediet Aquae Sulis. Chirographi neglegenter imputat apparatus bellis. Augustus miscere suis, ut satis perspicax saburre insectat gulosus umbraculi, quamquam saburre plane comiter praemuniet Aquae Sulis. Matrimonii suffragarit perspicax quadrupei. Pessimus quinquennalis agri Lellinge Container & Kras A/S Industrivej 7, 4600 Køge Tel. +45 5666 2411 E-mail: info@lck.dk www.lck.dk TORBEN PEDERSEN ADM. DIREKTØR Transport med omtanke www.lck.dk Transport med omtanke Der laves grundregler for placering af logo på diverse trykte medier, for at bevare ensartethed igennem hele LCK s branding. GRAFISK DESIGN 16

WEBDESIGN _WIREFRAMING Jeg laver wireframes for hjemmesiden i Photoshop, dette gør de næste steps i programmeringen lettere, da jeg nu ved hvor jeg skal hen. GRAFISK DESIGN 17

WEBDESIGN _HEAD-TAG <!DOCTYPE html> <html lang= da > <head> <title>lellinge Container & Kran A/S</title> <meta http-equiv= Content-Type content= text/html; charset=utf-8 > <meta name= viewport content= width=device-width, initial-scale=1, shrink-to-fit=no > <meta name= copyright content= Lynge Olsen Group A/S har alle rettigheder til denne side > <meta name= description content= Kort sælgende resume af indholdet på siden > <meta name= keywords content= Indtast, keywords, tags, der, definerer, indholdet, på, siden > <meta name= robots content= index, follow > <meta name= author content= Thomas Fredborg Nielsen > <!-- GOOGLE FONTS --> <link href= https://fonts.googleapis.com/css?family=nunito+sans rel= stylesheet > <!-- ICONIC FONT --> <link href= https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap. css rel= stylesheet > <!-- BOOTSTRAP CSS --> <link rel= stylesheet href= https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min. css integrity= sha384-/y6pd6fv/vv2hjna6t+vslu6fwyxjcftcephbnj0lyafsxtsjbbfadjzaleqsn6m crossorigin= anonymous > <!-- STYLESHEETS --> <link rel= stylesheet type= text/css href= css/styles.css > <!-- JAVASCRIPTS --> <script src= js/googlemap.js ></script> </head> Her indsættes meta-tags, css og javascripts. Det er vigtigt at opsætte head-tag med sidst nævnte css som styrende. Browseren læser oppefra og ned. GRAFISK DESIGN 18

WEBDESIGN _HEADER-TAG <!-- BODY BUILD --> <body> svg = vektorgrafik (scalable vector graphic) <!-- HEADER BUILD --> <header> <div class= container > <div class= navbar-background > <nav class= navbar navbar-expand-lg navbar-dark > <a class= navbar-brand href= index.html ><img src= img/lck%20logo.svg height= 60 ></a> <button class= navbar-toggler type= button data-toggle= collapse data-target= #navbar- SupportedContent aria-controls= navbarsupportedcontent aria-expanded= false aria-label= Toggle navigation > <span class= navbar-toggler-icon ></span> </button> <div class= collapse navbar-collapse id= navbarsupportedcontent > <ul class= navbar-nav ml-auto > <li class= nav-item active > <a class= nav-link href= index.html >Forside <span class= sr-only >(current)</span></a> </li> <li class= nav-item > <a class= nav-link disabled href= # >Produkter</a> </li> <li class= nav-item > <a class= nav-link disabled href= # >Kontakt</a> </li> </ul> </div> </nav> </div> </div> </header><!-- /HEADER BUILD END --> Header bygges op omkring bootstrap collapsable navbar, dvs. at når hjemmesiden viewport er i mobile device så kollapser navigation til burger-ikon. GRAFISK DESIGN 19

WEBDESIGN _BOOTSTRAP 4.0 GRID <DIV CLASS= CONTAINER ></DIV> container klassen er responsiv (defineret i %) og fungerer som en wrapper (html) I tilfælde af et full-width website vælges <div class= container-fluid ></div> col-4 col-7 col-1 <DIV CLASS= COL-XL-7 COL-12 ></DIV> (col)umn klassen definerer antallet af kolonner i containeren. I Bootstrap kan der tilføjes op til 12 pr. række (<div class= row ></div>) Bootstrap kommer automatisk med 30px padding i hver column. Dette slettes i css en:.no-gutters {margin-right: 0; margin-left: 0; >.col, > [class*= col- ] { padding-right: 0; padding-left: 0; } Hjemmesiden er opbygget i bootstrap grid-system, ved at benytte et grid system undgår man at definere ens css i % for at gøre den responsiv. GRAFISK DESIGN 20

WEBDESIGN _BOOTSTRAP 4.0 GRID <DIV CLASS= D-NONE ></DIV> (d)isplay klassen i bootstrap bestemmer hvordan et element skal forholde sig til et tidligere defineret element. I Bootstrap har man muligheden for at fortælle elementet hvordan det skal opfører sig i bestemte breakpoints. Eksempel: <div class= col-4 d-none d-xl-block ></div> kolonne størrelse ikke synlig synlig ved xl <P CLASS= TEXT-CENTER ></P> (p)aragraphs kan du på samme måde som med display klassen definere i forhold til bestemte breakpoints. Eksempel: <div class= textbox2 > <h2 class= text-xl-left text-center ></h2> </div> venstrejusteret ved xl centreret på alle andre Hver enkel div class får defineret bootstrap regler for deres udseende i forskellige viewporte. Samme system benyttes ved skriftklasser. GRAFISK DESIGN 21

WEBDESIGN _DISPLAY OPTIMIZED <!-- CAROUSEL BUILD --> <div class= container > <div class= row no-gutters > <div class= col-12 > <div id= carousel-1 class= carousel slide data-ride= carousel > <div class= carousel-inner > <div class= carousel-item active > <img class= d-block w-100 src= img/hero-image@1x.png srcset= img/hero-image@2x. png alt= First slide > </div> <div class= carousel-item > <img class= d-block w-100 src= img/hero-image@1x.png srcset= img/hero-image@2x. png alt= Second slide > </div> <div class= carousel-item > <img class= d-block w-100 src= img/hero-image@1x.png srcset= img/hero-image@2x. png alt= Third slide > </div> </div> </div> </div> </div> </div> <!-- /CAROUSEL BUILD END --> Alle billeder er retina-display optimeret, det vil sige at billederne skal vises i 2x størrelse ved skærmopløsning på 144ppi (Retina) Retina desktop Normal desktop GRAFISK DESIGN 22

Fly north. way north! travel north

TYPOGRAFI & OMBRYDNING Suluk magasin (Air Greenland) OPGAVE Redesign og layout af Suluk magasin for Air Greenland OMFANG Layout Workflow PROGRAMMER Adobe Illustrator Adobe Photoshop Adobe Indesign Se vedlagte bilag Typografi/Produkter/... TYPOGRAFI & OMBRYDNING 24

Jeg vil på de efterfølgende sider beskrive min proces i forhold til kernefagligheden typografi og ombrydning. Jeg valgte at redesigne Air Greenlands onplane-magasin (Suluk). Kunden ønskede et mere moderne og robust look til deres magasin, noget som signalere sikkerhed samt pålidelighed. Skulle der være nogen spørgsmål vil jeg mere end gerne svare på dem. TYPOGRAFI & OMBRYDNING 25

DOKUMENT _SPECIFIKATIONER Format: 210x280 mm Farver: CMYK 300PPI ICC Profil: ISOcoated_v2_eci Bleed: 3mm TYPOGRAFI & OMBRYDNING 26

GRID _SPECIFIKATIONER Grundlinjenet: 13 pt svarer til linieafstanden i brødteksten, der holdes register. Pagina indsættes på master sider. TYPOGRAFI & OMBRYDNING 27

TYPOGRAFI _SKRIFTVALG Overlængde Versal højde Basislinje Underlængde RUBRIKKER: Apkxx- højde Alitestrum as qui tota volupta aut quia acipsan ditatus repudam eos im nus conse dunt est evelendia voluptur aut volorrum qui ditate veliquid explis que nimpe que pratus, corest aut eosam simi, quam volorum repra duciunde rent. Evel ium si tem am imi, nusa evero is aut quatate corepro dolorpo ressume nisquam faces aborrovitae de nit et quiae si assit et alique dolentur, ium quamentius mi, arcidi renes aut voleserum nonsequo dolor soluptatur soles et rest fuga. Solor alibus, quodite mquisqui audam faci beruption cumquos natem hictius, ommodit modis es quunte eos excearum accaborit ad exeri quatur accuptati omnis esecae eatiae doluptur? Samu Accabo. Et libusda ndignis eost doluptibera delectemos minum quam dest lam nonseria volupta nimolor santem quuntem et alisi occulpa ped min restio conseque nonet omnimus quas id eos solupta comnis dolorpor mi, comniendi reius. Hentem vereper spiendu ciaeressit laturere, ilibus autam, soloribus cuptatem doluptur? Ipsam non pratis dolupta ist molupitatum labo. Et fuga. Ribus sam que magnam, cuptam doluptus dolupta sumet amus. Ugitis dolorep erovitia provitenisti illecere litaturit et aut dolliat offic tent re Zilla Slab er en såkaldt slab-serif skrifttype også kaldet Egyptian. Slab-serif er geometrisk og robust i sit udtryk og skaber i forhold til Suluk en sikkerhed og tryghed for læseren. BRØDTEKST: Non Solus betyder Ikke alene på latin. Den er en mere moderne slab-serif font, den er ikke så robust i sit udtryk men giver mere luft og ro. Zilla Slab (http://www.fonts.google.com) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 1234567890!#%&? Non Solus (http://www.k-type.com) ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå 1234567890!#%&? Valget faldt på ovenstående fonte, både for den fortælling de hver i sær fortæller samt det grafiske udtryk de skaber. TYPOGRAFI & OMBRYDNING 28

STYLES _ B RØ DT E K S T dette er en lille i test detteierienililleiiitest dette er en lille i test Er slået til fordi magasinet bliver lavet i 3 sprog Teksten fra kunden indsættes før jeg begynder at optisk justere selve b. Jeg benytter både: Justification, Hyphenation & Composition TYPOGRAFI & OMBRYDNING 29

STYLES _ ME L L E M RU B R I K MELLEMRUBRIK UDREGNING: v/ 1 linje: 13 x 2 = 26-13 = 13 = 10/3 pt (optisk justeret) v/ 2 linje: 13 x 3 = 39-26 = 13 = 10/3 pt Udregning af mellemrubrik er blot en guideline, og jeg har derfor optisk justeret dem i forhold til hver enkel artikel. TYPOGRAFI & OMBRYDNING 30

WORKFLOW _OPTIMERING MASTER SIDER: Magasinet indeholder flere forskellige typer sider, f.eks. Forside, Indholdsfortegnelse, Artikler, Nyheder etc. Der laves en master side til hver type. PARAGRAPH STYLES: På samme måde som master-siderne bliver paragraph-styles også delt op i de forskellige typer. Der tilføjes ligeledes styles for hhv. Grønlandsk (GL), Dansk (DK) og Engelsk (UK), da magasinet indeholder alle tre sprog. INDHOLDSFORTEGNELSE: For at adskille de tre indholdsfortegnelser bliver der ligeledes lavet 3 T.O.C styles for hhv. Grønlandsk (GL), Dansk (DK) og Engelsk (UK) Der benyttes f.eks: Overskrift GL (Artikler) Overskrift GL (Nyheder) Jeg opsætter nogle generelle regler for diverse opsætninger såsom master, paragraph styles og indholdsfortegnelse TYPOGRAFI & OMBRYDNING 31

BILLED BEHANDLING Callaway Golf OPGAVE Redigering og manipulering af billeder til trykt kommunikation for Callaway Golf OMFANG Billedredigering Layout PROGRAMMER Adobe Illustrator Adobe Photoshop QuarkXpress Se vedlagte bilag Billedbehandling/Produkter/... BILLEDBEHANDLING 33

Jeg vil på de efterfølgende sider beskrive min proces i forhold til kernefagligheden Billedbehandling. Jeg har valgt at lave en fiktiv opgave for en tidligere arbejdsgiver. Målet var at redigere og manipulere med flere billeder for til sidst at s ammensætte disse til en plakat. Skulle der være nogen spørgsmål vil jeg mere end gerne svare på dem. BILLEDBEHANDLING 34

IMPORT _ C A M E R A R AW Jeg tweaker billedet en smule i RAW, så det fremstår mere eksponeret. Jeg kigger også på Lens Correction. BILLEDBEHANDLING 35

MASKE _FRITLÆGNING Jeg benytter følgende værktøjer: Quick Selection & Brush, jeg giver markeringen en lille feather for at undgå en hård kant. BILLEDBEHANDLING 36

DESATURATE + LEVELS _FARVEÆNDRING Jeg benytter følgende værktøjer: Lasso tool, Modify, Hue/Saturation, Levels, Multiply og Screen. BILLEDBEHANDLING 37

SKINTONE _HUDFARVE ÆNDRING Jeg benytter følgende værktøjer: Lasso tool, Modify, Hue/Saturation, Curves, for at opnå den ønskede hudtone til det færdige produkt. BILLEDBEHANDLING 38

SELECTIVE COLOR _TILFØJELSE AF PRODUKT Jeg benytter følgende værktøjer: Hue/Saturation, Selective Color og Vibrance, for at få den ønskede effekt. BILLEDBEHANDLING 39

HIGH PASS _SKARPHED High pass filteret tilføjer lidt ekstra skarphed til billedet, dette giver mig mulighed for at styre mængden af skarphed. BILLEDBEHANDLING 40

CMYK _TRYKKLAR Indstillinger af farveprofilen samt ændring fra RGB til CMYK sker som det sidste i billedbehandlingen. BILLEDBEHANDLING 41

PLAKAT _IMPLEMENTERING Billedet bliver tilføjet plakaten BILLEDBEHANDLING 42

n o k ee S r u o y t e G S BEFORE YOUR FRIEND

GRAFISK WORKFLOW Seek Contacts OPGAVE Udvikling af App, der samler alle ens sociale medie informationer på et sted. OMFANG Visuel Identitet Trykt Kommunikation App-Wireframing Website-Wireframing Video tutorials PROGRAMMER Adobe Illustrator Adobe Photoshop QuarkXpress Adobe After Effects Se vedlagte bilag Workflow/Produkter/... GRAFISK WORKFLOW 44

Jeg vil på de efterfølgende sider beskrive min proces i forhold til kernefagligheden Grafisk Workflow. Jeg har valgt at vise min proces for App en Seek Contacts. Kunden kom med en spændende idé hvorfra jeg i samarbejde med kunden har skabt en applikation som forener alle ens sociale medier på et sted. Du vil her blive guidet igennem hvilke grafiske processer jeg har benyttet for start til slut-produkt. Skulle der være nogen spørgsmål vil jeg mere end gerne svare på dem. GRAFISK WORKFLOW 45

PROCES _BESKRIVELSE KUNDEMØDE RESEARCH VISUEL IDENTITET WIREFRAMING BRUGERTEST TILPASNING PRODUKTIONSPLAN: Designmanual App struktur App wireframing Website wireframing Video produktion Trykt kommunikation Remarketing Følgende steps er fuldt i forhold til selve produktionen af App en. GRAFISK WORKFLOW 46

RESEARCH _ INS PI R AT I O N Da Seek er en one-of-kind app, bliver researchen brugt på andre sociale medie-apps, hvad kan vi lære af disse apps? GRAFISK WORKFLOW 47

COPYRIGHT 2017 SEEK A/S - All rights reserved SEEK CONTACTS Tangmosevej 83 4600 Køge SEEK CONTACTS Tangmosevej 83 4600 Køge SEEK CONTACTS Tangmosevej 83 4600 Køge Tel.: +45 1234 56778 Fax.: +45 1234 56778 CVR. nr.: 1234 5678 info@seekcontacts.com www.seekcontacts.com VISUEL IDENTITET _BRANDING grafisk design manual SEEK Gul CMYK: 0-30-85-0 RGB: 235-185-65 HEX: #EBB941 SEEK Blå CMYK: 100-80-40-40 RGB: 35-50-80 HEX: #233250 SEEK Hvid CMYK: 0-0-0-0 RGB: 255-255-255 HEX: #FFFFFF BREVPAPIR 9 SEEK I FARVER CMYK (4-farve tryk) anvendes når der indgår FORORD 4-farve tryk i tryksager i form af foto s mv. og dermed alt øvrigt grafisk materialer. SEEK Gråtone CMYK: 40-40-40-100 Målet er at benytte designet og den visuelle identitet til at markere de værdier og de historier, som SEEK gerne vil fortælle om sig selv og sine produkter. RGB-farver anvendes i elektroniske medier som for eksempel til website, PowerPoint og til Word. RGB: 0-0-0 HEX: #000000 8 INDHOLD: Grafisk signatur...3 Logo varianter...4 Logo placerings guidelines...5 Typografi til trykte materialer...6 Typografi til online materialer...7 SEEK i farver...8 Brevpapir...9 Konvolutter...10 Visitkort...11 LOGO PLACERINGS GUIDELINES Guideline til placering af logo på eksempelvis brochurer, cases, produkt - løsblade og annoncer. Afstanden fra papirets kant, svarer til 2 gange K-bogstavets højde og bredde. 2 5 Anvendes ved flerfarvet tryk på lys baggrund. Farver: SEEK Blå + SEEK Gul Anvendes ved flerfarvet tryk på mørk baggrund. Farver: Hvid + SEEK Gul GRAFISK SIGNATUR SEEK s logo er på én gang enestående og anderledes. Nærværende, klassisk og fremsynet i sit udtryk. Anvendes ved sort/hvid tryk på lys baggrund. Farver: Sort Anvendes ved sort/hvid tryk på mørk baggrund. Farver: Hvid K et er SEEK s særkende, og fungerer både som en henvisning og en action i forhold til SEEK s funktioner. Den blås farves samspil med den gule farve giver logoet en stærk fremtonende profil. KONVOLUTTER 10 LOGO VARIANTER SEEK s logo må anvendes i 4 varianter. 3 4 Den godkendte identitet skaber rammerne om selve projektet. Identiteten var en absolut nødvendighed før det videre arbejde. GRAFISK WORKFLOW 48

APP STRUKTUR _OPBYGNING user choise user action button action name <facebook> profile name email <facebook> country <facebook> phone no. <facebook> homepage searchable #tags Facebook login Login Sign up name profile name email country phone no. homepage searchable #tags add some information Profile settings Profile settings Add information Add social media type in keyword: name workplace school etc. Add profile ID Click next to continue facebook ID twitter ID snapchat ID youtube ID pinterest ID skype ID instagram ID Search using keyword Search using FR FRONTPAGE: Menu: Followers Profile Help Invite friends Settings Notifications Click search List of profiles facebook twitter snapchat youtube pinterest skype etc... See their profile on Click on your friend Take photo Profile Follow friend Det vigtigt i forhold til den videre proces at kende sit sitemap. I dette tilfælde selve funktionerne samt opbygningen af app en GRAFISK WORKFLOW 49

APP WIREFRAMING _BUILD 1.0 Jeg laver den grafiske opsætning i photoshop, som jeg senere efter godkendelse fra kunden sender videre til vores programmør. GRAFISK WORKFLOW 50

WEB WIREFRAMING _ B U I L D 1.0 Efter samme prncip som app ens wireframe sendes hjemmesiden ligeledes til programmøren. Der er en udviklingstid på ca. 6 uger. GRAFISK WORKFLOW 51

BRUGERTEST _TESTFLIGHT HVAD ER SEEK? HVORDAN OPRETTER DU EN PROFIL? HVORDAN FINDER DU EN VEN? HVORDAN ÆNDRER DU INDSTILLINGER? HVEM FØLGER DIG? FEEDBACK Jeg opretter en testflight og inviterer en udvalgt målgruppe til at teste app en. Samtidig oprettes et spørgeskema som brugeren får tilsendt pr. mail GRAFISK WORKFLOW 52

VIDEO _HOW-TO 720p video format vælges i media encoder samt.mp4 som er et komprimeret video format. Små korte video-tutorials lavet i after-effect. De skal eksporteres til facebook/instagram format (720p) - de uploades via business manager. GRAFISK WORKFLOW 53

TRYKT KOMMUNIKATION _ P LA K AT Format: A2 Bleed: 3mm Farver: CMYK 300PPI ICC Profil: ISOCoated_v2_eci Papir: 170g Satin fotopapir G RA TI S SPECIFIKATIONER: your friends PDF PRESET: Trykkeriet har deres egen PDF preset. Indstiller Photoshop efter trykkeriets ICC Profil: VERDENS NYHED! bliv fundet med et søgeord eller et billede og giv adgang til dine informationer Seek_Plakat-A2.indd 1 07/09/17 11.51 Plakaten skal opsættes på skoler, arbejdspladser og institutioner, med henblik på at få folk til at downloade app en GRAFISK WORKFLOW 54

REMARKETING _FACEBOOK SPECIFIKATIONER: 828x312px 72ppi RGB SPECIFIKATIONER: 1200x630px 72ppi RGB Der oprettes en business-manager for Seek på facebook. Kunden kan administrere sin konto, få et bedre overblik af aktiviteter, opslag, annoncer etc. GRAFISK WORKFLOW 55

Creativity is not possession of some special talent It s about the willingness to play John Cleese