JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

Transkript

1 JEG GIVER SELLS.DK NYT LIV MED ET MODERNE RE-DESIGN.

2 Grafisk design

3 Grafisk design Opgaven Jeg har fået til opgave at re-designe Sells.dk. Sitet skal benytte elementer fra en kampagne, der tidligere er blevet lavet til Unisport.dk. Sitet skal være moderne i sit design og være optimeret til visning på smartphones og tablets. Det skal fokusere på tre punkter: Spillerne, UNIiD og info om salg. Forberedelser Jeg lavede et moodboard ud fra den tidligere kampagne, som var online på Unisport.dk. I forhold til opsætning af websites følte jeg ikke at undersider ville høre hjemme på dette site. Det skulle være en form for landing page, hvor man hurtigt kunne modtage budskabet. Til det lavede jeg en wireframe, som viser opbyngingen af websitet. Sitemap udelades, da websitet bliver designet som et one-page layout uden undersider. 16

4

5 Grafisk design Moodboard Mit moodboard blev sat sammen af elementer fra den allerede eksisterende kampagneside på Unisport.dk, samt lidt produktbilleder og logoer.

6 Wireframe For at få et overblik over mine tanker med designet lavede jeg en wireframe. En wireframe er et simpelt udkast til et design. Man skitserer sine idéer, får feedback og ændrer på dem igen. Wireframen på denne side er den endelige.

7 Grafisk design Fontvalg I stedet for at bruge web-safe fonte, valgte jeg at benyttet Google Fonts til at få specielle fonte på websitet. Jeg valgte PT Sans som font til menupunkter og overskrifter. Fonten er letlæselig og gør sig godt i dens bold snit. Samtidig er det en font, der er populær og bruges mange andre steder, f.eks. Børsen, så det vil være en font man genkender. Open Sans valgte jeg som font til teksten på websitet. Ligesom PT Sans er den let læselig og pæn. Den fungerer godt som brødtekst og matcher godt op sammen med PT Sans. Den bruges i dens regular snit. Målgruppe Sitet skal henvende sig til alle målmænd. Blikfanget er de superliga målmænd som man, som fodboldinteresseret, allerede kender. De står inde for produktet. For at tilgodese både unge og ældre brugere holder sitet en simpel stil og er samtidig kompatibel med forskellige devices så som iphone. PT Sans abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Open sans abcdefghijklmnopqrstuvwxyzæøå ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ Farvevalg Farvevalget på sitet stammer fra de tidligere kampagner. Den blå farve til overskrifter stammer fra røgen og den grå farve er taget fra handskerne. Farven på menupunkter er hvid og farven på teksten er sort. # #e9e9e9 # #ffffff Virkemidler Et vigtigt virkemiddel på websitet er, at det er responsivt. Det vil sige at, det tilpasser sig alt efter hvilken platform man besøger siden fra. Dette klares med css frameworket bootstrap. Et andet virkemiddel som giver liv til sitet, er baggrunden. Den blå røg bliver tilføjet som et cover. Et cover fylder hele browseren og skalerer sammen med den. På den måde får man en følelse af, at elementerne oven på baggrunden bevæger sig, fordi røgen ændrer sig. En meget moderne effekt som er blevet mulig med CSS3. Endnu et virkemiddel som gør sitet lækkert er, at et klik på et menupunkt vil resultere i en smooth scroll til det relevante område takket være jquery. 20

8 Designet Det endelige design af websitet kan ses her til højre. Det er pt. meget oppe i tiden at lave et one-page layout, så sitet sættes op som én lang side. I toppen har vi introduktionen til, hvad sitet handler om. Unisport, målmandshandsker fra Sells og de danske spillere der benytter dem. Der er en kort info om hver spiller, samt et link der leder til netop den handske, spilleren benytter. Næste sektion fortæller om UNIiD, som er personalisering af sine målmandshandsker. Formålet er, at informere besøgende om, at de kan få deres eget navn på handskerne. Sektionen derefter forklarer den besøgende, at handskerne kan købes hos Unisport.dk. Sektionen indeholder endnu et billede af nogle målmandshandsker, igen med personalisering, samt et link til Sells-kategorien på Unisport.dk. Sidste sektion er en video fra den tidligere kampagneside. Videoen bliver indlejret fra YouTube. Gestaltlovene Uden at være opmærksom på det benytter man ofte gestaltlovene i sit webdesign. I designet har jeg selv benyttet dem på følgende måder. Loven om figur og baggrund; I det røgen i baggrunden tydeligt ligger bag ved kasserne med indhold. Loven om nærhed; I det teksten har en tydelig overskrift som binder dem sammen. Loven om lighed; I det at faktabokse omkring spillerne ligner hinanden. Loven om forbundethed; I det at hver spillers billede er forbundet med deres egen faktaboks. Loven om lukkethed; I det indholdet tydeligt er delt op i forskellige sektioner.

9 Grafisk design Før & efter Det gamle website bestod kun af et stort billede. Der var ingen dynamik og ingen links der ledte videre til salg. Websitet fungerede kun som et opslag for at finde kontakt på salgs- og marketingsafdelingerne. Ovenstående resulterede også i, at der kom mange useriøse henvendelser fra unge fans af produktet, som ønskede sponsorater. Dette problem er elimineret på det nye website, idet der ingen kontaktinformationer findes. Alle købere ledes videre til Unisport.dk, som er den danske distributør af produkter fra Sells. SEO Eftersom det gamle website kun bestod af ét billede, var SEO ikke noget der var tænkt over. På det opdaterede website, er der korrekt title-tag og meta-description samt meta-tags er udfyldt. Derudover er der tiføjet Open Graph meta data, som gør, at websitet vil få et perfekt udseende på f.eks. Facebook, når en bruger vælger at syntes godt om. Bestemte elementer rundt omkring på websitet, f.eks. målmandshandskernes navne, er markeret med et <strong>-tag for at gøre søgemaskiner opmærksomme på netop de ord. 22

10