Digital Unicron
G4C is a game studio focused on creating and publishing games with content creators. The landing page needed to communicate G4C’s unique approach, showcase its creator-driven games, and explain how creators can turn their communities into engaging game experiences.
I designed and built the landing page from concept to launch in Framer, transforming this business story into a bold, playful, and creator-focused digital experience. I brought together G4C’s brand identity, partnership model, production process, and game portfolio into a clear visual journey that encourages creators and potential partners to explore and get in touch.
My Role
Timeline
1 Month · Concurrent Projects
Tools
Figma, Claude, Framer
Market
🇫🇷 France
The brief defined the key business goals, content requirements, and website structure for G4C. I reviewed the provided Content Structure, and Requirements slides and translated them into clear design objectives for the landing page.
01 — Communicate G4C’s Value Clearly
Create a landing page that quickly explains what G4C does and why creators should work with them.
02 — Build a Strong Creator-Focused Identity
Position G4C as a modern, innovative gaming company that connects content creators with game development opportunities.
03 — Showcase the Ecosystem
Present G4C’s games, production process, publishing capabilities, and creator partnerships in a clear and engaging way.
04— Make the Brand Feel Playful & Gaming-Focused
Balance G4C’s professional business positioning with a more energetic visual language inspired by gaming and creator culture.
We explored a wide range of gaming platforms and publisher websites to analyze their layout patterns, content presentation, and visual trends. We specifically explored Framer websites to define the direction for G4C.
At the early stage, G4C did not yet have a clearly defined visual direction, with the CEO and team exploring different ideas for the brand’s look and feel. I translated their feedback into multiple visual explorations, adapting the color palette, typography, imagery, and overall tone with each iteration. As the direction became clearer, I refined the designs toward a warm, playful, creator-centric visual language that balanced G4C’s gaming identity with a more approachable personality.
Collaboration
Throughout the process, I worked closely with Lucas & Angie to refine the direction, align on the vision, and bring creative ideas to life together.
🔍 Let’s break down the key design decisions behind each section
The hero section is the first impression of G4C. It needed to instantly communicate who we are, who we serve, and the value we bring to creators and games.
Clear Headline — Communicates the message instantly.
Creator + Games — Shows G4C’s ecosystem.
Industry Experience — Highlights the team’s experience at major gaming companies through a trust-building slider.
Starts with a soft fade-in... floating icons add subtle movement, the center emblem gently rotates, and the industry-experience slider reveals the people behind G4C. ⭐
This section highlights why creators can benefit from building their own games, presented through a more engaging and interactive experience.
Initial Approach — Bento Cards
I started with a bento-style layout to organize the three key reasons clearly and make the content easy to scan.
Design Evolution — Interactive Spiral Scroll
I evolved the static cards into an animated spiral scroll, combining imagery, gradients, and content to create a more dynamic storytelling experience. As users scroll, each card reveals a new message while maintaining a continuous visual flow.
G4C’s five-step production process was designed to simplify a complex workflow. Supporting imagery, clear content hierarchy, and subtle parallax motion make the experience more engaging and prevent the process from feeling like a static timeline.
This section introduces the creators behind G4C’s games, highlighting their social, audiences, and the games they bring to life.
Interactive Experience
I evolved the creator showcase into an interactive scrolling experience, giving each creator a moment in the spotlight. Each card brings together the creator’s identity, social audience, key platform statistics, and the game they created, along with a preview of the game experience. As users scroll, each creator card gradually scales down and moves behind the next, naturally bringing the following creator into focus.
G4C supports games across six stages, from platform operations and launch campaigns to customer support and live ops. I organized these services into a visual card system using bold typography, color, and simple graphics. The horizontal scroll cards let users move through each stage smoothly, making the process easy to explore and follow.
This section introduces the people behind G4C and highlights the creative and technical expertise that brings each game to life.
Initial Approach —Horizontal Slider
I started with a simple horizontal slider to showcase the G4C team, allowing users to scroll through each creator card.
Design Evolution — Interactive Core Team
I transformed CORE TEAM into an interactive team showcase, giving each of the eight letters to a different team member. Hovering over a letter reveals their profile, turning the team’s name into an interactive way to meet the people behind G4C.
I initially used a collage-style layout to introduce each co-founder individually and highlight their experience. However, it felt visually busy and focused too much on separate profiles. I simplified the composition by bringing the three founders together, placing their roles and experience around them, and using bold typography as the main visual anchor. This creates a cleaner, more focused layout and gives the team a stronger, more unified presence.
Initial Approach
Refined Direction
The section puts people at the center, combining famous content creators with the G4C team to show the connection between creators and the people behind the games. The large team image creates a strong human focus while supporting content explains G4C’s role in bringing them together.
Making G4C’s core strengths easy to explore.
I presented G4C’s key strengths as a visual card system, using bold imagery and clear labels to make each idea easy to understand. Instead of showing all the information at once, hovering over each card reveals more details, keeping the layout clean while allowing users to explore the information when they want.
I presented G4C’s partnership model through three key ideas: Investment & Revenue Sharing, Creative Ownership, and Continuous Collaboration. I used a clean, text-based layout to keep the information easy to scan while keeping the section visually minimal. Hovering over each point reveals a supporting image, adding more context without making the layout feel crowded. This creates a simple and interactive way to explore G4C’s partnership model.
Inititial Approach
Final Direction
11 — Footer
I explored two different footer options and presented both directions for the client to compare. The client preferred the second option because the G4C text treatment felt more aligned with the typography used in the logo. I kept the footer structure simple while using this typography as the main branded element, creating a consistent connection with the rest of the website.
Alternative Approach
Final Direction
I adapted the website for mobile by restructuring layouts, adjusting typography and spacing, and repositioning visual elements to work naturally across smaller screens. I also implemented and refined the responsive behavior in Framer, simplifying interactive sections where needed while keeping the core visual identity, hierarchy, and overall experience consistent across devices.
Business Card
The project started with a kickoff meeting between the client, project manager, and design team to align on the product vision and direction. The client shared moodboards and visual references to define the look and feel, followed by a detailed PRD covering the design and development requirements.
Key Learning & Reflection
Embracing Iteration
This project taught me that good design is often shaped through iteration. With frequent back-and-forth feedback, I had to revisit decisions, explore different solutions, and refine the experience while keeping the overall direction consistent.
Clearer Communication
I learned to communicate my design decisions more clearly, using simple explanations, visual examples, and reference points. It helped align everyone faster and reduced unnecessary revisions.
Adaptability & Turning Feedback into Better Solutions
The constant feedback pushed me to stay flexible, quickly adjust my approach, and think about multiple solutions. It strengthened my ability to listen, collaborate, and turn feedback into meaningful improvements while keeping focus on the bigger picture.
Designing & Building in Framer
Building the website in Framer challenged me to think beyond static design. I had to translate the UI into responsive layouts, interactions, animations, and real web components while solving unexpected implementation challenges along the way. Some ideas had to be adjusted during the build to work better on the web, which helped me understand the connection between design decisions and real implementation. It strengthened my ability to take a project from design to a complete, live experience.