The TurnEngine Blog

Firstly, I’m sorry for the general quietness around here recently, we’re working on a lot of stuff under the hood which is just generic and boring, coding is hard work and we’re putting together all the important parts which have mostly been described already.

We’re really happy with our current progress, we have spent a lot of time discussing how we want things to behave and the best way to implement that which is simplest to the user, and ensuring that we individually decide how components are going to work before actually implementing them, which is giving us a strong image of how the game is going to play, and it’s going to be great!

I’m going to be spending some time today discussing actual design concepts for visuals over actual implementation of features, this does unfortunatly mean SCREENSHOTS (are you happy now?)!

The header design has gone through *MANY* iterations over recent weeks, starting off with a single design and moving forward to what you’re going to see at the end (no cheating and scrolling to the bottom).

The first version of the header was made by Zedd, and is below (remember, not the final version :p)

Obviously, looking at this post you can see the general goal of having ‘cut away’ edges and a lot of gradients to help create a ‘futuristic’ and appeasing idea.

The general issue with this is the amount of space it used, on a 1024×768 screen, it leaves very little room for actual game content. The general concensus was it needed to be simplified but still contain the same content.

I personally thought the title bar with the Shadow Wars logo was gorgeous (but not the actual logo itself!), It had a darkness too it and a smooth design, but seemed far too empty. The first thing i decided to do was move the buttons up there and introduce them into the bar (I don’t have a screenshot of that anymore), This didn’t look right, other than the incredibly small size of the buttons to make them fit right, fonts became illegible, and the blackness of the buttons themselves interfered with the smoothness of the bar itself.

The next step i took was to resize the bar and place the buttons *BEHIND* the bar and allow for it’s opacity to ‘wash’ over them.  This fixed the issue with the buttons looking bad, but resulted in the rest of the bar not really being justifiable for the logo. The final solution was not to resize the bar, but instead, have it expand around the icons.. Introducing some of the ‘corner cuts’ of the design so far, progress was made (I recoloured the ‘active’ button as well)!

Both myself and Zedd concluded that this was a much nice approach, it gave the title bar more meaning and removed the need for the large box underneath for navigation.

The issue now remained, what about the ‘user’ box? we discussed moving this to the left hand side of the content, but it shouldn’t really be something that has a lot of focus. When you are logged in, you know you are logged in, and the only part which is important is mail / news / credits, but they are not important to warrant a lot of screen space! The second idea was to attach the box to the right hand side of nav and trim it a bit, but we found that a box there not only killed a lot of space, but it also didn’t quite feel right along side navigation (It’s not nav, so why is it in the nav box?!). After several attempts to place it anywhere else, we decided to attach it as a ‘low profile’ yet separated box along the main header, and place the turns there too.

There would be a screenshot here, but apparently Word Press doesn’t want to attach it, click here to view it

Everything is clearly evident, We decided not to put turn info into user box because they are considered two separate entities, the choice to keep the bars at different lengths allowed us to break the ‘flow’ a little, to emphasise the detachment and remove some of the symmetry which was in the site.

The last thing to focus on was the logo, as seen in earlier pics, marginal effort had been put into it, and with the new ‘condensed’ header it doesn’t fit very well. After several hours scouring the net for a font which fits, I found one that emphasises the arbitrary corner cuts, and fits well in with the design, add a little transparency, give it a light gradient and place it over the moon, and we have a logo, and a completed header.

When designing a site, one of the hardest parts is making the design fluid, coloured using a specific colour set (here we work on gold, black, and shades of blue), and ensuring everything gets the importance it requires, placing emphasis on something which isn’t really important to a user will result in a bad experience, but there has to be a balance. Dominating a page with something that is important can sometimes backfire and make the experience work. Following pages has to be simple, and not obscure, you need to know where you are and what you’re doing, sometimes that can be simply achieved, but sometimes it requires more effort.

Until next time, stay cool :p

–
Craig “FrostyCoolSlug” McLure
Shadow Wars Developer