Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Transkript

1 GRAFISK WORKFLOW

2 Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6

3 Grafisk workflow Opgaven At skabe et nyt og nutidigt website til Postens Skytteforening, Århus. Skytteforeningen har haft et nedadgående medlemstal, som de gerne ville have vendt. Websitet skulle derfor være imødekommende og rettet mod nye interesserede medlemmer, samtidigt med at det naturligvis også skulle være anvendeligt for nuværende medlemmer. Websitet er ikke specifikt lavet til hhv. skærm, tablet og mobil, men er dog responsivt, så det også kan tilpasse sig skærmebredde på ned til 68px (tablet). Skytteforeningen har dog efterfølgende tilkendegivet, at de er positive overfor en evt. mobil udgave af deres site. Dette ville kunne gøres ved hjælp af media queries. Designkrav Indbydende og enkelt Informativ og overskueligt Brugervenligt nemt at finde rundt på Brugervenlig for både nye og eksisterende medlemmer Arbejdsproces Samtale med kunden Inspirationssøgning på internettet Skitser lavet i hånden Flowchart udfærdiges Layout-udkast af forside og en underside til præsentation og godkendelse Færdiggørelse af skelet Programmering af sider med HTML5 og CCS Løbende søgeoptimering Browserkompatibilitet tjekkes i forskellige browsere Upload til kunde-gennemsyn Korrektur: koder og tekst/billeder Kundegodkendelse Upload til webserver Layout Responsivt (mål i %): bredde >6px Slideshow Links med hover-effekt for brugervenlighed Stringent og enkel opsætning af bokse spalter for bedre læsbarhed ved tekst i fuld bredde spalte ved tekst i halv sidebredde Fonte Der er valgt to (Google-)fonte, som ofte anvendes i websammenhænge: Open Sans Ubuntu Condensed Farver: Sitet er holdt i relativt få farver for ikke at blive for rodet. Sort Rød (fra logoet) Grå Usability Sitet er nemt at navigere på, da det er enkelt, overskueligt opbygget, og menuen er fikseret øverst og dermed altid tilgængelig. Teksterne er holdt i relativt korte afsnit, hvilket gør dem let tilgængelige. Vurdering Da jeg har været med i stort set hele forløbet, synes jeg det har været en god opgave med mange udfordringer i opsætningen af et website fra start til slut. Jeg er i tilfreds med resultatet, som jeg synes rammer ønskerne til websitet ganske fint. Det er nemt for nye medlemmer, at finde information om foreningen, og nuværende medlemmer kan også nemt tilgå de emner de måtte ønske. Dog ser jeg frem til at lave en mobil version af sitet. Det vil blive gjort ved hjælp af media queries, som angiver css-filer til brug ved hhv. mobil (op til skærmbredde på 20 px), tablet (2px 68px) og desk top (min. 69px). Anvendte programmer Adobe Dreamweaver Adobe Photoshop Adobe Illustrator Brackets, html-editor Transmit, FTP-klient Microsoft Word Safari Firefox Google Chrome Grafisk workflow

4 Procesbeskrivelse Samtale med kunden Inspirationssøgning på internettet Skitser lavet i hånden Flowchart udfærdiges Layout-udkast til præsentation og godkendelse Upload til kundegennemsyn Browserkompatibilitet tjekkes Løbende søgeoptimering Programmering af sider med HTML5 og CCS Færdiggørelse af skelet Korrektur: Koder og tekst/billeder Kundegodkendelse Upload til webserver Grafisk workflow

5 Inspiration Grafisk workflow 5

6 Skitser Fokuspunkter Kunden ønskede et site, hvor nye besøgende/nye medlemmer skulle kunne finde information om og interesse for foreningen, samtidigt med at nuværende medlemmer nemt skulle kunne navigere til de ønskede emner. Her er skitsen, som vi valgte at arbejde videre ud fra. Attention: Slideshow til at fange opmærksomhed. Action: Brugeren kan klikke sig videre for yderligere information Interesse: Brugerens interesse bliver vækket af små, korte men beskrivende tekster. Fokuspunkter: De to rækker af bokse er udvalgte fokuspunkter, hvor den øverste primært er til nye besøgende/potentielle medlemmer, og den nederste primært til nuværende medlemmer. 6 Grafisk workflow

7 Flowchart Overblik Flowchartet giver et simpelt, struktureret og overskueligt overblik over siderne på sitet mht.: Antal Filnavne Links mellem siderne index.html hvorfor.html aktuelt.html om_postskytten.html kontakt.html Grafisk workflow

8 Typografi og farver Afprøvede fonte Open Sans Skydning en sportsgren for alle Federo Skydning en sportsgren for alle Helvetica Neue Skydning en sportsgren for alle Ubuntu Condensed Skydning en sportsgren for alle Udvalgte fonte Open Sans ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ,:;!?+-&/() Ubuntu Condensed ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ,:;!?+-&/() Farver Websitets farver tager udgangspunkt i Skytteforeningens logo. Den røde farve er brugt til overskrifter, hover-effekter, tekst i footer og i nederste del af slideren. Rød er dermed den gennemgående farve. Derudover er der brugt hvid som baggrundsfarve, sort i menu og footer, samt en grå farve til bokse og drop-down menuer for gøre det lidt lettere i sit udtryk. For at dæmpe kontrasten er der brugt en lys grå til <h>teksten i det røde felt under slideren HEX: # RGB: 0,0,0 HEX: #FFFFFF RGB: 255,255,255 HEX: #C22D RGB: 9,9,5 HEX: #8C8C8C RGB: 0,0,0 HEX: #E6E6E6 RGB: 20,20,20 8 Grafisk workflow

9 Skelet Index.html 2. Logo (image): 2px X 00px 2. Header: 00% X 00px. Menu (Nav): max. 960px X 00px. Banner: 00% X max. 50px 5. Banner, bund: 00% X min. 50px padding: 0px 0px 20px 0px 6. Container: max. 960px X min. 00px margin: 50px auto 50px auto px. Indhold: 2% X auto margin %, padding % 8. Figure (image): 00% X auto 9. Footer: 00% x min. 50px padding: 20px 0px auto auto 8 50px 9 Grafisk workflow 9

10 Skelet 0m_postskytten.html aktuelt.html 2. Logo (image): 2px X 00px 2. Header: 00% X 00px. Menu (Nav): max. 960px X 00px. Banner: 00% X max. 50px 5. Banner, bund: 00% X min. 50px padding: 0px 0px 20px 0px 5 6. Container: max. 960px X min. 00px margin: 50px auto 50px auto auto 6 50px auto. Text (article): 00% X auto, spalter margin: 0% 2% 5% 2%, 8. Text-list (article): 00% X auto, spalte margin: 0% 2% 5% 2% padding: 0% 2% 0% 2% 9. Footer: 00% x min. 50px padding: 20px 0px px 9 0 Grafisk workflow

11 Skelet kontakt.html 2. Logo (image): 2px X 00px 2. Header: 00% X 00px. Menu (Nav): max. 960px X 00px. Banner: 00% X max. 50px px 5. Banner, bund: 00% X min. 50px padding: 0px 0px 20px 0px 6. Container: max. 960px X min. 00px margin: 50px auto 50px auto auto 8 auto. Text--column: 50% X auto, spalte (article) margin: 0% 2% 5% 2%, 8. Mail-form (article): 50% X auto margin: 5px auto padding: 2% 9. Bestyrelse (article): 2% X auto margin-left: %, padding: % 0. Footer: 00% x min. 50px padding: 20px 0px 9 50px 0 Grafisk workflow

12 Storyboard Gennemgående elementer Logo: logo_postens_skytteforening_2x00.png Banner/slideshow med tre billeder: riffelskytte_0_200x50.png pistolskytte_0_200x50.png riffelskytte_0_200x50.png 2 Banner, bund. Indeholder h2 og h med siderelevant tekst Gennemgående actions 2 Footer Menu: Forside index.html Hvorfor skydning hvorfor.html Aktuelt aktuelt.html Om Postkytten om_postskytten.html Kontakt kontakt.html Elementer, index.html 6 generalforsamlig_postens_skytteforening_aarhus_00x00.jpg pistolskytte_5kantturnering00x00.jpg pistolskytte_5kantturnering00x00.jpg numre_skyttelotteriet.jpg Actions, index.html 5 Hvofor... hvorfor.html Aktuelt aktuelt.html Om os om_postskytten.html Kontakt kontakt.html Grafisk workflow

13 Storyboard Elementer, aktuel.html 2 Tekstdokument: aktuelt0820.doc Exceldokument: Lotteri_0_20.xls Elementer, om_postskytten.html Tekstdokument: historie, Postens skf.doc Tekstdokument: Kontingent og priser 20.doc 2 Grafisk workflow

14 Storyboard Elementer, kontakt.html 2 Tekstdokument: kontakt info.doc Form-mail Elementer, kontakt.html Tekstdokument: diverse info om skydning.doc Actions, kontakt.html Send knap: mail@postskytten.dk 2 Grafisk workflow

15 Storyboard Fleksibilitet Websitet postskytten.dk er skabt så det er fleksibelt i forhold til forskellige skærmstørrelser. Mål angivet i procenter For at gøre websistet fleksibelt ned til skærmstørrelser svarende til tablets, er der i udbredt grad brugt procentværdier, frem for faste pixelværdier, til angivelser af størrelserne på de respektive elementer. Bredde: 68 pixel Bredde: 280 pixel Grafisk workflow 5

16 Html, css og seo Html 5 Alle html dokumenterne er i html5 formatet. Html angiver strukturen på websiderne. <head> <head> sektionen er en ikke synlig del af websiderne. Her angives nogle forudsætninger for det synlige indhold. Som angivet i <head> sektionen er tekstkodningen i UTF-8, hvilket sikrer at tegnene vises rigtigt. Det skyldes at alle store styresystemer, og moderne browsere understøtter denne standard. Det der også er angivet er referencer til javascript og link til Google fontene som er valgt til websitet. Det sikrer, at der bliver anvendt de rigtige fonte, selvom de ikke er installeret hos dem, som besøger siderne. SEO (Search Engine Optimazation) Der er på websitet foretaget søgeoptimering ved at udfylde title, give billederne beskrivende filnavne, udfylde alt=" "- tekst. Derudover indeholder hver af siderne en <h>. <body> <body> sektionen indeholder de synlige elementer af websiderne. Disse elementer er bl.a tekst, hyperlinks, billeder, lister, tabeller, slideshows etc. For at dokumentet bliver nemmere at overskue er der så vidt muligt brugt kommentarer i html-dokumentet. Det er til god hjælp for én selv, men også hvis andre skal arbejde med htmlkoden. 6 Grafisk workflow

17 Html, css og seo Css Som nævnt tidligere er det html-dokumenterne der angiver strukturen på websiderne, mens der er css-filerne, der bestemmer layoutet på websiderne. Websitet har tilknyttet de css-filer, som der linkes til i html-filerne. Flexslider.css er specifikt til slideshow øverst på siderne. Styles.css fungerer som et central dokument, der bestemmer layoutet på alle siderne, som linker til styles.css. Brug af kommentarer bidrager til overskuelighed Sikrer browserkompatibilitet ved -spaltet tekst. Brug af relative værdier (% og auto) sikrer fleksibilitet mht. skærmstørrelse. Grafisk workflow