Produkt. Index side GRAFISK DESIGN

Transkript

1 Grafisk design

2 Produkt Index side

3 Produkt Underside - kontakt

4 Redegørelse OPGAVEN I forbindelse med valgfag, som jeg tog i København, havde vi lært forskellige nye funktioner, som vi skulle implementere i en hjemmeside, som vi selv skulle designe og kode. Det var et krav at hjemmesiden skulle være responsiv og der skulle være en kontaktformular. PROGRAMVALG Jeg har lavet layoutet i Photoshop, ikonerne og logoet i Illustrator og kodet hjemmesiden i Dreamweaver. PRODUKT Jeg valgte at lave en hjemmeside for et fiktivt tømrerfirma, som jeg valgte at kalde Kvalitetstømreren. Jeg vidste på forhold, at jeg gerne ville have billeder i fokus, så jeg tænkte, at der kunne findes nogle flotte tømrerbilleder. Jeg har selv designet logoet og ikonerne på hjemmesiden. Siderne forside og kontakt virker. Resten er døde links. AFSENDER OG MÅLGRUPPE Afsenderen af hjemmesiden er Kvalitetstømreren, som både henvender sig til privatpersoner og virksomheder, som skal have repareret, renoveret eller bygget nyt. FORMAT Hjemmesiden har en max-width på 960px og en height på 100%. På den måde udvider siden sig automatisk nedad når der kommer flere elementer på siden. TYPOGRAFI Vi havde ikke meget tid til denne opgave, så der var ikke tid til at afprøve en masse forskellige skrifter af. Jeg valgte derfor Myriad Pro, da jeg har brugt den font i andre sammenhænge og synes det er en letlæselig skrift. Det var vigtigt for mig at læsbarheden var god, da det skal være let og overskueligt at finde de informationer man har brug for på hjemmesiden. Skriftstørrelserne har jeg angivet i em i stedet for px, da det er bedre når man laver en responsiv hjemmeside. IKONER/BILLEDER Jeg valgte at lave logoet selv, da jeg synes det var sjovere at gå all in på at opfinde en fiktiv tømrer. Jeg ville gerne have ikoner, som refererede til forskellige menupunkter, som læseren skulle kunne klikke sig ind og læse mere om. Jeg lavede derfor et værktøjsikon til hvad kan vi tilbyde, et hus til udvalgte cases og et spørgsmålstegn til hvem er vi?. Herudover valgte jeg at gøre dem runde, både fordi det var en af de nye css3 regler vi havde lært, men også af æstetiske årsager. Siden er bygget op i kasser, så for at bryde det lidt, blev ikonerne runde. Billederne der er brugt i top og bund er fundet på google. De er nøje udvalgt, da jeg godt kunne lide dynamikken i billedet på forsiden og jeg kunne godt lide, at billedet på kontaktsiden var et close-up billede, hvor området med blyanten var i fokus. Jeg har valgt at lave et menupunkt som hedder udvalgte cases hvor det er meningen, at man kan se et galleri med forskellige ting Kvalitetstømreren har lavet. Jeg synes det er vigtigt at man som virksomhed sætter billeder på de ting man kan, da kunden på den måde bedre kan forholde sig til, om det de laver er noget for ham/hende. Jeg valgte at sætte en silhuet af hammeren i en afdæmpet farve i baggrunden, for at skabe lidt dybde på siden. Til footeren valgte jeg et billede af en trætekstur i stedet for en farve, for at lave noget anderledes. Det giver lidt ekstra spil til hjemmesiden. FARVER Jeg ville gerne have en enkel og stilren hjemmeside, hvor billeder skulle skabe blikfang, så der skulle ikke proppes for mange farver på. Jeg valgte derfor en mørkeblå farve til ikonerne på forsiden ud fra de blå områder der er i billedet. Jeg valgte dog at afdæmpe farven, så det ikke skreg i øjnene. Den blå farve er ligeledes brugt på afsend knappen på kontaktsiden, så der er en sammenhæng mellem siderne. PROCESBESKRIVELSE Modtagelse af opgave Kigge på nettet og få ideer Skitsering Layout i Photoshop Ikoner og logo i Illustrator Kodning i Dreamweaver Upload til skolens server Test af kontaktforlumar Test af hjemmeside på tablet og mobil Test af hjemmeside i forskellige browsere KVALITETSVURDERING Jeg synes jeg har formået at lave en overskuelig og stilren hjemmeside, som er let at navigere sig rundt på. Farverne hænger godt sammen, og billederne skaber blikfang.

5 inspiration Jeg har søgt inspiration forskellige steder på nettet - bl.a. på google og på designspiration.net.

6 skitser

7 komposition KOLONNER Siden er bygget op i 3 kolonner, og det er meningen at alle sider skal bygges op efter det, for at have en form for struktur. TEKSTJUSTERING Jeg prøvede først at venstrestille teksten under hver cirkel, men jeg syntes det skabte en ubalance, og blev for kantet. Jeg endte derfor med at centrere teksten, hvilket giver en god balance og er med til at bryde kasseopbygningen af siden. Det passer også godt til logoet og menuen i toppen, som også er centreret. I footeren har jeg venstrestillet kontaktoplysningerne og højrestillet Facebook- og Linkedin ikonet, igen for at skabe balance.

8 Layout, ikoner & kodning I Photoshop har jeg arbejdet med grids. På den måde er det let at få ting til at flugte og man arbejder i bestemte mål. Jeg valgte derfor også at springe over at lave et skelet, da jeg allerede havde alle mål her. Jeg har lavet ikonerne meget simple, så det passer til den stilrene og enkle hjemmeside. Jeg har arbejdet med størrelseskontrast, ved at gøre kvalitets fed og tømreren regular. På den måde skabes der lidt spil, så det skiller sig ud. Der bliver ligeledes lagt vægt på kvalitet, som er et vigtigt budskab at få frem. Herudover har jeg leget med ø et ved at sømmet udgør stregen gennem o et. Til sidst går de to sidste bogstaver hen over hammeren, så for at de ikke forsvinder, har jeg brugt pathfinder værktøjet til at få det til at se ud som om, at de to bogstaver er inverteret. Kodning i Dreamweaver.