Category icon designs

It's important that the icons for my subject categories are clear and fit within the visual style of the app. For the menu I am going to include text next to the icons, as icons can be confusing to some users. However for the assets in the timeline, the category icons will be layered over them without the corresponding names. I am hopeful that by seeing the names next to the icons in the menu, the user will be more familiar with them when they come across them on the timeline.

Below is a good example of some custom school subject category icons I found on Google images. I like the fact that the images overlap the boundary of the container - it gives it a more interesting/stylish feel. 

Here are the subject categories that I am going to include in the app, along with some icons I have found online that could be adapted to represent them:

World Events (big news stories)

Local events (specific to country you live in)

 

Sport

 

Music

Movies

 

Literature

Art

Fashion

Technology

Celebrity (news, births, deaths) 

 

My Designs

I am going to create vector icons to represent the different categories of assets that will be available in the app. I like the idea of positioning them on coloured backgrounds, which can then be used on the relevant assets on the timeline to create a visual indication of what category a particular asset belongs to. I have found a website that provides the HEX colour codes (which can be selected in Photoshop and Illustrator).

http://ios7colors.com/

These are the initial backgrounds/badges for the icons that I created in Photoshop, based on the colour schemes from the above website. I have shown how they might look on dark and light backgrounds to help identify whether the colours will work in the menu.

To provide an alternative option I have also created some gradient backgrounds, to see whether these work better with the icons.

  

Vector Icons 

These are the icons that I am aiming to use to represent the different categories on the timeline. I have traced over them in Illustrator and created both solid and outlined versions so that I can see which fit best within the overall design. I was prompted to create the outlined versions by reading Apple's iOS7 guidelines, which recommend creating both filled and outlined versions of the navigation icons.

Initially I feel like the solid options stand out more and would therefore be visually clearer for the users in the navigation. However, this may not be the case once I've mocked up the icons against the coloured background (which I'm going to do next).

 These two images show the outlined icons against both solid colour and gradient backgrounds. Below are the solid icons against the same colour schemes.

I am still drawn towards the solid icons as being more successful in clearly representing the different categories. I am concerned that the outlined vectors may appear difficult to distinguish when they are scaled down within the navigation menu (they will most likely be 1cm x 1cm - as recommended in the Nielson report).