UI Design

On this page you can see examples of my UI Design work. Each project has a video showcasing the UI in motion.

 
 
 

Untitled Fishing Game

This is a mockup of the menu system for a game about fishing. This is specifically designed for use with a game controller. The right stick controls a cursor and the background scrolls in the opposite direction of the cursor to make selection. Inspired by modern game console UI designs like Destiny and Assassin’s Creed.

 
 

FastLane Redesign

This is a redesign of the Auto Shop menu is Space Ape’s Fastlane mobile game. To improve the menu I reduces the colour pallete and flattened the design to make it less cluttered and overwhelming at first glance. I also spread the menu over two screens instead of one.

I wanted to draw more attention to the car since this menu is the best place for the user to admire their upgraded and customised car. So to both reduce clutter and make the car bigger onscreen I had a full screen of the car when you first enter the Auto Shop. When you do choose a car it rotates and scales down slightly to make space for the upgrade menus.

I also wanted to make upgrading and spending the money you earned in game/ purchased feel more satisfying. To do this I added more micro-interactions and transition animations to make the UI feel more responsive and satisfying to use. I made the car shake when you upgrade it, I kept a similar animation to the original menu but then after the upgrade is complete I added an animated sheen to the upgraded item to reinforce the good feeling of upgrading. These little animations also help to keep up the pace and excitement of the actual gameplay.

 
 

Espionage Reskin

This used the same layout as the previous Fastlane design but it this revision I added my own espionage themed visual treatment.

The first thing that came to mind when reading the word espionage were the Bond movies from the 60s. For inspiration, I looked towards the work of illustrator Kevin Dart as well as girl groups from the 60s. I also looked at analogue video graphics and schematics from this era and the poster design of Saul Bass. You can see more examples of my visual research in the pdf included and at https://www.pinterest.ie/pauloreilly186/espionage/

In my mockup, I reduced the colour palette even more but still stuck with vibrant colours to keep the feeling of fun and joyfulness. I changed the font here to courier new to give it a typewriter feel and give the design more of a sense of time and place. I also flattened the design even more, but I did try to keep a sense of depth in the background by using a low poly 3D model and subtle camera movement (or even a tilt parallax effect if feasible).

 
 

#Topshaggers

#topshaggers in an app for android devices. This video shows some of the UI in motion.

You can read more about this project here.

 
 

Visual Development

Initial designs for an illustrated UI design. These designs are how I originally translated standard phone UI into an illustrated/ animated style.