iOS7 icon re-design: Icons in iPhone mockup

Today we completed the icons required for our classes brief, we did not make enough to cover the iPhone menu, so I put in some current iOS icons.

Overall I am quite happy with how they turned out, I would have to say the icons we made in Photoshop are the ones I am alot happier with. If there was anything I would change it would be the earlier icons I made using Illustrator (eg. Calls and maps), as I learnt alot more the further I worked through the icons. I would like to see the same techniques I learnt applied to these.

iOS7 icon re-design: App Store

Reference images:

Roughs:

Final:

iOS7 icon re-design: Calendar

References

http://ja-m.es/wp-content/uploads/2011/11/iOSCalendarApp.png

http://ja-m.es/wp-content/uploads/2011/11/iOSCalendarApp.png

Roughs

Final

iOS7 icon re-design: Contacts

Reference images

http://www.icreatemagazine.com/wp-content/uploads/2013/07/Contacts1.png

http://cdn.osxdaily.com/wp-content/uploads/2012/02/iphone-contacts-icon.jpg

Roughs

Final

iOS7 icon re-design: Passport

Reference images:

http://www.patentlyapple.com/.a/6a0120a5580826970c0192ac4ef070970d-pi

http://www.patentlyapple.com/.a/6a0120a5580826970c0192ac4ed7c3970d-800wic4ed7c3970d-800wi

Roughs:

Final:

iOS7 icon re-design: Review

Below are the first 7 icons I have made in Adobe Illustrator, the next are going to be done in photoshop.

iOS7 icon re-design: Camera

Reference Images

http://nextpremise.files.wordpress.com/2012/03/4565472064_0b0d3183e1_o.jpg

http://cladlab.com/wp-content/gallery/electronics-misc/camera-icon.png

 

https://cdn3.iconfinder.com/data/icons/pictofoundry-pro-vector-set/512/35mmCamera-512.png

Roughs

Final

iOS7 icon redesign – Stocks

Research:

http://it.bentley.edu/BRAMSON_SPEN/images/icon1048_256.gif

http://www.onspotsocial.com/wp-content/uploads/2013/06/stock-market-icon.jpg

http://thumbs.gograph.com/gg62913182.jpg

 

Roughs:

 

Final:

 

I found the stocks icon to be a bit challenging at first, just because there isn’t much variety (that I could find) for stocks icons, they all used a rise and fall system. I decided to expand on this by using the rise and fall chart, along with the symbol of percentage. At first I was applying a gloss to the button but once placing a transparent layer ontop over half, it helped to break up pieces, the top slightly darker lines representing above average %, below being a low percentage.

iOS7 icon redesign – Maps

Unfortunately I thought I had uploaded this to my wordpress last term, but alas the majority was left in draft, during my USB problems last week of term. Here is my map icon, uploading my stocks icon shortly.

Reference images:

http://blogs-images.forbes.com/anthonykosner/files/2012/09/iOS6-AppleMaps-icon.jpg

http://www.hailleygriffis.com/wp-content/uploads/2013/01/Google-maps-icon1.png

http://corrupteddevelopment.com/wp-content/uploads/2012/02/google-maps-icon.jpg

http://gheymann.files.wordpress.com/2011/05/google-maps-icon.png

Roughs:

Final:

I am quite happy with the final product, once completing the entire set of icons I will refine them more so they follow a strict scheme (eg. button gloss, depth). I decided for the maps icon to be kept quite plain, as a road network that is detailed would have caused too much cluster in the icon, creating a distance from its original meaning.

 

iOS7 icon redesign – Mail

Images used for reference:

http://www.mknepprath.com/wp-content/uploads/2013/02/iPhone-E-mail-Icon.png

http://smallbusinessblog.infostreet.com/wp-content/uploads/2011/01/mailbox.jpg

http://cdn.blogs.fredericksburg.com/doinggood/files/2011/05/mailbox.jpg

Roughs:

when drawing roughs for this design, I wanted to use the universal symbol for email being a letter. I thought an old style letter box with a red arm would be appropriate. I chose to keep the background colour as the original one is too, with clouds.

Final:

Here is the final design for the mail icon, I kept the colour scheme simple, along with the design too. I did not want the design to be clustered with too many objects so I made the mailbox the central focus, with the mail standing upright for visibility.