Programvalg Dreamweaver CC, html Photoshop CC 2015

Transkript

1 Grafisk design

2

3 Opgaven Opgaven er fiktiv. Denne hjemmeside skal ses som en lille appetitvækker. Hvad er Troldhede og hvad kan man finde i naturen, der er rundt om byen? Jeg har selv stået for design af siden, sidestruktur og billedudvælgelse. Programvalg Dreamweaver CC, html Photoshop CC 2015 Programvalg Usability Designet skal være let, enkelt og overskueligt, da det skal henvende sig til unge og gamle. Der skal ikke klikkes gennem en masse undermenuer for at komme fra a til z og tilbage igen. Arbejdsproces - Brainstorm og skitser - Wireframe - Søgning efter tekst og samsætning tekst - Søgning efter egnede billeder til tekst - Tilpasning af billeder (350px x 350px), samt redigerer dem - Opsætning af siderne - Test i forskellige browsers (Firefox, Safari, Chrome og IEXPLORE) - Finjustering Testet i Safari, Firefox, Chrome og IEXPLORE Moderne Kultur Naturoplevelser Miljøbevist Segmentering Minerva modellen er en af de mest brugte og anerkendte livsstilsanalyse, der findes i dag. Modellen er udviklet af det danske analyseinstitut Nielsen. Materialistisk Blå Violet Grøn Rosa Idealistisk Den primære gruppe, der kan have interesse i hjemmesiden, hører under det grønne segment. Dette segment regnes for mere modrne og idealistisk. Segmentet er mere miljøbeviste. De interesserer sig for kultur, skønlitteratur og naturoplevelser. Segmentet går ikke nær så meget op i status og hvordan andre opfatter en. Dette segment udgør 25% af befolkningen og består mere af kvinder end af mænd. Minerva modellen Traditionel

4 Brainstorm Brainstorm og wireframe Brainstorm er med til at hjælpe med hvilke emner der skal være på siderne. Skitsen er en retningslinje for hvordan siden skal se ud. Wireframe 960px X 400px 960px X 400px 960px X 400px 960px X 400px CONTAINER HEADER 900px X 200px MENU 960px X auto 900px X 40px 960px X 400px 960px X 400px 960px X 400px 960px X 400px CONTAINER HEADER 900px X 200px MENU VIDEO (Kulsøen) 960px X auto 900px X 40px 960px X 400px 960px X 400px 960px X 400px 960px X 400px 350px X CONTAINER HEADER 900px X 200px MENU VIDEO (Kulsøen) 960px X auto 900px X 40px Farver Farverne jeg har valgt repræsenterer naturens farver: De blå er for vand og himlen. Grøn er for plantevæksten. Rød for naturen i fuld flor. Orange/gylden for dyrelivet og efterårets farver. Disse fire farver har en opacity på 90%. Omkring billederne i disse fem farver er der en skygge i samme nuance. Der er sat en grå skygge om den bagerste blå content og skygge med samme farve som baggrunden er om billederne. Opacity og skygge er for at give mere dybde på siderne. Kodning/Opsætning Generel kodning og derefter tilpasning af diverse contents og billeder. Skygge i samme nuance som contents har. Billederne er derudover også roteret mellem -2 og +3 grader. YouTube video er sat ind nederst på siden om Kulsøen. Billederne på undersiderne har mouse-over effekt. Menuen har samme blå farve som content. Kvalitetsvurdering Jeg er godt tilfreds med siden. Det er ikke den traditionelle firekantede kasse. Da de forskellige contents står skæv for hinanden og har ikke ens margin, har det også taget noget tid at rette dem til. Opacityen på farverne giver siden lidt mere dybde, så det ikke bare er farve-på-farve. Med sidens opbygning vil jeg gerne have, at brugerne husker den. VIDEO (Kulsøen)

5 Flowchard Forside Troldhede Kulsøen Bjørslev Plantage YouTube Koden, der giver skyggen. Her den grå udgave Farvevalg Farverne med RGB koderne og opacityen Koden, der roterer billederne og som fungerer i de forskellige browsere

6 Image med og uden rollover Javascript kommer automatisk ind, når Roll-over images vælges

7 Før Efter Før Efter Nogle af de billeder, der har været igennem photoshop. På mange af billederne var himlen hvid og græsset kedelig bleg.

8

9