1. No category

GRAFISK DESIGN
Stilren hjemmeside med tilhørende mobil-site
til frisør Røgilds & Villemoes i Brønderslev. Sort,
enkel og elegant uden at være prangende.
Skitse til forsiden.
Skitse til galleri.
BAGGRUND & INSPIRATION
Frisør Røgilds & Villemoes ønskede en enkel og stilren
hjemmeside, som de nemt selv kan vedligeholde via CMSsystemet Drupal. Siden skal afspejle salonens stemning
og udseende. Jeg tog derfor udgangspunkt i indretningen
og interiøret, som er meget stilrent og strømlinet. Da
frisør-faget handler om kontakt mellem mennesker, var
det vigtigt for mig også at fremhæve personalet på en
imødekommende og indbydende måde.
en optisk top-ramme for sidens indhold. Update-modulet
er sat i højre side og har et dæmpet udtryk, for at give
sidens øvrige indhold mere spillerum.
BRUGEREN I FOKUS
DESIGNPARAMETRE & USABILITY
Kunderne hos Røgilds & Villemoes betaler gerne lidt ekstra for klipningen i de eksklusive,stilrene omgivelser og
personlige kontakt. Derfor er det ganske essentielt, at
kunderne får den samme helhedsoplevelse, når de besøger hjemmesiden, hvilket styrker forretningens brand.
Tilgår brugeren siden fra et browservindue under 480px,
fx sin smartphone, aktiveres et alternativt css-styling, så
brugeren får en bedre, mobil designoplevelse.
Jeg har truffet en række valg i designprocessen, da de forskellige parametre påvirker hinanden. Samspillet mellem
disse er helt essentielt, da de tilsammen danner designet,
det æstetiske udtryk og brugerens samlede oplevelse. Til
at underbygge mine valg har jeg bl.a. brugt gestaltloven
om lighed for at skabe optiske rammer om indholdet. Alle
links har diskrete, men virkningsfulde ”hover”-effekter
for at hjælpe brugeren med at navigere rundt på siden.
KOMPOSITION
Jeg har brugt skygger for at skabe et optisk rum og tilføre designet dybde, da det på skærmdesign, er vigtigt
for brugeroplevelsen. Det store foto på forsiden skaber
blikfang og står i kontrast til forsidens øvrige elementer.
Primærmenuen er placeret øverst, under logoet og danner
Topbilledet inde­holder tema­tiserede stemningsbilleder
fra salonen. Under­sidernes øvrige billeder er kvadratiske
– nærmest ikoniske – og sat med faste marginforhold for
at holde designet stramt og skabe optisk luft.
Form, farver og billeder
Den mørke baggrund afspejler det matsorte gulv i butikken. Typografien og rammerne om sidens billeder er
hvide, ligesom butikkens rene vægge, som er ”rammerne”
om salonen. Topbillederne på undersiderne er i farver,
så de bryder designets sort/hvide linje og tilfører siden
liv og dynamik. Forsidebillederne er leveret af L’oréal og
16
giver – med sit stilrene udtryk – brugeren et indtryk af
professionalisme, wellness og elegance. Størstedelen af
salonens kunder er kvinder – det afspejler billederne også.
Logoet står klart og enkelt i sidens top med et svagt gråt
islæt, for grafisk at integrere det med sidens mørke toner.
index
Kontraster
For at bløde den mørke baggrund op, er der tilføjet et grainfilter. Dette udgør en god kontrast til sidens rette linjer, den
stramme typografi og de skarpe fotos. Der er stor kontrast
mellem den sorte og hvide farve, ligesom de forskellige
elementer på siden varierer i størrelse, hvilket skaber et
hieraki og gør det nemt for brugeren at orientere sig og
vælge mellem vigtige og mindre vigtige informationer.
personale
galleri
produkter
kontakt
booking
ekstern
side
Typografi
Brødteksten er en Source Sans Pro (Google Font), som er
let og enkel. Jeg har valgt en stor skydning i brødteksten
for ikke at denne skal være for tungt et hvidt element, da
øjet også opfatter tekstelementer som former.
subgallerier
Sidens øvrige typografi er også en Google Font – Open
Sans Condensed – og står med versaler, hvilket giver en
god kontrast til brødtekstens minuskler. Den har et venligt,
grafisk udtryk med åbne former. I primærmenuen har
jeg spærret de smalle karakterer, så linkene står klare og
optimalt læsevenlige.
Mappestruktur i lag-paletten.
individuelle
personalesider
www.rogildsogvillemoes.dk
17
19
ABCDEFHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
0 1 2 3 4 5 6 7 8 9 !&()?#
Open Sans Condensed (Google Web Font)
ABCDEFHIJKLMNOPQRSTUVWXYZÆØÅ
abcdefghijklmnopqrstuvwxyzæøå
0 1 2 3 4 5 6 7 8 9 !&()?#
Source Pro Sans (Google Web Font)
Photoshop rulers definerer designets grid og spalter.
Designelementer.
RGB 40 40 40
med Grain-filter
RGB 30 30 30
med Grain-filter
Vektor-ikoner til personalets Blå Bog.
Profilbillede til Røgild & Villemoes på Facebook.
20
21