Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

Transkript

1 Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne være et eksempel på et mockup som man kunne vise kunden. Jeg har lavet en forside med døde links, men det giver en god forestillingen o hvordan hjemmesiden vil fungere. Målgruppe Jeg vil fremstille en hjemmeside for AGF fans, som gerne vil have en nem og troværdig måde at få sine AGF nyheder på. Sitet skal være overskueligt, nemt at navigere i og være moderne i sit udtryk. Kvalitet Jeg har en mappestruktur der gør det nemt at holde styr på siden under dens opbygning. Filer der er redigeret i Photoshop bliver gemt i korrekt størrelse og som jpeg. Derudover bruger AGFs farveskala for at få en god genkendelighed. Brugervenlighed Sitet måler 1280 px i bredden og længden har en minimum på 600 px og er sat til auto. Så de steder hvor der er mere indhold end 600 px udvider længden sig automatisk. Formatet er en størrelse de fleste computere passer godt til. Programvalg InDesign Tekstredigering og stylesheet Photoshop Billedredigering, visuel opbygning sitet og grid. Illustrator Skelet og logo. Dreamweaver Opbygning af HTML5 CSS koder og uploadning til FTP Chrome Test af site. Inspiration til design og kodning. Arbejdsproces Finde inspiration på internettet Idéudvikling Skitser Flowchart Skelet Stylesheet Storyboard Billedbehandling Logo i illustrator Kodning i illustrator Uploade til server Teste sitet igennem Komposition og layout Sitet er bygget op efter et grid som efter header er bygget med 3 lige store bokse. Både for overskueligheden og for at skabe en balance. Billeder redigeret i Photoshop er gemt i præcise boksformater og optimerede til web 72 PPI, srgb og korrekte filstørrelse. Billeder og tekst er placeret overfor hinanden fordi billeder og tekst hører sammen. Kvalitetsvurdering Sitet har et nutidigt look og en moderne funktionalitet. Jeg synes nyhedsfeltet er blevet rigtig godt og kan sagtens forestille mig at det kunne være brugbart i fremtiden for AGF fanclub. Generelt synes jeg processen har været struktureret og konstruktiv. Resultatet er blevet godt og jeg har opnået det ønskede resultat.

2 Workflow Flowchart index Hjem Om AGF fanclub Medlemsskab Galleri For børn Arrangementer Kontakt

3 Skelet Grafisk 40 px 1200 x 210 px 40 px 65 px 1200x50 px 365x auto 65 px 1280x1500 min Min. 100 %x50px

4 Workflow Skitser

5 Opbygning af site i Photoshop Grafisk Dokumentet Inden jeg starter med opbygning har jeg sat min indstillinger korrekt. Jeg har sat mine mål til at være i pixel, for at have de samme måleenheder hele vejen rundt. srgb er valgt fordi det har et farverum som passer til skærme Adobe RGB har et større farverum og bruges ofte til trykte medier ved at konventeres til CMYK derved kan man beholde flest mulige farver. Grid Jeg har valgt at opbygge mit dokument med et tilpasset grid, så jeg kan konstruere et overskueligt site. Elementer For at få et bedre overblik over min opbygning, vælger jeg ofte at farve mine bokse det giver mig en bevidsthed over opbygningen.

6 Workflow Redigering Billedbehandling Alle billeder er redigeret i Photoshop og konventeret til jpeg og farve justeret efter det ønskede. Og det præcise mål er sat, så alt passer sammen i min opbygning af Sitet. Og igen har jeg struktureret arbejdet, så jeg hurtigt kan fremstille de ønskede filer.

7 Opbygning af logo i illustrator Grafisk Logo Logoet er opbygget i illustrator og derefter tilpasset i størrelse og filformat.

8 Workflow Opsætning i Dreamweaver Dreamweaver I Dreamweaver har brugt til at bygge at bygge mit site. Derudover har jeg bruger Dreamweaver til at Uploade til FTP adressen. Her er der vist koden for menuen med link og hvordan den Sitet ser ud.

9 Stylesheet Grafisk HTML5 Alle mål er pixel og % * Margin: 0 Padding 0 Header Width: 1200 Height: 210 Margin: 0 auto Nav Width: 1200 Height: 35 Margin: 10 auto Background-color: #27335b Display: block Padding-top: 15 Main Width: 1150 Min-height: 600 Margin: 25 auto Padding: 0 25 Footer Width: 100% Height: 50 Background-color: #27335b.Header_logo Margin-left: 500 Ul a Text-decoration: none Padding-left 25 Margin-top: 25 Color:FFFFFF Ul a:hover Color:#F00.nav_menu Color: #FFF Font-family: Arial. Helvetica; sans-serif Font-weight: lighter Margin-left: 25 Margin-top: 15 Margin-right: 40.left_content Width: 755 Height: 275 Margin: 0, 25, 25, 0.left_content p Font-size: 16 Max-width: 365 Margin: 0, 0, 0, 25.left_content h2 Font-size: 28 Max-width: 365 Margin: 10, 0, 0, 25 Line-height: 28.left_content h6 Font-size: 14 Color: #999 Max-width: 365 Margin: 5, 0, 0, 25.left_content img.left_content p a Color: #27335b Text-decoration: none.left_content p a:hover Color: #F00.left_content h2 a Color: #27335b Text-decoration: none.left_content h2 a:hover Color: #F00.right_content Height: auto Min-height: 600 Float: right Width: 365.right_content img Float: right.footer_p a Text-decoration: none Color: #f00.footer_p a:hover Color: #FFFFFF p, a, h1, h2, h3, h4, h5, h6 Font-family: Trebuchet MS, Arial, Helvetica, sans serif

10 Workflow Det færdige site