Evaluation

When I first started this project, I didn't really know what to expect, and thought it was going to be a lot more technical than it actually was.

I found researching the Crystal Maze very interesting, as I've always loved gameshows, and I was interested in learning about a gameshow I have never seen before. I also enjoyed watching episodes of the Crystal Maze, some of them were very funny, and I felt in a lot of them, they only invited people who, let's say, weren't the sharpest tools in the shed.

Was also interesting learning about user interfaces and what they're used for in games. This also helped me to appreciate even the most simple things that appear in games, which may take weeks to design.

Doing my initial drawings was good, as I'd say the parts I enjoy the most in the projects I have to do at college are the parts I get to be the most creative and make my own choices. I also found this tough when drawing my initial designs from home, as I lost the checklist that had the list of things I needed to design for this project, and I couldn't remember exactly everything that was on the checklist so I probably did draw some designs I didn't really need to. I also found creating the 'Weapon' display confusing, as I wasn't sure if we had to create an actual weapon, and at first I thought that what was listed next to the weapon on the list (pistol, knife, crowbar) were just weapon examples, not what we had to include in an actual weapon display, which is what I realised later. However, I wasn't too worried about UIs that I didn't do initial drawings for, as I had clear plans that I could use instead of using fancy designs (things such as lives display and how we can tell which 'zone' we would be currently in) which could have resulted in making these simple things look too complicated and confusing, which is not good when designing things that should focus more on how they work than the design of them.

After drawing my initial designs, we then had to recreate our designs in Photoshop. However, I decided to recreate my designs using Adobe Illustrator, as I find it much easier to design things using Illustrator, and I also felt it would be more appropriate for the designs I wanted to create to use Illustrator. Another good reason why I used Illustrator is that I knew from previous experience that you can open up files created in Illustrator in Photoshop, which I would use later to add colour to my designs, and edit them slightly, if necessary. However, before this project it had been a while since I last used Illustrator, so at first I was a little bit rusty when using Illustrator, but soon felt fine with the program. I also felt a little bit rushed while creating my designs using Illustrator at college because I don't have Illustrator at home, so I wanted to make sure I had made as many designs as possible before the end of the session at college.

I found it quite difficult at first adding colour to the UIs I had created in Illustrator, which I had now opened in Photoshop, because I wasn't really too sure what colours I would use, as I didn't really plan the colours in my design because I didn't really want to revolve my designs around colour, and wanted to think about them at this later stage in the project, so I had to experiment at first with different colour schemes, and it took me a while to find a colour scheme that I was happy with that I could apply to all my UIs.

After trying a few colour schemes and finding one I was happy with, an idea was suggested to me to improve my UI designs by applying textures to them, but keeping the colours the same, and this is where I learned a valuable skill in Photoshop known as the Burn Tool, which helped me to create midtones and shadows in my textured UIs, which help make my UIs look a lot more realistic and 3D, even though it would still be a 2D image. I kept on working hard to try and perfect my designs, while adding textures to all my different UIs, and trying out other colours that might work better together, and I felt really pleased with the final outcome of this project, and was nowhere near as bad as I first thought it would be, as it allowed me to be creative, while learning new skills that will help me to hopefully produce better work in the future.

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.

Further Designs

After looking at the UIs I had already created, I tried to see if I could think of any ideas to develop my designs even further, and try new ways to make them better. I then found out about using textures to characterize my Interfaces, and then colouring them to match what the colour scheme I had already created. After that I learned how to use a burn tool, which helps to add tonal qualities, such as shadows and midtones to colours and textures in Photoshop, and I feel that this will be very useful in upcoming projects.

The Weapon Display interface was probably the hardest to design, as I didn't know how to make it look much more effective than just adding textures. The silhouettes proved difficult too, as I had already flattened the image from before onto just one layer. I think this idea would have looked better if I was more experienced in Photoshop. However, I do agree that the texture I have used makes it look much more effective and matches the aztec theme much better.

This is how I textured my mini map, which I am very pleased with, and I think that the stony texture matches the colours and the theme really well. I just need to maybe straighten the burnt parts a bit more, and insert a map in the mouth of the design so I know what it will look like when it serves its purpose.

Really happy with how my health bar looks and I feel that the colours used in this interface go really well together. Again, I feel the textures really bring the design to life much more than it did without textures, and I feel that this has really worked well, and looks much better.

The Bullet count was the first one I worked on to add textures to it. I feel that some of the textured colours work really well together, but I do feel that there is still a slight contrast with the colours that don't really match well with each other. I also feel that I would like to change the colour of the bullet number to a more stony and aztec colour, as not only do I feel that would work much better, I feel it would go well with the theme as well.

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