ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

Transkript

1 Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er primært nye kontakter samt potentielle kunder. Budskabet er at give brugeren en kort inspirerende præsentation af firmaet, og sitet skal fungere som et kreativt visitkort.

2 PROCES Første del i processen er at klarlægge, hvor meget sitet skal indeholde samt stilen. I samråd med kunden udarbejdes et flowchart. Jeg har frie hænder til udformningen af designet, eneste krav er enkelthed og minimalisme, så sitet afspejler kundens indretningsstil. Derudover skal sitet indeholde et galleri, som fremviser kundens tidligere indretninger. Til første udkast vælger jeg at tage udgangspunkt i de redskaber, som en indretningsarkitekt benytter. Kunden synes, idéen er god, men er bange for, at det virker for gammeldags med eks. blyant, linial osv., da størstedelen af arbejdet, ligesom i alle andre brancher, primært foregår på computeren. Til andet udkast afprøver jeg en anden idé med udgangspunkt i logoets stil og farver. Logoet er meget enkelt med rene linjer, hvilket kunden gerne vil overføre til sitet. En indretningsarkitekt indretter forskellige rum og får tingene til at passe sammen, så det hele går op i en højere enhed. Jeg vælger at opbygge det nye layout over moduler med kasser i forskellige størrelser og farver, som kan tilpasses alt efter indholdet. Kunden godkender dette layout, hvorefter jeg opbygger undersiderne. Profil Forside Inspiration Kontakt

3 DESIGN Design og stil for hele sitet er enkelt med rene linjer på grund af modulopbygningen. For at bryde dette og skabe dynamik er der brugt farver og billeder med mange kontraster, så det hele ikke bliver alt for kedeligt og simpelt. Logoets farver grå og orange er gennemgående for hele sitet, hvilket skaber sammenhæng og genkendelighed. Farverne komplimenterer hinanden og skaber dynamik. GRAFISK DESIGN

4 ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på skærmen fremtræder mere klart end antikva fonte. Fonten er meget enkel i snittet og passer godt til resten af sitet. Brødteksten får en stor linjeafstand for at gøre teksten mere læsevenlig på skærmen. Jeg vælger at benytte Google fonten til al teksten, da brødteksten er så kort som den er. Normalt ville man benytte en websikker font til eks. brødtekst, for at mindske loadningstiden og kun benytte Google Fonts til overskrifter og menupunkter. Billederne til forsiden skiftes ud mange gange, og det har krævet en del sparring med kunden for til sidst at komme frem til de tre billeder, som skal indikere de tre menupunkter: profil, inspiration samt kontakt. De valgte billeder er farverige, hvilket giver liv til modulopbygningen. Farver er et stærkt virkemiddel i indretninger ligesom i grafisk design, hvilket fremgår af billederne i galleriet på undersiden inspiration. I udvælgelsesprocessen til galleriet er der gjort meget ud af, at vælge billeder, som tydeligt illustrerer erhvervsindretning, fremfor indretning af private hjem. Der er også lagt stor vægt på at vælge indretninger med forskellige stilarter, for at vise så stor diversitet som muligt.

5 GRAFISK DESIGN RESPONSIVE WEBDESIGN Responsive webdesign er et vigtigt element i udvikling af hjemmesider og jeg vælger yderligere at tilpasse designet af sitet til tablet samt smartphone i både høj- og bredformat, så det virker optimalt på forskellige platforme. Dette kræver en del ekstra tid både i designfasen, samt især i den efterfølgende programmering, men er helt sikkert det hele værd i forhold til brugeroplevelsen. Det er lidt af en udfordring, at få det enkle design til at fungere på flere forskellige platforme, især at få designet tilpasset det lille smartphone format. Normalt starter man med det mindste format, for så at arbejde sig op i størrelsen. Jeg vælger at fjerne nogle af modulerne i det mindste format til smartphone pga. skærmstørrelsen, men farver og linjerne bevares, så der stadig er sammenhæng og genkendelighed på de forskellige platforme.

6 FUNKTION Sitet er kodet i Dreamweaver med udgangspunkt i HTML 5 og CSS3. Samtlige sider er opbygget over samme wireframe. Logoet ligger i et a-tag, så man altid kan komme tilbage til forsiden ved at klikke på dette. På kontakt siden er adressen indsat i en mail to tag, så man ved at klikke på mailadressen åbner mailprogrammet. Google Maps illustrerer beliggenheden, denne funktion er optimal på smartphone og tablet, hvor det kan benyttes som rutevejledning. Billedgalleriet på inspirations siden er opbygget over et galleri kaldet responsive slides med javascript, som er fundet på nettet. Det er et meget simpelt galleri, som blot skifter billede og herved fremviser forskellige indretninger. Sitet har et favicon med de genkendelige farver grå og orange samt e et fra enrico indret. Alle siderne har title tags samt description tags for at oppe SEO værdierne, så sitet får en god placering ved Google søgning. HEADER MENU ARTICLE SECTION ASIDE FOOTER e

7 KODNING CSS3 understøtter media queries, som indsættes i stylesheetet og fungerer som et filter, der aktiverer/deaktiverer styles alt efter størrelse på skærmen eller type af medie. I alt har jeg lavet fire forskellige media queries til sitet. Alt tekst er stylet i enheden em, så de skalerer efter skærmstørrelsen. Til breddeværdier har jeg benyttet % som enhed, så disse også skalerer. Undervejs i programmeringen er siden tjekket i forskellige browsere: Safari, Google Chrome samt Explorer. Yderligere er den testet på forskellige platforme: storskærm, bærbar, ipad og iphone. Til allersidst er koden valideret hos W3C. GRAFISK DESIGN