GRAFISK DESIGN. Hjemmeside til Dizzy Mizz Lizzy

Transkript

1 GRAFISK DESIGN Hjemmeside til Dizzy Mizz Lizzy

2 PROCESSBESKRIVELSE Beskrivelse af Dizzy Mizz Lizzy website Opstart 01. Research, filsøgning, idégenerering, målgruppe. 02. Designopsætning i photoshop Målgruppe Målgruppen var lidt svært at definere i det her tilfælde idet musiksmag er et meget diffust emne og da det kan strække sig over flere forskellige segmenter uden problemer. Derfor har jeg valgt at tage udgangspunkt i Dizzy Mizz Lizzys»maskot«idet hun har fulgt dem helt fra starten og dette derfor vækker genkendelighed hos deres fans. Derfor er farverne der er brugt også farverne fra billedet af hende, for på den måde at skabe sammenhæng. Designmæssige overvejelser Jeg ønskede at skabe fokus og fange den besøgendes interesse med det samme, derfor valgte jeg at placere Dizzy Mizz Lizzys»maskot«som en video øverst. Der er lavet effekt på denne i after effects, så den kommer til at»skratte«, hvilket giver et råt udtryk og gør hende mere levende. Der er desuden lavet en kalender øverst på siden, da jeg ønskede at gøre det meget tydeligt for den besøgende hvornår der er koncerter, da jeg tror det oftest er det den besøgende leder efter når de besøger et bands hjemmeside. SIdst har jeg kørt hjemmesiden som en onepage med meget tydelige skift for at man ikke er i tvivl om hvor man er. Brugervenlighed Der er både tænkt på brugervenlighed i forhold til det visuelle design, så det er let for den besøgende at navigere rundt på siden, men også i forhold til kodestrukturen, hvor der er lavet kommentarer og opdelinger for at gøre det lettere at gå ind og rette i. Benyttede programmer Adobe Illustrator CC (2015) Adobe Photoshop CC (2015) Adobe Dreamweaver CC (2015) Adobe After Effects CC (2015) Designovervejelser Målgruppe Aida»optimeret«Stemning Elementer Farver 2 Grafisk design

3 DESIGN I FORHOLD TIL VISUELT UDTRYK OG BRUGERVENLIGHED Jeg har gjort en rælle tiltag for at gøre hjemmesiden interessant både indenfor design og brugervenlighed. Kodestruktur Jeg har valgt a lave kommentarer og afsnit i mine koder, da dette hjælper til at få et hurtigt overblik og gør det lettere hvis der er en anden der skal rette i det på et tidspunkt eller man selv skal rette i det efter lang tid. Nedenfor ses eksempler på disse. Grafisk design 3

4 Det visuelle Der er tænkt på at det visuelle look på hjemmesiden ikke bare skulle være flot, men også være let at gennemskue. Derfor har jeg valgt at lave en simpel menu der ved tryk scroller ned til præcis det menupunkt du har valgt. Derudover har jeg valgt at sætte en fikseret pil på siden, så du hele tiden har mulighed for at trykke på den og hurtigt komme til toppen. Jeg har også valgt at inddele hele tideligt tydeligt i sektioner så man aldrig er i tvivl om hvor man befinder sig på siden. På forsiden er der tilføjet en tourkalender, som gør at man hurtigt kan få et indblik i hvornår de spiller koncerter samt købe billetter. På kontaktsiden er det lavet såles at hvis du trykker på en mail eller et socialt medie, bliver denne åbnet for dig, så du ikke selv skal ind og skrive og søge og derved kan komme til at skrive eller søge forkert. Alle links åbner desuden i nye faner for at det er lettere for brugeren at komme tilbage til hjemmesiden igen, da de ikke bliver taget væk fra det de er på og lige pludseligt skal trykke tilbage sindssygt mange gange. Billed og videovalg Der er valgt billeder og videoer fra koncerter for at give den besøgende et indtryk af hvordan det er at se dem live og derved være med til at påvirke at de måske klikker sig videre, da der er blevet skabt et ønske. Farvevalg I forhold til farver har jeg taget udgangspunkt i Dizzy Mizz Lizzys»maskot«, som er i videoen. Dette har jeg valgt fordi jeg forbinder rock med sort og mørke farver generelt, men samtidigt synes det var fedt og skabte et moderne og nytænkende udtryk med de klare farver der var benyttet i billedet af hende. Derudover skaber det god sammenhæng at bruge de samme farver fra billedet hele vejen igennem, da det er genkendeligt for øjet og man lynhurtigt kan afkode når man kommer til en ny sektion. 4 Grafisk design

5 Kendetegn ved en letlæselig font Stor x-højde Brede bogstaver med store åbne inderformer Ikke for stor forskel på bogstavernes tynde og tykke streger Fontvalg Jeg har valgt fonten»open Sans«da jeg synes det skulle være en sans serif som var letlæselig og stod tydeligt frem uden at stjæle fokus for meget fra info, billederne og farverne. Den har meget organiske former, hvilket står godt til det ret»kantede«og»skarpe«look der ellers florerer på hjemmesiden. Open Sans regular Open Sans light, Open Sans light italic, Open Sans regular, Open Sans italic, Open Sans semibold, Open Sans semibold italic, Open Sans bold, Open Sans bold italic, Open Sans Extrabold, Open Sans Extrabold italic, Verdana regular, Verdana italic, Verdana bold, Verdana bold italic, Arial regular, Arial italic, Arial bold, Arial bold italic, AIDA Awareness Video og klare farver som skaber blikfang så snart man kommer ind på siden. Interest Tourkalender som gør at man undersøger hvornår der er mulighed for at se dem. Desire Billede og video galleri gør at man får indblik i hvilken fed oplevelse man kunne få og derved skabes der et ønske. Action Linksene til at købe billetter er tydeligt markeret som»call to action«ved brug af klar blå eller hover med fed, hvilket gør at snasynligheden for at nogle trykker ind for at se, er større. Verdana regular Arial regular Grafisk design 5