Opgaven Der skal designes en hjemmeside til en pensioneret revisor, som ønsker at starte en fritids beskæftigelse op, som privat revisor. Han Ønsker en hjemmeside der skal kort fortælle om hans forretning. Jeg blev kontaktet af en kammerat, som spurgte om jeg havde lyst til at lave denne side. Konspodancen omkring hjemmeside er sket via email frem og tilbage. Opgaven omhandler hjemmeside, logotype og visitkort. Målgruppe og Budskab Budskabet lå meget klart fra kunden af, han ønsker ikke en hjemmeside der får ham til at fremstå overkvalificeret til privat personer. Så målgruppen for hjemmesiden skal ramme folk med middel indkomst, der ønsker at få et personligt overblik over sin økonomi. De Grafiske valg Formattet på sitet er 960 x 960 px, og der benyttet html5 og css3, der benyttet copperplate font efter kundens ønske, da han allerede har brevpapir, hvor han benytter den font. Der er valgt som farve valg at benytte en mat sort og til kontrast af den, en mørk gul farve som tekst. Kompositionen på sitet, er indelt i firkanter som giver et hurtigt og nemt overblik over hvad han tilbyder, så man ikke bliver bebyrdet med tung læsning, kort og præcis. 11 Kvalitets vurdering I forhold til kundens ønske, blev det som det skulle, den skulle ikke skræmme privat personer væk, men hellere fange folk der ikke har den store økonomi til revisorer, ved at dele hjemmesiden op i kasser og have så lidt tekst som muligt, giver siden et hurtigt overblik over hvad der tilbydes. Kasserne er gode, til at give god overblik, og billeder der er tilkøbt er gode dog vil jeg mene at billedet i midten skal udskiftes og tegningen datteren har lavet ikke passer ind i resten af designet, men kunden tog meget kontrol af hvordan det skulle se ud, og da det er hans side, var det svært at mod argumentere for. Billedet under hvem er er et af de bedre billeder, den har også farver der passer godt ind med den gule og mørk grå. Jeg var lidt overasket over at det første logo var det han ville bruge, men det giver også en ide om at nogen gange er det første der bliver lavet det bedste. Jeg ville personligt vælge et andet selv. Der er benyttet lidt SEO i form af H1, meta tags osv, men efter at man laver en søgning på på google, er det faktisk nr.2 side der kommer frem, pga. navnet indgår i <li>, dette vil jeg på et senere tidspunkt gerne have lavet om på. Der er også en del ting jeg har lært senere, som jeg ville have gjort hvis jeg viste de ting som jeg gjorde i dag. Der skulle være bedre priotering af SEO og teksten i boxene skulle ikke være billeder, men inplementere tekst, for SEO ens skyld. Jeg ville også ønske at jeg havde bedre kontrol af forløbet, f.eks. stod det klart fra kunden af, at kassen uden indhold skulle udfyldes, eller hvis der skulle være tomme kasser, pr. design mæssigt, så skulle der mindst være 1-2 flere.
Opstarten Opstarten foregår gennem min kammerat, hvor han videre sender mails med kundens egen ide om hvordan hjemmesiden skal se ud. Han sender lidt inspiration til min kammerat som jeg så modtager senere. Disse billeder er inspiration fra kunden. 12
Kontakt til kunden I starten af projektet går kommunikation igennem min kammerat, jeg tager så kontakt til kunden selv, så kammeraten ikke skal blive ved med at videresende mails, og forsinke processen. Som man kan læse i mailen, er kunden meget optimistisk og lagder sig inspirer. 13 Første udkast Jeg kan hurtigt se at der brug for en mindre kurs ændring på hjemmesiden, så jeg kontakter kunden om at arbejde på et udksat. Jeg begynder at arbejde på en hjemmeside kode i HTML5 og CSS3, som jeg uploader til en test side jeg oprettede under test.screative.dk (mit eget site hvor jeg tester igangværende projekter.) Jeg laver et hurtigt logo på siden, som skulle ind, med tanke på at lave det om senere. Jeg tager lidt billeder og fylder mit 3x3 firkantede hjemmeside ud og indsætter lidt tekst.
Kontakt til kunden En del af starten på projektet foregik telefonisk, hvor igennem min kammerat (der mente at faderen ikke havde det store indblik i hvad der kunnes laves, så i stedet blev diskuteret igennem ham) Men vi fik lavet et overblik og konkludere at der skal laves en kontakt formular, så folk kunne skrive direkte til ham, via siden. Jeg kontakter ham derefter med et link hvor han kan se processen af hjemmeside, og giver ham en lille opdatering på hvad der skal ske mere. Feedback processen Han giver udtryk for det første udkast er meget tilfredstillende, så vi arbejder ud fra dette box-hjemmeside. Her begynder så en lang mail process, hvor kunden har mange inputs til hvordan hjemmesiden skal formes Det viser sig tydeligt, igennem processen, at han gerne vil være i kontrol af projektet, hvilket er ganske fint, det giver kunden mulighed for at kunne få fremstillet det han ønsker, og jeg er hans værktøj til dette. Dette er et eksempel på et typisk feedback fra kunden, med tiden skifter billederne ud, med billeder jeg enten selv tager eller billeder der bliver købt copyright på. <head> koden, hvor der lagt meta tags ind, til beskrivelse og søgning. Favicon er også lagt ind, dertil en del jquery til bl.a slideren og kontakt formularen. 14
Lang email process Her kommer det bl.a. til udtryk at kunden gerne vil have indflyelse på siden Der er meget skriven frem og tilbage, med små rettelser, bl.a. med snak om tilkøb af billeder der kunne benyttes. Datterens tegning af parasol og standen, var vigtig for kunden at få med ind. I mens de sidste rettelser var igang, tog jeg redesignet af det hurtige logo op og lavede en del forslag til nyt logo til ham. Tilføjelser til siden. Der bliver lavet en jquery slider, som skifter i mellem 3 billeder. Der blevet testet med forskellige slidere, hvor jeg benyttede en kaldet Nivo-slider. Jeg igennem hele processen, checkede siderne jeg lavet med browsere google chrome, firefox, safari og internet explorer. Jeg fik indført en div.kontakt, som jeg lavede en display:none på, når man så enten trykker på kontakt i hovedmenuen eller mail firkanten. Jeg bibeholdt dog muligheden nederst i footeren at få skrevet en mail, via egen browser/ mailprogram. Implenmentering af jquery slider Jeg modtager så dette visitkort senere via en indscanning, men som kunden selv skriver vil han gerne have et visitkort der holder den røde tråd, fra hjemmeside til visitkort. 15
Html opbygningen af kasserne, sammen med stylingen via CSS3 Opbygningen af de forskellige labels. 16 Den endelige hjemmeside Det endelig resultat, der var meget bytten rundt på kasserne, og et par tilkøb af billeder til siden. Kontakt formularen, som er skjult
Nuværende logo Logo Re Da jeg lavede hjemmesiden og underettede kunden om havde jeg lavet et midlertidigt logo, for at have noget at placere et logo ind i siden. Jeg gik så i gang med at redesigne. Jeg benyttede illustrator til dette, gemte en PDF med de færdige logo er. Da jeg ikke vil give en pdf fyldt med designs, valgte jeg 10 logoer jeg selv synes om og sendte dem videre til kunden. Tanker bag Revisor firma, kunne evt. bruge en mønt som logo, så den legede jeg lidt med her. Der er sat flueben, ved dem der er sendt til kunden. Jeg prøvede at lave det nuværende logo, lidt anderledes, et ganske fornuftigt resultat. Jeg arbejde lidt videre med de modificerede bogtastaver, og lagde lidt flot illustrativt fylde bag. Jeg benyttede lidt transform tool, for at se, hvordan man evt. kunne udnytte kun H et i navnet. Det endte så ikke med i forslags PDF en 17
Logo feedback Det viser sig så, at selv om han godt kunne lide logoerne, besluttede han sig for at bibeholde det midlertidige logo jeg havde lavet fra starten. Så logoet bliver bibeholdt, og jeg har nu noget at arbejde udfra med Visitkortet, i mens at de allersidste rettelser er på plads, og kunden har fået købt domæne, hvor klargøring til officielt hjemmeside kommer på plads. Så påbegyndes et design af visitkortet. 18
Redesign Igen som ved logoet, leges der med forskellige opsætninger, hvor jeg laver lidt forskellige variationer, som jeg så sammensætter i en PDF. Jeg tager udgangspunkt i det gamle visitkort, og medtager de samme informationer. Forside 1 Forside 5 Bagside 4 Forside 2 Forside 3 Bagside 1 Bagside 2 Forside 4 Bagside 3 Feedback Der skulle lige skrives frem og tilbage for at være sikker på hvilken version han snakkede om, men som han ønskede lavede jeg de ændringer som han ønskede. 19
Samligning En samligning af det gamle visitkort og det endelige resultat, med de ændringer som kunden ønskede. 110