Wednesday, 22 April 2015

OUGD505 - Product, Range, Distribution - Birds Eye View Screen

I worked on the birds eye view screen and all of its states next because I knew this would be the most work in terms of problems arising in positioning and aligning everything, and tackling it early will give me more time to fix any issues that arise with it.


On my storyboard I mentioned using an isometric grid as the basis for being able to buy and sell land. In practice I found that at a small size the triangles were a bit overpowering and confusing on the eye because of all the shapes they make within each other. I looked into other tessellating shapes and decided to use hexagons because they're pretty versatile in that they can create better diagonal lines than squares and rectangles.



In terms of adding a colour coding system to the grid, I decided to stick to the 3 colours used for coding the map on the level select screen, with the dark green representing the areas that are protected, light green ares representing unprotected public land, and the brown areas representing privately owned land. Whilst the key doesn't show this immediately, when the option is toggled by pressing it on the key, the hexagons that are available to buy or sell are highlighted with an orange outline. When the option is highlighted in the key, it is coded with a coloured highlight behind it. Lighter tints are used for this as the colours used in the map had too high a saturation contrast with with icons as shown below.


 

 

In the same way that you can toggle the buy and sell options on and off, you can toggle the panda locations and food levels on and off too, which may be necessary in order to choose a hexagonal area to buy or sell that was previously impeded by one of the icons. This could also be useful if an older player wanted to play strategically as it could help them identify areas with many male or female pandas quickly, as well as to help someone see which areas are most important to link in terms of food source. The cross than indicates if something has been toggled off was made by rotating the '+' from the WWF Regular font in order to keep it within similar proportions with the heading fonts, which aids consistency.










I was able to place everything where I wanted too from the storyboard, which highlighted the usefulness of storyboarding. I used the same brown for the background to try and suggest a stained map background typical of one you'd see in a cartoon where X marks the spot. The key has a white background as I'd previously learned not to put both the background colours next to each other, the lighter background also brings out the colours in the icons more, making them look brighter, suitable for a young audience. I then added the same black line and gradient as on the donation screen to make the key sit above the map, this works even better against a coloured background.



No comments:

Post a Comment