Brief

The official GTA VI website by Rockstar is stunning, filled with high-end motion, animations, and a confident embrace of minimalism. But that level of complexity is the result of a massive team and budget. So for this project, I challenged myself to design a landing page that still captures the chaotic charm and identity of GTA VI, but is realistic to build solo.

The goal was to:

• Reimagine the landing page for usability and storytelling

• Retain the emotional feel of Vice City

• Design a clean, energetic, responsive layout that’s achievable without relying on custom animation pipelines

Process

1. Research & Inspiration
I started by analyzing Rockstar’s existing promotional content, key art, and previous GTA websites. This helped me define a visual direction grounded in the new game's aesthetic, especially the Vice City-inspired environment.

2. Visual Setup
I chose a vibrant Vice City-style pink color palette with multiple lightness values for flexibility across buttons, cards, and backgrounds. For typography, I used Red Hat Display, which echoes GTA’s bold headline look while offering great versatility for subtext and navigation.

3. Layout Planning
I wireframed the structure around five major sections:

• Hero section with CTA

• Trailer + game feature breakdown

• Character highlight cards

• Screenshot gallery

• Persistent pre-order CTAs across the scroll

From there, I made intentional layout choices to emphasize momentum through the page — so the user would naturally go from viewing → exploring → pre-ordering.

4. Art Adaptation
The official hero artwork posed a challenge due to its symmetry and heavy center alignment. Instead of avoiding it, I leaned into a two-column solution, resizing and cropping the art while building out a clear CTA and readable text zone on the left. It allowed me to preserve the high-impact visuals without compromising layout integrity.

5. Branding & Thematic Elements
To match the gritty tone of GTA, I added a stylized bullet-shell background texture. This gave the dark areas of the layout more character while tying into the game’s violence-meets-glamour contrast. I also introduced visual accents like neon-inspired gradients, layered character PNGs that break the card boundaries, and a custom Polaroid screenshot section to echo the game’s personality.

Design Details

Hero Section

Simple two-column structure with layered illustration and a bold call-to-action.

Gameplay Section

Three key “pillars” of GTA gameplay, broken out into cards:

• Shoot First, Ask Never

• Drive It Like You Stole It

• Build Your Empire

Each card includes contextual flavor and iconography.

Character Cards

Character reveals are a big part of GTA culture, so I gave each one a card where the image pops above the bounding box, almost like a trading card. Subtle backgrounds and quotes give each one personality without overwhelming the page.

Screenshot Gallery

I created a gallery of screenshots styled as polaroids to visually separate this section and reinforce the “documenting chaos” vibe of GTA’s in-game phone/social media culture.

Pre-Order UX

CTAs are placed early, mid-scroll, and bottom — without breaking flow. They use a bold, high-contrast button style that echoes Rockstar’s neon marketing palette.

The UX Journey

Here’s how the user moves through the page:

1. Hero: Eye-catching art + bold copy + trailer CTA
2. Trailer: Watch & get hyped
3. Gameplay Features: Understand the gameplay loop
4. Characters: Emotional/world-building hook
5. Screenshots: Proof of gameplay experience, highlighting nice moments
6. Pre-order prompts: Clearly visible throughout the scroll

Each section builds off the last to push the player closer to taking action.

Final Design

Reflection

• I learned how to adapt difficult hero images by embracing layout constraints instead of fighting them.

• This was my first time using custom background textures in a landing page, and it added more depth than I expected.

• Building consistent design systems made scaling elements like buttons, nav, and cards far easier and faster to iterate.

• Most importantly, I proved to myself that I could translate AAA design inspiration into something actually buildable.