Ubisoft Toronto NEXT
2018/19 - User Interface Student Competition.
Team: Solo Project
Timeline: 1 Month
Tools: Figma, Illustrator, Photoshop, After Effects
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
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
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.
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.