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.

Coloured Photoshop Designs

Bullet Count

 

 

 

Health Bar

 

 

 

Mini Map

 

 

 

Weapon/Tool Display

 

 

Development of initial designs

After drawing initial ideas for our interface designs, we then had to recreate our designs using computer software Adobe Photoshop and Adobe Illustrator. Initially, I was told I had to use Photoshop to create my designs, but I thought it would be easier for my designs, if I created them using Illustrator, because I find it a lot easier to create things from scratch using Illustrator. I felt it is also convenient how you can transfer files created in Illustrator into Photoshop.

Initial Designs using Illustrator

Bullet Count

This is a very basic design for my bullet count, which includes a framed circle with lines around it to form rays of sunshine, a very aztec - like shape. Aztecs also seemed to like zig-zag patterns and sun shapes in their art, which also influenced this design, and a lot of others you will see on this post later. My ideas for this would be to have the number of bullets in the centre of the circle, and maybe have some markers around the edge of the circle to mark how many bullets the player would have remaining. I could add these in later designs.

This is my more detailed bullet count design, separating the circle with a few lines and rectangles.The idea for this design is that the bars at the sides decrease as the bullets get used up. This will help people who can't read numbers easily.

I haven't added any numbers yet, since I wanted to keep this separate, and I will add this in Photoshop. I also need to add colour, but I thought that I should leave it black and white until I'm ready to insert it in Photoshop. It's also probably easier to add colour to things in Photoshop.

Health Bar

 

My first design idea is very similar to that of my bullet count - a sun shape made from circles and zig-zag patterns. I have also added a rectangle to represent the actual 'health bar', with a patterned border around it. This will be a good initial design to work from.

 

This is practically the same as above but with an eye in the middle of the circle. Eyes are also a huge part of aztec art, as found out in my research. Also gives more of a creative feel to it

 

I also attempted to create one of the looped health bars taken from my initial sketches, which is inspired from the health bar from the Kingdom Hearts games (see initial design research). I found this very difficult after not using Illustrator efficiently for a while, and I feel this is probably the weakest of all of my designs.

Weapon/Tool Display

I wasn't really too sure on how to design this, as when doing my research, I thought we had to design an actual weapon, not have the list of weapons/tools and design how we were going to select them, so this design was purely experimental.

I wanted to keep this simple, as I haven't had much time to think of how to design this, so what I thought was to try and keep this similar to my other designs and use zig zags and circles, and then I added a silhouette of each tool to some of the zig zags. I just hope this design will work when colouring it, and I hope it will be clear  about which tool the player will be using, which is something to consider when creating this UI even further.

Minimap

I chose to stick with the totem pole minimap design from my initial sketches, as I thought it would be the most fun and creative to create in Illustrator. This also really matches the theme very well, as totem poles are very associated with the aztecs. I also really like how the shapes in this design are very simple to make in Illustrator, and I feel that the minimap will fit perfectly in the totem pole's mouth, which is what I was hoping to achieve from this initial design.

Initial Designs

First I must choose a zone I would like to specialise in, which I think should be Aztec. I really like the jungle/temple feel to the Aztec setting, and I think it's a much different theme to previous projects.

Weapons could include more old fashioned weapons, such as swords, knives, spears, and bows and arrows, blowpipes, axes.




 





http://bostodelphia.blogspot.com/2007/12/bostodelphia-21-gun-salute-to-firearms_8348.html

First I thought of researching weapons that Aztec people might have used, to get the sort of feel for the weapon theming.

I love the really detailed design on the dagger, first of all, and the variety of shapes and colours on this design. These colours and shapes on the dagger could help to influence my weapon design. The dagger also feels very shiny and new, which makes it even more appealing.

I then found some images of aztec bows and arrows, to see what patterns and designs are featured on the bows and arrows. quite similar to today's achery equipment, but still designed slightly differently. I really like the unique shape of the bow in the first bow and arrow picture, and the third picture shows a wide range of arrows you can use, which really helped me to understand how bows and arrows are designed from these images.

The handgun is there for me to work on the basic shape of my weapon that I will use in the game, and also because I thought that before finding the picture of this handgun, I thought I had to have strictly aztec weapons in my game level. I'm glad that I can use guns in designing my game, because I think that guns are quite simple and easy to design, yet hard to make creative, which I guess is the fun in the whole design process, making things creative and interesting.

Initial Sketches of weapons

These drawings show some initial weapon designs, which are influenced by my research designs.

I wanted to make the bow and arrow look creative, yet functional, and I used my research images a lot when creating the bow and arrow, to get the basic shape of the bow and arrow, and also for some design ideas.

I also designed a gun, which I tried adding some aztec patterns on it, as well as an arrow to indicate which direction the gun should be firing. the drawing of the gun on the left was to help me to try and get the basic shape of the gun. it also helped me to practice drawing the gun.

I also had a crazy idea that you could use fruit as a weapon. not sure why, it was probably my imaginitive and random side being expressed from this idea.

Health /Lives display images that may help to influence my designs

  

http://frosty987.deviantart.com/art/health-bar-136201850
http://www.gotoandlearnforum.com/viewtopic.php?t=30398
http://www.game-artist.net/forums/work-progress/14857-my-health-bar.html

Health bars in games should be kept simple so that they're easy to understand. These are often represented by a green rectangle, which gets smaller when a character takes damage. I have found these three very good examples of health bars used in games.

the first image represents what a standard health bar should look like. it is very clear, yet they have made their own design on the left to add a bit of character to the health bar.

the second image is from one of my favourite games, Kingdom Hearts 2. The health bar is displayed in the bottom right corner, as well as the rest of the characters statistics. The character, Sora's health bar is represented by a headshot image of him and the health bar is circled around the image of him. I think this is a very great idea for a health bar and I feel this will really influence my design of a health bar

the third one, much similar to the first one, has a green rectangle for the health bar with the design revolving around that green rectangle. I think it's important to not make the design too distracting, as I learned when I drew my designs, because this could confuse the player and make the health bar look very unclear. Some games only have a green triangle and nothing else for their health bar. it may be uncreative but at least it's clear  and obvious.

Health Bar Initial Ideas Sketches

1. This was my first design of a possible health bar, which has the health bar looping around a circle, similar to the kingdom hearts image I found, as well as having a smiley face in the middle, which I tried to make look aztec-like. I also added some zig zag patterns to make it look like a sun and I also noticed when researching aztec art that they did like to use zig zags in their designs, so I thought it would be appropriate to use that in my designs.

I think my first design is okay, but I'm a bit worried that it may come across as a bit childish to some people.

2. Similar to my last design, I have looped the health bar around the circle and kept the zig zags outside of the circle. I think that removing the smiley face was definitely the right thing to do and has significantly improved my design, and looks far more professional and can appeal to all ages. I've also given my health bar a pattern as well by drawing triangles on it.I actually think this looks like a very good design and I feel I can work from this.

3.I've now added an eye in the middle of the circle, which are featured a lot in aztec art (eyes) and have also tried to link the tips of the zig zag triangles around the circle together, so it looks more like a piece of aztec art. I definitely think this needs simplifying, as I feel that this design is far too busy, however, I do feel that there are some good ideas I have added here, which I could carry across to future designs.

4. I have now tried to simplify my design by removing the outline connecting the triangular zig zags, and shortened the health bar to its original size. I've still kept the eye though, as I ffelt that was a nice touch to my design.

5.I have now removed the triangles on the health bar and also made the pattern around the circle appear more controlled and regularly spaced, which definitely makes things easier to design and to look at. Something that concerned me while creating this design is that will people be able to understand what this is?

6. I thought I'd try and draw a more traditional looking health bar, while keeping some aspects from my previous designs in this one, such as the zig zag pattern outside the circle, which now overlaps the health bar in this design. 

Bullet Count Initial Sketches

1. This is a very basic first design. Similar to my first health bar designs, I have just got a circle with a triangular zig zag pattern because it looks more aztec, and the number 99 in the middle, to represent how many bullets are left. This number will effectively decrease as you use the bullets. I feel that this is a good concept to work from and will need to be made more interesting.

2. Here, I've added an outline to the circle and some sort of grid in the circle. I've also attempted to make the bullet number look more like an aztec style font to give more of a feel for what it could finally look like.

3. I have made the outer triangular zig zags more controlled and regular and have now created a bar system in the interface, which would decrease as you use up the bullets. This is for people who struggle with reading numbers.

Images that may help to influence my health pickup design
 


http://www.unitymagic.com/shop/en/assets.html?dir=asc&limit=all&order=name
http://www.jsbeads.com/Swarovski-Crystal/Swarovski-Hearts.asp

Health pickups are items players can pick up in games to regain any lost health. They don't appear in all games, as some games don't need a health system.
 Most health pickups are usually represented by hearts, or crosses or just anything that resembles health, really. But mainly hearts and crosses. The first image is from a games software, which is just a very basic heart shape. I thought I could adapt from this design by trying to find a crystal heart, as the game level is going to be inspired by the 90's gameshow The Crystal Maze, and using one of their zones to create UIs for, so I thought that a good idea would be to have a heart made out of crystal as a health pickup, as players in the Crystal Maze have to collect crystals in the game anyway.


Images that may help to influence my Bullet Pickup design
 

http://ghostprepper.blogspot.com/2011_09_01_archive.html

To be honest, I'm not really too sure what ammo pickups look like, so these have been the only images I have been able to find so far, which are only really an image of a bullet and a crate full of bullets. Yeah, you can probably tell that I don't play many FPS games, I'm more of a Sonic the Hedgehog/Super Mario guy myself. I'm not saying anything bad about the project, by the way, I'm just saying I don't know much about shooting games yet.

Pickups Initial Sketches

Mini Map images that may help influence my design


This is just really an image of a mini map, so I know roughly about what I'm trying to create. The design of this mini map probably won't help influence the design of the mini map I would like to create, but I think it would be good to refer back to this image so I know what sort of thing I am creating.

Mini Map Initial Sketches

1. My first minimap design contained a rounded square with a zig zag outline, and triangles around it to show creative flair. Good first design, I feel I could work on this to make it look more interesting. I could also experiment with different shapes to see what works best.

2. Tried to make this design look more like a compass, with the mini map being inside a circle with a zig zag outline. I like this idea but I'm worried if the mini map is a bit small compared to the rest of the design.

3. I took away the box so I'm just left with the circle and the triangles around it. I like this and it still resembles a compass slightly.

4. This design is completely different to my previous designs, but I must say this is probably my favourite design, as I feel it is the most inventive of all the designs. This minimap design resembles a totem pole, which I found appropriate as totem poles are associated a lot with the aztecs, and the map would fit inside its mouth. I've also drawn rough sketches of minimap ideas for other zones featured in the Crystal Maze, to show how this design can vary depending on which zone you're in.

Aztec Art that may help influence all of my designs for each interface I need to design in my game.

     

 

http://www.jacksbromeliads.com/theaztecs.htm
http://tattmight.com/gallery/search/(keyword)/aztec+patterns
http://rainbowcrystal.com/atext/precolumbian1.html
http://blackboardlouisvilleedu-dynamogirl07.blogspot.com/

I wanted to get the idea of a the aztec style of art and what shapes, colours, materials and patterns they used to create their art. I think these images will become very handy and useful when creating my interfaces, because aztec shapes, colours, materials and patterns are essential to consider when recreating aztec art.

These designs have even inspired the works of today, such as the tattoos pictured above. It is also useful to know how a lot of aztec art seems to be made from stone and sand, and have a very vast mixture of shapes. I also feel these hold very good design ideas for certain interfaces that I will design for the aztec theme.
What the Initial Screen could look like