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

Updated visuals aligned with modern sci-fi interfaces and improved visual hierarchy.

If you have seen the earlier parts of this case study, you already know this portfolio behaves a little like a game. Motion, sound and interaction rules were designed first, then shaped carefully inside the limits of Wix Studio.

Now that the foundations are stable, it was time to revisit something very visible on every visit: the art direction of the hero and avatars.

This post is about why I let go of the holographic look, what the new direction aims to do, and how I am rolling it out while the paintings are still in progress.

How the Game-Inspired Portfolio started:

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

1. Why I moved away from the hologram look

The first version of the site used character portraits with heavy scanlines and a holographic treatment. It was fun and on theme, but after shipping and using the site in the wild a few issues appeared:

→ Poor readability at small sizes: On laptops and mobile devices the scanlines softened facial features. From a distance, the avatars turned into blue noise and the expressions were hard to read.

→ Competing textures: The site already has a star field, subtle motion, and glitch effects for title and avatars. Adding strong horizontal lines on top created visual noise that competed with the UI instead of supporting it.

→ Tone too far from cinematic: The hologram treatment felt like a fun retro sci-fi overlay. But for this iteration I wanted something closer to game key art or a streaming platform banner, where the character reads clearly and feels grounded in light and volume.

So the goal for this round was: keep the sci-fi energy, but make the hero feel more cinematic and easier to read on any screen.

2. New goals for the hero and avatars

To keep this project coherent with the rest of the case study, I set a few design goals before touching pixels:

• Stronger first impression → When someone opens the site, they should instantly read “game UI and UX designer who cares about craft” from the hero alone.

  
  

• Clearer avatar read → The character needs to be legible on a big monitor, a laptop in the distance, and a small mobile screenshot.

  
  

• Closer to modern sci fi key art → The new look should feel at home next to contemporary film or game posters, with focused lighting and clean silhouettes.

  
  

• Still aligned with earlier UX decisions → Motion remains short and purposeful, feedback is predictable, and the avatar sits in the decorative layer while the UI stays in charge.

3. Visual references and palette shift

For this new direction I leaned into references that mix realistic rendering with bold, graphic choices.

▹ Color Palette shift :

Instead of the old cyan accent (#5CABFF), I am shifting toward a deeper, more electric blue with a subtle magenta bias (#4776ED). This keeps the space theme, but feels closer to current sci-fi branding than the softer teal used before. I also nudged the gray tones so their undertones support the new accent blue.

Palleted with minimal change to match the new blue tone.

▹ New References :

Many modern sci-fi posters use one strong character silhouette against a simple background, with lighting that frames the face. That inspired the large planet arc behind the hero and the way the lighting wraps around the headphones and shoulders, similar to the Intergalactic: The Heretic Prophet poster from Naughty Dog.

The goal is not photorealism, but a painted look that can sit next to game key art without feeling out of place. Lately I have been watching the Apple TV series Pluribus, and the semi realistic, painterly style of its posters felt like a good reference.

Intergalactic: The Heretic Prophet — character strong silhouette and planet arch.

Pluribus — semi realistic render style.

4. Interaction and animation updates

The interaction system from Part 3 is staying, but the avatar behavior is being tuned to match the new look. Planned changes:

→ Blink and micro expressions instead of glitch: The old glitch loop made sense for a hologram. Now the hero will rely on small eye blinks and subtle expression changes so the portrait feels alive without breaking the cinematic vibe.

→ Background motion through meteorites: I am experimenting with tiny meteorites crossing the star field as slow parallax accents. They give a feeling of movement in space and can be timed so they never distract from the calls to action.

→ Consistent timing with existing motion rules: Any new animation will follow the same performance budget and reveal order already documented. Hero and background come first, then titles, then controls. Nothing will block interaction or delay tap feedback on mobile.

For the first release of this new art direction, the hero may ship as a mostly static illustration. The animation details will be layered in once the base visuals are stable.

5. Rolling out the change as work in progress

This update is happening live, in stages:

• Stage one → Replace the old holographic hero and avatars with the new painted versions, even if some parts are not fully finished yet. This already improves the first impression and readability.

• Stage two → Add the final paint versions, plus small animations like eyes blink.

• Stage three → Test more complex new animations, like the meteorites, plus small polish passes where needed.

Shipping in stages matches the rest of this project. Earlier posts already talked about how I prioritized stability first, then layered motion and audio, and kept a list of items deferred for a later pass.

6. Design Notes

▹ Why this part matters :

Art direction is not only about making things prettier. On this site it has to:

• Communicate who I am as a game UI and UX designer.

• Set expectations for the type of experiences I want to work on.

• Support the navigation and content structure instead of fighting it.

By moving away from heavy scanlines and toward a more focused, cinematic hero, I can keep the sci-fi tone while making sure recruiters and art directors see a clear, confident portrait at a glance.

▹ What I learned :

• Test hero art at multiple zoom levels and on different devices. What looks stylish up close can look different at some distance.

• It is worth treating portfolio visuals like live game art. Ship, observe, then iterate with intention instead of waiting for a “perfect” version.

  
  

This part closes the first art direction loop of the portfolio, but leaves room for more updates as I keep growing as a designer.

Continue reading the series:

Part 1 | Part 2 | Part 3 | Part 4