Theory

Icons are graphical representation of objects or actions. They are part of the visual language and communicate large information in a single glance which otherwise may need number of words.

There are two essential aspects of icon design

• Aesthetics (communication efficiency)

• Construction (realization & reproduction using digital medium)

Aesthetics is not only about looks and attractiveness; it is about how efficiently the icon functions vis-a-vis the human user. An icon can be very creative and good looking but can miserably fail in communicating the right meaning. A poor icon design may lead to human errors or accidents. Imagine a save icon in the shape of a basket being confused with a storage icon because visually a ‘basket’ represents it. The semantics of an icon - (what meaning a graphic symbol communicates) can therefore be creatively destructive. Some other factors that also contribute to aesthetics are shape, color, simplicity, order and proportions.

Construction aspect of an icon design is equally important. Vector based image construction is far more easy for computation, scaling, refreshing and display compared to pixilated construction. Pixilated icons require heavy sizes and have limited animation capabilities. On the other hand vector based icons may not be suitable for all situations and screen environments.

You should create separate icon sets for high, medium and low pixel density screens.

Pixel density of a mobile phone screen is calculated as follows:

      Specifications: display size=3.7 ”(diagonal) / resolution= 480 x 800 pixels

      Pixel density (PPI) = pixels per inch

      Width: height ratio is same as 1: 800/480

      Thus width= 1.9” and height=3.175” (By Pythagorean theorem and diagonal)

      PPI= 480 divided by width of 1.9 or 800 divided by 3.175 to give 252ppi.

      Human eye cannot distinguish the difference in PPI when the figure reaches a saturation point of about 250ppi or 300ppi at the most.

In this experiment, as an introduction to conceptualizing icons for a computer Graphical User Interface (GUI)- you will learn how to imagine, visualize and construct a pixel based icon to represent an object or action. It needs to be noted that there is no one single correct answer to the quest of creating an icon. Three different students can come up with three different icon designs that are equally creative, equally valid and equally rated as good.

Icons can be in the form of 2-dimensional flat symbolic image or 3-dimensional. They can be static or animated. Icons can be accompanied by text or labels. The shape, size and style of the letters that form such labels form part of typography design. Typography is a vast area in design. Here only recommendations for typography are made. Widgets are also designed using the same methodology as the icon.

Illustration of some icons

 

 

Please read the tutorials before attempting the experiment.