Grafisk Workflow. Website til European Blues Challenge

Transkript

1 Grafisk Workflow Website til European Blues Challenge

2 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 arrangementet. De havde brug for en simpel hjemmeside til at fungere som platform for praktisk information for festivalgæsterne, som kommer fra hele verden. Kunden havde få ønsker til designet, bl.a. integration 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.

3 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 Implementering i CMS GRAFISK WORKFLOW 44

4 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 egne 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 45

5 Inspirationssøgning og skitsering Jeg søger primært inspiration på nettet. Bl.a. på disse sider: Inden jeg går i Photoshop for at designe skitserer jeg altid mine umiddelbare tanker til designet ned på papir. På den måde får jeg dannet mig et godt overblik over siderne og deres indhold. GRAFISK WORKFLOW 46

6 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 47

7 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 48

8 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 49

9 Designpræsentation Vi bruger Invision App til at præsentere 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 navigere 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: GRAFISK WORKFLOW 50

10 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 51

11 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 52

12 Responsiv opsætning Da sitet er i den billige ende, tager vi først stilling til den responsive del i opsætningen, for at spare tid. Jeg bruger frameworket Foundation, som har et 12-kolonne gridsystem. I min HTML bestemmer jeg hvor mange kolonner mit element skal fylde på hhv. small (mobil) medium (ipad) og large (screen). Medium 4 columns: Small 12 columns (fuld bredde) GRAFISK WORKFLOW 53

13 Responsiv opsætning Jeg koder Mobile First, hvilket vil sige at jeg koder det mobile look først, herefter går jeg over i mine Media Queries i min CSS, og tilpasser mine elementer alt efter, hvordan de skal se ud på de forskellige størrelser skærme. Gennemgående CSS for min top. Ændringer der vil ske i min CSS for.top i Medium. Bredde-værdier for mine Media Queries: Ændringer der vil ske i min CSS for.top i Large. GRAFISK WORKFLOW 54

14 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 55

15 Validering og browsertest HTML validering er kørt på alle sider for at sikre, at der ikke er fejl i min HTML. Til sidst 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 56

16 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. Hjemmesiden er gået online - dog kommer det meste indhold først på plads i løbet af efteråret. Se hjemmesiden her: GRAFISK WORKFLOW 57