The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
FIFA World Cup Game UI – Premium Football Game
This project is a premium football game UI concept designed in Figma, inspired by the excitement and atmosphere of international football tournaments.
The goal was to create an immersive in-game experience where players can easily navigate between game modes, manage their favourite footballers, customise kits and equipment, review player attributes, and prepare for upcoming matches—all within a clean, modern interface.
The design focuses on balancing cinematic visuals with intuitive gameplay navigation, making the experience feel engaging while keeping important information easily accessible.
Hello! what is the practical application of this?
Great question! This concept is intended for a football game home screen where players can manage their profile, customise kits and equipment, browse their squad, view player stats, and prepare for upcoming matches. It's a portfolio concept exploring a premium AAA game UI experience.
Hey! thats really amazing actually! the fact that youve designed this so well. Looks really amazing, Have you gotten a chance to have this deployed? This would look amazing!
Thank you so much! I really appreciate your kind words. 😊 At the moment, this is a UI/UX concept created in Figma and hasn't been deployed yet. I'd love to see it brought to life in a real football game someday. I believe it could translate really well into an actual in-game experience.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
Claude
Claude has entered the design space. How are you using it?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
Brand Design
The best brand designers are on Contra. Scroll to see what's trending in brand design. What are you building?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?
Related posts
Sharing something I'm working on right now.
Two directions for the same screen. One keeps everything in a focused card – the button and the conditions right where you look. The other turns the whole screen into the place: more atmosphere, less interface.
Which one feels easier to use? And if the prettier one isn't the easier one for you, tell me in the comments – that's the part I'm stuck on.
8 voted
42%
11 voted
58%
19 votes
Closed
Both of looks clean and well thought out. How long did it take you to bring everything together?
testing two versions of the new Synth navigation
one cuts into the top edge like a notch
the other floats below it like a pill
which one feels better?
12 voted
40%
18 voted
60%
30 votes
Closed
I like both, but would go with the pill because of the functionality on Mac, it would be better than the notch.
Introducing Decksmith, an AI-powered presentation platform that transforms rough sketches, prompts, documents, and existing slides into professional, on-brand presentation decks in minutes.
By combining AI generation with optional expert review, Decksmith delivers presentations that are visually polished, strategically structured, and tailored to the audience.
I designed and built the landing page using Finish Layer's advanced capabilities to achieve a polished, production-quality experience.
I leveraged the Layers Panel to precisely control element stacking, especially in the hero section, ensuring the correct elements appeared on top while background elements remained behind to create the desired depth and interaction.
I used Mobile Overrides to hide elements that exist on desktop but are not necessary for the mobile experience, allowing for a cleaner and more optimized mobile layout.
I applied Block Animations & Transforms to add interactive elements and visual polish across almost all sections of the landing page.
I used Custom Font Uploads to apply specific font styles for unique elements, such as the scrolling marquee text.
Tools: Squarespace · Figma · ChatGPT · iMovie
Life Demo:
https://decksmith.squarespace.com/
Password:
decksmith
This looks amazing!