Introduction

An excerpt from Wikipedia, “Iconography is the branch of art history which studies the identification, description, and the interpretation of the content of images: the subjects depicted, the particular compositions and details used to do so, and other elements that are distinct from artistic style“.

Gist

In mobile platforms, icons at any location plays a major role in providing a sense of clarity to the task at hand its purpose of existence. A clear and well defined icon is very important while designing a web page or an application for mobile devices, since the real estate at hand is very limited and optimal use of it will result in great user experience. All the platforms boast of a rich set of self explanatory icons such as Android and iOS. The ideas and concepts put behind the creation of these icons are also well documented in their websites such as Android.

To begin with creating an icon, I would stress on 3 major areas:

- Representation

Every icon currently popular, is popular because of the sense of representation the hold. The Gmail icon from Google provides a neat example to explain the scenario. Its purpose is to provide a sense of understanding, where the user can simply look at it and assume that its for mail purposes. It has an envelope image on it with a clear “M” on it to explain its purpose. Playing the role of the “Esperanto” (artificial language) of modern digital media, every measure has to be taken to ensure that it doesn’t deviate from its purpose. The purpose of providing the user with the reason for its existence.

- Color

Remember the time when computers where only black and white with the only interface being text? Now that we have brilliantly designed hardware packed away in small devices with an even smaller display, designers are forced to display data based on priority and also ensure that clutter is not achieved while doing so. The best and easiest way to distinguishing two entities from each other is to choose right colors to provide a sense of contrast between them. For example, a regular save icon if not designed with right color contrast, will look like a smudged area with no understanding as to what its purpose is. The icon must have a clear outline and proper white spaces between them and Voila! At any given scenario, the “floppy” like save icon always means save the data. Wherever you use, whichever application it may be, a simple black/gray and white floppy image means save. A more artistic and still neat design is Photos icon from Apple for iOS devices. It has a variety of colors placed very delicately next to each other, and with the right amount of alpha. By doing so, they have achieved a complex but clean icon, which, when used in any size or location, looks distinct and also serves its purpose. A red exclamatory can mean an important notification, a green count on the login button can mean login fields are correct, and so on.

- Clarity and Quality

With the primary attention given to the purpose, the parallel representation of purpose and by choosing right colors at right areas, a designer can achieve a neat icon which, when placed in any application and at any part of the application, means one and only one thing, its purpose. A save icon means “save data” in any development platform, in any area of the visual context. A designer must be very delicate in his approach while designing an icon. Every line, every element, every color must be placed with a very acute sense of clarity. This helps any user to understand the icon, even if the icon is as small as 16 * 16 pixels or as large as 1024*1024 one can find on the app store of Apple.

Conclusion

These are some of the basic ideas which a designer can utilize to design icons. The purpose of this post is to show my understanding in a very basic manner.

- Himadhar