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).