1. No category

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
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.
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.
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
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.
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.
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
Tilsidst tester jeg sitet på mine forskellige enheder, for at se om det
responsive design fungerer som det skal - og det gjorde det.
HTML validering er kørt på alle sider for at sikre, at der ikke
er fejl i min HTML.
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