Grafisk design. Webdesign til barbershop

Transkript

1 Grafisk design Webdesign til barbershop

2 Portfolio h1 Side 3 webdesign til barbershop Opgaven Barbershop i Horsens kom til os, for at få lavet et nye website. Afsender Barbershop er en barber salon i Horsens Centrum, med en helt unik atmosfære. Målgruppe Der er mange forskellige typer, der kommer hos Barbershop. Det er både de unge fyre, men også de lidt ældre herre, der nyder at komme ind i en Barbershop, og få en cognac mens de får barberet skægget. Barbershop er for dem der gerne vil betale en lidt højere pris, og til gengæld få en oplevelse ud af deres besøg. Det er personer, der kan lide at der bliver kræset om tingene. Process Møde for at få forståelse af krav/ønsker Inspirationssøgen på nettet Skitsering Layout opsat i Photoshop Design af designpræsentation til kunden Format Vi valgte at lave Barbershop til en onepage, da det ville passe rigtig godt til den stil og stemning vi gerne ville have frem. Desuden havde de fået taget nogle super gode billeder, som ville gøre sig godt, hvis de kunne få lov at fylde hele bredden af skærmen. Alt indhold skal dog holdes inden for en wrapper på 940px; det er max. bredde i vores CMS, bubbleweb. I højden har siden fået lov at få meget plads, da jeg synes det var vigtig, at der var godt med luft mellem elementerne, for at få en mere overskuelig side. Desuden følger navigationen med ned af siden når du scroller, så brugeren har let mulighed for at gå til en anden sektion. Stil og stemning Hjemmesiden skal afspejle den følelse man får når man er i salonen. Det skal være klassisk og eksklusivt, men samtidig med et rustisk, varmt og hyggelig udtryk. For at få lidt varme og spil ind på siden brugte jeg en svag papirlignende tekstur som baggrund. Typografi Som udgangspunkt bruger vi Google Fonts til alle websites, da disse er websikre, og er lette at implementere i koderne. Så jeg søgte efter noget der passede til det udtryk jeg gerne ville have. Brødteksten skulle være enkel og letlæselig. Jeg valgte at bruge Open Sans, som er meget brugt på nettet, pga. dens neutrale, letlæselig og venlige udtryk. Open Sans er en sans-serif font, og den har desuden mange forskellige styles, så der er stor mulighed for at skabe variation i teksten. Mine overskrifter måtte gerne skille sig lidt ud, da de er en stor del af designet. Her valgte jeg Medula One. Den er lidt gammeldags med et lidt krøllet, håndmalet/skilte look men alligevel med et moderne touch. Fonten er sans-serif, men har alligevel noget der minder om fødder på nogle af bogstaverne, som bidrager til det gammeldags look. Jeg har brugt fonten i 3 forskellige størrelser, for at skabe noget variation. Farver Vores kunde kan godt lide det helt klassiske, og nævnte at han godt kunne tænke sig sort/grå og hvid. Jeg synes også det skulle holdes neutralt og i dæmpede farver, men alligevel med en lille smule varme i, da deres salon også har en meget varm/rustik atmosfære, hvor træ sætter et stort præg på indretningen. Derfor valgte jeg at gå lidt over i sandfarver for at det ikke blev alt for sort/hvidt og koldt, hvilket også faldt i god jord hos kunden. Komposition Siderne er bygget op så de forskellige sektioner skifter mellem at være tekst på sandfarvet baggrund og store billeder/slidere. Som udgangspunkt har jeg brugt vores 3-kolonne-grid til at bygge siden op med indhold. Der er ikke så meget indhold, og det passede godt med at alt indhold gik op i 3. Jeg har valgt at centrere alt indhold da det gav mest harmoni på siden. Vi har arbejdet lidt med i hvilken rækkefølge tingene skulle komme, og i starten var der egentlig mest fokus på salg, da behandlinger, produkter og tilbud lå øverst. Vi valgte dog at sætte Nick og Omid op som det første for at fokusere på det personlige. Kvalitetsvurdering Jeg synes siden er blevet super god. Vi har ramt det helt rette udtryk i forhold til hvordan salonen er, og hvordan deres personligheder er. Jeg synes vi har leveret et super godt produkt, hvor der er en god stil - det er lykkedes os at ramme det rette udtryk i forhold til Barbershops personligheder og indretning. Siden kan ses på fra september. Der er sidenhen kommet få ændringer i designet, bla. i headeren og navigationen.

3 Grafisk design webdesign til barbershop Portfolio h1 Side 4

4 Grafisk design Moodboard Portfolio h1 Side 5

5 Grafisk Design Portfolio h1 Side 6 Inspiration

6 Portfolio h1 Side 7 Fontvalg Søgning på google.com/fonts efter websikre fonte: Medula One til overskrifter: abcdefghijklmnopqrstuvxyzæøå abcdefghijklmnopqrstuvxyzæøå @%&(),.:!? Mange google fonte har ikke Æ, Definering af H1, H2, H3 og p i webdesignet i Photoshop: Ø og Å, så det var selvfølgelig vigtigt at sikre sig at fonten havde disse bogstaver, da siden er på dansk. Fonte som jeg noterede som mulige valg til mine overskrifter: Lobster 1.4 Lobster Two Medula One Gabriela Mate SC Oleo Script Prata Copse Courgette Sancreek Brødtekst: Open Sans er valg til brødtekst, pga. dens læsbarhed og neutrale udtryk, som står i fin kontrast til overskrifterne.

7 Portfolio h1 Side 8 Valg af farve 1. Kunden nævnte at han godt kunne lide sort/grå og hvide farver. Dog syntes jeg at det blev lidt for koldt, og at det ikke passer så godt til stilen på deres billedemateriale. 2. Jeg tænkte mere i varme brune farver, for at ramme noget rustikt, og matche alt det træbeklædning de har på vægge i salonen. Dog synes jeg det blev lidt for brunt og feminin. 2. Jeg valgte at gå med en blandning af de 2 første forslag. Farverne her passer godt til alle billederne, og den har stadig en lille smule varme i sig.

8 Portfolio h1 Side 9 tekstur For at baggrunden ikke bare blev hvid, søgte jeg på subtlepatterns.com efter noget baggrundstekstur, så baggrunden kunne blive lidt mere rå, og der blev lidt spil på siden. 1. Her ses baggrunden i helt hvid. Jeg synes det blev lidt for klinisk, og der mangler noget hygge over det. 2. Jeg tilføjede en Pattern Overlay effekt på mit hvide baggrundlag, så hele siden fik tekstur på sig. Jeg synes dog stadig det var lidt koldt i udtrykket. 3. Jeg gav mit baggrundlag en lysbrun fyldfarve, og satte lidt opacity på min Pattern Overlay effekt. Nu har det det ønskede udtryk.

9 Portfolio h1 Side 10 styling af headings For at gøre mine overskrifter mere spændende tilføjede jeg lidt grafik omkring det. Det endelige valg er inspireret af logoet, som også har 2 små prikker i siderne. Jeg synes de tynde streger fungerede bedst, og var lidt mere stilede. dæmpede billeder Nogle af billederne var meget lyse, og for at få et mere rolig og dæmpet udtryk, har jeg forskellige steder i designet brugt nogle sorte bokse med opacity til at lægge over billederne. Jeg synes det skaber en god effekt, da billederne bare er der for at skabe stemning, og de behøver ikke være vildt tydlige. Desuden er nogle af billederne ment som baggrund, hvor der skal være tekst på, og ved at lægge det sorte lag over bliver teksten mere letlæselig. styling af knapper Processen i at designe knapperne. Endelige knap Knap med hover-effekt

10 Portfolio h1 Side 11 Komposition Jeg valgte at arbejde med vores 3-kolonne grid, da der ikke er særlig meget indhold, og det ikke var nødvendigt at dele det mere op end 3 kolonner. Jeg havde først sat mit indhold til at være venstrejusteret, men jeg ændrede dette til at være centreret. Jeg synes det giver et bedre udtryk og løsner lidt op på siden. Det harmonerer også bedre med overskrifterne. Venstrejusteret tekst Centreret tekst