Style Guide

This style guide is within the Microsoft Accessibility Guidelines for PC at 1080p.

Some text on the screen is not significant for the player to read but works as filler to construct a symmetrical UI.

Making a Camera HUD

The project is a horror game sequence (based on an existing game SOMA) set in the deep ocean about the existential horror that comes with technological progress and deep-sea discovery.

This project focuses on showing the importance of working in-engine early on.

Unity Final UI

Figma Final UI

Concept to Design

To start with, I identified all of the features I wanted for the camera:

(1.) Horizontal (yaw) rotation,

(2.) Vertical (pitch) rotation,

(3.) Camera zoom (FOV),

(4.) Audio bars (for 3D world audio).

Established in the world of SOMA, I analyzed the UI in the game to make the designs congruent.

I skipped the gray box/wireframing phase since I started work in Unity immediately because I wanted the UI to function well with the post-processing as you can see in the images below.

In-Engine Progress

I skipped the gray box/wireframing phase since I started work in Unity immediately because I wanted the UI to function well with the post-processing as you can see in the images below.

World Building

Since the world is in an already established world, I used the assets from the game to make it congruent with the world-building of SOMA.

The icon to the left is the logo for the operating system all computer use.

The icon to the right is the chinese symbol (漢字 - kanji) for "tool".

Takeaways

This project has made me realize how important testing your design in-engine is to get an understanding of the engine's features but also if the project is within my capabilities.

During planning of this project, I imagined a scenario where I'd joined a team to build some UI for a game they've already made assets ready for use. The making of this project could be like that experience. It went a lot faster than I expected.