Dev Diary - Character Panel UI

Posted by : at

Category : MMORTS   Dev-Diary

While one of the most important aspects of a game, it is also one I dislike programming the most. While getting components to stay put is often frustrating, UI isn't difficult to do; the main problem is that it forces me to think artistically about objects I normally only think logically about. Making the abstract not only visual, but appealing as well.

Tonight I find myself working on the Character Panel, a view that shows the user information about their user/character. It seems simple enough, I have the data model in front of me. Name, Faction, Level, Experience, etc. the data is all there. The problem comes from how do I want to display it. "How much white-space do I put to keep from showing a 'wall of text'", "do I make fields editable and allow the user to update their information (i.e. profile story) right there", "do I want to show recent achievements on this screen", and many more questions flood my mind.

Unit Select screen

Unit Selection screen

I often start drawing the screen over and over again. I have a trusty metal ruler, a fine point mechanical pencil, a ream of printer paper, and my years of UI experience (both using and creating) to tease out a good design. Trying ideas on paper, marking what I liked or hated each time, and starting over again.

It feels a lot like being a smith forging a new sword. I start with a large hammer and work on the general shape; how much white space, about what information I want to show, and general location of each item. After the sword, screen, or panel starts to take shape I move to a finer hammer to work on the edge and details; font sizes, finer positions, groupings. The final step is the polishing and setting the UI elements.

Useful Links