GRAFISK WORKFLOW Hjemmeside - Husk hjelmen http://mediegrafiker-ats.dk/12gf32med8b/projekt/mette/
Produkt
Web sider Index side Underside - Cykelhjelmen - brug den rigtig. Underside - Husk nu cykelhjelmen. Underside - Husk nu cykelhjelmen engelsk vertion.
Redegørlese HVAD GÅR OPGAVEN UD PÅ Denne opgave gik ud på, at jeg skulle lave en kampagne hjemmeside om og huske cykelhjelmen, for Rådet for Sikker Trafik, som skulle hedde Husk Hjelmen. Vi skulle lave ideudvikling, Flowchart, Storyboard, stille det op i Dreamweaver og til sidst skrive om grafisk design og grafisk Work flow. KOMPOSITION Denne site er opbygget i Dreamweaver, jeg har ikke brugt en template, da jeg første ikke mente det ville fungere når min index side ikke havde samme størrelse, som mine andre sider, derfor har jeg i stedet for laver to wrapper og to footer. En footer og wrapper til index siden og en wrapper og footer til de tre sidste sider, da de skulle have samme længde. Men da jeg havde lavet opgaven, fandt jeg frem til, at jeg nok godt kunne have lavet en template til de tre sidste sider, da det nok havde hjulpet mig en del med min arbejdsproces i Dreamweaver. Jeg har en meget traditionel opbygning, hvor jeg har en banner først med Rådet for Sikker Trafiks logo, hvor efter der kommer en menu, med tre links, så har jeg sat to billeder ind sammen med en velkomst tekst, og slutter af med en footer, med et link til Rådet for Sikker Trafiks hjemmeside. TYPOGRAFI Jeg har valgt og bruge Font-familien, Arial, Helvetica, sans-serif, da det er den samme font som Rådet for Sikker Trafik, bruger til deres brød tekst på deres egen hjemmeside, men jeg bruger den også til overskrifterne da jeg syntes den er pæn til skræm design. FARVER Den orangerøde farve er den gennemgående farve på alle siderne, jeg har brugt den til menuen og som farve til overskrifterne. Jeg har valgt den farve, fordi jeg gerne ville give min hjemmeside en god farve kontrast og fordi man tit bruger den rødlige farve som en signal farve, altså pas på og farer og det syntes jeg passer godt til det budskab, som husk hjelmen vil ud med. Jeg bruger den grå farve i banner som også er gennemgående, men som også er den banner som Rådet for Sikker Trafik brugere, da jeg gerne ville have at min side havde en lighed til Rådet for Sikker Trafiks hjemmeside, så man vidste det var dem der var afsenderen, men ville ikke bruge samme farve da jeg ikke ville have de var alt for ens. Den sorte farve bruges til teksterne. BILLEDERNE Jeg besluttede mig fra starten at mit forside billede skulle være en masse cyklister hvor nogle havde hjelme på og andre ikke havde, for at vise hvordan virkeligheden er, at der lige nu stadig er mange der ikke bruger hjelmen. På de andre skulle alle have cykelhjelm på fordi budskabet er, at man SKAL bruge hjelmen. Har ikke gjort så meget andet ved billerne end og beskærer dem da jeg syntes de var fine fra staten. SØGEOPTIMERING Jeg har husket og ændre titlen på hjemmesiden, til Husk Hjelmen da det er det folk vil søge på hvis de leder efter siten, og har også kaldt min hoved overskrift for husk hjelmen, og lavet det til en H1 da, det også er en del af søgeoptimeringen. BROWSER KOMPATIBEL Jeg har testet hjemmesiden i tre browsere, i Safari, Firefox og internet Explorer. BRUGERVENLIGHED Jeg gik også meget op i at min hjemmeside skulle være bruger venlig, at den ikke skulle være for besværlig og finde rundt, derfor har jeg lavet menu linjen så simpel som mulig, ved at der kun er en måde at komme til siderne på, så man ikke er i tvivl. Jeg sørgede også for at det ikke blev for rodet, så man ikke bliver for forvirret af og kigge på siden. Der er også et forside link på hver side, så det ikke er svært og komme tilbage til forside igen. KVALITETSVUDERING Jeg er meget tilfreds med hvordan min opgave er blevet, syntes den er blevet som jeg forstillede mig, og at den holder sig til det budskab jeg vil ud med.
Arbejdsproces Tjek af opgaven Upload af hjemmeside Skrevet opgaven om grafisk design og workflow Opsætning af hjemmeside i Dreamweaver Let billede behandling Opsætning af skeletter Opsætning af storyboard og CSS-betingelser Opsætning af moodbord Opsætning af Flowhart Skitsering af layout og søgning på nettet efter inspiration Beslutning af målgruppe og budskab Fortalt om opgaven
Flowchart facebook link Index Forside Husk nu cykelhjelmen! Cykelhjelmen - brug den rigtigt Link til Engelsk side Link til Rådet for Sikkerhed
Skeletter Index side 82 px 23 px 369 px padding-top: 20 px margin-top: 23 px Wapper: 960 x 1500 px menu banner Underside - Husk nu cykelhjelmen. Wapper: 960 x 1350 px 82 px banner padding-top: 20 px menu 268 px 210 px 30 px margin-top: 380 px 455 px 1070 px 10 px 54 x 38 px 274 px 22 px 22 px 546 px margin-top: 4 px 32 x 93 px margin-top: 10 px 271 px 213 px 50 px 10 px
Skeletter Underside - Husk nu cykelhjelmen engelsk vertion. Wapper: 960 x 1350 px 82 px banner padding-top: 20 px menu 268 px 380 px 210 px 30 px margin-top: 455 px 1070 px 10 px 54 x px 38 Underside - Cykelhjelmen - brug den rigtig. Wapper: 960 x 1500 px 82 px banner padding-top: 20 px menu 260 px 380 px margin-top: 30 px 1070 px 347 px 380 px 252 px 10 px 10 px
CSS - betingerlser GENERELT FOR ALLE SIDER Margin: 0px; Padding: 0px; Font-family: Arial Banner: Baggrundsbillede: banner Menu: Baggrundsbillede: menu Padding-top: 20 px H1: 30 px farve: #ed5328 p: 11 px line-hight: farve: #000 padding-top: 8 px q: 11 px line-hight: farve: #000.farve: #ed5328 h3: 12 px farve: #000 padding-top: 10 px.bold: font-weight: bold GÆLLENDE KUN FOR INDEX Wrapper2: 960 x 901 px Footer: Baggrundsbillede: footer #wrapper2 #footer p: text-align: center padding-top: 20 px #wapper2 #footer a: text-decoration: none #wrapper2 #footer a:hover: text-decoration: underline #wrapper2 #menu a: text-decoration: none padding-right: 10 px padding-left: 35 px #wrapper2 #menu a:hover: text-decoration: underline GÆLLENDE FOR SIDE 2-4 Wrapper : 960 x 1300 px #wrapper #menu a: text-decoration: none padding-right: 10 px padding-left: 35 px #wrapper #menu a:hover: text-decoration: underline footer2: baggrundsbillede: footer #wrapper #footer2 p: text-align: center padding-top: 20 px #wapper #footer2 a: text-decoration: none #wrapper #footer2 a:hover: text-decoration: underline
Farver og screen dumps Denne farve er den gemmengående farve på alle siderne. #ed5328 RGB: 237-83-40 CMYK: 1-82-97-0 Den sorte farve er brugt til brødteksten. #000 RGB: 0-0-0 CMYK: 75-68-67-90 Den grå er farven der er brugt i den gennemgående banner #acadb1 RGB: 172-173-177 CMYK: 34-27-25-0
Tidsplan Ændret Tidsplan Første tidsplan