This week in Archmage Rises: User Interface Magic

(Cross posted from my personal dev blog site)

This past week, I focused my development efforts on the user interface (UI) of Archmage Rises.  Proper software development methodology mandates that we should take on the highest priority, highest risk items first.  We should do this to save enough time and energy to deal with the truly dangerous issues: the unknowns :) Archmage Rises is a UI-heavy game, and the interface is core to the entire game experience.  Fortunately, I'm working with the very talented UI artist Rick Grossenbacher.

Note: We're only about a quarter of the way through the process, but I thought I'd share the approach and progress thus far.

UI Game Challenges

Archmage Rises’s art style ranges from bright and optimistic to subdued and dismal. This has resulted in a number of unique UI challenges—such as needing to find a color range we can use that isn't garish or that clashes across different scenes.

Mock Up

In my software background, I used Visio to mock up screens for clients.  Then I discovered Balsamiq.  This tool, made by a small company in Italy, is phenomenal.  It is specifically made for mocking up software UI in seconds—something that is impossible with Visio:

So I made about 30 different mockups of various screens—trying to wrap my head around what I needed.  This is probably the best one.  So I sent this to Rick:

(Note: This mockup uses placeholder art i took off the internet.)

References

Rick then said that we would need to nail down a "feel" or style for the UI before he could really get going.  Like looking at hundreds of paint swatches at Home Depot, he pulled together 30+ game UIs from various RPG and strategy games.  We talked through what I did and didn’t like, and we narrowed it down to these two.  I recognize that they are totally incompatible with one another:

We don't actually know the name of this game, so we just call it "the Chinese game."

The Feel

Archmage Rises is a serious game.  It is “mature” in the sense that it is morally complex—with players weighing different choices.  I summarize by saying that it’s a game with gravitas.  Diablo 3 is too dark and gothic. The Chinese game is too bright and happy.  So I told him to just make something in between. :)  It ultimately came down to picking a color.  Diablo is red-based; the Chinese game is gold-based.  What would our color be? 

Thinking of the Dragonlance source material, I wondered what color Raistlin would use.  But then I remembered: Fistandantilus' spell books were midnight blue.  I like painting miniatures with that color, so I sent that to Rick as a possible starting point.

The Iterations

We are going for the complex layered look of Diablo 3.  So Rick made up this sample to show UI space verses content space:

It looked good to me!

Then we went through some iterations with midnight blue:

Before we went any further, the next step was to try it out in game. We haven't worked on the buttons so I just used some generic placeholders.  I was also working on tooltips that fade in and out at the time, so I tested it all together:

So far so good!

It will likely be several more weeks before we have a complete UI to share.  Here is a pic to show where we are going with it compared to Diablo 3:

Stay tuned for more on the development of Archmage Rises :)

SGD

You can follow the game I'm working on, Archmage Rises, by joining the newsletter or chatting with me about it on the daily facebook page.
Or if you really want to call me out on something, you can tweet me @LordYabo