Icon design

Last updated

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.

Contents

Style and usage

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.

Sizing

As computer icons 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 is given to eliminating unnecessary details and aligning strokes and objects to pixels in small icon sizes to avoid messy and blurred images.

Many modern icons have a maximum size of 1024 by 1024 pixels or greater. The challenge of icon design is to create an image that is communicative, beautiful, and understandable, at every size from this maximum resolution down to the minimum resolution of 16 by 16 pixels. Many icon formats allow one icon to include hinting to ensure visual clarity at smaller resolutions, or even completely different subsidiary images for smaller sizes (for instance, a keyboard at larger sizes, and a single keycap at smaller ones).

Usage

The most common and important examples are application icons, used to represent an app on Mac, Windows, Linux, or mobile platforms. These icons rely on unique and memorable metaphors as a form of product branding. Other common uses include favicons, toolbar icons, and icons for buttons or controls.

Process

Custom icon design process scheme with icons examples illustrating different aspects of icon design Icon design process ss.png
Custom icon design process scheme with icons examples illustrating different aspects of icon design

The process of icon design can be divided into two parts: defining the pictogram and creating final design or illustration.

Defining pictograms

There are three main approaches in defining pictograms.

  1. The first and the most desirable in icon design practice is using conventional images.
  2. 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.
  3. 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.

Notable icon designers

See also

Related Research Articles

Trillian is a proprietary multiprotocol instant messaging application created by Cerulean Studios. It is currently available for Microsoft Windows, macOS, Linux, Android, iOS, BlackBerry OS, and the Web. It can connect to multiple IM services, such as AIM, Bonjour, Facebook Messenger, Google Talk (Hangouts), IRC, XMPP (Jabber), VZ, and Yahoo! Messenger networks; as well as social networking sites, such as Facebook, Foursquare, LinkedIn, and Twitter; and email services, such as POP3 and IMAP.

In computing, a window is a graphical control element. It consists of a visual area containing some of the graphical user interface of the program it belongs to and is framed by a window decoration. It usually has a rectangular shape that can overlap with the area of other windows. It displays the output of and may allow input to one or more processes.

<span class="mw-page-title-main">Apple Mail</span> Email client by Apple Inc.

Mail is an email client included by Apple Inc. with its operating systems macOS, iOS, iPadOS, watchOS, and visionOS. Mail grew out of NeXTMail, which was originally developed by NeXT as part of its NeXTSTEP operating system, after Apple's acquisition of NeXT in 1997.

In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents. It can serve as an electronic hyperlink or file shortcut to access the program or data. The user can activate an icon using a mouse, pointer, finger, or voice commands. Their placement on the screen, also in relation to other icons, may provide further information to the user about their usage. In activating an icon, the user can move directly into and out of the identified function without knowing anything further about the location or requirements of the file or code.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

<span class="mw-page-title-main">Drag and drop</span> Action in computer graphic user interfaces

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, it can be used to invoke many kinds of actions, or create various types of associations between two abstract objects.

The taskbar is a graphical user interface element that has been part of Microsoft Windows since Windows 95, displaying and facilitating switching between running programs. The taskbar and the associated Start Menu were created and named in 1993 by Daniel Oran, a program manager at Microsoft who had previously collaborated on great ape language research with the behavioral psychologist B.F. Skinner at Harvard.

<span class="mw-page-title-main">Aqua (user interface)</span> User interface of macOS by Apple

Aqua is the graphical user interface, design language and visual theme of Apple's macOS and iOS operating systems. It was originally based on the theme of water, with droplet-like components and a liberal use of reflection effects and translucency. Its goal is to "incorporate color, depth, translucence, and complex textures into a visually appealing interface" in macOS applications. At its introduction, Steve Jobs noted that "... it's liquid, one of the design goals was when you saw it you wanted to lick it".

<span class="mw-page-title-main">Display resolution</span> Width and height of a display in pixels

The display resolution or display modes of a digital television, computer monitor, or other display device is the number of distinct pixels in each dimension that can be displayed. It can be an ambiguous term especially as the displayed resolution is controlled by different factors in cathode ray tube (CRT) displays, flat-panel displays and projection displays using fixed picture-element (pixel) arrays.

<span class="mw-page-title-main">Tooltip</span> Graphical user interface element

The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's function, what an abbreviation stands for, or the exact absolute time stamp over a relative time. In common practice, the tooltip is displayed continuously as long as the user hovers over the element or the text box provided by the tool. It is sometimes possible for the mouse to hover within the text box provided to activate a nested tooltip, and this can continue to any depth, often with multiple text boxes overlapped.

<span class="mw-page-title-main">Human interface guidelines</span> Software development documents

Human interface guidelines (HIG) are software development documents which offer application developers a set of recommendations. Their aim is to improve the experience for the users by making application interfaces more intuitive, learnable, and consistent. Most guides limit themselves to defining a common look and feel for applications in a particular desktop environment. The guides enumerate specific policies. Policies are genes sometimes based on studies of human–computer interaction, but most are based on conventions chosen by the platform developers preferences.

The ICO file format is an image file format for computer icons in Microsoft Windows. ICO files contain one or more small images at multiple sizes and color depths, such that they may be scaled appropriately. In Windows, all executables that display an icon to the user, on the desktop, in the Start Menu, or in file Explorer, must carry the icon in ICO format.

Resolution independence is where elements on a computer screen are rendered at sizes independent from the pixel grid, resulting in a graphical user interface that is displayed at a consistent physical size, regardless of the resolution of the screen.

<span class="mw-page-title-main">Ribbon (computing)</span> Graphical user interface element

In computer interface design, a ribbon is a graphical control element in the form of a set of toolbars placed on several tabs. The typical structure of a ribbon includes large, tabbed toolbars, filled with graphical buttons and other graphical control elements, grouped by functionality. Such ribbons use tabs to expose different sets of controls, eliminating the need for numerous parallel toolbars. Contextual tabs are tabs that appear only when the user needs them. For instance, in a word processor, an image-related tab may appear when the user selects an image in a document, allowing the user to interact with that image.

<span class="mw-page-title-main">Workbench (AmigaOS)</span> Graphical user interface for the Amiga computer

Workbench is the desktop environment and graphical file manager of AmigaOS developed by Commodore International for their Amiga line of computers. Workbench provides the user with a graphical interface to work with file systems and launch applications. It uses a workbench metaphor for representing file system organisation.

In computing, a bitmap graphic is an image formed from rows of different colored pixels. A GIF is an example of a graphics image file that uses a bitmap.

<span class="mw-page-title-main">MSN Messenger</span> Instant messaging client

MSN Messenger, later rebranded as Windows Live Messenger, was a cross-platform instant-messaging client developed by Microsoft. It connected to the now-discontinued Microsoft Messenger service and, in later versions, was compatible with Yahoo! Messenger and Facebook Messenger. The service was discontinued in 2013 and was replaced by Skype.

<span class="mw-page-title-main">GrafX2</span> Raster graphics editor

GrafX2 is a bitmap graphics editor inspired by the Amiga programs Deluxe Paint and Brilliance. It is free software and distributed under the GPL-2.0-only license.

iConji Pictographic writing system

iConji is a free pictographic communication system based on an open, visual vocabulary of characters with built-in translations for most major languages.

<span class="mw-page-title-main">Fluent Design System</span> Design system created by Microsoft in 2017

Fluent Design System, officially unveiled as Microsoft Fluent Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language that includes guidelines for the designs and interactions used within software designed for all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale. The new design language includes more prominent use of motion, depth, and translucency effects.

References

  1. "New Skype Emoticons | Hicks Journal". hicksdesign.co.uk. Retrieved 2018-10-05.
  2. Jon, Hicks (2011). The icon handbook. Noun Project. United Kingdom. ISBN   9781907828034. OCLC   778700859.{{cite book}}: CS1 maint: location missing publisher (link)