OPGAVE BESKRIVELSE ARBEJDSPROCES. Idéudvikling. Inspiration. Skelet. Uploade til server. Kodning. Teste sitet igennem. Rettelser og godkendelse

Transkript

1 GRAFISK WORKFLOW

2 ARBEJDSPROCES OPGAVE BESKRIVELSE OPGAVEN At lave et redesign af AGF Fanclubs hjemmeside med et mere nutidigt look og bedre oversskuelig brugerflade. Opgaven har jeg stillet mig selv, men tanken er at fremvise sitet, og hvis det vil blive godkendt, er det meningen, at jeg skal kunne overdrage det til fanklubben og opbygge det via Concrete5, så bestyrelsen selv kan redigere i indhold. AFSENDER/MÅLGRUPPE AGF Fanclub er den officielle fanklub, som ledes af frivillige, og fanklubbens indtægter kommer fra medlemsskab og donationer. Sitet bliver brugt af AGF fans i alle aldre og samfundslag. Sitet bliver brugt til nyheder, forskellige informationer omkring events og medlemsfordele. BRUGERVENLIGHED Sitet måler 1090 px. i bredden og højden har et minimum på 500 px. Sitet er responsivt, så man kan bruge det på flere enheder og er nemt at overskue med en skriftstørrelse, der er letlæselig. ARBEJDSPROCES Finde inspiration på internettet Idéudvikling Skitser Flowchart Skelet Billedbehandling Kodning i Dreamweaver Uploade til server Teste sitet igennem KOMPOSITION OG LAYOUT Sitet er bygget op efter et grid som efter header og nav er bygget med 3 lige store kolonner. Både for overskueligheden og for at skabe en balance. Billeder redigeret i Photoshop og er gemt med generelle indstillinger for optimering til web 72 PPI, srgb og en passende filstørrelse. De to første kolonner er til artikler billeder og tekst er placeret overfor hinanden, så man nemt kan se, at billeder og tekst hører sammen. Inspiration Skitser Skelet Idéudvikling Mockup Billedbehandling PROGRAMVALG InDesign Skelet Photoshop Billedredigering, visuel opbygning af sitet og grid. Dreamweaver Opbygning af HTML5 CSS koder og uploade til FTP Chrome, Safari, DuckDuckGo Test af site. Inspiration til design og kodning. Kodning Teste sitet igennem Uploade til server Rettelser og godkendelse 2

3 INSPIRATION SKITSER For at danne mig et indtryk af design og funktionalitet, har jeg søgt inspiration på flere danske sportshjemmesider og forskellige fanklubbers hjemmesider. 3

4 OPSÆTNINGERER GRID OPSÆTNINGER MOCKUPS MOCKUPS Mockups er lavet i Photoshop, og jeg har lavet to forskellige for at kunne forholde mig til størrelsesforhold og for at kunne se hvordan sitet ville se ud i både desktop- og mobiludgaven. DESKTOP MOBIL-SITE 4

5 SKELET RESPONSIVT DESIGN Sitet er kodet til at fungere på alle enheder. Dette er lavet ved hjælp af forskellige media queries for tablet og smartphone. Alle bredder er i procenter, så det bliver flydende dog med undtagelse af main, nav og footer som alle måler 1090 px i deres max længde. Der er lavet foruddefinerede breakpoints, så man ikke oplever en presset side på en smartphone, men at kolonnerne vises under hinanden. Nav Width 1090 x Height: 50 px Eksempel på mediaqueries/ breakpoints som definerer, hvordan kolonnerne skal vises. (max-width: 1049px) (max-width: 850px) (max-width: 675px) Footer width 1090 x Height: 50 px Topnyhed Article Width: 100% Margin: px. 0 Section Width % Margin-right: 1,9047% Desktop Main Width 1090 px. height auto Margin: 20px. auto 0 auto Header Width 100% Height: 200px. Margin: 50px. 0 50px. 0 Aside Width: % Margin: px. 0 Nav Width: auto Height: 50 px Section Width % Margin-right: 1,9047% Footer Width: auto x 50 px. Mobil Header Width 100% Height: 200px. Margin: 50px. 0 50px. 0 Topnyhed article Width: auto Aside Width: % Margin: px. 0 5

6 STYLESHEET SØGEOPTIMERING * Margin: 0 Padding: 0 img Width: 100% html5 semantics tags article, aside, figure, footer, header, hgroup, menu, nav, section display: block a, p, h1, h2, h3, h4 font-family: 'Titillium Web', sans-serif color: #000 fontweight: 600 text-decoration:none h1 font-size: 33px line-height: 33px padding-bottom: 10px h2 font-size: 33px line-height: 35px padding-bottom: 10px h3 font-size: 33px font-weight: 100 line-height: 35px font-style: italic line-height: 35px padding-bottom: 10px color: #333 a font-size:25px font-weight:400 font-size: 14px line-height:18px padding-right:10px header height:200px margin: 50px 0 50px 0 header img width: 200px display: block margin: 0 auto nav width: 1090px height:50px margin: 0 auto background-color:#f30 text-align: center nav amargin: % 0 0 line-height: 50px text-decoration: none nav a:hover color:white nav a last-child margin: 0 main width: 1050px min-height:500px height: auto margin: 20px auto 0 auto overflow:auto footer width: 1090px height:50px margin: 0 auto background-color: #F30 text-align:center line-height: 50px footer p font-weight:400 font-size: 18px.footer_p color:white section width: % margin-right: % height:auto article height: auto margin: px 0 border-bottom: 1px solid black clear: both padding-bottom:0px.article_img width: % margin-right: %.article_img img.article_text width: %.article_textleft width: % margin-right: % #topnyhed height: auto background-color: # #topnyhed.article_img img margin: 25px #topnyhed.article_text margin: 20px #topnyhed h1 color: #FFF #topnyhed h3 color: #FFF #topnyhed p color: #FFF aside width: % height:auto min-height:500px aside img margin: px 0 (max-width: 1049px) main width: 95% margin-left: 2.5% nav footer (max-width: 850px) section aside aside img width: 45% margin-right: 2% nav a font-size: 20px margin-right:5% (max-width: 675px).article_img margin-bottom: 10px article height: auto #topnyhed height:auto background-color:white #topnyhed h1 color: #F00 #topnyhed h3 color: #F00 #topnyhed p color: #F00.article_text META TAGS For at øge søgeoptimeringen for sitet er det blandt andet vigtigt at have styr på sine META tags, derudover er det også vigtigt at navngive sine billeder med et preciseret ord om billedet. Herunder er vist META tags for agf-fanclub.dk: <meta charset= utf-8 > <title>agf Fanclub</title> <meta name= description content= AGF fanclubs hjemmeside, siden med de friske nyheder. Stedet hvor fællesnævneren er AGF > <meta name= keywords content= AGF, fodbold, sport, superliga, 1. division, fan, stadion, øl pølser, guld, sølv, kamp, dommer træner, spiller > <meta name= author content= David Vuckovic > SEMANTISK KODET SITE En semantisk kodet hjemmeside giver en højere score hos søgemaskinen, og sammen med mange andre faktorer vil det i sidste ende give en højere placering, når søgemaskinen skal generere resultatet da det er nemmere for søgemaskinen at kortlægge sidens indhold. Eksempler på benyttede semantiske HTML tags: <header> <nav> <main> <section> <article> <aside> <footer> <h1><h2>... Sidehoved Navigation Indhold Sektion Tekstindhold Sidebar Bunden af siden Definerer overskrifterne ALT TEKSTER Alt tekst hjælper ligelides til SEO optimering. Eksempelvis: <img src=../img/logo.jpg alt= AGF Fanclub > 6

7 FLOWCHART GOOGLE-FONTS FONTVALG Arrangementer index Artikel Medlemsskab (Kontaktformular) Ved at bruge google-fonte undgår man ekstra udgift for rettigheder. Og da AGF-fanclub er en frivillig organisation, gav det klart mening at benytte en google-font. Efter at have fundet den font, jeg mente passede bedst til mine overvejelser omkring læsbarhed og udtryk, lavede jeg et link i min head sektion med nedenstående link: <link href=' amily=titillium+web:400,600,600italic,400i talic' rel='stylesheet' type='text/css'> Tak for din indmeldelse Fejlbesked 7

8 FARVE & BILLEDOPTIMERING FARVEVALG For at sikre, at bruge de korrekte farvekoder til sitet, har jeg brugt color picker for web. FORMULAR KONTAKTFORMULAR Så man nemt kan sende en besked eller indmelde sig i klubben har jeg ved hjælp af min webudbyder sat en PHP kode ind i min HTML, som linker direkte til min mailadresse via min host, det skal selvfølgelig være agf@ fanclub.dk, i en evt. ny opsætning. Koden for formularen er herunder: <form method="post" action=" accept-charset="iso " onsubmit="var originalcharset = document.charset; document.charset = 'ISO '; window.onbeforeunload = function () {document. charset=originalcharset;};"> Navn <br /> <input name="realname" /> <br /> <br /> <input name=" " /> <br /> Meddelelse <br /> <textarea cols="40" rows="10" name="message"></ textarea> <br /> <input type="submit" value="send" /> <input type="hidden" name="recipient" value="david@vuckovic.dk" /> <input type="hidden" name="subject" value="subject" /> <input type="hidden" name="redirect" value=" vuckovic.dk/tak.html" /> <input type="hidden" name="missing_fields_redirect" value=" /> <input type="hidden" name="required" value="realname, ,message" /> </form> BILLEDOPTIMERING For at sikre, at billeder ikke fylder for meget, bliver alle billeder gemt i save for web. Og der justeres de efter størrelse og kvalitet. 8

9 UPLOAD TIL FTP UPLOAD Via dreamweaver er det nemt at uploade sitet, når man har indtastet brugernavn og adgangskode, er det overskueligt at uploade enkelte ændringer eller som her et helt site. PRODUKT RESPONSIVT Sitet bliver testet på alle formater og browsere (Chrome, Safari, Firefox og DuckDuckGo). Nu kan layoutet vises for fanklubben på alle formater. LINK TIL SITET KLIK HER KVALITETSVURDERING Jeg synes, sitet virker overskueligt og viser hvad ideén med redesignet er at skabe fornyet identitet og en bedre brugerflade. Udgangspunktet for et nyt site er jeg tilfreds med, men for at det skal kunne blive et færdigt site, er der stadig mangler. Der skal være et artikelbibliotek, løbende opdateringer af tabeller, forskellige sponsorlinks, evt. en baneløber i headeren. Men udgangspunktet var at vise noget som var mere nutidigt både i udtryk og funktion. Og det er lykkedes. 9