BoL Gameslate Design Dairy 1...

This will be the first in a series of design diaries highlighting the march of progress of a Gameslate from concept to finished app (for those who have no idea what this is, you can check out the first stirrings of the prototype project here). I'm doing this partially to record my thought process for future reference but also to show the usefulness of standards based design in the creation of system agnostic apps and, finally, to show how the table top RPG can take advantage of the digital age beyond very basic dice rollers and PDFs.

Barbarians of Lemuria will be my first system agnostic Gameslate project and I am currently in the process of working out the visual design and UI elements. To get an idea of the look and feel I'm going for, here is a pic of the visual design in progress...

Now some of you might be looking at this pic and thinking 'what screen is that thing formatted for?' and the answer is 'none of them and all of them.' What you're looking at is a theoretical layout on which I will place the UI elements and try to get a coherent look and feel.

To make a truly system agnostic layout, I am using a number of elements. The first is a background image that is built to fit a screen up to 10.5" long at 300dpi (Retina Level, i.e. as detailed as a human can pick out). That bit of bloody parchment is it. There will be no need for tiling, it is one size fits all for pretty much any screen coming out in the near future.

The next bit are the midground design elements. They will be layed out in the typical HTML5/CSS manner, but with relative, rather than absolute positioning. So the title will always float about 3% from the left and the top while the snake knots will float at around -1% or 101% (depending on their corner) from the left and 100% and 0% from the top (these numbers are all just estimates right now, but you get the idea). This allows the page to work in both landscape and format depending on tablet orientation.

Finally, the yet to be added foreground UI elements will be layed out in a manner similar to the midground design elements. Again, this allows the character sheet to flow naturally if you tilt the tablet. It will take some tweaking to make sure the priority of flow is maintained, but it shouldn't be too difficult and will hopefully negate the need for a mess of alternate layouts and the code to implement them.

I'll probably tweak the title a bit to make it stand out more, but I'm fairly happy with it. On to the UI elements...