Monday, 21 November 2011

Initial Interface screens

Screen 1


This was my first attempt at arranging my Interfaces, which all used very different colours. I felt this to be more of an experiment to see if my design ideas would work or not.
I am still pleased with my designs, although I think using a wide variety of colours doesn't work very well, as I feel it can be distracting from the objective of the game, and it also feels a bit random, having different colours for each UI.

I felt the health bar (top left) had a lot of clashing colours. I felt that the bright red and bright green didn't really go well together, because they are both very bright, and I felt this is far too striking. However, I still like the basic design and the shapes in the design.

I also think that colour is the main issue for most of the other UIs here. In my planning, I didn't really consider colour that much and focused more on the design, so the colour would come later, and this is a good example of why colours are just as important as the basic designs. However, I felt it was good that I had an experiment with using different colours. The colours I used for the bullet count and the weapon display didn't really go well with the design either. I don't think that brown and red go very well together, as they are both very warm colours, and it's also like mixing ketchup with gravy, which also isn't the best idea in the world. It's okay, but I wouldn't choose to have ketchup with gravy.

The colours used on the weapon display also don't really work well. I like the eye in the middle, and I feel I should use designs with eyes in them with future layouts. There is one major problem; you can't actually see the weapons in the weapon display! which is really bad, as it's not clear what you are selecting.

Screen 2

I have now changed the colours of the UIs so they suit better, and so the UIs go better together. I've decided to use more aztec colours, such as stony/warm colours, such as orange and red.

The weapon count looks much better with this colour layout. I can now see clearly what this is supposed to represent. One problem I may have is I will have to make the weapon/tool that is being used stand out from the other two, so the player knows that it is being used.

Also added hearts above the health bar to represent lives. I knew that the lives display could be really basically represented, so I didn't really want to spend much time stressing over the design of the lives display, so I just used the shape tool in Photoshop and set it to hearts.

Also experimented with changing the colour of the mini map to a much lighter colour, and without the text telling you where you are included in the mini map design, which instead, is below the health bar in an orange aztec font.

Layout 3

Tried something slightly different with the health bar and weapon display. I have now made the health bar blue, just to see what it looks like, and also to see if it matches better with the colour scheme that I am using. For the weapon display, I have tried to create a silhouette to go in front of the original red design. Although I think this was a good idea, I found it very hard to line each silhouette up with the designs. I also think I've made this UI far too big,and particularly with games UIs, you have to make sure that the UIs are not too big, as this can obstruct the player's view of what's going on in the game.
Also experimented with using a more basic design of the bullet count, which doesn't really look too bad, and at the time of making these UIs, I wasn't sure which bullet count I preferred to use for the final layout.
I've also tried to make the mini map look more like how a typical mini map would look like, which would be slightly clear/see through. I'm just worried that people might not be able to see or notice the mini map, which wouldn't be good, as it could result in the player getting lost.

Layout 4

Here I made all my UIs, except for my mini map, much smaller, which I feel was definitely the right thing to do, as you now don't have loads of huge icons around the screen.
Didn't really change any of the designs that much, added hearts below the health bar instead of above it, and also made the middle of the mini map clear as well. Also changed the text telling you where you are to blue, and moved it to the top left of the screen. Changed the health bar back to green as well, to see if it looked better for this layout.

No comments:

Post a Comment