Hjemmeside design til Everyday Health

Transkript

1 Graf isk Design

2 Hjemmeside design til Everyday Health Graf isk Design/Dokumentation Opgave Ejen af Everyday Health klinikken i København, kunne godt tænke sig at hendes nuværende hjemmeside blevet lavet om, da hun har en del elementer på siden, som hun ikke rigtig synes fungerer. Så jeg har lavet et forside forslag til den nye hjemmeside for at vise hende, hvilken stil jeg synes hun skulle gå efter, så det fungerer bedst for hende. Arbejdsproces I starten af min process har jeg arbejdet meget inde i Photoshop, for at afprøve nogle forskellige ting, en form for brainstrom, så kan jeg bedre se det for mig. Jeg har kort haft en samtale med kunden ansigt til ansigt, hvor hun har fortalt lidt om hvad hun gerne vil have gjort anderledes på den nuværende. Idégenerering - Har kigget lidt på internettet for at få lidt idéer, hvorefter jeg så har afprøvet lidt i Photoshop. Det endelig design blev stillet op i Photoshop i den rigtige størrelse. Billederne blev slicet inde i Photoshop, så de passer til web. De skal have den rigtige opløsning på 72 ppi. Kodning: Der blev oprettet index, styles, osv., herefter gik kodningen i gang. Så skulle siden gøres responsive, så den også kan bruges på andre medier end PC. Rettede mit Photoshop design til, da jeg undervejs i kodningen har foretaget enkelte ændringer. Til sidst blev der lavet en Mock-up hvor min kunde kan se, hvordan slut designet kommer til at se ud på de diverse medier. Hele kodningen har jeg lavet i Sublime Text. Derudover har jeg arbejdet en del i Photoshop, men også lidt i Illustrator. 2

3 Research I min research har jeg gjort meget brug af internettet da jeg ikke har så meget erfaring på dette område, altså med massage og skadesterapi. Det er heller ikke ligefrem det man kalder for Wellness så det var faktisk lidt svært at finde inspiration, men har selvfølgelig også taget lidt udgangspunkt i hendes nuværende hjemmeside. Valg af målgruppe Målgruppen er meget bred, da klinikken har meget at byde på inden for massage. Placeringen midt i København gør det også kun bedre. Derudover tilbyder de også virksomhedsmassage, dvs. at de også kører ud til større virksomheder og hjælper de ansatte med massage her. Derfor vil jeg sige at målgruppen ligger mellem år til denne hjemmeside. Der er tale om det moderne segment når man bruger Minerva -modellen. Som man kan se forneden så er det en blanding af det grønne og blå segment. En blanding af mænd og kvinder som går meget op i sundhed og motion, men samtidig er det også tit dem som har stillesiddende arbejde, hvilket gør at man nemt får skader. Idégenerering Processen her har jeg udarbejdet i Photoshop. Det er den bedste måde for mig og udvikle idéer, for her føler jeg bedre at jeg kan se tingene for mig, samtidige med at jeg kan afprøve en masse ting. Så føler jeg mig også mere sikker i at ramme den rigtige målgruppe. 3

4 Valg af farver I forbindelse med valg af farver har jeg gjort brug af hovedsagligt neutrale farver, da det er farver alle kan forholde sig til. Den eneste farve som skiller sig lidt ud er en grøn pantone 347 som der i forvejen bruges i logoet, og da kunden ikke ønsker dette lavet om beholder jeg farven. Jeg bruger den som et gennemgående temaet gennem hele designet, så der er en rødtråd hele tiden. Synes også den giver et godt twist til hele designet, samtidig med at den er beroligende og se på. Farven grøn symboliserer f.eks.: Sundhed (Kan have helbredende kraft) Energi Fornyelse Håb Friskhed Natur og miljø Valg af fonte Når man snakker om fonte i forbindelse med hjemmeside design skal man undersøge det godt igennem, fordi det er meget begrænset af hvad der er af fonte som kan bruges til web. Derfor har jeg valgt at gøre brug af to meget standard fonte, som jeg stadig synes passer meget godt til mit design. Den ene Baskerville med seriffer, og den meget almindelige Arial uden seriffer. Synes det giver spil til designet, når de er så forskellige. Arial har jeg så valgt at bruge til de mindre tekster, da det er nemmere at læse på en computer. Arial - Everyday Health Baskerville - Everyday Health 4

5 Valg af design Valg af design har jeg gjort udfra at det er nemt for alle at bruge, men har så tilføjet små moderne detalje, såsom direkte adgang til Facebook, Online booking og den smarte home-knap som de flest kender, så man altid kan vende nemt tilbage til startsiden. For at lave dette design har jeg skulle finde en mellemvej. Alle kender til at når de høre ordet massage, det første man tænker på er wellness, men i dette tilfælde er det langt fra wellness. Massagen minder mere om en form for behandling. Responsive Ikke nok med at designet fungerer på almindelig pc, har jeg valgt også at lave det responsive, så det også fungerer på andre medier. I dette tilfælde drejer det så om ipad og iphone. Det gør det meget nemmere for min kundes kunder, så man ikke altid skal være i nærheden af en pc for at gå ind på hjemmesiden. Den største ændring er nok når man går fra pc-udgaven, eller i mit tilfælde imacen og ned til en iphone størrelse. Når man tjekker en hjemmeside ud på sin iphone, så er det kun de vigtigste oplysninger man vil have, såsom kontakt og booking i dette tilfælde. Derfor har jeg valgt at fjerne det store billede foroven, da det ikke gør nogen gavn i lille størrelse. Derudover har jeg valgt at sætte de tre punkter med billeder på en række, for synes det er meget nemmere at håndtere når man sidder med telefonen. Sådan noget som den lille spalte med nyheder har jeg valgt at fjerne på både ipaden og iphone, da det er knap så vigtig viden. Den lille firkant foroven på ipad og iphone er et menu-ikon, så når man hover musen hen over den, så kommer menuerne frem. Der er på disse medier ikke plads til en lang menulinje. 5