Tuesday, November 6, 2012

User Interface Process

I've been doing my fair share of UI design. Now I'm no graphic designer. Maybe more so than the average person, but I never really studied it. So I just wanted to share my process for establishing a UI design and building it up from a concept.

Even though we had a style guide, we were encouraged to feel out any new design that may feel right. The final UI stylings were not set in stone, and we were given the flexibility to try to make it better. So most of the colors were chosen. Things like buttons and general placement were already mimicked in other UI concepts. So I took what was done previously into account and started laying out placement. From there, I further refined the design to a point that I felt comfortable finalizing the concept. Once I could see it in a more final form, I continued to tweak the design until it felt right to me. 

I'm more of a visual person, so I like to sketch and refine throughout a process. Hopefully this is somewhat informative as a way to design UI. (For all I know it's completely wrong!)

The first step involves me laying out just the info that is important. Not really paying attention to placement.

I slowly refine how the info is give to the player while playing with its positioning.

I could tell that the above UI was not going to work, so I added summary buttons to reduce the clutter.

I split the layout into verbal data and visual/interactive data. Also this makes it easier to change the verbal part on the fly.

Took the above b/w concept and added the style of our game to it. 

I could tell some things were not balancing right. I shifted the money/comfort data to the right which gave the screen more room to breath.

The data still felt constrictive, so I split each into it's own section. Added a random button for summary that would not work with our design.

Created this for the final UI to give to the designers. Added the summary button back and  simplified some of the data.