Opgavebeskrivelse. Opgaveløsningen

Transkript

1

2 Opgavebeskrivelse Opgaven er et redesign af en hjemmeside til Tistrup Festuge. Opgaven er en fritidsopgave, udarbejdet for udvalget bag Tistrup Festuge. Da man i de seneste år, har ændret en del på konceptet og strukturen bag festugen, har udvalget bag Tistrup Festuge ønsket et nyt løft til hjemmesiden, der afspejler, at det nu er nye tider. Opgaveløsningen 01 Jeg har haft personlig kontakt med udvalget bag Tistrup Festuge. Der har ytret deres behov i forhold til hjemmesiden. Endvidere har de ytret deres ønske om et mere moderne og smart udtryk, end den tidligere hjemmeside, men stadig appellerer til en bred målgruppe, og have høj brugervenlighed. Jeg har været alene om opgaveløsningen både hvad angår design og kodning. Grafisk Produktionsforståelse 2 Svendeprøve portfolio Gitte Barslund Frederichsen

3 Tidslinje Møde med udvalget, modtaget ønsker og krav til sitet Tegne wireframe forslag Wireframe godkendt af kunden Kodet i HTML og CSS Festudvalget læst korrektur på siden Start Slut Brainstorm Wireframe forslag sendt til korrektur hos kunden Finde fonte og illustrationer Uploadet på en testside Sitet uploadet, via Zilla Grafisk Produktionsforståelse 3 Svendeprøve portfolio Gitte Barslund Frederichsen

4 Brainstorm 02 Let Overskuelig Asymetriske former Fest Familie Moderne Hygge Brugervenlig Luftig Tistrup festuge Website Sponsorer By Struktur Sommer Socialt samvær Farver Grafisk Produktionsforståelse 4 Svendeprøve portfolio Gitte Barslund Frederichsen

5 Moodboard Grafisk Produktionsforståelse 5 Svendeprøve portfolio Gitte Barslund Frederichsen

6 Wireframe Ud fra kundens ønsker og krav, og min brainstorm, har jeg fundet frem til en række nøgleord. Ud fra disse nøgleord har jeg tegnet et wireframe forslag. Wireframe forslaget er præsenteret for kunden. Kunden var i hovedtræk meget begejstret for forslaget, og havde derfor kun små justeringer. Wireframet blev efterfølgende rettet til, og kunden godkendte forslaget Nøgleord Moderne og smart Høj brugervenlighed Bomærket Stort fokus på sponsorerne Billeder og kontakt oplysninger på udvalget Program Formål med ugen Arbejdsplaner Galleri Grafisk Produktionsforståelse 6 Svendeprøve portfolio Gitte Barslund Frederichsen

7 Layout 05 Sitet er opbygget i et 12 spaltet, 960 pixels grid system. Men er også»responsive«, så sitet tilpasser sig mindre enheder som smartphones og lignende. Grafisk Produktionsforståelse 7 Svendeprøve portfolio Gitte Barslund Frederichsen

8 Kvalitetskontrol 07 Sitet er kodet i Adobe Dreamweaver. Sitet har jeg kodet i HTML5, som er den nyeste standard indenfor HTML (HyperText Markup Language) og dertil et CSS3 stylesheet. Der udover har jeg implementeret flere JavaScript funktioner via jquery. Fonte 06 Jeg har til websitet anvendte google fonts, da det giver mig en række fordele. Fontene fungerer på alle typer computere og devices. Derudover kræver fontene ingen ekstra grafik, der gør hjemmesiden tung og langsom. Til mine rubrikker har jeg været nødsaget til at embedded en font, da den font jeg ønskede ikke var tilgængelig på Google fonts. Grafisk Produktionsforståelse 8 Svendeprøve portfolio Gitte Barslund Frederichsen

9 Billeder Billedmaterialet på hjemmesiden er stillet tilrådighed af en lokal fritidsfotograf,som har copyright på billederne, og af festudvalget. 06 Billederne er justeret i Photoshop, downsamplet til den ønskede størrelse, med en opløsning på 72 ppi. Endvidere er billederne konverteret til Srgb, da Srgb er det største websikre farverum. Browserkompatibilitet 08 Sitet er undervejs i forløbet oploadet på en testside, for at kunne teste sitet i flere forskellige browsere, for at se om der opstod fejl. Derudover er sitet testet på forskellige devices, for at teste om det virker på alle enheder. Grafisk Produktionsforståelse 9 Svendeprøve portfolio Gitte Barslund Frederichsen

10 Søgemaskineoptimering For at optimere sitet i forhold til søgemaskiner, har jeg gjort brug af de nye HTML5 tags, som sesction, article, header, footer, nav og H tags (H1 osv.) Ydermere har jeg indsat en række keywords i mit meta tag, hvilket gør det nemmere for søgemaskiner at indexsere sitet. Grafisk Produktionsforståelse 10 Svendeprøve portfolio Gitte Barslund Frederichsen

11 Usability Sitet har en høj usability, det er nemt at navigere på siden. Topmenuen, er fikseret til toppen af skærmen, uanset hvor du står henne på siden, er det nemt at navigere rundt. Hvert emne er tydeligt opdelt, så man ikke er i tvivl om hvor du er på sitet. Grafisk Produktionsforståelse 11 Svendeprøve portfolio Gitte Barslund Frederichsen

12 Korrektur 09 Tekst indholdet på sitet er udleveret til mig af Tistrup Festuge, og festugen har efterfølgende selv læst korrektur på sitet, inden websitet er blevet sendt i luften. Udgivelse 10 Websitetet er uploadet via programmet FileZilla. FileZilla er et gratis, open source, cross-platform FTP-software. Der bruges til at uploade filer til en FTP-server. Grafisk Produktionsforståelse 12 Svendeprøve portfolio Gitte Barslund Frederichsen

13 Procesbeskrivelse Min wireframes var til stor nytte, da sitet skulle kodes. Jeg var dog nødt til at lave et par små ændringer for at få det til at lykkedes. Jeg havde dog nogen problemer med at få kalenderen til at virke efter hensigten, og besluttede derfor at lave den i et site for sig selv, og indsætte den via en iframe. Det udløste dog lidt navigationsploblemer på tablets og telefoner. Kvalitetsvurdering Jeg er rimelig godt tilfreds med resultatet designmæssigt. Jeg synes, det er lykkedes at få et mere moderne udtryk frem, og stadig bibeholde den høje usability på sitet. Jeg har efterfølgende fået kendskab til Bootstrap systemet, og de muligheder det tilbyder. Jeg synes derfor nu, at det havde været mere hensigtsmæssigt at have kodet sitet i det system. Jeg tænker sitet ville komme til at fungere bedre på forskellige devices, og mange af de problemstillinger jeg har haft ang. det responsive design, ville have været lettere at løse i det system. Grafisk Produktionsforståelse 13 Svendeprøve portfolio Gitte Barslund Frederichsen