Hovedforløb 1 Grafisk Produktionsforståelse & Workflow Stine Keller

Transkript

1 Typografi & Ombrydning Portfolio Grafisk Design Grafisk Workflow Grafik & Billeder

2 OPGAVEBESKRIVELSE I forbindelse med opførsel af en ny hjemmeside, ønsker fåravleren Anders Højen (min kæreste) en nyopsætning af en hjemmeside. Opgaven er relativ fiktiv, men der kan blive tale om at produktet ville kunne blive brugt i virkeligheden. Projektet er udarbejdet dels i min fritid, dels i Grafisk SKP, Herning. Da opgaven er relativ fiktiv, har jeg haft nogen kundekontakt det vil sige at der har været en smule korrektur, men den grundlæggende idé er jeg selv kommet med, og herudover er opgaven løst ved egen kraft, med minimum sparring med andre. Opgaveløsning Kundens ønske er at der skal udarbejdes et logo, der både kan bruges online, og på skrift. Logoet skal afspejle hvilken fårerace det handler om. Programvalg Hjemmesiden er kodet i Dreamweaver, og løbende testet i Firefox. Til slut er hele sitet testet i hhv. Safari, Chrome og Firefox.

3 IDÉGENERERING Inspirationssøgning Mindmapping I første omgang har jeg været forbi andre fåreavlers hjemmesider, først og fremmest for at se hvad de har lagt på deres sider både i indland og udland. Jeg har brugt mindmapping, til at klarelægge hvad kunden ønsker på sitet. Jeg har lavet 5 hovedpunkter, som jeg herefter har idégenereret videre på, til brug i det videre forløb.

4 IDÉGENERERING Flowchart Efter mindmapping, har jeg udarbejdet et Style tyle, både for at give kunden en ide om hvilke elementer hjemmesiden vil blive bygget op efter, men også for selv at holde fokus på hvad det er kunden i bund og grund gerne vil have på sitet. Flowchartet er brugt til at fastholde hvilke undersider kunden ønsker på sitet, det er hjemmesidens struktur, som jeg arbejder efter under hele forløbet. Portfolio Højen Spelsau Styletyle LOGO TYPOGRAFI Venime doloribusam (Roboto slab bold) (Roboto Condensed Regular) volupta erspisit et autasim inisin estore sunt, simus et plaborem ressitissi autem idelectatin reprat. Rum fugit od qui sanit aute prem in pa cus mos sita cusaped que parciam fugia dolor mos dolupicto in cullabo remporem fugit et audio. Aspicillab idellesciis acieni nos rereribus di quossi ommolup tatectotas essum rem autenti int et et haris is conestiae dolum aliquaername aut doluptatio in re dolorum doluptiosam, conem vitat. Exceariossum verrum consequia aboreseque nis et pelit aut inisin et od quiatur, non repella tureped ut poraeste vollor aute que aut asimincimus enim et et verempe rnatem illique pre sequi di teculle ssimaio totassin FARVER R 90 G 80 B 78 R 140 G 123 B 110 R 63 G 101 B 76 R 110 G 141 B 112 R 191 G 136 B 90 styletile.indd 1 23/03/

5 LAYOUT Wireframe Der har været nogen ændringer fra den oprindelige wireframe, til den egentlige hjemmeside. Dels fordi at bannerbilledet ikke rigtigt fungerede da det kom på siden, og dels forglemmelse. Da siden gerne skal være responsivt fra starten, har jeg fundet et grid system (unsemantic), hvor alle mål er skrevet i %. Dette betyder at siden, altid vil respondere til skærmstørrelsen, i forhold til den værdi i % det pågældende element har fået. Logo 170x130 px Banner 790x130 px Ved hover: Søg udskydning af søgebar 40x40 px + ændre farve Menu Forside 960x40 px 960x500 px Ved hover: ændre farve Spel Sau Salg Om Højen Årets gang Kontakt Racebeskrivelse Gunvor Hubert Edel Bodil Logo 170x130 px Banner 790x130 px Søg 40x40 px Menu 960x40 px 960x500 px Højen Spelsau Din sikkerhed for dansk velfærdslam 960x50 px Copyright Mundbjerg Grafisk 960x50 px

6 KVALITETSKONTROL Der har løbende været korrektur hos kunden, som løbende har haft mulighed for at se på om sitet er bygget op som ønsket, og om der er andre ønsker til det endelige produkt. INTERNATIONALE STANDARTER Hjemmesiden er kodet i HTML8 og CSS8, som er det nyeste inden for kodning. Disse standarter er brugt for at have så få udfordringer som muligt i de forskellige webbrowsere. OUTPUT Hjemmesiden er delvis reponsiv i det at navigation og billeder, ændre sig med skærmen når man ændre på den. Men der er nogen elementer på siden der ikke ændre sig som ønsket, fx navigationen. USABILITY Siden er let at finde rundt på, og man kan altid finde tilbage til forsiden. Navigationen og foden er lavet til at være sticky, så man ikke mister navigationen, når man scroller ned på siden. PROCESBESKRIVELSE Der har været nogen tekniske udfordringer, med at få hjemmesiden til at reagere som jeg gerne vil have den til. Jeg har ikke nok erfaring med at lave responsive sider, dog er lyset ved at være gået op for mig her til slut, men da den oprindelige side, måske ikke er kodet hel hensigtsmæssigt, har jeg valgt ikke at ændre de fejl der er (ændre til responsiv topbanner på forsiden). KVALITETSVURDERING Alt i alt, er jeg godt tilfreds med sitet. Der er god brugervenlighed, og det er forholdsvis let at finde rundt på siden. Jeg ville gerne have startet på siden lidt anderledes, så sitet var mere responsivt end det er. Derudover er der nogen sider jeg har været nød til at tage af, da jeg ikke har haft en klar ide om hvordan udformningen på dem skulle være det gælder specielt siden med opskrifterne. Jeg kunne godt finde på at lave siden igen i fx Wordpress, i forsøget på at få det responsivt på den måde jeg gerne vil have den til at være.