GRAFISK DESIGN. webdesign af pl.dk

Transkript

1

2 Webdesign af pl.dk Opgavebeskrivelse Bold.dk og 6 eren har slået sig sammen for at skabe Danmarks største Premier League fodboldportal, PL.dk. Hjemmesiden skal indeholde mange informationer, og samtidig have plads til standard banner reklamer, da hjemmesiden drives af kommercielle indtægter. De ønskede en lys, overskuelig og indbydende hjemmeside, med en blå gennemgående farve og fokus på brugervenlighed. Mine overvejelser For at opnå de ønsker der var bag den nye hjemmeside, var mine tanker at skabe overskuelighed med brede margener, og klare opdelinger hvor brugeren lynhurtigt kan finde de nyeste fodboldartikler. Her var min største inspirationskilde bold.dk som er danmarks mest besøgte fodboldportal. Jeg tror bold.dk er så populær fordi der er en gennemtænkt struktur af indholdet, og det har jeg forsøgt at gøre kunsten efter. Budskab Hjemmesiden skal udstråle kvalitet og de bedste Premier League nyheder. Det var særdeles vigtigt at signalere en klar sammenhæng til Premier League. Målgruppe Den primære målgruppe er den mandlige fodboldfan, og tv-seer i alderen år. En person som vil have alle nyhederne, hurtigt og overskueligt. Wireframes er lavet i illustrator. Hjemmesiden er designet i Photoshop. Demo-site opsat i Dreamweaver. 3

3 Brainstorm og inspiration Intet baggrundsbillede Klublogoer som navigation Lyst og Stilrent Minimalistisk link liste med mange nyheder maskulin primær navigation med fokus farve simpelt Tekst logo brede magener for bedre overblik Slider som blikfang til vigtig content 4

4 Moodboard 5

5 Wireframe og funktioner Header I headeren er der flere funktioner, udover logoet og menuen er der nemlig to bokse, som skal bruges til forskellige formål som livescore, eller til at interagere med brugeren i form af konkurrencer eller afstemninger. Der er også placeret en række med Engelske fodbold klublogoer, som bliver klikbare og linker ind til mere information om klubben. Slider til vigtige fokuspunkter Her bliver der designet en slider, som skal indeholde de absolut vigtigste nyheder. I hvert slide, skal der være et billede, samt en overskrift og en kort beskrivende tekst. Liste med alle nyheder Ligesom de har på bold.dk, skal der her være en simpel liste med de seneste nyheder, som man kan klikke sig ind på for at læse. Disse links bliver en anden farve når man har læst dem, for at brugeren let kan se hvilke nyheder der allerede er læste. Der vil også være mulighed for at sortere efter seneste, populære eller video-nyheder. BANNER AD LOGO INFOBOX INFOBOX BRAND LOGO MAIN NAV CLUB LOGO NAV TOP STORY SLIDER BANNER AD NAV LINK LIST BLOG BOX MATCH SCHEDULE LINK LIST BANNER AD MOST VIEWED VIDEOS SOCIAL ICONS Kommercielle bannere Her er gjort plads til 3 standard størrelse bannere, 930x180 og 300x250. De 2 første bannere på siden er placeret så brugeren kan se dem ved første øjekast, uden at skulle scrolle ned. Blog boks Det nyeste blogindlæg fra eksperterne vil blive vist her. Kampoversigt I kampoversigten vises kommende kampe med tid og dato. Dette er klikbart så brugeren kan komme videre til informationer om kampen. Mest sete videoer Her vil blive vist de 3 mest sete videoer lige nu. Footer I footeren skal der laves links direkte til forskellige sociale sites og laves 3 bokse. En til et blogfeed, en til instagram feed og en til et nyhedsbrevs tilmeldings modul. BLOG FEED INSTAGRAM FEED NEWSLETTER COPYRIGHTS 6

6 Mock-ups Første udkast Her er et par af de første udkast jeg designede. Efter en dialog med bold.dk og 6 erens digitalafdeling, blev vi enige om at designet var i den rigtige retning, men at der skulle rettes på et par ting. Der skulle blandt andet laves større margener, så sitet ville få mere luft, og i billedrotationen ønskede de et større billedfelt. Klublogo navigationen skulle også helt væk. 7

7 Typografi og farve Menuer og overskrifter God display typografi til større overskrifter. 415 glyffer Kun manjuskler Condensed Sans Serif Links og brødtekst Lucida grande er især god til meget små skriftsnit glyffer Sans Serif Variere lidt i linjestørrelse Websikker font, til de platforme og browsere vi kender i dag. BEBAS NEUE A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å Lucida Grande a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å GRØNSVÆREN / BOLD.DK R: 113 G: 162 B: 47 PREMIER LEAGUE / 6 EREN R: 56 G: 116 B: 178 MASKULINITET R: 36 G: 36 B: 36 Den grønne farve symboliserer grønsværen og repræsenterer bold.dk. Den bliver brugt på hjemmesiden i footeren og i ekspertbloggen. 6 erens og Premier Leagues nøglefarve er blå, og det var derfor meget oplagt at bruge som dominerende farve på hjemmesiden. Uden at ødelægge det rene og lyse design, tilføjede jeg den mørkegrå farve, for at tilføre lidt ekstra maskulinitet, da målgruppen er mænd. 8

8 Brugervenlighed og kommunikation Navigation I topnavigationen og linknavigationen er det menufelt man er på gjort aktivt, på den måde kan brugeren altid se hvor de er på hjemmesiden. Margener Mellem hver felt/boks har jeg lavet brede margener, som giver mere luft til hele hjemmesiden. Dette gør at brugeren let kan danne et overblik. Her gælder gestaltloven om nærhed. Felter/bokse Margenerne er med til at opdele hjemmesiden i bokse, hvilket også hjælper brugeren til at forstå hvad der hører sammen. Her gælder gesteltloven om lukkethed, da jeg også har lavet en baggrundsfarve i nogle felter, for at gøre boksen tydeligere. Reklamebannere Jeg har forsøgt at inkorporere bannerne på en måde, som ikke går på kompromis med hjemmesidens design, så bannerne falder naturligt ind. Social media I footeren kan man via ikonerne, navigere direkte til forskellige social media platforme. Der er hover effekt og en title som kommer frem når musen føres ind over. Her gælder bl.a. gestaltloven om forbundethed, da der er en streg som forbinder ikonerne. Farvekontraster Der er høj kontrast mellem farverne, hvilket hjælper til at skelne mellem hjemmesidens felter. Den blå bruges aktivt i links og menupunkter til at lede brugeren til at klikke sig videre ind på siden. Typografiske kontraster Der er størrelseskontrast mellem overskrifter/menu og brødteksten/links. Overskrifter/Menuer Kontrast Brødtekst/Links Større Størrelse Mindre Kun majuskler Skriftsnit Standard Condensed Skriftsnit Ordinærskrift Bebas Neue Font Lucida Grande Fonten Bebas Neue er desuden blevet tilføjet i css filen så den kan vises i flere browsere og { font-family: bebas_neueregular ; src: url( fonts/bebasneue-webfont.eot ); src: url( fonts/bebasneue-webfont.eot?#iefix ) format( embedded-opentype ), url( fonts/bebasneue-webfont.woff ) format( woff ), url( fonts/bebasneue-webfont.ttf ) format( truetype ), url( fonts/bebasneue-webfont.svg#bebas_neueregular ) format( svg ); font-weight: normal; font-style: normal; } Nyhedsbrev Når et af felterne i nyhedsbrevet bliver gjort aktivt, forsvinder den tekst som var skrevet ind på forhånd, frem for standard måden hvor teksten først forsvinder når man begynder at skrive i feltet. Dette gøres ved at gøre den forindskrevet tekst transparent. input:focus::-webkit-input-placeholder { color: transparent; } input:focus:-moz-placeholder { color: transparent; } /* FF 18- */ input:focus::-moz-placeholder { color: transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder { color: transparent; } /* IE 10+ */ 9