Saturday, 10 December 2011

Even Further Designs and the Final design

Health Bar


Very little has changed in this image to the last time I developed the design for the health bar. I've made the actual bar blue, as I felt it went better with the yellow and orange borders, which I've already textured. I've also burned the edges more to give the design a lot more depth.

Also, as you can see, I've added the background to the design file so I get a feel of what my design would look like on a games background while designing the health bar. This is also a good idea when designing my other UIs.


Here, I've changed the red lines to black to take away some of the colour clashes. To be honest I did initially want to have a less striking outline, but the problem I had was, and it has appeared here, is that you can hardly see the lines that overlap the background, so I'll need to make them stand out.


What I've done here is I've hidden the blue health bar and the eye design, so I can focus more on the other parts that need editing. So here I've just selected the black outlines and applied an outer glow to them, which I am so pleased with, and now it looks really nice and understated, without having any colours that clash with the rest of the design.



Now to bring back the eye and blue bar, which I've now tried texturing them to see if they look any better. To do this I had to multiply the layers these parts of the designs were on so you could see through to the texture behind, without losing any of the colour. I feel great about this final design, and I'm so happy with how I've experimented different methods of designing and colouring my designs, and more importantly, they have paid off!

Bullet Count




I didn't really change much of the colours or design of this interface. All I did was changed the line colour to black, applied an outer glow on the black lines and changed the colour of the bullet number. The number looks much better and much more suited to the rest of the design and the aztec theme. I also hope that I would have a depleting gauge (the blue parts) as the bullets get used up, and I hope this is clear enough for people to realise. I wanted to input these features for people who find it difficult to read or understand numbers, but at the same time, I wanted to have the number in the middle for people who can read numbers to understand this interface better.

Weapon/Tool Display




Again, I found the weapon display difficult to edit, since I had merged the layers of the weapon silhouettes and the outlines. However, this looks much more like how I initially wanted it to look. I started by burning the textured parts f the interface even further to give it a more natural and aztec feel. Then I made multiple layers in photoshop of my UI so it was easier to edit separate parts, and if I made a design error, it didn't destroy my design, forcing me to start again, which I couldn't afford to do at this late stage of the design development.

At this part I got rid of the red outlines and made them black, and this looks much better in my design. However, if I had just left it as it was, the UI would be difficult to see, so I applied an outer glow on the black lines, so people would be able to see them more clearly. I must admit, this looked better already.

I also put a white peeling paint texture behind the eye part of the design, by multiplying the layer the eye was on, which I think was much more effective, and by doing this, I had learned a new skill.

Finally, I attempted to make some of the thinner lines in the design a bit thicker, so people would see and appreciate this design more, and applied an outer glow to these lines, and I feel, that by improving the design by doing these things, it has helped me to appreciate my design more as well.

Mini Map


All I felt I needed to add to my minimap design was an actual map example. Since at the time of adding this I couldn't access the internet, but thankfully I had a map example already saved onto the computer I was using (The Apple Macs at college.)

Final UI Design Layout


This is what they all would look like on a games screen. I didn't want to make them too big as they could distract players from the main objectives, and I've also tried not to make the main function of these interfaces to revolve around letters, numbers or colours, things that people with dyslexia and colour blindness have difficulty with, which is a major thing I have had to consider while making these designs. However, I still have tried to put colours that go well together in my designs, so that they look appealing to people without either dyslexia or colour blindness.

Overall I'm really happy with my designs and layout of them here, and I feel that each interface still goes really well together.

No comments:

Post a Comment