GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

Transkript

1 GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv og kunne redigere i hjemmesiden, men ville have mig til og styre den, brugte jeg bracket og arbejdede med HTML5 og PHP. HJÆLPEMIDLER BROWSER Hjemmesiden er testet i tre af de mest brugte browseres, Google Crome, Safari og Internet Explorer. Den er også testet på tablet og mobil i Safari og Google Crome. BRUGERVENLIGHED/USABILLITY Der er lagt vægt på brugervenlighed i form af, tydelig navigation på siderne, altid synlig kontakt informationer i bunden på alle siderne. KVALITETSVURDERING Jeg er meget tilfreds med den hjemmeside jeg har fået lavet til kunden. Jeg føler jeg har fået lavet en simple og flot hjemmeside som er nem og overskuelig. Jeg føler også at jeg har formået at designe den som kunden have efterspurgt. Opgaven har også givet mig en masse erfaring med direkte kundekontakt. Jeg lærte dermed også hvordan, jeg kunne præsentere mine idéer på en konstrueret måde. Min største udfordring i denne opgave var og gøre hjemmesiden responsiv. Der var meget og tage stilling til når elementerne på hjemmesiden både skulle passe på en desktop og iphone. Jeg måtte ud i et nyt territorie og arbejde med procenter, som gav mig et helt nyt syn på hvordan man også kunne arbejde med hjemmesider.

2

3 PROCESS

4 IDEUDVIKLING Jeg ville gerne lave et site som var simpelt og overskueligt, da det skulle være nemt og hurtigt at gå ind på og finde de informationer man havde brug for, som kunde. Kunden ønskede at sitet skulle være responsivt, så det er mere overskueligt at bruge sitet på mobilen og tablets. Jeg ville gerne give kunden et moderne look til hjemmesiden, men stadig så den så troværdig ud, hvilket er vigtigt når man som kunde leder efter en håndværker.

5 IDEUDVIKLING

6 LAYOUT I PHOTOSHOP I layout processen i photoshop tog jeg stilling til fontene løbende, farverne var allerede bestemt, da jeg besluttede mig for at bruge blå, da logoet er blåt.

7 LAOUT I PHOTOSHOP

8 FONTE BRUGT I HJEMMESIDEN Jeg har brugt to fonte på dette site. Den ene er en google font og den anden er Arial. Arial er kun brugt i kontakt formularen. google fonten jeg har brugt er Ek Mukta. Jeg valgte at holde mig til kun og bruge en google font, for jo færre skrifter som bliver embedet til hjemmesiden, jo hurtigere loader den. Jeg har valgt og bruge en google font fordi: - De er gratis at bruge - De er nemme og implementere i HTML en - De fleste af skrifterne har et stort udvalgt af skriftsnit - Man får bedre mulighed for at fonten vises ens i forskellige browseres. Fonten bliver tilføjet til hjemmesiden når den loader, via denne code som man indsætter i head menuen: <link href=' rel='stylesheet' type='text/css'> Fonten anvendes derefter i CSS'en via taget font-family, og skriftsnittet kan i dette tilfælde bruges i regular og bold, og det vises i CSS en således fontweigt: 400 eller 700. Jeg lavede en google font test for og se hvor hurtig pageloadingen ville være når jeg ville bruge de to forskellige font weigt. Selvom at testen ligger i det røde felt, så har jeg selv testet det og jeg havde ingen problemer med at loade siderne hurtigt hverken på computer, ipad eller mobilen, heller ikke hvis mobilen brugte 3g eller 4g net.

9 FONTE

10 KOMPOSITION (COL-SYSTEM) Jeg har opsat min hjemmeside med et grid-system, altså et kolumne system, som er bygget op af 10 kolumner som hver er sat i % hvor col-1 er 10%, col-2 er 20% osv. så vi ender med at col-10 er 100%. Dette grid-system er det som jeg føler er nemmest og arbejde med når man gerne vil lave en hjemmeside responsiv, da det og arbejde i procent og ikke pixels. Man også kan blande procent og pixels hvis det er nødvendigt. PHP Jeg har valgt at arbejde med PHP filer for min hjemmeside, da det giver mig en nem måde og lave rettelser i fx. min header eller footer, og efterfølgende automatisk opdatere sig på alle mine undersider i virksomheden. Dette gør at jeg ikke behøver og rettet det manuelt på alle siderne og at man undgår fejl eller forglemmelser.

11 .Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 1.Col 4 = 40%.Col 6 = 60%.Col 10 =100% KOMPOSITION.Col 3 = 30% 5%.Col 3 = 30% 5%.Col 3 = 30%.Col 10= 100%

12

13 FLOWCHART INDEX OM VIRKSOMHEDEN SERVICE RENOVERING NYBYG KONTAKT FACEBOOK KONTAKT KONTAKT KONTAKT

14

15 logo-3.png LOGO.Col 4 Width: 40%; Height: 190px; FLEXSLIDER.Col 10 Width: 100%; Height: 450px; MENU.Col 6 Width: 60%; Height: 190px; Padding-top: 132px; Padding-right: 39px; flexbillede.png flexbillede2.png SKELETTER OG STORYBOARD SERVICE ELEMENT WRAPPER.Col 10 Width: 100%; Height: auto; Margin-top: 120px; flexbillede3.png service.png Renovering.png Nybyg.png #SERVICE.Col 3 Width: 30%; Height: 322px; Margin-right: 5%; #SERVICE-TEXT.Col 3 Width: 30%; Height: 200px; Padding-left: 10px; Padding-right: 10px; #RENOVERING-TEXT.Col 3 Width: 30%; Height: 200px; Padding-left: 10px; Padding-right: 10px; #NYBYG-TEXT.Col 3 Width: 30%; Height: 200px; Padding-left: 10px; Padding-right: 10px; #NYBYG.Col 3 Width: 30%; Height: 322px; Margin-bottom: 100px; FOOTER.Col 10 Width: 100%; Height: 150px; #RENOVERING.Col 3 Width: 30%; Height: 322px; Margin-right: 5%;

16 RESPONSIVT Det var vigtigt for kunden at hans hjemmeside skulle være responsiv, og have en mobilvisning. Det nu er meget normalt at kunder finder en via mobilen eller tabletten, da google ikke vil vise hjemmesider som ikke er mobilvenlige på smartphones, hvis man bare søger efter en elektriker. MEDIA QUERIES Min website er bygget op af disse to media queries: screen and (max-width:470px)' screen and (max-width:920px)

17 RESPONSIVT

18

19 <META NAME= DECRIPTION CONTENT= /> Decription tag, skrives det tekst som bliver gråt i resultaterne i en google søgning. <META NAME= KEYWORDS CONTENT= /> Her skriver man nogle keywords omkring virksomheden. METATAGS <META NAME= VIEWPORT CONTENT= /> Dette tag bruges til at fortælle hjemmesiden at den er responsiv. <TITLE></TITLE> Det er den tekst der kommer frem i en google søgning, så det er smart ikke kun og skrive firma navnet, men også område og gode kompetencer.

20

21 PRODUKT

22