WORK FLOW
FØR VI GÅR I GANG Kunden hér er Health and Rehab, som er en af Danmarks ældste messer. Messen bliver afholdt én gang hvert tredje år og bliver næste gang afholdt i Bella Centeret København. Health and Rehab hører under modervirksomheden Dansk Rehab Gruppe, og som virksomhed arbejder de på at holde gang i arrangementet/messen som har til formål at promovere de bedste og nyeste redskaber til fysisk hjælp af handicappede borgere. Health and Rehab er skandinaviens største sundhedsmesse.
OPGAVEBESKRIVELSE Opaven gik ud på at få designet den officielle hjemmeside for Health and Rehab Scandinavia som bliver besøgt af folkeslag og virksomheder fra hele verden. Jeg skulle deltage i store dele af fremstillingen, og da jeg mener at opgaven har givet mig et godt indblik i arbejdsprocessen fra første kontakt til leverede produkt, mente jeg at den var relevant for kernekompetencen Grafisk Workflow”. Jeg deltog i briefingen til voreskundebesøg, og fik derefter udleveret materiale (billeder, illustrationer osv.) fra tidligere hjemmeside.
HVAD VAR MIT BIDRAG TIL OPGAVEN? Efter deltagelse i briefing med virksomhed, skulle jeg udarbejde et layout til hjemmesidens front-end.
VALG AF PROGRAM Alt opsætningen foregik vha. håndtegnede skitser og senere blev det hele opsat i Photoshop. Ikonerne har jeg lavet i Illustrator.
SPECIFIKATIONER • • • •
Fremgangsmåde: Mind Node, Skitser, Photoshop, Illustrator, Joomla Content-bredde: 960px Responsive scale: 960px > 720px > 320px Omfang: Forside, Nyhedsbreve, Standardside
FARVER Farvevalget er baseret på en for-defineret farvekollektion fra Adobe Kuler baseret på den grønne farve i Health and Rehabs logo.
AKTØRER AD’er, Grafiker (mig selv), Programmør, Kunde
2 BRUHN GRAFISK HÅNDVÆRK APS
Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
3 BRUHN GRAFISK HÅNDVÆRK APS
ARBEJDS PROCESS
Briefing
Andet udkast
Første udkast
KUNDEKONTAKT Teknisk samtale
AD’er
Grafiker (mig)
4 BRUHN GRAFISK HÅNDVÆRK APS
Kunde
Programmør
Evaluering i samarbejde med AD’er
Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
Teknisk bearbejdelse af hjemmeside foregår gennem vores programmør.
Udarbejdelse af nyhedsbrevog standardside
FÆRDIG PRODUKT Samtale med AD’er samt godkendelse af forside
Evaluering og godkendelse i samarbejde med AD’er
Kunden instrueres i brug af CMS-systemet Joomla
5 BRUHN GRAFISK HÅNDVÆRK APS
BRIEFING MED KUNDEN Før opgaven blev vores, tog vi en snak omkring kundens ønsker til hjemmesiden. Under samtalen blev der taget notater i form af et mindmap. Se bilag. Vi fik sammenlignet deres konkurrenters hjemmesider med hinanden, og fundet fordele og ulemperne ved deres layout og designs. Når vi nu har med en rehabiliteringsmesse at gøre, er der overvejende sandsynlighed for at de udfordrede skulle ind og besøge hjemmesiden. Det var derfor et kardinalpunkt at læsbarhed og overskuelighed skulle komme i første række. Kunden ville have et åbent, overskueligt layout, der skulle ikke være for mange ting som bimler og bamler, hjemmesiden skulle være tilgængeligt på flere sprog og der skulle være mulighed for at forstørre og formindske teksten på skærmen med nogle få klik. Derudover, vil kunden (som ikke har en inhouse-grafiker til at sidde) have mulighed for at selv at redigere og bearbejde hjemmesiden og Facebook siden. Vi tog nu herfra med en liste om følgende krav: • Udviklingshæmmede skal kunne bruge hjemmesiden uden besvær • Der skal være et åbent layout der er til at overskue • Hjemmesiden skal være tilgængelig på flere sprog • Der skal være flere indgange: Brugere, Fagpersoner, Indkøbere og Udstillere
6 BRUHN GRAFISK HÅNDVÆRK APS
Nicklas Ben Rasmussen Portfolio // Grafisk Workflow Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
GRAFIK OG BILLEDER Det er vigtigt med et blikfang til en hjemmeside der ønsker at fange brugerens information, og vi har valgt at vægte en slider som det primære blikfang. Derudover er der også brugt ikoner samt den stærke kontrast mellem magenta og grøn.
BILLEDER Billederne som blev brugt til hjemmesiden, er udvalgt fra billedbasen Fotolia. Kunden har ønsket at finde billeder selv. Der er blevet kigget igennem både iStock Phto, Colorbox og Fotolia.
IKONER Ikonerne er udarbejdet i Illustrator og/eller nogle af disse efter inspiration af ikoner fundet på lageret der findes på hjemmesiden www.iconarchive.com.
7 BRUHN GRAFISK HÅNDVÆRK APS
SE ORIGINALE I BILLAG
SKITSER OG MINDMAP
Som del af min arbejdsprocess, har jeg arbejdet med nogle skitser for at danne mig et overblik over hvordan at hjemmesiden ser ud. Derudover har jeg under briefingen lavet mig et overblik i form af et mindmap som ses ovenfor.
8 BRUHN GRAFISK HÅNDVÆRK APS
Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
INSPIRATIONSKILDER Da jeg satte mig ned for at skitsere hjemmesiden havde jeg fået en del inspiration flere forskellige steder på nettet. Jeg benytter også diverse Wordpress temaer som inspiration. I dette tilfælde, “Avada” som er et meget rent designet og hyper-populært tema udviklet af kode-holdet “Themefusion”. Hvis ikke jeg leder efter inspiration på diverse hjemmesider, holder jeg en pause derfra og skitserer mine tanker. Det er hér de gode idéer kommer fra. Derudover har jeg i kølvandet af informationerne om alt det indhold der skal være på, besluttet mig at lave en stor footer efter inspiration af kommoditetsselskabet Danske Commodities. Udover at undersøge layout-mæssig inspiration kiggede jeg også på hvad konkurrenterne havde i at byde på. Her har jeg undersøgt Carefestival og
THEME-FUSION.COM/AVADA/
HESEHUS.DK
DANSKECOMMODITIES.COM
SXC.HU
9 BRUHN GRAFISK HÅNDVÆRK APS
BRUN
LET BLÅ
SOMMERGRØN
LYS ROSA
#653332
#4066B0
#65cc33
#CC1F36
R 101
G 51
B 50
C 41%
M 78%
Y 68%
K 46%
R 101
G 102
B 204
C 81%
M 63%
Y 0%
FARVE VALG Farvevalget til vores fire kategorier og de gennemgående elementer på hjemmesiden blev fundet ved at udtrække den grønne farve fra logoet af, og indsætte den i en Adobe Kuler farve-kombination med en lignende grønlig farve.
10 BRUHN GRAFISK HÅNDVÆRK APS
K 0%
R 101
G 204
B 51
C 61%
M 0%
Y 100%
K 0%
R 101
G 0
B 51
C 13%
M 100%
Y 85%
K 4%
Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
LAG OG GRUPPERINGER I min opbygning af lag og grupper har jeg nøje overvejet næsten hvert eneste lag for overskuelighedens skyld, i tilfælde af at projektet skulle overtages af en anden end mig selv. Jeg sørger for at jeg selv kan finde hoved og hale i de mange lag, og jeg er stor modstander af “Layer 25 copy 3 lag”-måden at Photoshoppe på, og jeg får ondt i maven når jeg spotter det i en portfølje
11 BRUHN GRAFISK HÅNDVÆRK APS
FLOWCHART
For at danne os et overblik over websitets funktionalitet anvendte vi programmet MindNode til at lave et flowchart. Billedet ovenfor er importeret direkte fra programmet.
12 BRUHN GRAFISK HÅNDVÆRK APS
Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
NYHEDSBREV
STANDARDSIDE
MEDLEMSOVERSIGT
FØLGENDE SIDER En funktionel og flot hjemmeside er bygget op af mere end den flotte forside alene. Hvis du navigerer lidt rundt på hjemmesiden vil du se, at der er en solid mængde indhold. For at give vores programmør et overblik over hvordan at websitets forskellige sider skulle se ud, blev jeg bedt om at designe tre yderligere sider. • En medlemsoversigt (er ikke lancieret endnu) • En standardside • Et Nyhedsbrev
13 BRUHN GRAFISK HÅNDVÆRK APS
RESPONSIVE FRAMEWORK Under opbygningen af websitet bliver der tjekket efter om vores gridsystem passer på designet. Jeg kan derfor sikre mig at programmøren formår at gøre det hjemmesiden skalérbar og reponsiv i forhold til den enhed der besøger hjemmesiden
14 BRUHN GRAFISK HÅNDVÆRK APS
Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
GOOGLE PLUS
SOCIAL MEDIA Som en tillægsopgave til website-løsningen, blev jeg bedt om at oprette noget socialt media i form af en YouTube-side og en Google+ Profil.
15 BRUHN GRAFISK HÅNDVÆRK APS
AFSLUTNING OG VURDERING Opgaven hér er en jeg er meget stolt af, og den har givet mig et større indblik i arbejdsprocessen i det at designe et responsive website. Projektet for Health and Rehab er min første “store” hjemmeside, og jeg ser frem til at arbejde med mange flere i fremtiden. Det har været spændende at være med ude ved kunden og deltage i briefingen. Hvis jeg skulle lave noget om, ville jeg bede programmøren om at lave en Parralax-scroll på vores primære menu, så den følger med når man scroller ned på en lang side - ligesom Facebook gør når du scroller derinde. Derudover ville jeg have ændret måden de fire grupper bliver fremvist på forsiden - de skulle evt. have hver sin underside fremvist på en tydeligere måde.
16 BRUHN GRAFISK HÅNDVÆRK APS
Nicklas Ben Rasmussen Portfolio // Grafik og Billedbehandling
BILLAG OG SKITSER På de følgende sider har jeg inkluderet de billag som jeg ikke ville inkludere i selve opgaven, men som stadigvæk har relevance for projektet.
17 BRUHN GRAFISK HÅNDVÆRK APS