UI/UX

The projects below focus primarily on the user interface and user experience portions of my career. This page includes theming, UI framing elements, and icons.

They are listed chronologically with the newest at the top of the page. 


First set of test UI styles for the main currency bar. 

First set of test UI styles for the main currency bar. 

Spy Battle 2165 (Original release 2008, SHG Studios)

Timeline: 30 Days

Assets Created: 10 UI style sample sets, 31 Icons, 5 Static UI Elements, 3 Popup Windows

Goals: Visually uplift UI, Unifiy art style, Shift game from text based to an icon based system

SB or Spy Battle is a text based, browser adventure game in which the player is a spy on earth in the year 2165. Their primary interactions are through text and pop up windows that hold text heavy narratives and give opportunities for player made content. 

Second set of test UI styles for the main currency bar.

Second set of test UI styles for the main currency bar.

Over the course of 30 days the the entirety of the available game from a UI stand point needed to be evaluated and new assets needed to be made. There were two primary categories that these assets fell into:

 1) Assets that had not aged well  and needed up dating. There was a base format that needed to be preserved but there needed to be a new look.

2) Parts of the UI that were either text or process photographs (left over place holders) that needed to be built from scratch.

The first step in this process was to make samples of various visual UI styles that did not require code or layout changes. One of the major restrictions presented to the project was an aging code base that would have very little programming support if any at all during the course of this uplift. Find a style that could accommodate both existing UI elements and could allow for additional pieces to be made in a relatively short order required many samples to be made and presented to the development team. The two pieces that I focused on in this state was the main currency bar that was present in the top center of the player's HUD (shown to the left) and the basic pop up window (shown below).

Generic pop up window samples.

Generic pop up window samples.

Of all the samples created, the first of the samples ended up being the style which was modified to be used in game. The green was purposefully chosen to resemble the monochrome monitors that were popular in the 1980's.

The second stage and the majority of the 30 day uplift was spent making icons and assets that did not have examples already present in the game. This included but was not limited to monochrome navigation icons that were always present on the HUD and the full colour buff/debuff icons that were designed to catch the users attention when they appeared.

Similar to SHG Studios' other titles location assets also need to be made. The game takes place on earth in the year 2165. Iconic buildings were selected from each of the 12 locations available in game. By the end of the 30 days the majority of the UI had been updated with a fresh new science fiction look.

Location 'hologram' concept samples.

Location 'hologram' concept samples.

City UI 'holograms' used to indicate the location of the player within the game world.

City UI 'holograms' used to indicate the location of the player within the game world.


The Calm Before (2015, Denius-Sams Gaming Academy)

Timeline: 6 Months

Assets Created: Over a dozen UI style sample sets, Health/Mana Bars, Timer Assets, Popup Windows, Menu sysytem

Goals: Follow design and create a cohesive and easy to read UI

The Calm Before is an an adventure game where you are racing against the clock to unlock the mysteries of an island before a storm of biblical proportions consumes.

The Journal and Indepth Menu System

Early in production there was an in depth menu system that need to keep track of information about the player's inventory, crafting, a map, a diary, options, and other various pieces of information about enemies and equipment. At this stage the game had multiple islands and travel between them based upon the resources gathered in various locations. The diary would be completed with pre-determined text chunks based on what the player did on each island. It would serve as an overview of the player's playstyle, what the player crafted, and what was encountered at each location.

The Single Screen Menu

The next iteration of the UI called for a the scaling down of the menu system. All crafting and inventory had to be presented in a single menu screen. This menu also included a durability system which was indicated by the teal or green tick marks seen in the sample screen to the left. 

All the extraneous parts of the menu system including the map (the game had been simplified to playing on one island), storing information on the enemies and the diary were all cut. 

This is also the first stage where a programming prototype of the menu was made in unity using the Unity 4.6 Canvas system. I worked closely with the programming team to rapidly prototype icons and bars to test the arrangement.

 

The Persistent HUD

The next time the UI was revisited the crafting system had been removed completely from the game. Instead of having a menu which the player was able to access by pausing the game thee was a shift to a persistent HUD that had all the information a player needed during game play. There were several iterations of this HUD focused primarily on style of the bars and icons. 

The final part of the UI that was added was the inclusion of a circular timer that notified the player of the state of the storm. Play testing made it apparent that explicitly stating the game state was important beyond just changing the sky coloration in the environment. 


Red Sun (2014, Sheridan College)

Title Screen.

Title Screen.

Timeline: 4 months

Assets Created: All menus screens (4) and HUD elements

Goals: Complete game loop through menus and design a minimalist HUD

Red Sun represented a a four month vertical slice that was made as a student capstone problem at Sheridan College in Ontario, Canada in 2014. The game was a puzzle platformer in which you play bo-peep gathering and then leveraging her sheep to solve various puzzles.

Our team was small and our resources were limited so keeping the menus and UI requires to a minimum was very important.  A sense of what the only showing the key information allowed for a beautifully simple HUD that only had to keep track of how many sheep the player had available and whether or not they had been placed.