Game UI

As the game is sci-fi themed, and based in space, I had a very specific design idea for the buttons on each menu. When thinking of a screen in a sci-fi film or game, it tends to be a blue projected screen, or something that floats above a console. As blue was one of the colours, we used a lot within our models the colours would match perfectly. With this design in mind I had to create a button that looked good an match the reset of the game. after looking at some designs online, they can either be nice and simple or quite complex.

I first started by creating a simple ‘Start’ button for the game, so we could have some sort of main menu. I drew up a bunch of very rough sketches with different colours vitiation to see what one looked the best. After a quick vote from the team I took the top two and made a clean version of it. With this I also found a good font on DaFont that would match out style. I then took them designs and altered them too see what would work best.

Going back to the idea of a projected screen in a sci-fi film or game, I wanted to make the buttons semi-transparent, however this idea didn’t work very well as the button are layered, and they would be hard to see in the game. So, what I tried instead was added a glow and drop shadow to the buttons to make them seem more 3d. after another vote everyone preferred the bottom design to the top, so again I took that and worked on it to make it better. I decided to only add the glow to the texture as I felt like that worked a lot better. I had then had both rectangles separate outlines to make them stand out more. Doing this would also allow me to swap the colours around and use one for the static button (when it’s not highlighted by the mouse) and the other for the active button (when it is highlighted).

Once I had the design down, I went ahead and created the rest of the buttons. I did some different designs for the level buttons, and the loading bar, just to change things up a bit. I wanted to keep the say overall design and colours but just change the positioning. I think both loading bar designs work really well, but the first matches the main button design a little more then the second.

Sorry about the spacing between pictures on this post, it likes to put huge boxes around each image which meansa I can put them any closer.