Fighter X
Fighter X is a landing page designed for an immersive online game where players must save the future from a robot uprising. I crafted the entire experience using Figma and Framer, building a responsive interface powered by a custom CMS for easy content updates. The project includes a tailored design system, smooth micro animations, and AI-generated visual assets created using Whisk (Google Lab), delivering a dynamic and futuristic feel that matches the game's theme.
This project aims to present UI Design skills, following best practices related to usability heuristics from the NN Group, and optimized conversion.
Process
Design System & Visual Direction: I established a cohesive design system tailored to the game’s futuristic theme, defining components, color palettes, typography, and interaction patterns to ensure visual consistency and scalability.
CMS Implementation: A custom CMS was integrated into Framer to allow dynamic content updates, enabling flexibility for marketing campaigns, game updates, and launch announcements without compromising design integrity.
Responsive Design in Framer: The landing page was fully built in Framer with a mobile-first approach, ensuring seamless performance and layout adaptability across devices and screen sizes.
Micro Animations: I implemented subtle yet engaging micro animations to enhance the interactivity and guide user attention, contributing to an immersive and polished experience.
AI-Generated Assets: Visual assets and futuristic illustrations were generated using Whisk (Google Lab), aligning with the game’s aesthetic and accelerating the creative process with high-quality, AI-assisted visuals.
