top of page

user interface exploration


The ultimate objective of this project is to develop design elements tailored for a competitive fighting game. Initially, a design brief and a thorough market research will set the stage, using select references to spark inspiration for the design concepts. Subsequently, various fonts will be explored to find the perfect fit. Furthermore, by incorporating anti-vision techniques, the design of icons and buttons will be undertaken

Miro and Photoshop were the primary tools used for this project

project goal

The design brief step involved defining the target audience, pinpointing key adjectives to capture the game's essence, and establishing concrete goals for the project's outcomes.

design brief.

The market research phase categorized fighting games along two axes: casual versus hardcore gamers and arcade versus realistic styles. After mapping existing games onto this spectrum, a gap was identified for a game that blends a high degree of realism with a hardcore gaming experience, denoted by a blue star.

market research.

Subsequently, the project delved into analyzing existing designs, selecting various user interfaces from current titles to inform the visual and atmospheric direction. This investigation aimed to distill elements that resonate within the genre, providing a foundation to craft a distinct aesthetic for the new game.

references and look/feel.

The next phase involved selecting a distinctive logo from a curated set of bold and sporty fonts, sourced from 1001fonts.com. The top three fonts were evaluated for their compatibility with the hardcore and realistic aesthetic of fighting games. The final choice, "Higher Jump," was chosen for its legibility, style, and alignment with the brand's identity, from which the game's logo was crafted.

font and logo.

The following phase was to conceptualize an anti-vision, establishing a clear picture of what the project should steer clear of. This process involved creating a visual collection of design elements and styles that are not desired for the final product, guiding the creative direction by contrast.

anti-vision.

Following the initial research and planning stages, a set of buttons and icons was designed. However, the result didn't quite hit the mark; it lacked the intended impact and veered off course from the core objectives established in the design brief.

buttons & icons.

To refine the creative direction, further references were examined, focusing on those that closely mirrored the desired aesthetic and functional qualities. This step was crucial for gathering fresh ideas that could be adapted to achieve the distinctive look and feel aimed for in the project.

more references.

Drawing on the gathered references, an user interface was designed for text selection and selection panels. This iteration marked an improvement, better aligning with the project's vision.

text selection & selection panels.

prev project

view all

next project

bottom of page