Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot

Transkript

1 Denne rapport har til formål at redegøre for tilblivelsen af hjemmesiden beliggende på domænet, Der refereres fra nu af blot til hjemmesiden. Mine indledende tanker bag hjemmesiden var, at den så vidt muligt skulle afspejle den læring og de projektaktiviteter, som vi gennem første semester på multimedielinjen, har været igennem. Visse krav til hjemmesiden var på forhånd givet, disse ses i opgavebeskrivelsen, som er tilgængelig i pdf format på undersiden tilhørende dette projekt. Mine egne krav var, at hjemmesiden skulle designes til fordel for slutbrugeren, den skulle altså foruden indhold, også være let og intuitiv at navigere rundt på, have et indbydende farveskema samt en let læselig tekst.

2 Typografi Font: Den mest repræsenterede tekst på siden, er teksterne på undersiderne, altså hvor projekter og læring er beskrevet. Derfor var det vigtigt for mig, at bestemme font til disse tekster som det første. Indledningsvis gik jeg efter en anderledes font, som kunne understøtte budskabet om mig som en kreativ designer. Efter forskellige afprøvninger og forsøg med forskellige fonts, endte jeg dog med Helvetica, på baggrund af følgende: De enkelte bogstaver skal fremstå uden fødder, altså tilhøre font-familien sans-serif, da jeg ønsker teksterne skal fremstå moderne, stilrene og dynamiske, som er sans-seriffens vigtigste egenskaber. Den anvendte font skal være en såkaldt web safe font, hvilket betyder, at alle browsere kan læse denne. Helvetica er blandt de ældste og mest anvendte fonts. Tekst layout: Det har været en vigtig overvejelse i denne fase, at gøre teksten læsevenlig og overskuelig. Mine tekstlayouts er defineret efter følgende: Skriftstørrelsen er 17px i mit tekstindhold og 18px på alt tekst der ikke er defineret under en bestemt.class eller #id. Linjeafstanden er sat til 130% for at sikre, at linjerne ikke smelter sammen. Hvert tekstafsnit er maksimalt 5 linjer for at gøre det let for brugeren, at skimme hvert afsnit. Teksternes gennemsnitlige LIX-tal på alle undersider, er målt til 42, hvilket ifølge LIX-tabellen svarer til middel-svære tekster, typisk for dagblade, hvilket er fint til en hjemmeside. Overskrifter har fået farven brun. Underoverskrifter har fået farven grøn og deler den samlede tekstmængde op i mindre og mere overskuelige afdelinger.

3 Brødteksterne er ikke stylet, men bærer en standart grå farve, som harmonerer med resten af hjemmesidens farveskema. Denne farve er desuden behagelig for øjnene, lige meget hvilken skærmbelysning brugeren har. Links fremgår klart i teksten, markeret med understreg som man kender dem. Farver I det følgende gennemgås hjemmesidens farveskema samt begrundelse for de enkelte valg. Den dominerende farve på hjemmesiden er brun, som findes i forskellige nuancer i hhv. overskrifter, footer og baggrundsfarve. Mine overvejelser bag den brune farve var, at den symboliserer pålidelighed, stabilitet, enkelthed og jordnærhed. Desuden har brun ikke mange negative påvirkninger, men kan af nogle opfattes som kedelig, hvorfor jeg har nuanceret farven flere steder. Brun er ikke forudbestemt til at tilhøre et bestemt produkt eller en virksomhedstype, men er neutral for brancher. Brun er også valgt for at skille mig ud fra mængden. Baggrundsfarve #E1D2C3: Baggrundsfarven er en meget lys nuance af brun, der grænser op af det lysegrå. Den er valgt for at fremhæve hjemmesidens indhold bedre. Footer #BFB2A6, #ACA095, #9B9086: Footeren gør brug af det (nye) CSS3 sprog, som tillader at blande farver sammen og skabe en gradient. Jeg har valgt 3 forskellige nuancer af brun, som tydeligt markerer footerens område på hjemmesiden. Desuden er footeren ikke farvet på en måde så den dominerer billedet og ikke gør tekst, billeder og links svære at læse. Overskrifter (H1, H2, H3) #663300: Overskrifterne på hjemmesiden er sat til en helt almindelig brun farve, som dens originale farvekode (#663300) har bestemt den.

4 Links #878063: Links i hovednavigationen <nav> samt i sidebaren på undersiderne har fået en mørk farve, som harmonerer med resten af farveskemaet, men stadig skiller sig ud. Sidebar #E1D2C3: Samme farve som baggrundsfarven på hjemmesiden. Struktur Hjemmesiden gør brug af 3 forskellige skabeloner eller templates, bygget med HTML5 og CSS3 kodningssprog. Overvejelserne i forbindelse med hjemmesidens struktur, gik naturligvis på, hvordan jeg bedst muligt kunne skabe et intuitivt og interaktionsvenligt design. Responsive design Min første overvejelse i forhold til strukturen af hjemmesiden var, om hvorvidt jeg skulle kaste mig over udfordringen og prøve kræfter med responsive design. Jeg besluttede mig for at gøre det, da vi i undervisningsforløbet har været inde over emnet. Om designet skulle være responsive eller adaptive var næste spørgsmål. Beslutningen faldt på responsive, da det har sin fordel i sit elastiske design og ikke stiller voldsomme krav om billedkvalitet, når skærmen er mindre. Var dette tilfældet, ville et adaptive design have været at foretrække, at jeg kunne have lavet specifikke breakpoints, tilpasset de enkelte billeder på hjemmesiden. Altså var opgaven nu at finde en struktur, der let kunne tilpasses ved hjælp af CSS i mit stylesheet.

5 Wireframe Hjemmesiden er som nævnt bygget op om 3 forskellige skabeloner, der hver sikrer at informationsarkitekturen på siden understøttes og fremhæves på bedst mulig vis. Jeg vil i det følgende demonstrere informationsarkitekturen gennem mine wireframes, som viser de 3 skabeloners opbygning. Wireframe 1, forsiden: Fra toppen: 1. Øverste del af siden tilhører hovednavigationen, som er til stede på samtlige undersider og sikrer, at brugeren altid kan finde rundt til hovedsektionerne og hjem til forsiden. 2. Bannerbilledet der sammen med farveskemaet er med til, at understøtte min og hjemmesidens visuelle identitet. 3. Nyhedsblokke der kan opdateres som hjemmesiden udvikler sig og nye projekter tilføjes. 4. Footerområde indeholdende kontaktinformationer og links til sociale medier jeg benytter. 5. Copyright

6 Wireframe 2, underside/projektside Fra toppen: 1. Igen ses hovednavigationen som øverste element på siden. 2. Under navigationen vises undersidens tittel og overskrift markeret med brun farve. 3. Igen er bannerbilledet brugt for at holde samme visuelle indtryk. 4. Til venstre under bannerbilledet ses en sidebar lavet med HTML5 tagget <aside> der netop er lavet til formålet. 5. Til højre for sidebaren er indholdsområdet hvor brødteksten på siden vil fremgå. 6. Footeren igen 7. Copyright.

7 Wireframe 3, kontaktsiden: Fra toppen: 1. Igen ses hovednavigationen som øverste element på siden. 2. Under navigationen vises undersidens tittel og overskrift markeret med brun farve. 3. Igen er bannerbilledet brugt for at holde samme visuelle indtryk. 4. Jeg har lavet en.class særligt til et googlemap, som viser min adresse. Her kan senere tilføjes info via Google Places. 5. Under kortet til venstre er mine kontaktinformationer. 6. Under kortet til højre ønsker jeg en kontaktformular. 7. Nederst ses igen footer samt copyright.

8 PBS: Hjemmeside Kodning Billederedigering Tekstproducering HTML editor (Coffeecup) Adobe PhotoShop Links HTML CSS Billeder Korte projektbeskrivelser Forside Læring Underside Remake Kontaktside