Project
UI Design
2021
Synopsis
Final Fantasy is a classic Japanese RPG franchise with stand-alone games. The games have branched into MMORPG, Tactical, Fighting and Multiplayer gameplay.
Tools
Figma - Photoshop
Typography
Colors
Wireframes
For the collection homepage, i wanted to put the main protagonists at the center. The wireframes helped gain insight into which information has the highest priority. Since it is a collection, the games are at the center and other content surrounding FF has a place lower on the site.
The first draft was to see which information would look best in which place. Since SE currently has alot of content on FF, it would be natural to create a scroll-oriented landing page. New users will be curious as to what the franchise is about and returning users are more inclined to visit pages as the news and pre-orders.
The second sketch has a variety of possible buttons for the games. I wanted to see which shape would have the most dynamic look. Eventually these will be tested with high-fi examples.
I tried giving the news a higher place since people that visit the collection might be more interested in the news, as seen in the current Final Fantasy portal site.
I tried giving the news a higher place since people that visit the collection might be more interested in the news, as seen in the current Final Fantasy portal site.
Design system
To maintain a good workflow, I put effort in setting up a design system with assets to make the button collection easier to manage. Every button has its base and hover state and all the images are scaled the same way, which made animating it easier.
Need a cool UI design for your next groundbreaking game?