Thursday, February 5, 2009

The UI - Now With 82% Less Eye Bleeding!

My first attempt at a UI for Big Villain was notable only for how incredibly horrible it was. The act of simply looking at it was enough to cause you permanent eye damage. So, finally I've got a new version of the UI that is quite a bit less horrible. It's still not anything that's going to pull people in because of its attractiveness, but at least it will drive fewer away than before.

First up is the new splash page, complete with nifty zooming thumbnails of the UI that you can click on to preview it before you sign up for an account.

Big Villain Splash Page

Lastly we've got the new version of the control panel in the game. In addition to the better looking panels and background and a logo that no longer makes me wince every time I see it are the new icons on each operation. I wanted those in there for multiple reasons. One was that the UI desperately needed some color and variety. Another was that it was pointed out to me that when messages arrived, you often had no idea at the start of the game which of your actions caused them to occur. Now by tying the little icon on the message back to the operation it helps make that connection. I also was trying to give the idea of the elements on the periodic table of the elements with the boxed letters that symbolize each operation. After all, it's a game about mad scientists, it makes sense thematically. Hopefully in a later version I can make them more attractive, but for the moment these will do.

Big Villain Control Panel 3

P.S. You don't have to tell me about the godawful baby blue color in the back of all the tabs, it's about to go away. Although I love the YUI controls, I don't want to pay the extra download cost of having YUI and Prototype/Scriptaculous in the game and I also don't want to fight YUI to re-skin the control to colors that I like better than these. Instead I'm just going to drop all the YUI stuff except for their great CSS files (for which Prototype has no equivalent) and use a Prototype based tab control instead.

No comments:

Post a Comment