You Are Reading

How To // Pictograms and App Icon Development

CREATING THE ICON...

To make the icon i wanted to keep it simple. We decided to go with this sleek white on black design for the previous design do i stuck with this through the app. I firstly created an icon button shape with the shape tool...




I added this white shaped gradient over the shape to create this 3D sort of looking button.


APP ICON


As the app is pretty secret i just went with the outline of a diamond for the icon. I used one of the previous digital drawings that i did from before. This way whoever has the app on the phone can ell which program it is but still keep it secret from the partner. 

I then went on to make icons for each section of the app. This would be the ring size guide, diamond anatomy, the four c's and the glossary. I wanted to keep the icons recognisable but really simplified to make it not to complicated for the user and also make the design look much more sleek and luxurious. 


For the ring size guide icon i just sued a white circle just to represent the band of the ring.


The diamond anatomy i used the simple icon of the diamond with the dotted lines drawn across it. This way it shows the lines separating and showing the different parts of the diamond. simple but effective and represents the anatomy well.


For the glossary, i wanted just to represent the text in a clear way so i just opted for the simple white lines to tie it in with the other icons too.


For the four c's, i just wanted to have the numbers simplified. I chose this really nice type to add abit of elegance to the icon. 

After creating the icons for the different sections, i also went on to create the icons for the four c's from my research. I first created design sheets thinking of how i could simplify the different "c's" into pictogram form before settling on the finalised ideas and making them come to life digitally. The four c's are Cut, Clarity, Colour and Carat Weight...




I based the icon for colour from the previous digital pictograms i had created with the diagonal lines across the diamond logo, acting as a shade and therefore colour. 



Similarly for clarity, i created the chart of clarity by using this polka dot pattern to represent the imperfections in the diamond. The more polka dots on the diamond, obviously the more imperfections or more visible the imperfections are on the diamond. 

For the icon i just used one of the polka dot patterned diamond logos to make it fit the theme and also to create easily recognisable logos. 


Again looking at the diagrams i have created for the 'Cut' of the diamond. I wanted to keep the same theme running through with the shape of the diamond outline. In this case, i altered the shape of the diamond to fit the shape of the cut... Shallow, Deep, Fine and Ideal. I also went with the dotted line to represent the movement of light into the diamond, including the arrow head at the end to represent where the light is finally released out of the diamond when it has entered. 

Again, these are simple pictogram versions that still get the message across but make it much easier to look at and understand. I believe it is also more aesthetically pleasing. 


Again, i just used one of the cuts with the lines on for the icon pictogram to represent this.

Now i have completed all the icons i want to include into the app. 



i also created the little house icon as well as the back arrow which i want to place maybe in a bar at the bottom of the app. The house will take you back to the home page of the app and the back arrow will send you back one page. Using the basic knowledge of existing apps, this is why i chose to include these functions and create the icons for this. 










Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.