GRA b DESIGN. HEARTS & MINDS
HVAD, HVORFOR OG HVORDAN? HVAD GÅR OPGAVEN UD PÅ? Opgaven gik ud på at, udfra udleveret trykt materiale skulle lave et fuldt og responsivt hjemmeside design. Sitet er lavet som en del af Folkeuniversitetet, og hedder Hearts & Minds. Hearts & Minds er en festival der skal holdes i Aarhus fra den: 25 og 26/9. Designet skulle afspejle det trykte materiale som et andet reklame bureau havde lavet til dem tidligere. Derudover skulle designet laves i tre faser. Fase 1 lang tid før, hvor alt indholdet der er planlagt var kommet på forsiden. Fase 2 kort tid før i denne fase kommer alt indholdet på sitet, man kan bestille pladser og alt indhold er med. Fase 3 er efter festivalen i denne fase bliver alt hvor man kan bestille billetter osv. fjernet, og der kommer måske nogle nye billeder fra festivalen på. HVAD ER DIT BIDRAG? Jeg har i denne opgave lavet hjemmeside layoutet, det vil sige at en anden har lavet det groveste skitse arbejde, hvor efter jeg har fået dem og skulle tegne dem rene, og derefter holde kontakten med personen der skulle kode sitet (dette site er ikke kodet af makeable.dk). Jeg har også kigget sitet efter for fejl op til flere gange under kodnings procesen. AFSENDER, MÅLGRUPPE OG BUDSKAB? AFSENDER: Afsenderen for hjemmesiden er Folkeuniversitetet. MÅLGRUPPE: Den primære mål gruppe er hele Danmark som på mere eller mindre alle andre hjemmesider. Den mere sekundere målgruppe er sjovt nok folk på 50 plus. De 50 plus årige i målgruppen er kulturelle, og har tid til at tage til forskellige arrangementer på de fleste tidspunkter af dagen. Målgruppen er frisk og klar på en hel masse nye og spændene udfordringer. BUDSKAB: Budskabet med sitet er at skulle informere folk om hvad der sker til Hearts & Minds festivallen. Langtid før, kort tid før, og efter. Festivalens budskab er imidlertidig at sætte fokus på livet hvor man både bruger sit hjerte, og sin hjerne. GRAFISKE VALG Hele designet forholder sig til en standart komposition som alle Makeable.dk s sites er bygget efter. Der er her tale om breden af alle de forskellige kasser og resten af indholdet. Det valgte jeg at gøre for at udvikleren kunne spar tid, og derved spare penge på at bygge sitet. Sitet er fyldt med forskellige kontraster, både i størrelserne på elementer, størrelsen på de forskellige fonte, og særligt farverne. Farverne er meget skrigende og kraftfulde, de er valgt på baggrund af det tilsendte materiale. Fonten i rubrikker og mellemrubrikker er valgt på baggrund af Hearts & Minds logoet. Fonten til brød teksten er valgt så den er let læselig på både desktop og mobil. Illustrationerne er lagt ind for at give sitet noget mere liv og få det til at se lidt skævt ud. Derudover er de også med fordi sitet skal minde om det trykte materiale. Jeg har brugt streger, i to forskellige tykkelser, de er inspireret af de to logoer der er på sitet, så den ene repræsentere Hearts & Minds (den tykke) og den anden repræsentere Folkeuniversitetet (den tynde). PROCESBESKRIVELSE Procesen i opgaven har været lidt særlig i denne opgave, da vi ikke har kodet sitet i huset. Jeg startede opgaven med at få tilsendt det trykte materiale som jeg skulle tage udgangspunkt i. Derefter tegnede jeg skitser af de elementer jeg viste skulle være med på sitet. Efter det gik jeg i Photoshop og begyndte at lave layoutet. Layoutet af forsiden drillede mig til at starte med, lige indtil jeg begyndte at spasse lidt ud (som min chef ville sige) derefter blev resultatet meget bedre. Da forside layoutet blev færdigt, sendte jeg det til kunden, og ventede på svar. Der kom nogle små rettelser tilbage, dem rettede jeg og derefter gik jeg videre med at layoute resten af sitet. Efter det blev hele layoutet sendt til godkendelse. Da jeg fik det godkendt af kunden blev layoutet sendt videre til udvikleren. Da udvikleren havde kodet det, skulle jeg teste det igennem i de forskellige browsers og sende ham de rettelser der var til det. KVALITETSVURDERING Jeg synes selv at resultatet er blevet udemærket. Men havde vi selv her hos makeable.dk kodet sitet havde det været endnu bedre. Der var mange fejl under kode procesen, som nemt kunne være undgået inhouse. Jeg er rigtig godt tilfreds med den måde jeg fik opgaven til at se ud på, på layout plan, og procesen i opgaven har også været rigtig god og lærerig. Efterfølgende er designet også blevet brugt på en ny side, også fra Folkeuniversitetet nemlig Nordiske Nætter. Denne del kan ses her: NORDISKENAETTER.FUAU.DK GRAFISK DESIGN KASPER MØLGAARD SIDE 3
LIDT INSPIRATION SIDE 4 KASPER MØLGAARD GRAFISK WORKFLOW
DET TRYKTE MATERIALE KASPER MØLGAARD GRAFISK WORKFLOW SIDE 5
SKITSER / WIREFRAMES På denne og næste side ses et par af de skitser/ wireframes der blev lavet til at starte med. Skitserne blev ikke tegnet i hånden, da der ikke er helt så meget at forklare til kunden med en mere realistisk tegning, som der ellers hurtigt kunne komme med en håndtegnet skitse. Plus at et wireframe er lige så nemt at tegne som en hånd skitse. SIDE 6 KASPER MØLGAARD GRAFISK WORKFLOW
WIREFRAMES ARE FUN KASPER MØLGAARD GRAFISK WORKFLOW SIDE 7
LAYOUT: FØRSTE UDKAST Her ses første udkast af opgaven som blev sendt til kunden. De layouts der ikke blev så gode er desværre gået tabt (tror jeg er kommet til at slette dem). Alle tre layouts her er næsten de samme, men med forskellige baggrunde i toppen. Det er for at vise at navigation og andre elementer sagtens kan fungere på alle baggrunde. Det var vigtigt at alle baggrunds farverne fungerede, fordi de også ville have fungeret som et slide show, hvor man kunne se forskellige festivals highlights. SIDE 8 KASPER MØLGAARD GRAFISK WORKFLOW
LAYOUT: ANDET UDKAST Som man kan se på billederne er der stor foreskel på hvad jeg lavede til at starte med, og til den måde det ser ud på her. Kunden havede mange rettelser. En af de store rettelser er slideren der er blevet lavet helt om. Derudover var en af kundens kommentare at vi ikke brugt det trykte materiale nok. Her ses også et par af de andre sider jeg lavede layout på. Alle siderne er lavet så de er nemme at rette til gennem Folkeuniversitetets back-end del af hjemmeside. KASPER MØLGAARD GRAFISK WORKFLOW SIDE 9
LAYOUT: TREDJE UDKAST Her ses så den sidste del af layoutet som blev godkendt. Det er desværre ikke helt sådan slut produktet (efter kodning) er kommet til at se ud. Slut produktet kan ses på HTTP://HEARTSANDMINDS.FUAU.DK/. SIDE 10 KASPER MØLGAARD GRAFISK WORKFLOW
KASPER MØLGAARD GRAFISK WORKFLOW SIDE 11
EN LILLE EKSTRA TING TIL MOBILEN Dette er en del af opgaven der kom til senere i procesen. Personen der skulle kode sitet, viste nemlig ikke helt hvordan han skulle få designet til at se ud på, på mobil enheder, så derfor lavede jeg et layout til den del også. SIDE 12 KASPER MØLGAARD GRAFISK WORKFLOW