GRAFISK DESIGN. Webdesign til fodboldportal

Transkript

1 Webdesign til fodboldportal

2 REDEGØRELSE Opgavebeskrivelse Bold.dk og 6 eren har slået sig sammen for at skabe Danmarks største Premier League fodboldporta, pl.dk. Hjemmesiden skal indeholde rigtig mange informationer, og samtidig have plads til standard banner reklamer, da hjemmesiden drives af kommercielle integter. De ønskede en meget lys og indbydende hjemmeside, med en blå gennemgående farve og stor fokus på brugervenlighed. Mine overvejelser Mine tanker var at skabe en overskuelig hjemmeside hvor brugeren lynhurtgit kan finde de nyeste fodboldartikler, og 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 og det har jeg forsøgt at løse ved brug af den blå farve, og de mange engelske fodboldklub-logoer. 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. Hjemmesiden er designet i Photoshop og Wireframes er lavet i illustrator. 2

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

4 MOODBOARD 4

5 WIREFRAME OG FUNKTIONER Header I headeren er der flere funktioner, udoverlogoet 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 designet en slider, som skal indeholde de absolut vigtigste nyheder. Per 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, polulæ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 sørrelse bannere, 930x180 og 300x250. De 2 første bannere på siden er placeret så brugeren kan se dem ved første øjenkast, 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. Klikbart for at 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 5

6 MOCK-UPS Første udkast Her set de første udkast til forsiden af hjemmesiden. 6

7 TYPOGRAFI OG FARVE Overskrifter og menupunkter Beskrivende tekst her... Myriad Pro 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 Links og brødtekst Beskrivende tekst her... 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 7