Overview
My work on Wilder World focused on translating the scale and ambition of a photorealistic metaverse into a web experience that feels immersive and intuitive. The goal was to reflect the depth of the world and its offerings without overwhelming the user; to create something that feels cinematic, but still works as a functional site.
I worked on visual direction, layout systems, and web interactions that could support rich storytelling while staying lightweight and responsive. Design decisions were driven by contrast: sci-fi UI elements against expansive, otherworldly visuals. The structure needed to flex as the platform evolved, while always guiding users into the Wilder narrative.
The result is a site that introduces Wilder World with clarity and atmosphere, giving just enough of the world to make you want to explore more.
STEP 1
Discover
Wilder World is built on a vision of a photorealistic, decentralized metaverse, where sci-fi ambition meets immersive realism. The brand’s design principles are rooted in cinematic storytelling, a bold orange-cyan color palette, and high-contrast futuristic UI.
My exploration began by curating a moodboard that blended sci-fi film aesthetics, game UI references, and surreal digital landscapes to guide the visual tone and atmosphere of the site.
STEP 2
Define
Wilder World’s visual language is grounded in clarity, contrast, and cinematic immersion.
The design needed to feel cinematic but not over-designed. The site had to guide users through a dense world without making them feel lost or overwhelmed.
The goal was to create a system that could scale as Wilder World grows, while still feeling cohesive and intentional at every breakpoint.
STEP 3
Develop
The site was designed and built entirely in Framer, which made it easier to stay hands-on through every part of the process, from layout to animation.
Hero sections were powered by high-fidelity visuals rendered in Unreal Engine 5, giving the site a photorealistic foundation.
Scroll-based animations and transitions were kept minimal but intentional, helping guide attention without overwhelming the page. Each section was treated as a narrative block, with interactions that feel smooth and consistent across devices.
Typography & Colors
Typography is split between Rajdhani and Archivo. Rajdhani in ALL-CAPS for bold, declarative headings, and Archivo for clean, readable body content. Each type style is assigned a defined role, maintaining visual hierarchy across screen sizes.
The color system draws from the iconic orange-teal cinematic grade, creating a dynamic balance of contrast and emotional resonance. This palette anchors the brand in a retro-futuristic aesthetic while delivering clarity and energy across the interface.
Primary
Primary background
60-70%
Absolute Black
HEX: #000000
RGB: 0,0,0
Accent 01
CTA / Notifications
10-15%
Neon Orange
HEX: #FF6434
RGB: 255,100,52
Secondary
Supportive UI elements, Text
15-20%
Soft White
HEX: #F5F5F5
RGB: 245,245,245
Accent 02
Icons / Decoration
<10%
Vibrant Cyan
HEX: #00BCD4
RGB: 0,188,212
STEP 4
Deliver
The final experience was designed and built entirely by me in Framer, without any developer involvement. Every layout, animation, and interactive element was crafted directly in the tool, allowing complete creative control and fast iteration. The result is a cinematic, responsive web experience that captures the essence of Wilder World while remaining lightweight and intuitive across devices.
Conclusion
This project taught me the value of doing less, but doing it with intent. Wilder World had so much going on visually that the real challenge wasn’t what to add, but what to leave out. I focused on keeping the site clear, responsive, and immersive without trying to do too much.
Working solo in Framer gave me full control, which helped keep things fast and flexible. I could prototype, tweak, and polish everything directly without handoffs, which made the process a lot more fluid.
In the end, the goal was simple: introduce Wilder World without overwhelming it. Let the visuals speak, guide the story, and keep the user wanting to explore more.
