OUGD505 - Product, Range, Distribution - Icon Development, Button Development and Colour Palette

Icon Development

In-Game Navigation

I started off by creating the navigation buttons. This is the best place to start because they'd require various shapes, shades and line weights, these could set the tone for the rest of the icons and the app as a whole.

The audience the app is aimed at is familiar with analogue sticks because of their use on computer game consoles, so going with a skeuomorphic looking analogue stick made sense to move around. Using two of these would get confusing, so adopting zoom and rotate buttons similar to the ones in Zoo Tycoon was the most friendly approach as they were very functional. There is no reason to change the classic play button, as it's universally understood, even if it's generally used in a different context.

App Navigation

Small icons were needed to represent the menu and the 3 different game modes. They also needed an active version and a dormant version to show which option is currently selected. Because of the small size the icons needed to be clear through shape and colour.

A column of horizontal lines is generally accepted as an icon for a menu, and I saw no reason to change this. The red upside-down teardrop shape with a hole in it is synonymous with locations because of it's use in Google maps, having this floating above an angled shape with a dotted line over it suggests that the icon is for a map, so this will be used for the birds eye game mode. The camera for photography mode is self explanatory as the shape is unmistakable. Using a globe is used for the overworld because of its connotations of exploration.

The full colour versions will be used when the mode that the icon represents. When this is shown next to the other greyed out dormant icons it will make it abundantly clear which option is currently selected.

Birds-Eye Mode Key

The icons for the key on birds eye mode also needed to be very small in order to allow text to sit comfortably next to them. I needed icons for buy, sell and protect land, a male panda, a female panda, and the food level of a particular area.

I started creating black and white icons for buy, sell and protect icons as I thought using a silhouette would be clearer than colour. A wallet represents buying, a dollar sign represents selling as it implies you gaining money, and the fence implies protection. After experimenting with adding colour I found that the coloured ones had a much more positive feel to them, which is important for the tone of the game.

Just using the symbols for male and female would've been too vague to make it immediately understandable what the icons were for, added the WWF logo symbol rectifies this as it makes it clear there is a panda there. By having them in blue and pink to them to give them more connotations of male and female, this is important because an 8 year old child might get mixed up between the two symbols without colour.

With the food level icon I experimented with a few different shaped bars, I specifically wanted to try and use bamboo canes as a base shape, but I found that at a small size they lost their detail. On top of this not all young children would be aware of what bamboo was or its relevance to pandas, so using a regular bar was simpler and made more sense. I'd also looked at how a gradient would look compared to using block colours, and found that the detail of the gradient was lost on a small scale. Thinking more forwardly I struggled to see an opportunity to use gradients again, so block colour worked better in terms of consistency with the rest of the app too.

Testing

I printed out the icons on paper to see what they looked like at actual size, (based off my storyboarding). I'd been designing at actual size and they looked functional and fit for purpose on screen, but sometimes things look different when printed. Improvements and stipulations that were made because of this were:

• The line weight was increased for the gender icons, as they were a bit faint.
• The gender icons had to be displayed at a minimum size of 6mm, as at 4mm the WWF logo becomes to small.
• The black lines surrounding the food bars were lightened as they were a bit overpowering.
• The blue and green needed to be changed on the overworld icon as they were too dark. They were changed to the blue used for the male panda icon and the green used in the food level bar.

Button Development

Sizes, Format and Colour

After the transferring the storyboard to an illustrator grid I found that I had 3 sizes of buttons that I needed to format 8mmx8mm squares for icon buttons, 8mmx36mm rectangles for menu options, and 8mmx20mm rectangles for the more information options.

Given that the square ones would be used more regularly throughout the game I based the development of the buttons around them and applied it to the larger ones. I knew I wanted to take a skeuomorphic approach to match the analogue stick style d-pad. A 1mm bevel was used because 2mm left far too little room for the content of the button, and I wanted to avoid working in increments of less than 1mm to make things easier for myself. I looked at different line weights and decided to use 0.5pt because it was thick enough to be noticeable without being too thick to the point where it'd overpower the icon or text on the button.

I looked at adding some shading to increase the skeuomorphic look of the buttons. I tried it in greyscale to keep with the clean look of WWF's image, as well as using a light brown earthy colour which would be appropriate in the sense that WWF is about the World. Using a darker shade for the bottom and left side, leaving the top and right sides unshaded, and having the front somewhere in between gave the most 3D-looking results, so they were the ones that were used.

I then had to think about how the button would look after it had been pressed. The left column shows the unpressed state. I rotated them first but I found that it didn't look like they'd been pressed in, it just looked like the direction light was coming from had changed. Changing round the the shaded areas so the darker area would be the square in the middle gives the impression less light gets in, and reversing the darker and lighter sides keeps the impression that the light is coming from the top right, this works on both colours.

I applied these styles to the longer two buttons so the full set looks like this, which I'm happy with.

Font Choice

Given my previous WWF-based work in responsive (here), I already had the typefaces WWF use, these are WWF Regular and Open Sans. From previous experience I know these fonts work nicely together, so there's no need to change this combination for this reason and for consistency with the WWF website. For these reasons I only experimented with these typefaces.

I used the 'More Information' and 'Panda Mating' sections for the tests because they're the longest options for the respective buttons, this helps me set the limitations. I immediately wrote off using Open Sans because it didn't fill the heigh of the buttons even when Bold and with quite heavy negative tracking, making the buttons look a bit awkwardly sized. The full capital WWF Regular looks too blocky to be easily readable because of how it does fill the height in the way that Open Sans failed to do. Using lower case doesn't have this effect whilst have the capitals at the beginning of the words still gives the buttons a sense of some authority. 

The fact that the smaller buttons have a smaller font size isn't an issue, as the smaller buttons are used on a page where the screen is split. If the buttons, and subsequently the text, were the same size they would look squashed and too big.

Colour Palette

From the colours used in the icons and buttons I created the below colour palette to use throughout the remainder of the project to aid consistency. There is a wide enough range to the point where it shouldn't cause me any problems. I saved it to make it importable to Photoshop and InDesign as well.