UI Planning: Flow Charts

In trying to determine scope, I’m trying to ascertain the number of screens (or screens with overlays) that are required throughout my game, Failed State. I’ve sketched out some diagrams and as much as the agile way of thinking tells me I should just take a photo on my phone and upload it, it’s nice to have a formatted version… so I started looking for a tool.

What I needed was a flow chart. I think Microsoft Word has flow chart drawing features built into it, but I don’t have a license for my mac. I tried Libre Office but I got the impression really quick that was going to be a mission. I then started to look for online alternatives.

I saw Lucid Chart first, but they wanted about $3 a month or something. That sounds like a good business model and their product looks top-notch but I haven’t committed to this whole idea yet so I kept looking. Next I saw something call Gliffy but gave it nothing more than a cursory glance; then I saw draw.io.


From my 1 hour of playing around, draw.io seems like the perfect example of a web application. Drawing feels like a desktop app and my chart saves automatically to my dropbox account. Funny enough, I’d just created a dropbox account yesterday so that I could link pictures on these posts I’m making (I think my web hosting service has server side wordpress restrictions so I can’t upload via wordpress).

Here’s a resulting gif from the night’s work.

The basic idea is the the Main Menu screen flows into the World Map screen which in turn flows into the Game World screen. Extra screens are displayed depending on whether one off missions are selected or a campaign is in progress. It’s definitely not a complete drawing; the three adjacent Game World screens probably need a container box around them and there are no supplementary screen such as Settings, Leaderboards etc.

As mentioned in a previous post, for now it’s all about completing that first draft.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s