# Redesign af copenhagenskatepark.dk

Transkript

1 # 1 Grafisk Design

2 # Redesign af copenhagenskatepark.dk Opgave Dette er en fiktiv opgave hvor jeg har valgt at redesigne copenhagenskatepark.dk's website. Jeg synes det kunne være en spændende udfordring at producere et design til skatermiljøet i håb om at lave et cool og funktionelt website. Jeg har stået for design og kodning af sitet. Formålet med sitet Sitet skal fungerer informativt og praktisk i forhold til parkens udstyr og områder. Der skal være mulighed for at tilmelde sig konkurrencer og andre events, læse nyheder, se billeder og video. Målgruppe Primærmålgruppen består mestendels af fyre. hovedsageligt teens og dem i 20 erne. Sekundærmålgruppen er alle de andre i skatermiljøet. Pigerne og de voksne skatere Nyt navn til sitet Jeg har valgt at ændre parkens og websitet s navn til CPHSK8PARK. Grafisk udtryk Jeg går efter et råt, street og ungt udtryk. Jeg vil lægge vægt på coolness, farver og kontraster. Specifikationer: Opgavetype: fiktiv Afsender: CPHSK8PARK Medie: Website Digitalt format: Desktop RGB-standard for billedredigering: srgb Opløsning på billeder: 72 ppi Google webfonts: Rock Salt, EXO Programmer anvendt: Photoshop, Illustrator, Dreamweaver Kode og programmeringssprog: HTML, CSS og PHP Plugins: Vegas Background jquery Plugin fra http: /vegas.jaysalvat.com/ Billedmaterialer: COLOURBOX og Creative Commons Flickr billeder Browserkompatibilitet: Firefox og Chrome Arbejdsprocesser Brainstorm Moodboard Skitser Design af logo Design af website Kodning af website Besøg websitet på 11 # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole

3 # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole 12

4 # CPHSK8PARK: Brainstorm 13 # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole

5 # CPHSK8PARK: Moodboard # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole 14

6 # CPHSK8PARK: Logoskitser 15 # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole

7 # CPHSK8PARK: Udvikling af logo Udgangspunkt for det endelige logo I det endelige logo endte jeg ud med at kombinere idéer fra disse 3 skitser neden under. Formen fik jeg inspiration til fra skitse 1, måden at skrive sk8te på fra skitse 2 og 8-tallet som står på skateboard fra skitse udkast: "CPH" skulle være en del af logoet og ikke flyve ovenover ordet Skatepark. 2. udkast: Jeg valgte at fjerne skateren, da det var en lidt kompliceret figur som ikke indgik i formen. Jeg ville gerne have en helhed. Jeg fandt en ny skater, nemlig 8-tallet, som både var sjovt og kunne ingå i ordet Skatepark 3. udkast: CPH skulle have mere tyngde. Nu virker det som om at ordet CPH nærmest maser ordet sk8park på midten. Færdiggørelse af logo Tagline Logoet er tegnet op med Pen Tool i Illustrator. Jeg har tilføjet nogle splashes fra Illustrators Grime Vector Pack, for at give logoet noget mere volume og et mere frækt og provokerende udtryk med reference til grafittimiljøet. Jeg faldt over citatet "Life is a skatepark. Ride it!" mens jeg søgte inspiration. Sætningen indfanger den attitude som jeg synes man skal forbinde med CPHSK8PARK. # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole 16

8 # CPHSK8PARK: Skitser af flowchart og website 17 # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole

9 # CPHSK8PARK: Valg af webfonte Exo ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå ,:!?/» Google web fonts Jeg har valgt at bruge 2 typografier fra Google Fonts. Fontene er gratis og optimeret til webbrug. EXO EXO er en grotesk webfont med et geometrisk, digitalt udseende. Den er kantet og skarp med små bløde hjørner. Rock Salt Rock Salt har et graffitti-håndtegnet-udtryk som passer godt til websitet unge og rå look. Rock Salt bruges i navigation, tagline og i mysk8-elementet. Jeg har tilføjet en stroke for at give fonten et federe udtryk, så den i stil minder om logoet. Design af stroke med CSS Rock Salt For at opnå en stroke større en 1px, fandt jeg på et lille men lidt omfattende trick: Ved at angive flere forskellige text-shadows, kan man skabe effekten af en fed stroke. Smart, synes jeg selv! abcdefghijklnopqrst uvwxyzøå ,:!? = # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole 18

10 # CPHSK8PARK: Før redesign Nuværende site Kedeligt logo Ingen klar grafisk profil Format er out-of-date Triste farver Lidt rodet opbygning Tanker forud for redesign Større vægt på det visuelle Stærk grafisk profil Personligt logo Stærke farver Cool menu Sprøde billeder Personlig skaterprofil 19 # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole

11 # CPHSK8PARK: Efter redesign Forside - Fullscreen background slider Som landingpage har jeg valgt at bruge en fullscreen background slider med actionfyldte stemningsbilleder fra Copenhagen Skatepark, for at skabe en wow-effekt! Det skal bare se lidt blæret ud. Hovedmenu/Brugermuligheder Klassisk central placering af hovedmenuen, som gør det nemt at tilgå websitets indhold. Den er stylet i stil med CPHSK8PARK-logoet. Gul og iøjnefaldende. Logo Logoet er med til at give skateparken en stærk og personlig grafisk profil. MySka8 - din personlige skateprofil MySk8 - Ikke funktionel på websitet. Idémæssigt skal MySk8 fungere som en personlig profilside hvor skateren kan se hvilke events eller konkurrencer han/hun har tilmeldt sig, få oversigt over medlemsskab, skateskole, billeder man er tagget i og konkurrencer man har vundet. MySk8 login er placeret i footeren på hver enkel side for nem adgang til ens profil. # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole 20

12 Events Denne side præsenterer en liste med kommende events i skateparken. Event: "Girls Skate Battle Competition". For at promovere det næste kommende event "Girls Skate Battle Competition" har jeg brugt et billede af en pige med et skateboard, samt en pink splash. Eventsplash Den pink splash er et call-to-action element som skal opfordre brugeren til at tilmelde sig konkurrencen. Elementet udskiftes løbende. Eventbillede Pigen med skateboardet binder op omkring det næste kommende event Girls Skate Battle Competition. Det er hensigten at eventbilledet skal repræsenterer det nærmeste event og udskiftes løbende. Farvesammenhæng Highlight af eventoverskrift, farve på splash, pigens læber og sko er bevidst farvet pink for at skabe sammenhæng om eventet " Girls Skate Battle Competition". Baggrund Inspirationen til den grå betonbaggrund giver næsten sig selv beton er et godt skateunderlag. Den giver et råt look. Farven virker samtidigt afdæmpende i kontrast til logoet, menuen og eventsplashen. 21 # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole

13 News Klikker man ind på news, for man de sidste opdaterede nyheder præsenteret. Social Facebook Plugin: Like Button Like eller del en nyhed med dine facebook venner Mysk8+ Hvis nyheden omhandler et event er det hensigten at man skal kunne tilføje eventet til sin egen personlige event-kalender, hvis brugeren har en Mysk8-profil. Billedstil Det er vigtigt at billederne på sitet har attitude, er sjove, sprøde eller lækre. # Anja Johansen # Svendeprøve # 2014 # Grafik & billedbehandling # Roskilde Tekniske Skole 22