Samples of User Interfaces - from the game Yaris for the X-Box 360

There were several "heads up" displays we tried out for the Yaris game. This is one mock up I created for the Game Designer.  It has added notation that would not be in the actual UI.
















This is one variation on the in game Pause screen for the Yaris game.

An UI Progression

An, as yet unfinished, UI for an unpublished project.
~Click on the image to view the larger version~

The Progression of a Steampunk UI

I always start with rough sketches. These that can be small, 3 x 5 or so.
-Click on images to see them larger size-




















After getting some ideas and feedback, I will do a larger sketch. I will often take a rough sketch into PhotoShop by scanning it and do some clean up. Once in PhotoShop, I begin to block out basic areas and place stand-in text to see if it all fits together before getting too involved.


The larger sketch:

























This early version still shows some blocking out, but I have already started putting in a few touches for flavor. Many elements are blocked out in flat colors ~ such as the blue areas are to block out where gauges or meters will go. Hull Integrity will be basically the health bar for the space ship.



















I often use a variety of packages to get the look I'm trying for. Some times I use reference photos to work from, some times I grab elements from photos, and I even do quick 3D builds.It is now in an iPad resolution (1680 x 1050).

Break Down for Typical FB Game UI

Most of the Facebook games have a similar UI layout.  This was my breakdown of a typical UI when we were looking into making a Facebook game.