Mocking up an interface and a visual style


So as I stated in an earlier post, I am working on a new project. I have been feeling like working on a new Japanese styled RPG rather than my epic space idea. After some sketching, and some mocking up, I have an interface and a rough visual mockup that I would like to share. Read on to learn about the process and the reasoning behind my choices.

Three warrior wizards, perhaps belonging to some kind of wizard guild, are handed down a quest to go retrieve a magical artifact from an island no one dares to tread. This is the set up. It allows me to really narrow my focus and cut down on assets in a way that feels natural.

I knew I wanted this game to feel like the older RPGs that made me want to make games in the first place. This means turn based combat, which historically means tons of clunky menus.

I set out to make an interface that would be controller, touch, and mouse friendly all at once. I started with a few very rough pencil sketches of what I wanted. After that I took those sketch and translated them into an actual mockup.

That first mockup was a great start but it had a few issues. I made the menu's buttons a touch too small to feel comfortable on an average size phone. One UI element was too big. The characters were too small. I also had an info box that had a description of each move, but decided this was totally unnecessary and was using up valuable space. So I revised it:


That is what I have at the moment! I am really loving the direction this is going. Remember that at this stage I have no interest in fine tuning any visuals, I am just trying to get to a point where I can clearly define what I want to make. So the portrait pictures are intentionally terrible just so you can see what character it represents.

I find that this is actually a good approach to take  to development, especially on the visual end. Put rough visuals or features in, and as you are more sure what you want or what will work correctly, refine things further. You need to allow for as much flexibility as possible, and it is best of assets are done rough and quick before really finishing it up.

Now let's break down down some of the choices I have made here:


A, This is the currently selected character, bright blue outline is to help illustrate that is the one you are controlling at the moment.

B, Is your character's name, health, and magic points (any kind of status indicator such as poison would probably go right here). You will notice this text is the same blue as the outline around the character to help tie it together.

C, This is a portrait/timebar, the circle ticks up like a clock, when it gets to 12 o'clock the character is ready to act. The state of the clock also matches with the transparency of an object. A character who is at 1 o'clock will be barely visible.

This is done because these portraits are also buttons for character switching. If a button isn't opaque, you can quickly tell it is not hit-able. Some may opt to make the characters a direct hit area, but they will be moving all over the screen and sometimes behind things. This also means the player's fingers would be in front of the action, which is something pretty harmful in this case.

When using a controller you could tab between these with trigger buttons. Left trigger goes left, right trigger goes right, making sure to skip characters who are not 100% ready. There is also a handy HP counter on the bottom so you can quickly assess how your team is doing.

D, This is a little orb that will be different depending on which character is selected. This is here to help players quickly discern the difference between characters. I originally tried using a larger more detailed and faded out illustration, but this turned out to be too busy.

E, This shows a command that can be issued to the selected character, the MP (magic points) cost is listed there also, lining up with the MP column at the top.

F, This shows how a currently selected item may look if using a controller. It is in yellow and has an arrow pointing to it.

G, Shows a spell that can not be used yet. It is gray with a loading icon next to it, the loading icon tells me that it requires one of the other characters to be ready. There is a fire element icon that tells me who. These two icons can probably be combined into a more efficient UI element.

H, shows a next button which would bring up more skills if we have a second page of them available.

Next I will walk you through a quick flow here.


The player will have to select flash cut to take down this dragon. Either by button press, mouse click, or touch.


The player must than confirm this is the target. We will need this for when there is more than one enemy. It is also good to give the player a chance to go back at this point if they wish.


The enemy is vanquished, the battle is won, rejoice adventurers! At this point the time counters will probably need to have a state that does not have the time ring. You will also see a cool menu button there where players can do things like manage equipment.

I want to show you one more thing, if you are using Photoshop or a similar program to mock things up, smart use of groups is REALLY useful.


The Menu is put into a group, skills are put into a group and each individual skill is put into a group. This way I can move everything around either together or individually without it getting super messy.

Similarly the characters are in their group, the monster is in a group, and all the background layers are in a group.

Alright that is it for now!

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn