Nanna portfolio 2015 komprimeret by Nanna V.

PORTFOLIO SVENDEPRØVE 2015 NANNA VAN DEN EEDE

01 02 03 04 G R AFIS K D ESIGN

T YP O G RAFI

GRAFIK

G R A F I S K P R ODU KT ION

O MB RYDN I N G

B I LLE D B E H A ND LI NG

WO R K F L OW

GRAFISK DESIGN

NY IDENTITET TIL EVERYDAY SUPER SERVICE ( E2S )

Opgaven gik ud på, at et rengøringsfirma skulle have designet en ny identitet. Der skulle udarbejdes et logo, design af visitkort og bestillingsblokke, samt design og kodning af website. Jeg har arbejdet selvstændigt med min del af projektet og jeg har løbende været i dialog med kunden.

MINE OPGAVER I PROJEKTET: Udarbejdelse af logo

PROGRAMMER: Illustrator

Design af visitkort

Design af bestillingsblokke

MÅLGRUPPE Everyday Super Service, også forkortet E2S, er et rengøringsfirma der vægter professionalisme og miljøvenlighed højt. Målgruppen er primært erhvervsdrivende, der ønsker at benytte et pålideligt firma til rengøring af deres kontorfaciliteter og en troværdig leverandør af miljøvenlige rengøringsmidler, sæbe m.v.

UDVIKLINGSPROCES Jeg udviklede først nogle håndtegnede skitser med bomærke-varianter. Kunden udvalgte nogle stykker, som jeg derefter tegnede op i illustrator og lagde farve på. Kunden udvalgte og godkendte dén udgave han bedst kunne lide. Logoet skulle både bruges på et nyt hjemmesidedesign, visitkort og bestillingsblokke, så jeg gik igang med designet til tryksagerne. Jeg skulle blot designe layout til visitkort og bestillingsblokke, så jeg sørgede kun for at designe ud fra de oplyste mål på de forskellige tryksager, inden det godkendte materiale blev sendt videre til næste led.

everyday superservice

GRAFISK DESIGN

LOGO Baseret på kundens ønske om runde former i logoet, valgte jeg at designet af logo skulle indeholde både et bomærke / illustration og et navnetræk. Kunden ville også gerne have implementeret et slogan i logoet. Navnetrækket og logoet skulle tilsammen signalere, at E2S er et professionelt firma med fokus på miljøvenlige produkter. For at lægge vægt på kundens service, fremhævede jeg Super Service med en bold af samme font, derved bliver den vigtige del af navnetrækket mere synlig i folks bevidsthed.

TYPOGRAFI Jeg har valgt at bruge en grotesk ( Open Sans ) font til logoet da kundens keywords bl.a. var: læseligt og moderne. Open Sans er designet i både normal, light og bold så jeg kunne anvende nogle variationer i designet uden at skifte font eller lægge stroke på.

Open Sans Bold

Open Sans Regular

Open Sans Light

abcdefg hijklmnopqr st u v wx y zæøå

ab c d e f ghi j k l m nop q r st uv wx y z æøå

ABCDEFGHI J KL M N OPQ R ST UVWXYZ Æ ØÅ

A B C DEF G H I J KL M N O PQ RS T U V W X YZ Æ Ø Å

ab cd e fg hi j k l m nop q r s t uv wx yzæ øå AB C D EF GHI JK L M NO P Q RS T UV W XYZÆ Ø Å

0123456789

FORMER Kunden ønskede runde former i logoet og kom med et andet logo, som jeg kunne tage udgangspunkt i. Ud fra denne og kundens ønsker lavede jeg først nogle skitser i hånden, som vist før. De runde former blev integreret i form af ( sæbe )bobler.

FARVER I samarbejde med kunden fandt vi frem til to gennemgående farver: miljø-grøn og mørkeblå. Farverne skulle være med til at symbolisere, at kunden driver et professionelt firma og anvender miljøvenlige rengøringsprodukter. Den grønne farve giver desuden den seriøse mørkeblå noget modspil og liv. Fordi logoet skulle bruges både til web og tryk satte jeg farvepaletten og farvekoder op med logo-filen, så næste led i udviklingen også har de rigtige farvekoder ved hånden.

#74AD40

CMYK: 70, 0, 99, 0

RGB: 116, 173, 64

#2C3756

CMYK: 88, 69, 24, 49

RGB: 44, 55, 86

GRAFISK DESIGN

DET FÆRDIGE DESIGN Logoet blev godkendt ret hurtigt og der skulle heldigvis ikke flere design-runder til, før kunden var tilfreds. Visitkort: Da kunden har to firmaer, ville han gerne have et kombi-kort med E2S på den ene side og Ny Sæbe på den anden. Jeg designede tre forslag til layout, som passede til designet på Ny Sæbe-siden og kunden udvalgte et uden yderligere rettelser. Bestillingssedler: Der blev igen designet tre forslag til layout, og kunden udvalgte og godkendte et design.

FORMATERNE Visitkortene er 85 x 55 mm, de skulle trykkes farve på begge sider, 350 g silk papir med såkaldt soft-touch kachering. De blev trykt hos Lasertryk og blev eksporteret med en CMYKprofil der hed ISO Coated v2. Bestillingsblokkene blev sendt videre fra mit bord; jeg ved kun at formatet er 10,5 x 14,7 cm og at filen blev eksporteret med CMYK-profil.

TYPOGRAFI & OMBRYDNING

DESIGN OG OMBRYDNING AF MAGASIN ( SKOLEOPGAVE )

Opgaven er fra en gruppeopgave på et typografi- og ombrydningshold, på Københavns Tekniske Skole. Vi skulle designe dele af et københavner-magasin og ombryde to-tre artikler hver.

PROGRAMMER: Indesign

BAGGRUND & MÅLGRUPPE Vi fik til opgave at designe udsnit af et opdigtet magasin, der skulle have noget med København at gøre. I grupper skulle vi udtænke omslag og ombryde 2-3 spreads hver. Formålet med bladet er at oplyse befolkningen i Danmark om hvad der sker i København. Magasinet udkommer 4 gange årligt, én gang i kvartalet. Det er gratis, og ville kunne findes i 7-eleven kiosker i og omkring Storkøbenhavn, samt større byer i resten af landet ( ved banegårdspladser ). Magasinet bliver også placeret ved kulturelle og offentlige steder, som bl.a. informationssteder, biblioteker og museer. Magasinet bliver financieret af annoncer, samt støtte fra investorer. Magasinet henvender sig til en bred målgruppe aldersmæssigt ( 25+ ), dog kan man alligevel godt differentiere mellem en primær og sekundær segmentering. Primær målgruppe karakteriseres ved at være københavnere, heriblandt børnefamilier, unge og desuden også den lidt ældre generation. Den sekundære målgruppe er pendlere og danske turister.

TYPOGRAFI & OMBRYDNING

FORMAT & PAPIR Det blev besluttet i gruppen at formatet skulle være 226 x 298 mm med en ryg på ca. 7 mm. Inde i bladet har vi valgt at fokusere på luft og rene linjer, derfor er margin i top 30 mm, i bund 29,6 mm, invendig margin 25 mm, og udvendig margin 20 mm. Omslaget er relativt tykt / hårdt i 200g uncoated genbrugspapir med logo i en partiel lakering. Disse valg er med til at fremhæve magasinet, og giver et mere eksklusivt udtryk i forhold til andre gratis magasiner. Tanken er også, at målgruppen har lyst til at tage magasinet med uden måske at have interesse i indholdet. Til de invendige sider har vi valgt 90 - 100g papir uden gloss.

GRID & TEMPLATE Vi valgte at lave dokumentet som en template, da der er mere end én layouter på et magasin. Der er 64 linjer i en spalte, vi vælger at have 6 linjer i hver “kasse”. Der er desuden 6 spalter. Vi ser hvor mange gange 6 går op i 64, og det gør den 10 gange, men der er 4 linjer tilovers. Da vi også skal have linjer imellem hver række, gik vi ned til 9 rækker med 8 linjer til mellemrum. Dette giver dog samlet set kun 62 linjer i alt, så vi “slettede” 2 linjer ved at hive bundlinjen op i tekstboksen og dette gav så mere margin i bunden.

Det blev lavet som et kvadratisk grid, som ses på billedet. Vi oprettede grid’et ved at indsætte marginværdier i Create Guides ( se billede ). Med en række-gutter på 6,1 mm passede det med 8 linjer mellemrum.

TYPOGRAFI & STYLES I templaten valgte vi at lægge nogle faste paragraph styles ind som hurtig hjælp til layout. Vi bestemte bl.a. brødtekst med og uden 1 geviert indryk, mellemrubrikker på både en og to linjer, unicial m.fl. Der blev indstillet dansk ordbog, korrekte orddelinger og ordmellemrum ( lille i-prøve ). Fonten var gennemgående den groteske Helvetica Neue LT Std, fordi der er mange forskellige skriftsnit som layouteren kan lege med. En antikva font såsom Times New Roman er behagelig at læse, fordi serifferne hjælper læseren med at holde læselinjen, men det blev bestemt i gruppen at anvende Helvetica Neue LT Std. Rubrik og underrubrik er valgfrie i forhold til font, str. og farve. Teksten er sat til at skulle holde x-højde.

Helvetica Neue LT Std Helvetica Neue LT Std Helvetica Neue LT Std Helvetica Neue LT Std Helvetica Neue LT Std Helvetica Neue LT Std

I templaten sørgede vi også for at indsætte pagina og levende kolumnetitler på mastersiden. Så kan man individuelt gå ind og lave både sidetal og titler om, men de vil have samme style på alle sider i magasinet.

TYPOGRAFI & OMBRYDNING

MELLEMRUBRIKKER & LILLE I Vi valgte at indstille paragraph styles til mellemrubrikker med én og to linjer, da det er mest brugt. For at regne 2 / 3 luft over og 1 / 3 luft ud, brugte vi følgende formel: Brødtekstens linjeafstand x 2 11 x 2 = 22 pkt. Minus mellemrubrikkens linjeafstand 22 - 12 = 10 pkt. De 10 pkt. Fordeles med 2 / 3 luft over og 1 / 3 luft under, men man må også vurdere optisk, hvad der er pænest. Det kan fx se bedre ud med 7 i toppen og 3 i bunden. Vi valgte at udligne versaler i mellemrubrik på en linje for at give mere luft og fordi vi syntes det var optisk pænere. Vi havde en spatiering på 20 mellem versalerne.

LIBARY I vores guideline til magasinet har vi bl.a. beskrevet, hvordan unicial og citater skal se ud, og de blev oprettet i et dertilhørende libary således layouteren kan hive dem ud. Ordmellemrum blev udregnet ved at lave lille-i-prøve på bl.a. brødteksten, og derfor vises det her at brødtekstens Justification blev sat til Minimum 55%, Desired 80% og Maximum 160%

LAYOUT / OMBRYDNING Jeg viser her nogle af de spreads jeg har ombrudt i magasinet. Jeg benyttede mig af at der var 6 kolonner til indhold, hvilket man også kan se på nogle af billederne. Til tekst benyttede jeg som minimum 2 kolonner, da det er mest læsevenligt, og det resulterede i 3 spalter tekst på de fleste sider. Jeg anvendte de grundlæggende paragraph styles, som var integreret i templaten, men lavede også nogle nye selv for at skabe mere liv på siderne og diversitet. ( Bemærk at pagina på nedenstående billeder står overfor hinanden, men der er sket en forskydning i screenshot )

Jeg har lavet faktabokse / fremhævet tekst for at gøre artiklerne mere spændende at læse. Her gjorde jeg brug af farvet baggrund i trekantede former eller character styles i farver til tekst.

GRAFIK & BILLEDBEHANDLING

REKLAME FOR COOKIE MONSTER & RED LIPSTICK REKLAME ( FALSK )

Opgaverne er opfundet, da jeg ikke har arbejdet ret meget med billedbehandling på elevpladsen. Reklamen for Cookie Monster indeholder retouchering, farvejustering, rentegning + diverse tilføjelser til logo ( vector ). Red Lipstick reklamen indholder fritlægning, sammenkopiering og farvejustering.

PROGRAMMER: Photoshop

Camera RAW

Illustrator

BAGGRUND Til den opdigtede reklame for Cookie Monster ville jeg bruge et billede af en lille dreng og et af en cookie. Min veninde stillede et par billeder af hendes søn til rådighed og jeg valgte et, hvor han rækker ud efter noget. Jeg fandt et billede af en cookie pakket ind i en sjov emballage og tog udgangspunkt i dette motiv - heraf navnet Cookie Monster. Havde det været en reel opgave, ville jeg have afholdt et møde med kunden for at få afklaret, hvilke ønsker der er til layout, hvilket budget der var til fx billeder, der skulle godkendes og købes billeder, og sendes forslag til layout til kunden.

MÅLGRUPPE Jeg ville skabe en moderne annonce / reklame for cookies, der skulle henvende sig til børn, men også appellere til voksne eftersom varen smager monster godt. Den er vist her som en dobbeltsidet reklame, fx til et magasin, men de to billeder kan også stå alene, da der er logo/produktnavn på. Jeg havde forestillet mig, at reklamen kunne figurere i magasiner såsom Vores Børn samt gratis mad-magasiner man kan tage i fx Netto. Der kunne også annonceres på reklamepladsen ved busstoppesteder og på togstationer.

GRAFIK & BILLEDBEHANDLING

OVERVEJELSER Billederne skulle bruges til tryk så jeg skulle bruge dem i høj opløsning fra starten. De skulle helst have en ppi på omkring 300, dog ikke lavere end 225 ppi. Jeg forblev i RGB farverummet, mens jeg arbejdede med filen, da billederne for det første allerede lå i RGB, og farverummet er større end CMYK. Jeg anvendte Adobe RGB 1998 i Camera RAW og Photoshop, dels fordi billedet af drengen allerede havde denne farveprofil og dels fordi det er en fordel, når jeg senere skal konvertere til CMYK.

ARBEJDSPROCES Jeg vurderede, at billedet var underbelyst og at drengen var for snavset i hovedet til selve reklamen, så jeg startede i Camera RAW. Her startede jeg med at retouchere drengens ansigt med værktøjet Spot Removal, og jeg indstillede brush-size og anvendte Heal.

Herefter lysnede jeg billedet ved at sætte Exposure til +1 og Whites til +30. Jeg valgte at skrue ned for Shadows og Blacks for at bevare noget dybde/contrast i billedet. Jeg brugte Clarity til yderligere retouchering; ved at skrue ned fik jeg en smoothness/glow i drengens ansigt, men sørgede for at bevare små, lyse hår i hans ansigt og konturerne ved fx øjne, næse, mund og hage. Jeg ville gerne have drengens ansigt i fokus, og samtidig give ham et uskyldigt look, så jeg skruede ned for Vibrance og Temperature til jeg fik den ønskede, kolde effekt.

For at gøre øjnene dybere og mere levende, brugte jeg Adjustment Brush, indstillede Tint, Temperature og Exposure, og malede på iris.

GRAFIK & BILLEDBEHANDLING

Efter farve- og lysjustering, kunne jeg se at der manglede retouchering enkelte steder, fx ved næseborene og munden. Det blev rettet med Spot Removal, og jeg fjernede nogle søvnrester i øjet med Clone Stamp Tool i Photoshop. Herefter var drengen klar til logoet.

ILLUSTRATOR Cookie emballagen åbnede jeg i Illustrator og ( ren )tegnede motivet med Pencil Tool. Jeg lagde billedet i ét lag med 50% opacitet, og tegnede motivet i et andet lag ovenpå. Da alt var tegnet op, brugte jeg Smooth Tool og den hvide pil til at rette vector-linjerne. Herefter tilføjede jeg en passende stroke og fill.

Under munden tegnede jeg et banner og jeg rettede kun spidserne lidt med den hvide pil, for at beholde den barnlige og usikre håndtegnede linje. Jeg skrev produktnavnet med fonten Moon Flower Bold, da jeg syntes at den passede godt til den håndtegnede stil.

Moon Flower Bold

Da jeg var tilfreds med designet af logoet markerede jeg hele motivet, outlinede font og stroke, og gemte som en pdf. Jeg sørger for at outline begge dele, da motivet skal kunne skaleres både op og ned uden at ødelægge proportionerne. Når der er anvendt stroke, kan denne fx blive for bred i en mindre udgave af motivet, hvis man ikke har outlinet.

GRAFIK & BILLEDBEHANDLING

OVERVEJELSER I Photoshop åbnede jeg logoet, markerede og kopierede det ind på billedet af drengen. Jeg skalerede det ned i størrelse, lagde en cirkel-shape under og gav cirklen en grå fra billedet samt en opacity på 50%. For at gøre logoet mere fremtrædent gav jeg den et Color Overlay med hvid farve.

Jeg skrev et slogan med den samme font som i logoet og placerede det nede ved hånden, der skal indikere at drengen er ved at tage en cookie mere. Der er tilføjet to linier under slogan’et for virkelig at tiltrække beskuerens opmærksomhed.

På billedet med emballagen skrev jeg slogan i banneret øverst, og placerede det tegnede logo i venstre hjørne. Jeg tilføjede produktnavnet samt en lille punchline lige under. Med Color Picker udvalgte jeg en blå til navnet og en pink til punchline så der er sammenhæng i annoncen og noget der fanger øjet.

På den færdige udgave af annoncen har jeg dog valgt at fjerne logoet i hjørnet, da den står sammen med billedet af drengen, og logoet er synligt på denne.

GRAFIK & BILLEDBEHANDLING

RED LIPSTICK REKLAME

BAGGRUND Til den opdigtede reklame for en Christian Dior læbestift fandt jeg et billede af Alicia Keys, et af en læbestift og et af en catwalk. Jeg ville lave en sammenkopiering af billederne og bl.a. bruge Refine Edge / Mask til fritlægning af kvinden. Der er også anvendt en smule farvejustering samt skygge.

MÅLGRUPPE Jeg ville skabe en klassisk annonce / reklame for et makeup produkt, der skulle henvende sig til både unge teenagepiger og den almene kvinde; uanset segmentet, skulle modtageren føle, at med denne flotte, markante læbestift, ville hun fremstå som en stærk, selvstændig og selvbevidst kvinde med en 'powerful' udstråling. Man ser ofte at reklamer for makeup- eller hårprodukter bliver vist med en kendt frontfigur, så jeg valgte billedet af Alicia Keys. Den kunne fx blive vist som en dobbeltsidet annonce i et dameblad eller som en reklame i fjernsynet ( så ville dette være et still ).

GRAFIK & BILLEDBEHANDLING

ARBEJDSPROCES Jeg startede med at åbne billedet af kvinden i Photoshop, tage en kopi af laget for min egen skyld og dernæst sætte den baggrund ind som kvinden skal sammenkopieres med. Baggrunden valgte jeg at spejlvende, da lyset i kvindens ansigt kommer fra højre og det ville passe med baggrundens spotlys. Jeg arbejdede i farverummet Adobe RGB 1998, da jeg senere skulle konvertere til CMYK.

REFINE EDGE / MASK Jeg ville fritlægge kvinden og startede med at markere så meget af hende som muligt med Quick Selection-tool. Jeg indstillede brush size og slog Auto Enhance til da det giver en mere jævn udvælgelse og højere kvalitet. Da jeg var tilfreds med min selection valgte jeg Refine Edge-knappen og i Refine menuen under View Mode valgte jeg On Layers så jeg kunne se min nye baggrund. Under Adjust Edge indstillede jeg herefter Smooth, Feather og Shift Edge til jeg var tilfreds med udseendet af hårspidserne. Jeg valgte at bruge Eraser Tool til at fjerne nogle af de mange grå huller i kvindes hår. Jeg indstillede størrelse og satte både hårdhed og Opacity meget ned så jeg ikke ødelagde for meget af håret.

Jeg satte læbestiften ind og skalerede lidt ned i størrelse, og placerede den nederst i venstre hjørne. Da der i forvejen var lidt skygge her, passede den godt til, men jeg lagde lidt ekstra skygge på området med en blød pensel og lav opacitet. Læbestiften gav jeg en blød Shadow for at få den til at blende mere ind i billedet.

Jeg valgte at skrue en smule op for kvindens glød med Hue / Saturation, da hun havde en lidt flad hudtone. Jeg satte en lille tekst på ved læbestiften, der skulle indikere, hvad det nye produkt hedder. Jeg havde i forvejen researchet lidt på nettet og fandt ud af at Dior har meget enkle og tekstfattige reklamer. Med Color Picker tog jeg den røde farve fra kvindens læber til teksten.

GRAFISK PRODUKTION & WORKFLOW

DESIGN OG KODNING AF WEBSITE TIL FRISØR CAMPOLINS

Opgaven gik ud på at designe og kode en frisør-hjemmeside i sort / hvid Art Deco stil. Dét firma, jeg har været elev hos, udvikler hjemmesider i Joomla som er et open-source system. Det er brugervenligt og giver kunden mulighed for selv at rette i sin hjemmeside efterfølgende. Joomla bygger på templates, men firmaets webudvikler har designet en in-house template, som er strippet for al styling, men er bygget op af standardmål, grids og moduler.

PROGRAMMER: Joomla CMS

BAGGRUND & MÅLGRUPPE Udvikling af website til en frisør, der havde fået ny identitet i forbindelse med ejerskifte. Målet var at designe en moderne og anderledes frisør-hjemmeside, der både skulle tiltrække de faste, ældre kunder men også få de unge ned til salonen. Kunden havde overtaget salonen efter sin mor, og han havde nogle helt klare ønsker til designstilen. Salonen var ved at blive renoveret og i forbindelse med åbningen af denne, skulle hjemmesiden være klar, så jeg havde ca. 14 dage fra udvikling til siden var godkendt og online.

TEKNISKE OVERVEJELSER Kunden ville på sigt gerne have en funktion på siden, hvor kunderne kunne bestille tid uden at skulle ringe ned til salonen. Med sin unge alder havde han selv erfaring med, at unge hellere vil trykke på en knap på hjemmesiden, end de vil ringe og bestille tid. Jeg skulle i designet tage højde for, at en sådan programmering skulle på senere hen. Kunden ville også gerne have en bestillingsfunktion på siden, uden at det skulle fungere som en webshop. Denne funktion skulle være synlig på designet ved åbning af salonen men ikke aktiv før senere. Et responsivt design er et tilkøb i dét firma, hvor jeg var elev, og denne kunde havde ikke valgt at købe det med i første omgang. For at designet fungerer pænt på diverse browsere og tablets / smartphones, skulle jeg tilpasse det i html-kode. Ønsker kunden alligevel responsivt, bliver siden sendt til programmering et andet sted i firmaet.

GRAFISK PRODUKTION & WORKFLOW

02 BRIEF FRA KUNDEN

03 BRUGERSCENARIER

05 GRAFISK BRUGERFLADE

06 GRID

08 KVALITETSTJEK

NAVIGATION

AFSEND DESIGNFORSLAG

KODNING AF DESIGNFORSLAG

01 BRIEF FRA KUNDEN Kunden leverede målgruppedefinitioner, tekst til det meste af indholdet på siden, logo, farver, en række ønsker til sidens funktionalitet, en liste med menupunkter samt ønsker til stil. Vi spørger altid kunden, om der er nogle andre hjemmesider de kan lide, så vi kan pejle os ind på, hvad de kan lide. I dette tilfælde var det en hel stilperiode jeg skulle tage udgangspunkt i; Art Deco, hipster, moderne og sort / hvid var nogle af nøgleordene.

02 BRUGERSCENARIER For at finde en struktur for sitet, der opfyldte målene, skulle jeg overveje en række brugerscenarier ud fra spørgsmål såsom: Hvem skal siden henvende sig til, hvad leder de efter til at starte med, hvad har de brug for at få at vide på forsiden, hvordan kommer de til den ønskede information uden for mange klik og omveje.

03 NAVIGATION Da der er forskellige brugere til siden, valgte jeg at opbygge designet med flere indgange, der underbyggede både faktuel og eksplorativ informationssøgning. Ud over menupunkterne i toppen, designede jeg derfor nogle alternative og iøjnefaldende indgange på forsiden, dels for brugervenlighedens skyld og dels for at gøre forsiden mere spændende og dynamisk idet indholdet / informationen kan skiftes løbende.

GRAFISK PRODUKTION & WORKFLOW

04 GRAFISK BRUGERFLADE Jeg overvejede hvilke grafiske midler, der kunne anvendes for at understøtte brugerens vej rundt på sitet. En væsentlig del af opgaven er, at brugeren ikke må lede forgæves, så jeg skulle finde enkle visuelle greb, der gjorde sidens funktioner genkendelige. Jeg har bl.a. anvendt logoets rektangulære og skæv-kantede form de steder på siden, hvor der er information til brugeren, fx menuen, telefon i toppen, de alternative indgange osv. Et roligt slideshow på forsiden giver mulighed for at promovere bestemte emner / nyheder. Da sidens farvepalette udelukkende er sort, hvid og grå, har det været en udfordring at gøre brugeren opmærksom på links eller mere information uden brug af signal-farve. Kunden ville gerne bruge logo-fonten på siden, ( Broadway ) men den understøttes ikke af alle browsere og i en brødtekst-størrelse er den ulæselig, så jeg har anvendt den til overskrifter og blikfang, og har ellers anvendt Google Fonten, Oswald, på resten af siden.

05 GRID Et standard grid er 960 pixel, men kunden ville gerne have en lidt bredere side, så dette design er bygget på et 1116 px grid. Firmaets egen webudvikler har designet den anvendte template så hvis jeg vil designe en bred side, skal jeg blot slå udkommenteringen på standard-reglen fra i stylesheet’et. Udfordringen ved at anvende det brede grid, er at det kræver ekstra kodning til tilpasning på fx tablets og smartphones.

06 KODNING AF DESIGNFORSLAG Firmaets webudvikler har som nævnt kodet en standard template, som vi anvender til alle nye website-design. Den er strippet for al styling så det er kun standard modulopbygning vi som designere starter med. Her skal vi så sætte logo, farver, tekst, billeder m.m. ind, men vi kan altid selv bestemme mål, placering, grid og mere, så vi får forskellige design ud af templaten. Jeg viser her et udsnit af html-koderne, så man kan se, hvordan designet er bygget op. Jeg kan ændre mange moduler og elementer på siden ved at benytte fx en <div class> eller en <div style> og oprette den ønskede style i det dertilhørende css stylesheet. Mange elementer på designet er kodet og implementeret på templaten af webudvikleren eller er plug-ins købt af firmaet. Men jeg kan stadig gå ind i koden og ændre udseendet af det pågældende element.

07 KVALITETSTJEK Det sidste jeg gør, inden forslaget bliver sendt til kunden, er at kvalitetssikre siden. Det gør jeg ved at gennemgå siden for evt. døde links, og sikre mig at alle funktioner og effekter virker. Jeg tjekker også siden i vores IE-tester program, som kan vise designet i ældre versioner af IE. Jeg sikrer mig at siden fungerer i andre browsere og at den står pænt på både tablet og smartphone.

GRAFISK PRODUKTION & WORKFLOW

08 AFSEND DESIGNFORSLAG Firmaet går meget op i, at designeren er i tæt dialog med kunden fra opstart til afslutning, så kunden har én fast kontaktperson om muligt. Derfor er det også mit ansvar at følge designet helt til dørs, så efter kvalitetstjek og gennemtjek fra en leder, skriver jeg en præsentation til kunden og vedhæfter et link til hjemmesiden. Det er en meget udførlig præsentationsmail og den er skræddersyet til hvert enkelt design så kunden får en professionel oplevelse.

Normalt vender kunden tilbage med rettelser til designforslaget inden for et par dage, ellers ringer jeg kunden op og gennemgår designet og eventuelle rettelser hertil. Oftest er det også mig, der lægger siden online, men hvis der er tilkøb / programmeringer, ryger opgaven videre til et andet led i firmaet.

For både tablets og smartphone forsøger vi at tilpasse designet så godt som muligt. Det er ikke elastisk på samme måde som en responsiv udgave, og vi kan ikke helgardere os, hvis kunden kun har bestilt en standardløsning - dvs. sikre at designet står pænt på ALLE former for tablets, smartphones og skærmstørrelser. Derfor anbefaler firmaets konsulenter, at kunden bestiller en responsiv udgave af designet også.

SVENDEPRØVE 2015 NANNA VAN DEN EEDE