Monster Kingdom 2 UI - Visual Design
The Monster Kingdom 2 UI provided several interesting challenges. Foremost was finding a way to present all the data, statistics, and verbose descriptions that players expect from a mid-core strategy game, while doing it in a way that harmonized with the colorful, cartoon aesthetic of the world we were creating. This meant incorporating bold, saturated colors while paying strict attention to grid layouts and type treatments to help create visual hierarchy. The most contentious point from an interaction perspective was the set of battle controls (2nd from the left). We opted to use a "swipe up to cast" interaction, instead of a simple button - it made the battles feel more interactive, and the 'swipe' interaction also freed up a second 'tap' interaction on the location. When iOS 7 came out, it featured a control tray that could be dragged out from the bottom of the screen, forcing us to relocate the controls a little bit and adjust the touch area!
UI Design Workflow
The first step I like to take in developing a game UI is laying out a Visual Design Document. This gives me a rough idea of the project's scope in actionable terms like # of screens, popups, takeovers, navigation types, etc. From there, I can identify which screens are most critical to our core loop and begin mocking up wireframes for those screens. The goal for the earliest wireframes is less about attractive layout, and more about finding ways for our users to move as smoothly as possible through the core loop. Once I've solved all the problems I can solve here, I put together a quick style guide so we can get the dev team working on some prototypes. Once we've got our prototypes on devices, we can start iterating based on the feedback we're getting in-house. The product of that iteration is usually something good enough to put in people's hands, so we'll populate the UI with some artwork and start collecting feedback from a larger group of users. The screenshot on the right is part of the UI we took with us to a gaming convention, where we got some great input from playtesters. From there, it's a constant cycle of test, feedback, iterate, release - and it continues well after "launch"!