In a previous post, I explained the importance of having a clear visual metaphor for what icons represent. In this post I will explain the importance of large and small icon sizes, and why they should be redrawn or touched up at all of these different sizes.
First, I would like to give a brief explanation of the purpose of icons. Since the birth of the graphical user interface (GUI), icons have been used to represent files and applications on computers. Even before then, symbols have been used in real life on road signs and doors to let us know what lies ahead. Most of the symbols found on these signs are simplified for instant recognition from varying distances. Compare that to the idea of small and large icon sizes.
Symbols we associate with Restrooms and Crosswalks.
Icons on a computer have different purposes. Examples of these uses in Mac OS X are browsing files in Finder, launching applications from the Dock, and inspecting documents with Cover Flow and Quick Look.
When browsing through files and folders with the Finder or Explorer on Windows), icons serve the purpose of accompanying text alongside or beneath it. In conjunction, text and icons work together to create the full meaning of what an item represents. It is important to note that the majority of users are browsing their files and folders with icons between the sizes of 16×16 and 48×48 pixels.
Without the folder icon beside the text, someone may click on SPORE and expect the application to launch instead of opening a folder.
Text is displayed alongside smaller icons because if the icons were to be used alone, they could be difficult to read. That being said, without the icon, there would be no visual cue on the type of item it is: a file, folder, or application. The icon must be clear at these small sizes so that the user can easily distinguish between these different types.
A few applications sitting in the Mac OS X Dock.
The Dock on Mac OS X serves as the launcher for applications (and on the right side are files, folders, and the Trash). In this instance, icons stand alone in a size averaging between 32×32 and 64×64 pixels, though there is a possibility to make it larger or smaller. (It is worth noting that the Dock uses the 128×128 pixel resource for displaying icons.) The illustration contained in the square canvas is the only indication for what it represents. The user is able to use their cursor to hover over the icon to reveal the name (and optionally increase the size of the icon to reveal more detail). This exemplifies the importance for uniqueness of shapes and colors together to form a perfect icon for an application for instant recognition.
Cover Flow in Mac OS X.
In Cover Flow, icons can be viewed at enormous sizes, sometimes even exceeding 512×512 pixels. This time, the purpose of icons is for users to preview documents. Because the innards of a document are now shown, the icon becomes more detailed, and the user can read text, view photos, or watch video. Icons without previews, such as folders and applications needed to have larger resources in Mac OS X Leopard so they would look just as great when side-by-side with documents. This allowed for icon artists to create extra detail where it would be impossible to see at smaller sizes.
Larger icon sizes contain more detail, while smaller icon sizes focus on clear shapes.
It as just as important to create additional detail in a large icon as it is to remove excess detail in a small icon.
Clarity is of utmost importance in creating an icon, after determining metaphor. Especially for small versions of icons, to improve readability, icon designers should cut the detail and accentuate the edges of the most crucial shapes. Sometimes designers may need to redraw the icon entirely for a small version, whereas other times one may only need to retouch the icon by resizing elements.
Smaller icons have defined edges and shadows to accentuate the shapes.
I’m going to get a little technical here for a second. Here is how to create a sharp clean look for small sizes: create a one pixel dark outline to the object and a one pixel light stroke on the inside edge of the object. This allows the icon to appear sharper. And to make sure the icon looks great on light and dark backgrounds alike, make the dark outline a transparent black. This enables the lightest edge to be most visible on dark backgrounds, and the darkest edge to be most visible on light backgrounds. Use greater contrast to define the icon.
I hope this post has explained my opinion about the sizes of icons and their importance in the best way possible. Stay tuned for the possibility of more posts in “The Importance of Icons” series.
Further reading: Gedeon Maheux has written a great blog post recently about why icons matter and how the Frenzic icon on iPhone stands out from the bulk of App Store icons.