Outline the Interactions Edit

I start by breaking down everything I know needs to happen into modules (using the term loosely), e.g. "initial deploy" "take a turn" "manage your deck" etc. and then do an initial flowchart of what needs to happen for each module. I haven't gotten around to really thinking through some of the modules such as training, content creation, and choosing a game, so expect lots more questions about that stuff when I get through this.

Detail the Interaction Design Edit

Basically, I start figuring out the individual sequence of actions that a user needs in each game module and determining what information and controls he needs for each state. I expand the flowcharts from above by putting mock ups as the boxes the buttons they press or the action the computer takes by itself as the labels for the connecting lines. In forcing myself to do that, I usually find lots of places where I sort of mentally hand-waved past a series of buttons or state changes by finding places where I want to put in prose as the connecting label. I find it's a little like doing a proof, but with pictures.

Refine the Interaction Design Edit

When I get to where the flowchart doesn't have any more hand-waving bits, I start a revision cycle where I'm attempting to do the following: make the sequence of events is as minimal as possible present the information to the user as transparently as possible use interface elements as consistently and obviously as possible

Feedback Edit

Then I make it more readable by simplifying the flowchart (in this case by turning it into a sort of choose-your-own-adventure) and sharing it with developers, potential users, etc, to find out what elements or paradigms or events or use cases I forgot about. Then go back to stage 2, rinse, lather, and repeat.

Interface Design Edit

Up till now, I try to use placeholder graphics, random colors, semi-random placement and as small a format as I can. The former is so I don't get too vested superfluous design elements (after you spend a couple hours crafting a button, it's hard to ruthlessly search for ways to eliminate it). The small format forces me to only put on their the things that are actually needed for each interaction and to make hard choices about what is important enough to be bigger.

Once I get the interactions sorted out, I can I actually start the interface design. I see what's needed across enough interactions that it should be permanent vs. what can be hidden and revealed only in specific states. It also makes me see how much weight and space I should assign to different elements. I make real choices about things like how I want to highlight things (color overlay? 3-dimensionality? grow in size? etc.) or how I want to handle transitions between states.

Final Art Edit

Then I choose a design style and actually craft the individual icons, color scheme, backgrounds, etc. and work them into the interface. You won't be seeing this stage for a few weeks.

It's a finicky approach, and you'll need to squint a lot for a while to imagine how it will really look in the end, but I promise it will give better result in the end.&nbsp