Dev Diary - Character Panel UI

Dev Diary - Character Panel UI

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.

Author face

Christopher Axthelm

Creator of Mad Hatter Worlds games. Facinated with logic, world building, and software systems.

Recent post