Grafisk Workflow Website til European Blues Challenge
Opgaven: European Blues Challenge er en europæisk blues festival som skifter lokation hvert år. I 2017 kommer festivallen til Horsens, og vores kunde Blues Kartellet står for at arrangementet. De havde brug for en simpel hjemmeside til at fungerer som platform for praktisk information for festivalgæsterne, som kommer fra hele verden. Kunden havde få ønsker til designet, bl.a. intergration til Facebook og mulighed for afspilning af videoer. Derudover skulle siden være responsiv, så den let kan tilgåes fra alle enheder. Stilen måtte gerne ligge sig op af deres logo, og have en blues/festlig stemning over sig.
Processen Designpitch Inspirationssøgning Skitsering Opsætte web-præsentation Design i Photoshop Valg af farver og fonte Afsending af præsentation Godkendelse af kunde Kodning i Sublime Endelig godkendelse fra kunde Browsertests Implimentering i CMS GRAFISK WORKFLOW 41
Planlægning og pitch Estimeret tidsforbrug indsættes i min kalender, så jeg har overblik over opgaven. Opgaven er en katagori C - hvilket vil sige den er solgt til en lav pris, derfor skal tiden stemme overens hermed. Inden opgaven har min chef Kevin og jeg en design-pitch. Her gennemgår vi flowchartet for opgaven, og snakker om kundens ønsker og behov, samt vores egene idéer. Kunden har fået tilsendt en PDF med vigtig information og en tidsplan, så de ved hvornår der bliver taget - og hvem der tager - hånd om tingene. Vi bruger Trello til projektstyring, hvor mine kollegaer og jeg nemt kan holde styr på processen ved hjælp af opgavekort og checklister. GRAFISK WORKFLOW 42
Inspirationssøgning og skitsering Jeg søger primært inspiration på nettet. Bl.a. på disse sider: www.themeforest.net www.designspiration.net www.htmlinspiration.com www.behance.net. Inden jeg går i Photoshop for at designe skitser jeg altid mine umiddelbare tanker til designet ned på papir. På den måde får jeg dannet for at danne mig et godt overblik over siderne og deres indhold. GRAFISK WORKFLOW 43
Template og farvevalg I Ps arbejder jeg udfra en webdesign skabelon, som indeholder nogle ting, som er standard for vores websites. På den måde skal jeg ikke skal starte fra bunden, hver gang jeg laver et webdesign. Jeg bruger Adobe Kuler som inspiration til at finde farver der passer godt sammen. Da jeg havde fundet mine farver (2 af dem tog jeg fra det eksisterende logo) lagde jeg dem i nogle bokse i Ps-filen, så jeg altid har dem ved hånden til at bruge. GRAFISK WORKFLOW 44
Valg af typografi Jeg bruger Google Fonts til at søge efter passende fonte. Jeg laver en lille collection, hvor jeg kan samle de fonte jeg synes om. Herefter henter jeg fontene ned på min Mac vha. programmet Skyfonts. Efter at have prøvet lidt forskellige fonte af, tager jeg de valgte fonte og tilføjer min skabelon. På den måde jeg har godt overblik over udseende på brødtekst, overskrifter, citater osv. At have dette overblik hjælper også i opsætningen, da jeg nemt kan få indtastet specifikationerne i min CSS. Med fonte og farver på plads, kan jeg gå i gang med selve designet af hjemmesiden. GRAFISK WORKFLOW 45
Design af elementer Jeg laver som regel mange verisoner af det enkelte element, da jeg føler det er godt at prøve lidt forskelligt af. Det jeg ikke bruger gemmer jeg i skjulte lag, så jeg altid kan gå tilbage i processen, hvis der skulle blive brug for det. Styling af header Styling af fokus-bokse på forsiden Styling af footer Styling af undermenu GRAFISK WORKFLOW 46
Designpræsentation Vi bruger Invision App til at præsenterer designet for kunden. Når webdesignet er færdig, og godkendt af min chef, gemmer jeg billeder af hver enkelt side, og uploader det til et board på Invision. Ved at lave hotspots kan kunden navigerer rundt på siden, og få fornemmelsen af at klikke rundt på en rigtig hjemmeside, selvom det kun er billeder. Jeg tilføjer tour-points rundt omkring på sitet. De små blå punkter vil blinke når kunden åbner præsentationen. Så kan kunden klikke på punktet, og få uddybbende forklaring omkring designet. Se Invision-præsentationen her: https://invis.io/976z612za GRAFISK WORKFLOW 47
Færdiggørelse af designprocessen Da Kevin er kontaktperson på kunden er det ham der afsender præsentationen. Jeg har insat Invision-linket på kundekortet, samt tagget Kevin i en kommentar og sat et Skal afsendes mærke på, så jeg er sikker på det bliver gjort. Jeg har løbende opdateret min kalender, og endte med at bruge mindre tid end estimeret. Det passer dog meget fint, da jeg højst sansynligt kommer til at bruge mere tid på opsætningen, da det ikke er noget jeg gør så tit. Kunden kiggede forbi og havde kun meget få rettelser, som vi tager i opsætningen. Så opgaven var godkendt, og kunne wrappes, så den er klar til opsætning. GRAFISK WORKFLOW 48
Opsætning På GitHub har vi et standard-theme som vi bruger som udgangspunkt til at kode en hjemmeside. Jeg henter filerne ned fra Github, så jeg har dem helt opdateret. Jeg starter med at få stylet det basale i min CSS, som headings, links og knapper. Det er her min skabelon i Ps kommer mig til gode, da jeg hurtigt kan få overblikket over stylingen. Vi bruger Google Fonts til vores websites, da de er websikre og lette at bruge. Jeg vælger de skriftsnit fra fonten som jeg vil bruge, og på indikatoren kan jeg se hvor stor Page Load skriften har - i dette tilfælde ser det meget fornuftigt ud, så jeg tager det lille stykke kode fra Google Fonts og ligger i toppen af min CSS. Jeg koder header og footer først, da det skal være fast på alle sider - og det er rart at have en ramme at gå ud fra. Herefter koder jeg alt indholdet. GRAFISK WORKFLOW 49
Implimentering i bubbleweb CMS Kevin sørgede for at rykke den kode jeg havde skrevet over i vores CMS bubbleweb. Her ses hvordan kunden selv kan indsætte og redigere indholdet på hjemmesiden. GRAFISK WORKFLOW 50
Validering og browsertest HTML validering er kørt på alle sider for at sikre, at der ikke er fejl i min HTML. Tilsidst tester jeg sitet på mine forskellige enheder, for at se om det responsive design fungerer som det skal - og det gjorde det. Da vi bruger Mac s på kontoret er sitet testet med VirtualBox, som giver os mulighed for at teste sitet på Windowsstyresystem, og i de forskellige browsers. GRAFISK WORKFLOW 51
Kvalitetsvurdering: Jeg er selv meget tilfreds med resultatet og processen. Designprocessen kørte rigtig godt, og gik endda hurtigere end forventet. Opsætningen var lidt en udfordring, da det var længe siden jeg havde siddet med det - så jeg skulle lige genopfriske en masse ting. Derfor tog det lidt ekstra timer. Men det var god læring. Derudover var der mange andre opgaver, som pressede sig på ind i mellem opsætningen, så der var meget til og fra, som godt kunne være forstyrrende. Vores kunde var meget tilfreds med resultatet, og havde kun positive kommentarer da han kom forbi med feedback. Der er efter kodningen kommet små rettelser i designet, som jeg har rettet til i vores CMS. Da hjemmesiden ikke er online endnu, kan den ses i testmiljøet her: http://ebchorsens2017.bubblemedia.dk Siden går først online senere på året, når alt indholdet er på plads. GRAFISK WORKFLOW 52