Ubisoft Toronto NEXT 

2018/19 - User Interface Student Competition. 

Team: Solo Project 

Timeline: 1 Month

Tools: Figma, Illustrator, Photoshop, After Effects

Project Brief

Design Challenge

Design and pitch a UI Style Guide that successfully conveys the theme of Punk Resistance in the Year 2080



  • Produce two high fidelity screens: a menu UI and a gameplay HUD UI. 

  • Develop iconography for unique player abilities

  • Display motion concepts


Key Game References

Group 10.png

Visual Guidelines

Flat design theme was applied to all UI elements. The benefits of using this style include: 

  • Monochrome colour palette removes complexity/ visual noise

  • Simplified/stylized shapes can be leveraged to associate the function of each UI element

  • Ability to be legible at a small scale

Icon Guide.png

Early Designs


Visualizing and organizing the required components for the user interface.


User Flow Diagrams

Indicating how the user interface changes based on player input. For example, a user flow diagram was used to map out how the screens changed when a player wanted to equip a new ability.

Ubisoft Next_ Misc.png

Low Fidelity Wireframes

Low fidelity grayscale wireframes were built to organize the required UI elements. In this stage of the design, there was an emphasis on spacing, layout and the visual hierarchy of the UI elements.


Early Designs

First Iteration - Early iterations of icons had problems of being too complex, unreadable, and lacked consistency.


Second and Third Iteration - use of simple shape language, flat colours, and negative space.


Final Designs

Icon Guide_edited.jpg
Extra Icon Guide_edited.jpg

Putting It All Together: High Fidelity Mockups

Visual Style Guide

Visual Style Guide.png

Final Mockups