Skisser

Etter å ha lest oppgaven fikk jeg fort noen idéer over hvordan jeg ville ha siden. Jeg satte meg ned å begynte å tegne opp noen skisser. Når jeg tegnet opp skissene fokuserte jeg mest på å sette opp en struktur på siden, og ikke tenke så mye på hvor jeg skulle plassere innholdet. Jeg tegnet opp skisser på alle sidene som var påkrevd i oppgaven, siden alle sidene hadde noen forskjeller, så det var greit å få en viss oversikt over hvordan jeg kunne tenke meg å ha det.

Wireframes

Etter å ha jobbet en del med skissene begynte jeg å sette opp noen wireframes i Photoshop. Noe av det jeg liker godt med wireframes er at jeg kan lett sette opp en god struktur, og legge til innhold uten å måtte tenke mye på design og fargevalg.

Jeg satte opp to wireframes; for forsiden, og en artistside.

Forsiden

Når jeg satte opp wireframes for forsiden merket jeg at siden ble alt for lav, og det jeg hadde tegnet opp i skissene ga alt for lite høyde for artistoversikten. Det jeg gjorde da var at jeg la til bilder fra festivalen over kartet, dette ga plass til flere artister i artistoversikten.

I skissene var jeg også veldig usikker på hva jeg skulle ha i høyre kolonnen. Jeg ville at den skulle være veldig fleksibel, og det skulle være lett å bytte ut, og flytte på ting i kolonnen alt ettersom hvilken side du var på.

Som du kan se på bildet til høyre var ikke høyre kolonnen helt komplett. Jeg var usikker på hva jeg skulle ha øverst i kolonnen. Jeg hadde blant annet idéer om å legge billettinfo, eller informasjon om Urørt der. Men jeg bestemte meg for å vente til jeg hadde startet med designet for å se hva som egentlig fungerte best, med tanke på farger og flyt.

Artistsiden

Jeg lagde også en wireframe av en artistside, som egentlig fungerte som en wireframe for alle de andre undersidene også (kontakt, program, artikkel). Alle siden skulle ha visse likheter, med tanke på tekst, undermeny, høyrekolonnen. Artistsiden hadde også et kommentarfelt som også skulle benyttes på artikkelsiden.

Designet

Før jeg satte igang med designet trengte jeg å bestemme meg for hvilke farger jeg skulle bruke. Jeg visste allerede at jeg ønsket å bruke noen mørke farger, da det føltes ganske naturlig ut. Jeg vil trekke fokus til innholdet og bildene på siden. En side jeg liker å bruke for å finne farger er CoulourLovers. CoulourLovers er en side der folk kan laste opp og dele sine egne fargepaletter. Etter å ha lett litt fant jeg en fargepalett som jeg likte godt. Dette var et fargepallet som hadde mange gode farger som jeg kunne bruke. Den røde fargen fungerte bra for å trekke fokus på delere av siden, og de blå fargene fungerte godt som bakgrunnsfarger, og i titler. Jeg var bare ikke helt fornøyd med gulfargen, så jeg duset den ned litt, som du kan se på bilde til høyre. Klikker du på bildet ser du også hvordan jeg har valgt å bruke de forskjellige fargene.

Jag valgte å bruke mørke farger i header, footeren og bakgrunnen på siden. Dette er gjort for å trekke mer av fokuset til innholdet på siden.

Når jeg jobber med design i Photoshop, så liker jeg ofte å benytte meg av 960.gs sin Photoshop-mal. Malen kommer med grid basert “guide lines”, som gir deg gode linjer som gjør det lett å balansere opp innholdet. Malen kommer med en bredd på 960px. Dette er en veldig optimal bredde, som passer godt inn på de fleste skjermer, og gir også en del spacing på høyre og venstre side av skjermen for de som sitter på 1024px skjermer. Dette gjør at siden får ett luftig inntrykk, og det blir ikke alt for voldsomt.

Forsiden

Nå som jeg hadde fargene begynte jeg å jobbe på forsiden. Jeg hadde bestemt meg for et par viktige punkter som jeg skulle følge når jeg designet siden:

• Det skulle være lett å få oversikt, man skulle kunne finne det meste på forsiden uten å måtte grave seg ned i strukturen på siden.
  Noe av det man lett skulle få oversikt over var bl.a.
  • Hvor og når festivalen er
  • Hvor man får kjøpt biletter
  • Hvem som spiller
  • Info om Urørt konkurransen
  • Kart
  • Nyheter, og måter å holde seg oppdatert med de på
• Det skulle være lite tekst, ting skulle heller forklares visuelt.
• Det skulle være mye bruk av bilder.
• Det skulle være en klar og god navigasjon, der man lett kan forstå hvor innholdet befinner seg.

Jeg valgte å legge til mange av bildene i svart/hvitt, siden jeg ikke ønsket at de skulle trekke alt for mye fokus bort fra resten av innholdet på siden.

I høyrekolonnen finner man blant annet ferdiggjorte spillelister av artistene som skal opptre på festivalen. Man finner spillelister for både Spotify og Wimp, som begge to er to populære musikkstreaming tjenester i Norden. Om brukeren ikke skjenner til alle artistene som skal opptre på festivalen, kan dette påvirke brukeren om han/hun finner ut at dette er musikk personen liker.

Jeg har valgt å legge mye fokus på sosiale medier på siden. Man skal lett kunne komme i kontakt med andre som også kunne tenke seg å besøke festivalen. Dette kan være en påvirker om brukeren finner ut at noen bekjente også skal besøke festivalen.

Artistside

På artistsiden hadde jeg et par punkter jeg ville få med på siden:

• Ha bilder av artisten. Dette gjør at det ikke blir så voldsomt mye tekst, og siden er mer vennlig for besøkende. Bildene skulle lenke til et bildegalleri av artisten.
• Lenker til artisten på eksterne sider, og til Spotify og Wimp sider.
• Ha en oversikt over artistene i høyre kolonnen i et litt lettere format enn på forsiden, så man lett kan navigere seg mellom de forskjellige artistene.
• Kommentarfelt, så man fort kan se hva andre mener om artisten.
  • Kommentarfeltet skulle deles opp i sider, i motsetting til nyhetsartikler. Grunnen til dette er at nyhetsartikler gjerne er mer diskutert de første dagene etter den ble postet, og vil fortere vil nå maks antall kommentarer. På den andre siden, så er artistsiden noe som kommer til å være mer besøkt over en lengre periode, og derfor har den et potensielle for å få veldig mange kommentarer. Av den grunn, så er det delt opp i sider, så siden ikke blir så veldig lang, og man får fort oversikt over de siste kommentarene. I tillegg kunne jeg tenke meg at man skulle kunne navigere mellom sidene med JavaScript, og eventuelt Ajax for å laste inn kommentarene.
  • Man skulle ha muligheten til å identifisere seg med Facebook eller Twitter. Dette er for å gjøre det lettere for brukeren å poste kommentarer, og om brukeren allerede har postet en gang, så vil brukeren automatisk bli identifisert neste gang.
  • Om brukeren ikke hadde identifisert seg med Facebook eller Twitter, så skulle Gravatarer være støttet, så brukeren ville få vist en avatar på lik linje med Facebook og Twitter brukerene.
• I tillegg til at brukerne kunne lese kommentarer for å se hva andre synes om artisten, skulle det også bli hentet inn Twitter oppdateringer der artisten er nevnt.

Typografi

På sidene har jeg valgt og bruke fonten Helvetica (med Arial som en fallback løsning). Helvetica en grotesk font (den har altså ikke serifer). Det er en klar og tykk font, som er lett å lese og fungerer godt i både store og små størrelser. På paragrafer har jeg brukt en 14px font-størrelse og en linje-høyde på 1,4. Dette er en kombinasjon som er lett å lese og, ikke føles for trykt sammen.

I mange av overskriftene har jeg brukt en kombinasjon av bold, og normal font-tykkelse. Dette skaper en visuelt spennende effekt, og brukeren legger lettere merke til dem. Jeg har valgt å bruke en mørk farge på titlene, dette ga god kontrast mot den hvite bakgrunnen bak, og gjorde at man lett la merke til de.

På lenker har jeg brukt en mørk blå farge, som ikke er så mørke at de er vanskelig å legge merke til, men heller ikke så sterke at de tar fokus bort fra resten av teksten rundt.