Kort om prosjektet

Rockstars offisielle GTA VI-nettside er fantastisk, fylt med avanserte bevegelser, animasjoner og en selvsikker minimalisme. Men det kompleksitetsnivået er resultatet av et enormt team og budsjett. Så for dette prosjektet utfordret jeg meg selv til å designe en landingsside som fortsatt fanger den kaotiske sjarmen og identiteten til GTA VI, men som er realistisk å bygge alene.

Målet var å:

• Tenke nytt rundt landingssiden for bedre brukervennlighet og historiefortelling

• Beholde den emosjonelle følelsen av Vice City

• Designe en ren, energisk og responsiv layout som er oppnåelig uten å være avhengig av skreddersydde animasjonsprosesser

Prosess

1. Research og inspirasjon
Jeg startet med å analysere Rockstars eksisterende promoteringsmateriale, nøkkelgrafikk og tidligere GTA-nettsider. Dette hjalp meg med å definere en visuell retning forankret i det nye spillets estetikk, spesielt det Vice City-inspirerte miljøet.

2. Visuelt oppsett
Jeg valgte en levende fargepalett i rosa Vice City-stil med flere lysstyrkeverdier for fleksibilitet på tvers av knapper, kort og bakgrunner. Til typografien brukte jeg Red Hat Display, som gjenspeiler GTAs dristige overskriftsstil, samtidig som den tilbyr stor allsidighet for undertekst og navigasjon.

3. Planlegging av layout
Jeg skisserte opp strukturen rundt fem hovedseksjoner:

• Hero-seksjon med handlingsknapp (CTA)

• Trailer + gjennomgang av spillfunksjoner

• Karakterfokus-kort

• Skjermbildegalleri

• Gjennomgående forhåndsbestillingsknapper underveis i rullingen

Derfra tok jeg bevisste layoutvalg for å fremheve fremdriften gjennom siden – slik at brukeren naturlig ville gå fra å se → utforske → forhåndsbestille.

4. Tilpasning av grafikk
Den offisielle herografikken bød på en utfordring på grunn av sin symmetri og tunge midtstilling. Istedenfor å unngå det, valgte jeg en to-kolonnes løsning, der jeg endret størrelsen på og beskar grafikken, samtidig som jeg bygde opp en tydelig handlingsknapp og et lesbart tekstområde på venstre side. Det gjorde at jeg kunne bevare den slagkraftige grafikken uten at det gikk på bekostning av layouten.

5. Merkevarebygging og tematiske elementer
For å matche den rå tonen i GTA, la jeg til en stilisert bakgrunnsstruktur med patronhylser. Dette ga de mørke områdene av layouten mer karakter, samtidig som det knyttet an til spillets kontrast mellom vold og glamour. Jeg introduserte også visuelle detaljer som neon-inspirerte fargeoverganger, karakter-PNG-er i lag som bryter kortgrensene, og en skreddersydd polaroid-skjermbildeseksjon for å gjenspeile spillets personlighet.

Designdetaljer

Hero-seksjon

Enkel to-kolonners struktur med illustrasjon i lag og en dristig handlingsknapp.

Spillbarhetsseksjon

Tre sentrale "pilarer" i GTA-spillbarheten, fordelt på kort:

• Skyt først, spør aldri

• Kjør som om du har stjålet den

• Bygg ditt imperium

Hvert kort inneholder kontekstuell tekst og ikonografi.

Karakterkort

Karakteravsløringer er en stor del av GTA-kulturen, så jeg ga hver av dem et kort der bildet stikker opp over rammen, nesten som et samlekort. Subtile bakgrunner og sitater gir hver av dem personlighet uten å overvelde siden.

Skjermbildegalleri

Jeg opprettet et galleri med skjermbilder stylet som polaroidbilder for å skille denne seksjonen visuelt og forsterke følelsen av å "dokumentere kaos" som preger GTAs telefon- og sosiale medier-kultur i spillet.

Forhåndsbestilling-UX

Handlingsknapper er plassert tidlig, midtveis i rullingen, og nederst – uten å bryte flyten. De bruker en dristig knappestil med høy kontrast som gjenspeiler Rockstars neonfargede markedsføringspalett.

UX-reisen

Her er hvordan brukeren beveger seg gjennom siden:

1. Hero: Iøynefallende grafikk + dristig tekst + handlingsknapp til trailer
2. Trailer: Se og bli gira
3. Spillfunksjoner: Forstå spillflyten
4. Karakterer: Emosjonelt og verdensoppbyggende grep
5. Skjermbilder: Bevis på spillopplevelsen, med fokus på fine øyeblikk
6. Forhåndsbestilling: Tydelig synlig underveis i rullingen

Hver seksjon bygger på den forrige for å skyve spilleren nærmere å handle.

Endelig design

Refleksjon

• Jeg lærte hvordan jeg kan tilpasse vanskelige heltebilder ved å omfavne layoutbegrensninger i stedet for å kjempe mot dem.

• Dette var første gang jeg brukte skreddersydde bakgrunnsstrukturer på en landingsside, og det ga mer dybde enn jeg forventet.

• Å bygge konsekvente designsystemer gjorde det mye enklere og raskere å skalere og tilpasse elementer som knapper, navigasjon og kort.

• Viktigst av alt beviste jeg for meg selv at jeg kunne oversette AAA-designinspirasjon til noe som faktisk er mulig å bygge.