Web
Analytics
Ubisoft Next 2019 | Sukhraj Johal

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

 

Deliverables

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

  • Develop iconography for unique player abilities

  • Display motion concepts

Research

Key Game References

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

Early Designs

Thumbnails

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.

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.

Iconography

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

Putting It All Together: High Fidelity Mockups

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.

Visual Style Guide

Final Mockups

© Sukhraj Johal 2019