Battleborn UI/UX design

Very proud of what the Gearbox UI Team accomplished on Battleborn.

Darksiders - Diablo 2 Clone Inventory Screen

What if Darksiders had been a Diablo 2 clone instead of an M-rated Zelda? (Note: I enjoyed playing the game.) I thought I would work up a UI element fitting with that genre and the Darksiders art-style.

Pilgrimage Start Screen and Game Select

This is a mockup for the front end of a game in my head. This also contains a little painting I did of the heroine, Puritie. I tried to take a central composition and create some motion and focal points that move the eye. The interaction is a little off of what final would be, so that it can be a bit more web friendly. I used Illustrator, Photoshop and Flash to put this together. Be sure to click the Start Button. Please allow a few seconds to load.

Some mockups for Deadliest Warrior: Legends User Interface. (Released July 2011)

Health Bar HUD Animation Test

Finally found time to create a test animation for the Mortal Kombat inspired Health Bar HUD.



Click the image to view the animation.

Mortal Kombat Inspired HUD

Over the weekend I created this Mortal Kombat inspired HUD layout. Animations coming soon.


Click to see the full version.

User Flow Diagram

This is a Front End User Flow Diagram for a game including an online lobby. The low-fidelity prototypes in the previous post are based off of this diagram.

Low-Fidelity Wireframes

These are three low-fidelity prototypes I created to demonstrate that I understand the early stages of interface development. These are first draft prototypes and have not received any testing so there are bound to be errors, but that of course is the point of creating them. These were created in Illustrator with a controlled sketchy style which helps everyone evaluating and reviewing them understand that they are proposed designs.

Select Game Screen - See earlier post for a later version >



Lobby Login Screen >



Online Lobby Screen >

Lilypad Pause Menu

I had an idea of water filling up the screen between the game space and the UI elements. I don't think the transition is there yet, but I think once the elements are in place the idea comes across. (The background here is actually a painting created by Tom Scholes, currently at ArenaNet).

Running this .swf in Scaleform solves the dithering problem seen while running this with a browser-based Flash Player.

Still, it needs something...maybe it needs bubbles. Yeah, everyone likes bubbles.

Warhammer 40K Inspired Design

I actually created this piece last year, but decided to update it a bit this week by including some additive lighting effects. I would probably dirty up the textures a bit more if I were to start over.