Icon design

Last updated

Icon design-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, Mac OS X, 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.

The Dock is a prominent feature of the graphical user interface of macOS. It is used to launch applications and to switch between running applications. The Dock is also a prominent feature of macOS's predecessor NeXTSTEP and OPENSTEP operating systems. The earliest known implementations of a dock are found in operating systems such as RISC OS and NeXTSTEP. iOS has its own version of the Dock for the iPhone and iPod Touch, as does iPadOS for the iPad.

<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.

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> Number of distinct pixels in each dimension that can be displayed

The display resolution or display modes of a digital television, computer monitor or 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.

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.

Segoe is a typeface, or family of fonts, that is best known for its use by Microsoft. The company uses Segoe in its online and printed marketing materials, including recent logos for a number of products. Additionally, the Segoe UI font sub-family is used by numerous Microsoft applications, and may be installed by applications. It was adopted as Microsoft's default operating system font beginning with Windows Vista, and is also used on Outlook.com, Microsoft's web-based email service. In August 2012, Microsoft unveiled its new corporate logo typeset in Segoe, replacing the logo it had used for the previous 25 years.

Mobile app development is the act or process by which a mobile app is developed for one or more mobile devices, which can include personal digital assistants (PDA), enterprise digital assistants (EDA), or mobile phones. Such software applications are specifically designed to run on mobile devices, taking numerous hardware constraints into consideration. Common constraints include CPU architecture and speeds, available memory (RAM), limited data storage capacities, and considerable variation in displays and input methods. These applications can be pre-installed on phones during manufacturing or delivered as web applications, using server-side or client-side processing to provide an "application-like" experience within a web browser.

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.

In computing, a bitmap is a mapping from some domain to bits. It is also called a bit array or bitmap index.

<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.

Microsoft mobile services are a set of proprietary mobile services created specifically for mobile devices; they are typically offered through mobile applications and mobile browser for Windows Phone platforms, BREW, and Java. Microsoft's mobile services are typically connected with a Microsoft account and often come preinstalled on Microsoft's own mobile operating systems while they are offered via various means for other platforms. Microsoft started to develop for mobile computing platforms with the launch of Windows CE in 1996 and later added Microsoft's Pocket Office suite to their Handheld PC line of PDAs in April 2000. From December 2014 to June 2015, Microsoft made a number of corporate acquisitions, buying several of the top applications listed in Google Play and the App Store including Acompli, Sunrise Calendar, Datazen, Wunderlist, Echo Notification Lockscreen, and MileIQ.

<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)