This is an inventory UI concept that I based on one of my own games I work part time on. My goal for it visually was to make it have a backpack look to convey the feeling that you are searching for items in your own backpack. The visual theme also sparked ideas for the belt tabs and the zipper scrollbar. I also decided to make everything that is clickable have traces of gold and teal in their color scheme. This would help give guides for navigation, which combats the issue of a lot of detail potentially being distracting. I…

I created a steam punk style map screen concept that would work for PC controls. My goal was to make a design that works with 1280×720 to 1920×1080 size screens and use repeating techniques to keep the image size down. My solution was making the smaller screen show all the necessary content and the larger version adds extra details and spaces things out a bit more. I also wanted to give the UI a hand painted feel, so I often repainted over the main shapes and shadow effects to blend everything. The player would encounter this screen while on their…

I designed a UI that would work for a zombie strategy game on social media like Facebook. The game mechanics would be similar to Rebuild 2 and have new features like multiplayer and capturing other player’s buildings by controlling small teams of units. I separated the UI in two main windows, the left shows up whenever you click on a building or enemies and the bottom shows up when you click on a team. This allowed a large amount of specific orders that the player could do. For example when you click on an occupied building, it gives you options…

This is a mock UI for a fantasy RPG style game on the iPhone 5. My goal for this exercise was to give a convenient way for the player to buy large quantities of supplies with various item choices using the touch controls. The solution I came up with was to touch on the left red squares to make a slider pop out and then drag it left and right to increase the quantity. The player can also easily scroll through the item list by dragging up and down, and the slider on the right shows the list position. After…

I’ve done an experiment to analyze AAA UIs and how they were made by recreating them from scratch in Photoshop. Most of the techniques used were shapes and layer effects, then a bit of painting and texturing over top. I don’t know for sure if the original user interfaces were built the same way, but this was quite a rewarding exercise anyways as it has pushed me to think of UI a bit differently and the challenge really unlocked some new abilities for me.