🎮 Case Study (Part 1): Designing My Own Game-Inspired Portfolio

The site was designed as an immersive, cinematic gallery. Because presentation should feel like storytelling.

Most game UI/UX portfolios live on Behance, It’s practical and expected. There are plenty of impressive projects out there, but it’s rare to see a custom website built from the ground up. For this project, I wanted to explore something different: a portfolio that doesn’t just present case studies, but behaves like one.

Also part of the Game-Inspired Portfolio series:

📱 Case Study (Part 2): Designing Responsive Experiences for Mobile & Tablet

🎬 Case Study (Part 5): Evolving the Art Direction for a Cinematic Hero

1. The Challenge

What if the portfolio wasn’t just a container for case studies, but a demonstration of UI/UX thinking in itself? What if it behaved more like a playable interface than a static site?

The goal was to create something immersive, functional, and professional. A site that’s easy to scan, enjoyable to explore, and clear in how it presents information (without falling into the usual template patterns).

2. A Site That Talks About Itself

The site is intentionally self-aware. The interface doesn't just house case studies, it reflects the systems behind them. From structure to interaction, every part borrows logic from actual game UIs. 

Instead of listing “what I do” on a services page, the site demonstrates it structurally:

• Navigation takes cues from game menu design, focusing on clarity, hierarchy, and flow.

• Each section follows interaction logic from games (states, flow, responsiveness).

• Components were built using scalable systems.

This approach allowed the portfolio to operate on two layers: presentation and demonstration. Where the site becomes part of the portfolio itself.

3. Navigation and Flow

Designed like a game menu map: explore freely, return intuitively.

The site follows a clear hub-based structure, inspired by game UI logic. Everything is reachable in one or two clicks, with multiple return paths that keep the flow consistent:

• Home → works as a landing interface, styled like a main menu screen.

• Start → takes the role of an about page, focused on who I am and what I do.

• Gallery → is the content hub, designed like a quest log or in-game archive.

• Resume → mirrors a character screen, with skills, roles, and experience.

• Contact/Recruit → is a form, but with playful details like game-themed message subjects.

• Blog → keeps things familiar, but still follows the visual and mostly interaction rules of the site. 

It’s not a conventional site map, but it doesn’t need to be. Game interfaces work on the same principles of any interface: they build on patterns people already know. So even if it feels different at first, the structure is simple, and the flow stays intuitive.

4. Layout & Wireframing

Wireframes outlining the site’s layout and interaction flow.

Desktop was the primary focus for this first iteration. The interface was designed around a 12-column stretch grid, with the following structure:

• Margins → 68px.

• Column gutters → 32px.

• Vertical rhythm  → 8pt base grid.

  
  

Spacing follows the 8-point grid system, with a few deliberate exceptions. For example, the black frame that surrounds most views uses a 20px ratio instead of a multiple of 8. That choice was made for visual balance, not strict math (a good reminder that grid systems are guides, not rules).

The wireframes were designed with scalability in mind, but since the desktop pages are horizontal and mobile needs a vertical flow, I ended up creating a separate mobile version. At this stage, the focus stayed on clarity, alignment, and building a strong base for both formats.

5. Visual System

The visual system was built to support usability and rhythm across screens, not just to decorate them. In game UI, visual design often serves structure: frames, contrast, and motion all help define interaction states. I applied the same logic here.

▹ Color Palette :

The dark theme, designed for contrast and legibility, gives depth and consistency between sections, while gradients act as subtle dividers instead of borders. Accent tones were kept minimal to preserve clarity and direct attention toward content.

Dark theme with layered depth and minimal accents, reinforcing hierarchy and contrast.

▹ Typography :

Typography follows a similar principle: PT Sans and Titillium Web handle most UI and text elements, balancing readability and visual identity. The custom title fonts on project pages break that neutrality just enough to reflect each project’s tone.

The blog uses a slightly different logic using a 17px body text size (instead of a standard 16px or 18px). Odd values, while not your typical choice, can help smooth optical rhythm between contexts: they bridge the gap between compact UI text and comfortable reading sizes without causing spacing jumps. In testing, 16px felt a bit dense for long paragraphs, while 18px disrupted flow and hierarchy. 17px landed in the sweet spot, a subtle adjustment that keeps the reading experience balanced across breakpoints.

A clear typographic hierarchy that guides navigation and reinforces the site’s system logic.

▹ Iconography :

Iconography was designed as an extension of this logic. Each icon was simplified to its essential form, mixing soft and hard edges to match the interface’s tone (minimal, but not sterile). The goal was to keep them elegant, readable, and scalable, adapting easily between small UI elements and larger section headers.

Scalable, text-supported icons designed for clarity across different sizes and interface states.

▹ Component Tokens :

Small rules that keep components consistent across screens. These tokens drive shape, rhythm, and touch feedback.

→ Shape: corner radius 6px and line 1px on desktop/tablet, mobile radius 4px with line 0.8px.

→ Angles: angle cuts are unified so cards and buttons share the same treatment.

→ Rhythm: spacing follows an 8-point step to keep alignment predictable.

→ Tap targets: 44×44px minimum. Smaller icons sit inside a 44×44px container.

→ Link and label: accent color (#5CABFF) on hover or tap.

→ Icon + text: always paired for clarity.

→ Accessibility baseline: contrast ≥ 4.5:1 for text and UI labels.

The shared rules behind cards, buttons, and labels

▹ Visual Flare :

While the visual system focuses on consistency and usability, a layer of personality ties everything together. Subtle star fields were added to the main four screens, giving the site a sense of depth and atmosphere without distracting from the content. The challenge was keeping that “mystical” feeling restrained. Enough to add presence, but never so bright or animated that it interferes with readability.

Avatars appear throughout the site as small guides and visual anchors. They act both as narrative cues and as design elements, breaking the strict grid with something more human (although ironically they are like holograms). This balance between system and story reinforces the idea behind the whole project: a functional interface that still feels alive and personal.

Star field and avatar elements add subtle atmosphere and personality to the main screens.

Visual choices align with system logic. There’s consistency in weight, spacing, and interaction feedback across all sections. Interaction feedback (through hover states, motion, and hierarchy ), helps define rhythm and keeps navigation intuitive. Subtle visual flares, like the star fields and avatars, add a touch of atmosphere and personality without breaking clarity. They give the interface a bit of life while keeping the focus on usability and flow.

Everything contributes to a unified experience: visuals that reinforce usability, interactions that feel natural, and a tone that reflects the balance between clarity and play.

▹ Theme (Retro Sci-fi) :

I started with a dark theme for contrast and a neutral UI surface. I like Sci-fi, so I leaned into a calm retro space vibe, more star field than neon, built to read well. The avatar is intentionally bold on Home to set tone and then toned down on interior pages. They follow the same tokens, so shape and weight stay consistent.

→ Why dark: strong contrast, clean type, images stay readable across posts.

→ Palette: cool blues for avatars, soft white for UI, and accent blue (#5CABFF) for actions.

→ Hologram cue: inspired by the projected light moments in Blade Runner 2049. I kept the idea of soft glow and layered depth, skipped heavy magenta so the UI remains calm.

→ Motifs: a static star field for depth, a few larger stylized stars as quiet highlights.

→ Avatars: small guides with a “hologram” vibe that cue location and intent.

→ What I avoided: heavy neon fills, full-frame chromatic fringing, noisy grain. Motion stays short and purposeful.

Main references used during exploration:

Blade Runner 2049 — holographic signage and projected light.

Magnetic Rose (by Ethan Sharp) and Mars Express — space as atmosphere and flat graphics/renders.

Future exploration:  I intend to test a realistic or a 3D version of the avatar to push the hologram cue, when time allows, as a controlled swap I can revert quickly if needed.

6. UX Laws in Practice

UX principles were applied throughout the entire process:

• Fitts’ Law → Click targets like buttons and image areas are large enough to be easily accessible, especially across breakpoints.

• Hick’s Law → Information is broken into smaller, categorized sections, reducing decision fatigue. This is especially clear on the Resume and Gallery screens.

• Law of Similarity → Consistent visual styles help create cohesion across the site. Elements like corner radius (6px), line weight (1px), and angle treatments are unified, making even visually diverse content feel like part of the same system.

• Law of Proximity → Spacing between elements was carefully adjusted to guide reading flow and grouping, which is crucial in image-heavy layouts.

The site’s structure isn’t experimental for the sake of novelty. It’s grounded in patterns that are proven to work, they are just adapted to fit the portfolio’s game-inspired theme.

7. Design Notes

Designing for yourself is one of the hardest challenges. It’s easy to over-design, chase novelty, or get stuck balancing personal taste with professional expectations. My goal was to create something that felt different and game-inspired, but that still gives space for the projects to speak for themselves. I didn’t want the site to just be themed, it needed to be functional, consistent, and adaptable.

What helped was approaching it like any other UI/UX task:

• I built the system first, then styled it.

• I prioritized user flow before adding aesthetic layers.

• I documented every design choice, just like I would in a studio environment.

While the theme is playful and game-like, especially in the early screens, it becomes more neutral in the Gallery and case study areas. The visual language stays consistent, but tones down to let each project hold its own identity.

The result is a portfolio that doesn’t just present case studies, it behaves like one. A space where structure supports style, and interaction tells the story.

Continue reading the series:

Part 2 | Part 3 | Part 4 | Part 5