The sketch on the right is truer to our overall desired look (thicker lines, more comical).
Here's a shot of a battle GUI mock-up:
The elements are explained in the picture, but for anyone who's reading this, I'd really love to hear any feedback or suggestions you have about this sample GUI - namely if it makes sense or not. Even though you may not understand everything about it, does it make sense with the text explanations? Can you tell what is what (specifically with the representation of the twist band)?
You can see that the essence band of the twist has four slots to hold essence. I think that having a large icon to show the type of essence in each slot is a good way to go. While it will take the player a little while to get to know all of the different icons and their meanings, the game should introduce them at a learnable rate; that, combined with intuitive depictions (i.e. a little flame icon = fire elemental essence), should make the display easy to understand.
One element in the picture that may be slightly misleading is the presence of large numbers in the upper right-hand corner of each essence slot box. These numbers aren't numbering the slots; the number "1" will pop up when essence is drawn into each slot, indicating level 1 essence. If the player "boosts" the essence (to make it more powerful), the number changes to "2" and so forth. This gives the player a quick visual snapshot of the complete status of each character's twist band, and what's available for him/her to use in battle.
As always, comments are welcome. We're here to serve you, and the more input we get, the better the end product will be. :)