HHBR
Design
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 HHBR” 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å HHBR på google, er det faktisk nr.2 side der kommer frem,
pga. navnet HHBR 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.
Design
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
HHBR
HHBR
Design
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.
HHBR
Design
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
HHBR
Design
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
Design
Html opbygningen af kasserne,
sammen med stylingen via CSS3
Opbygningen af de forskellige labels.
16
Den endelige hjemmeside
HHBR
Det endelig resultat, der var meget bytten rundt på kasserne, og et par tilkøb af billeder til siden.
Kontakt formularen, som er skjult
Design
HHBR
Nuværende logo
Logo ReDesign
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
Design
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
HHBR
Design
HHBR
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
HHBR
Design
Samligning
En samligning af det gamle visitkort og det endelige resultat, med de ændringer som kunden ønskede.
110