Another good weekend of progress.

Decided that to document some of the user interface nuances we needed some kind of stop motion capture system. Back in the day when I was more hands-on in UI/UX I had a lot of success prototyping with paper animations and with Mr10 raring to go we turned this into a fun project.

So I took a pair of polystyrene containers, joined them together…

.. and we carved up a stop motion studio. Access from two sides and a secure mounting point for the camera on top. When we were finished I used a soldering iron to hot-knife and seal the edges so that we didn’t get polystyrene beads throughout the house.

Combined with some pins and some transparent plastic we can build layers of interface and animate them in real time with video or with stop-motion.

We started by creating paper mock-ups for the start-up sequence,

The company logo …

The engine logo … Mr10 had some wonderful ideas as to how this should animate, and a new way of erasing ink 🙂

The part of our flow was the login screen. The start-up sequence is modeled on Minecraft. You need a login to play so before the main menu, we have a gateway to pass. We also wanted the name of the game in Hex behind this. This is the point where we want to have UI elements and we want to really play with the Hex theme in the UI as well.

We thought about some ideas as to using the hex overlay grid for the UI elements.

Borders using Hex

Alternate layouts for widgets,

Fonts using Hex

The joys of Hex

We took the Hex theme to the extreme and ended up with deciding on three layers of related Hex, one generated from the next that will give us borders different levels of detail and we hope, when it comes together, something in keeping with the theme of the game.

Next week we will use this layout as the basis to design the UI for the game. This week I need to create a generator that will create a PDF template for us,