Icon design
Encyclopedia
Icon design is the process of designing a graphic symbol
that represents some real, fantasy or abstract motive, entity or action. In the context of software applications, an icon
often represents a program
, a function, data or a collection of data on a computer
system.
Icon designs can be simple, with flat two-dimensional drawing or a black silhouette, or complex, presenting a combination of graphic design
elements such as one or more linear and radial color gradients, projected shadows, contour shades, and three-dimensional perspective effects.
Modern icons may have a maximum size of 512 by 512 pixel
s; the challenge of icon design is to create an image of that size, which can reduce down to 12 by 12 pixels, that accurately portrays what the icon represents. Common examples of this are installer icons, which usually contain images of product installation
media and a computer, thus showing the rough idea of installation, or icons that involve the Internet
containing a globe, now the almost universally recognized symbol for the Internet.
One of the early professional icon designers was Susan Kare
, who designed many of the icons contained within the original Mac OS
.
The process of icon design can be divided into two parts: defining the pictogram
and creating final design
or illustration
.
There are three main approaches in defining pictograms. The first and the most desirable in icon design practice is using conventional
images. If there is no conventional pictogram for the particular icon, a designer can use a literal
image, including an image that is shared by the main concept (for example printer is shared image for printing concept), or metaphorical
image. After the pictogram is defined, it is necessary to check it for possible conflicts (for example the snail image is a good metaphor for slow motion but if used as a road sign it will conflict with literal and partially conventional meaning "snails on the road").
Defining the pictogram can be different for the toolbar
and other functional icons in the interface and for the icons representing independent software applications or websites which are closer to logotype or mascot
design.
As computer icon
s can be used in different sizes, icon design involves creating master artwork usually for the biggest size used and producing smaller sizes from it. It is desirable to comply with overall style of the icon set, using the same color palette, perspective and renderings for all icons. Special attention should be given to eliminating unnecessary details and aligning strokes and objects to pixels in small icon sizes to avoid messy and blurred images.
Symbol
A symbol is something which represents an idea, a physical entity or a process but is distinct from it. The purpose of a symbol is to communicate meaning. For example, a red octagon may be a symbol for "STOP". On a map, a picture of a tent might represent a campsite. Numerals are symbols for...
that represents some real, fantasy or abstract motive, entity or action. In the context of software applications, an icon
Icon (computing)
A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
often represents a program
Computer program
A computer program is a sequence of instructions written to perform a specified task with a computer. A computer requires programs to function, typically executing the program's instructions in a central processor. The program has an executable form that the computer can use directly to execute...
, a function, data or a collection of data on a computer
Computer
A computer is a programmable machine designed to sequentially and automatically carry out a sequence of arithmetic or logical operations. The particular sequence of operations can be changed readily, allowing the computer to solve more than one kind of problem...
system.
Icon designs can be simple, with flat two-dimensional drawing or a black silhouette, or complex, presenting a combination of graphic design
Graphic design
Graphic design is a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form – undertaken in order to convey a specific message to a targeted audience...
elements such as one or more linear and radial color gradients, projected shadows, contour shades, and three-dimensional perspective effects.
Modern icons may have a maximum size of 512 by 512 pixel
Pixel
In digital imaging, a pixel, or pel, is a single point in a raster image, or the smallest addressable screen element in a display device; it is the smallest unit of picture that can be represented or controlled....
s; the challenge of icon design is to create an image of that size, which can reduce down to 12 by 12 pixels, that accurately portrays what the icon represents. Common examples of this are installer icons, which usually contain images of product installation
Installation (computer programs)
Installation of a program is the act of putting the program onto a computer system so that it can be executed....
media and a computer, thus showing the rough idea of installation, or icons that involve the Internet
Internet
The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite to serve billions of users worldwide...
containing a globe, now the almost universally recognized symbol for the Internet.
One of the early professional icon designers was Susan Kare
Susan Kare
Susan Kare is an artist and graphic designer who created many of the interface elements for the Apple Macintosh in the 1980s. She was also one of the original employees of NeXT , working as the Creative Director.-Background:Kare was born in Ithaca, New York and is the sister of aerospace engineer...
, who designed many of the icons contained within the original Mac OS
Mac OS
Mac OS is a series of graphical user interface-based operating systems developed by Apple Inc. for their Macintosh line of computer systems. The Macintosh user experience is credited with popularizing the graphical user interface...
.
The process of icon design can be divided into two parts: defining the pictogram
Pictogram
A pictograph, also called pictogram or pictogramme is an ideogram that conveys its meaning through its pictorial resemblance to a physical object. Pictographs are often used in writing and graphic systems in which the characters are to considerable extent pictorial in appearance.Pictography is a...
and creating final design
Graphic design
Graphic design is a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form – undertaken in order to convey a specific message to a targeted audience...
or illustration
Illustration
An illustration is a displayed visualization form presented as a drawing, painting, photograph or other work of art that is created to elucidate or dictate sensual information by providing a visual representation graphically.- Early history :The earliest forms of illustration were prehistoric...
.
There are three main approaches in defining pictograms. The first and the most desirable in icon design practice is using conventional
Convention (norm)
A convention is a set of agreed, stipulated or generally accepted standards, norms, social norms or criteria, often taking the form of a custom....
images. If there is no conventional pictogram for the particular icon, a designer can use a literal
Literal and figurative language
Literal and figurative language is a distinction in traditional systems for analyzing language. Literal language refers to words that do not deviate from their defined meaning. Figurative language refers to words, and groups of words, that exaggerate or alter the usual meanings of the component...
image, including an image that is shared by the main concept (for example printer is shared image for printing concept), or metaphorical
Conceptual metaphor
In cognitive linguistics, conceptual metaphor, or cognitive metaphor, refers to the understanding of one idea, or conceptual domain, in terms of another, for example, understanding quantity in terms of directionality . A conceptual domain can be any coherent organization of human experience...
image. After the pictogram is defined, it is necessary to check it for possible conflicts (for example the snail image is a good metaphor for slow motion but if used as a road sign it will conflict with literal and partially conventional meaning "snails on the road").
Defining the pictogram can be different for the toolbar
Toolbar
In a graphical user interface, on a computer monitor, a toolbar is a GUI widget on which on-screen buttons, icons, menus, or other input or output elements are placed. Toolbars are seen in office suites, graphics editors, and web browsers...
and other functional icons in the interface and for the icons representing independent software applications or websites which are closer to logotype or mascot
Mascot
The term mascot – defined as a term for any person, animal, or object thought to bring luck – colloquially includes anything used to represent a group with a common public identity, such as a school, professional sports team, society, military unit, or brand name...
design.
As computer icon
Computer icon
A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
s can be used in different sizes, icon design involves creating master artwork usually for the biggest size used and producing smaller sizes from it. It is desirable to comply with overall style of the icon set, using the same color palette, perspective and renderings for all icons. Special attention should be given to eliminating unnecessary details and aligning strokes and objects to pixels in small icon sizes to avoid messy and blurred images.