Frontline
Client
Personal project
Personal project
Services
Videogame UI/UX
Videogame UI/UX
Year
2023
2023
Frontline is an imaginary multiplayer FPS for PC that draws inspiration from renowned titles like Call of Duty, Battlefield, and Hell Let Loose. The game goal is to fully immerse players in the chaotic and brutal battlefields of World War II, offering large-scale multiplayer battles that emphasize player collaboration and uncompromising realism.
Creating a comprehensive flowchart that outlines the player's journey from launching the game to concluding the gaming session, enabled me to determine the most important screens and the structure of the game's menus.
Defining the art style and overall mood of the gameplay played a crucial role on consolidating the general idea I had about the game. Initially, I developed a wordboard consisting of vocabulary that describes the ideal game experience. From there, I transformed these concepts into a visual moodboard to effectively communicate the game's desired visual direction.
Once I achieved a clear vision of the gameplay's look and feel, I applied the same process to establish the UI art style. The objective was to create a striking visual contrast between the gritty yet cinematic gameplay and the sleek, modern UI design. This deliberate contrast aimed to enhance the player's immersion while ensuring a seamless and intuitive user experience.
%20by%20MassDream%20copia.jpg)
Focusing on the player profile section, I began designing the screens by dividing the process into four key stages: defining areas, creating wireframes, building prototypes and developing mockups.
I started building the wireframes employing a three-column structure that helped me to consistently organise the profile menus, ensuring intuitive player navigation. Working with wireframes allowed me to quickly test and iterate different screens layout without concerning myself with style and color choices. This enabled me to prioritise functionality and usability during the initial design phase.
Following the wireframe creation, I proceeded to build a clickable prototype using Figma. This prototype served as a valuable tool to test the UI's functionality and gather user feedback.
Try the prototype
Headers
Josefin Sans Semibold
Subheaders
Josefin Sans Regular
Body text
Josefin Sans Regular
With the chosen style in hand, I seamlessly integrated it into the previously created wireframes.
As I worked on a not existing game, I utilized image assets from movies, miniatures, and other video games. These assets were carefully manipulated through Photoshop to adapt their aesthetic to the Frontline video game.
All rights reserved to their respective owners.
All rights reserved.
