OUGD505 - Product, Range, Distribution - Loading Screens, Level Select Screens, and Donation/More Information Screen

I chose to start working on the loading screens first because of their simplicity, and then the level select screen because of its potentially more complex. Doing this would allow me to highlight any problems with the grid/layout at a very early stage.

Loading Screens

In the storyboarding stage I'd specified three different loading screens, I decided to cut out 'Panda Fact' because having two seems like the informed thing to do. I specifically used two different coloured backgrounds, as doing this really helps to distinguish between the two variations. The Rhino Raid loading screens had a large difference of hue, as do traditional Monopoly cards. 

I chose to use the colour variations from the buttons in the end because they have a more subtle tonal difference between them than others I tried (below), this also makes the buttons fit in with the designs a lot better. Using lighter shades also opens up the opportunities to use these colours as backgrounds in further developmental stages for the app. Using lighter shades encourages the the use of black text on them rather than white text which is good for consistency throughout the app.

I chose to keep the type centrally aligned rather than with any sort of left alignment as it makes the screen looks more fun, which is what's needed to appeal to a young audience. Using left alignment looked slightly too commercial for me to use it. Keeping the WWF logo central and having it slightly larger than the buttons help it have a strong presence on the screen without being too big, this is particularly the case when the text is centrally aligned.

 

 

Level Select Screen

Given that the different levels of the game are going to be based on different areas within China, it made sense that the level select should be a map of the area. I developed this in illustrator from a low quality image I found in the research stage of the project, I had to rotate the map to fit it to he dimensions of the screen size without being too small. The contrast of the red, green and grey that I mentioned in the storyboard was garish.

In an attempt to continue the semi-skeuomorphic approach I've been adopting so far I changed the background to the earthy brown used in one of the loading screens and changed the colours of the selectable areas to earthy tones too, using a darker brown to use for incomplete levels, a lighter green to show completed levels, and a darker green to show the selected level. If the user wanted to work their way from left to right, the screen would progress like this every time they completed a level.

The names of the provinces on the map are 14pt. I initially tried them at 12pt to be consistant with the size of the text in the smaller buttons, but I felt they didn't fill the space on the map enough.

The title is shifted to the left and the buttons are moved from the edges into the middle. These were very noticeable changes made from my storyboarding, but they were necessary because of the layout of the map meant that positioning them where I initial wanted them very heavily compromised the readability of the title and the ease of user interaction, as well as leaving a very large central gap as shown below.

Donation/More Information Screen

I managed to keep the grid almost identical to the grid of the storyboard, which shows the benefits of storyboarding at full size. The only issues I had to resolve were use of colour, and to create a 'Donate' button that I hadn't realised I needed to create when making the buttons yesterday.

To differentiate between the sections I used the different background colours for each part, as well using a fairly thick line. I added a gradient to the left of the line to try and give the impression that the right side was raised above the left, which is another skeuomorphic aspect of the app.

Having both the background colours on the same page was a bit counterproductive in terms of the apps style, especially given that I was trying to make the brown sit above the grey. For this reason I decided to remove the brown and revert it to white, this made the app look a lot cleaner and more in keeping with WWF's image.

The final small change I made was to increase the size of the gradient, as I didn't feel it elevated the right side as much as it could do. I was much more pleased with the outcome as it serves its purpose better now.