Icon design: Difference between revisions

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
VisualWikitext
imported>Neiltonks
Adding local short description: "Genre of graphic design", overriding Wikidata description "genre"
 
imported>Cl3phact0
m Replaced VE ref names using RefRenamer
 
Line 1: Line 1:
{{Short description|Genre of graphic design}}
{{Short description|Genre of graphic design}}
'''Icon design''' is the process of designing graphic [[symbol|symbols]] to represent physical objects ([[Pictogram|pictograms]]) and abstract concepts ([[Ideogram|ideograms]]). In the context of [[software application]]s, an [[Icon (computing)|icon]] often represents a [[computer program|program]], an action, or data on a [[computer]].<ref>{{Cite news |date=2016-05-13 |title=Design In The Age Of The App Icon |url=https://www.fastcompany.com/3059854/design-in-the-age-of-the-app-icon |archive-url=http://web.archive.org/web/20220912080249/https://www.fastcompany.com/3059854/design-in-the-age-of-the-app-icon |archive-date=2022-09-12 |access-date=2025-03-22 |work=Fast Company |language=en-US}}</ref>
[[File:Elevator (AIGA based).svg|thumb|upright=0.6|[[DOT pictogram]] for an [[elevator]]. Such icons are often used in airports,  train stations and hotels.]]
'''Icon design''' is the process of designing graphic [[symbol|symbols]] to represent physical objects ([[Pictogram|pictograms]]) and abstract concepts ([[Ideogram|ideograms]]). In the context of [[software application]]s, an [[Icon (computing)|icon]] often represents a [[computer program|program]], an action, or data on a [[computer]].<ref>{{Cite news |date=2016-05-13 |title=Design In The Age Of The App Icon |url=https://www.fastcompany.com/3059854/design-in-the-age-of-the-app-icon |archive-url=https://web.archive.org/web/20220912080249/https://www.fastcompany.com/3059854/design-in-the-age-of-the-app-icon |archive-date=2022-09-12 |access-date=2025-03-22 |work=Fast Company |language=en-US |url-status=live }}</ref>


== Usage and process ==
== Usage and process ==
Though the design of icons has existed as long as pictograms and ideograms have, modern icon design primarily exists in maps, public infrastructure like [[Wayfinding (urban or indoor)|wayfinding]], and user interfaces for video games, computers, and mobile devices. Physical venues and events make use of either existing symbols from governments (such as the [[DOT pictograms]]) or custom icon designs. Custom icons are most visible as [[Application software|application]] icons, [[favicon]]s, and [[user interface]] toolbar icons on computers and mobile devices.<ref name=":0">{{Cite web |last=Pavlus |first=John |date=September 18, 2015 |title=Masters of the Small Canvas |url=https://www.bloomberg.com/news/articles/2015-09-17/drawing-icons-and-emoticons-for-screens-of-all-sizes |url-status=live}}</ref><ref>{{Cite web |last=Schonfeld |first=Erick |date=2008-06-07 |title=The Story Behind Google's New Favicon |url=https://techcrunch.com/2008/06/07/the-story-behind-googles-new-favicon/ |access-date=2025-03-22 |website=TechCrunch |language=en-US}}</ref>
Though the design of icons has existed as long as pictograms and ideograms have, modern icon design primarily exists in maps, public infrastructure like [[Wayfinding (urban or indoor)|wayfinding]], and user interfaces for video games, computers, and mobile devices. Physical venues and events make use of either existing symbols from governments (such as the [[DOT pictograms]]) or custom icon designs. Custom icons are most visible as [[Application software|application]] icons, [[favicon]]s, and [[user interface]] toolbar icons on computers and mobile devices.<ref name="Pavlus-2015">{{Cite web |last=Pavlus |first=John |date=September 18, 2015 |title=Masters of the Small Canvas |website=[[Bloomberg News]] |url=https://www.bloomberg.com/news/articles/2015-09-17/drawing-icons-and-emoticons-for-screens-of-all-sizes }}</ref><ref>{{Cite web |last=Schonfeld |first=Erick |date=2008-06-07 |title=The Story Behind Google's New Favicon |url=https://techcrunch.com/2008/06/07/the-story-behind-googles-new-favicon/ |access-date=2025-03-22 |website=TechCrunch |language=en-US}}</ref>


Modern app icons have a maximum size of 1024×1024 pixels or greater, however icon design involves creating artwork at various sizes for legibility.<ref name=":0" /> At smaller sizes, designers often eliminate or reduce unnecessary details while exaggerating important details. Especially for [[Display resolution|lower-density displays]], icons are [[Font hinting|hinted]] at various sizes similar to digital [[type design]] by aligning shapes to pixel boundaries as to ensure visual clarity. Icons may also need to be altered for different display modes, such as [[Light-on-dark color scheme|dark mode]]. The design of icon sets includes consideration to a shared elements, such as a color palette, perspective, and style.<ref>{{Cite web |last=Warren |first=Tom |date=2019-12-12 |title=Microsoft reveals new Windows logo design and 100 modern app icons |url=https://www.theverge.com/2019/12/12/21012997/microsoft-new-windows-logo-fluent-design-icons |access-date=2025-03-22 |website=The Verge |language=en-US}}</ref><ref>{{Cite web |date=2018-08-23 |title=Facebook Testing New Emoji Designs |url=https://blog.emojipedia.org/facebook-testing-new-emoji-designs/ |access-date=2025-03-22 |website=Emojipedia - The Latest Emoji News |language=en}}</ref>
[[File:Crystal Clear app vcalendar.png|thumb|upright=0.4|Icon for a calendar app]]
Modern app icons have a maximum size of 1024×1024 pixels or greater, however icon design involves creating artwork at various sizes for legibility.<ref name="Pavlus-2015" /> At smaller sizes, designers often eliminate or reduce unnecessary details while exaggerating important details. Especially for [[Display resolution|lower-density displays]], icons are [[Font hinting|hinted]] at various sizes similar to digital [[type design]] by aligning shapes to pixel boundaries as to ensure visual clarity. Icons may also need to be altered for different display modes, such as [[Dark mode|dark mode]]. The design of icon sets includes consideration to a shared elements, such as a color palette, perspective, and style.<ref>{{Cite web |last=Warren |first=Tom |date=2019-12-12 |title=Microsoft reveals new Windows logo design and 100 modern app icons |url=https://www.theverge.com/2019/12/12/21012997/microsoft-new-windows-logo-fluent-design-icons |access-date=2025-03-22 |website=The Verge |language=en-US}}</ref><ref>{{Cite web |date=2018-08-23 |title=Facebook Testing New Emoji Designs |url=https://blog.emojipedia.org/facebook-testing-new-emoji-designs/ |access-date=2025-03-22 |website=Emojipedia – The Latest Emoji News |language=en}}</ref>


The process of icon design includes defining a metaphor, drawing an illustration, creating any necessary alterations for various sizes, and occasionally assembling files into a folder, [[ICO (file format)|ICO]] file, or [[Apple Icon Image format|ICNS]] file. [[Vector graphics|Vector]] icons in apps and websites are usually [[SVG]] files.
The process of icon design includes defining a metaphor, drawing an illustration, creating any necessary alterations for various sizes, and occasionally assembling files into a folder, [[ICO (file format)|ICO]] file, or [[Apple Icon Image format|ICNS]] file. [[Vector graphics|Vector]] icons in apps and websites are usually [[SVG]] files.


Due to their high visibility and relation to [[logo]] design and [[Brand|branding]], new app icons are frequently criticized.<ref>{{Cite news |title=Rebranding Lessons From Airbnb, Instagram, and Google |url=https://www.inc.com/anna-guerrero/airbnb-instagram-google-what-marketers-can-learn-from-these-companies-rebrands.html |archive-url=http://web.archive.org/web/20230522170216/https://www.inc.com/anna-guerrero/airbnb-instagram-google-what-marketers-can-learn-from-these-companies-rebrands.html |archive-date=2023-05-22 |access-date=2025-03-22 |work=Inc.com |language=en}}</ref><ref>{{Cite news |last=Chen |first=Brian X. |title=Steve Jobs: iTunes 10 Icon Does Not ‘Suck’ |url=https://www.wired.com/2010/09/steve-jobs-itunes/ |access-date=2025-03-22 |work=Wired |language=en-US |issn=1059-1028}}</ref><ref>{{Cite web |last=updated |first=Daniel John last |date=2021-03-01 |title=Amazon just fixed its controversial new app icon |url=https://www.creativebloq.com/news/amazon-fixes-controversial-app-icon |access-date=2025-03-22 |website=Creative Bloq |language=en}}</ref><ref>{{Cite web |last=Beck |first=Kellen |date=2016-05-13 |title=10 app icon redesigns: The good, the bad and the ugly |url=https://mashable.com/article/10-icon-app-redesign-instagram |access-date=2025-03-22 |website=Mashable |language=en}}</ref>
Due to their high visibility and relation to [[logo]] design and [[Brand|branding]], new app icons are frequently criticized.<ref>{{Cite news |title=Rebranding Lessons From Airbnb, Instagram, and Google |url=https://www.inc.com/anna-guerrero/airbnb-instagram-google-what-marketers-can-learn-from-these-companies-rebrands.html |archive-url=https://web.archive.org/web/20230522170216/https://www.inc.com/anna-guerrero/airbnb-instagram-google-what-marketers-can-learn-from-these-companies-rebrands.html |archive-date=2023-05-22 |access-date=2025-03-22 |work=Inc.com |language=en |url-status=live }}</ref><ref>{{Cite magazine |last=Chen |first=Brian X. |title=Steve Jobs: iTunes 10 Icon Does Not 'Suck' |url=https://www.wired.com/2010/09/steve-jobs-itunes/ |access-date=2025-03-22 |magazine=Wired |language=en-US |issn=1059-1028}}</ref><ref>{{Cite web |first=Daniel | last=John |date=2021-03-01 |title=Amazon just fixed its controversial new app icon |url=https://www.creativebloq.com/news/amazon-fixes-controversial-app-icon |access-date=2025-03-22 |website=Creative Bloq |language=en}}</ref><ref>{{Cite web |last=Beck |first=Kellen |date=2016-05-13 |title=10 app icon redesigns: The good, the bad and the ugly |url=https://mashable.com/article/10-icon-app-redesign-instagram |access-date=2025-03-22 |website=Mashable |language=en}}</ref>


== Notable icon designers ==
== Notable icon designers ==
{{incomplete list|date=November 2017}}
{{incomplete list|date=November 2017}}


* '''Masaru Katsumi''' - [[1964 Summer Olympics]] in Tokyo
* Masaru Katsumi – [[1964 Summer Olympics]] in Tokyo
* '''[[Lance Wyman]]''' - [[1968 Summer Olympics]] in Mexico City, [[National Zoological Park (United States)|National Zoo]]
* [[Lance Wyman]] – [[1968 Summer Olympics]] in Mexico City, [[National Zoological Park (United States)|National Zoo]]
* '''[[Rajie Cook]]''' & '''Dan Shanosky''' - [[DOT pictograms|USDOT pictograms]]
* [[Rajie Cook]] & Dan Shanosky – [[DOT pictograms|USDOT pictograms]]
* '''[[Otl Aicher|Otto Aicher]]''' - [[1972 Summer Olympics]] in Munich
* [[Otl Aicher|Otto Aicher]] – [[1972 Summer Olympics]] in Munich
* '''[[Susan Kare]]''' - [[Classic Mac OS]], [[Facebook]] gifts<ref>{{Cite web |title=Buy a virtual cupcake for breast cancer, on Facebook |url=https://www.cnet.com/tech/services-and-software/buy-a-virtual-cupcake-for-breast-cancer-on-facebook/ |access-date=2025-03-22 |website=CNET |language=en}}</ref>
* [[Susan Kare]] – [[Classic Mac OS]], [[Facebook]] gifts<ref>{{Cite web |title=Buy a virtual cupcake for breast cancer, on Facebook |url=https://www.cnet.com/tech/services-and-software/buy-a-virtual-cupcake-for-breast-cancer-on-facebook/ |access-date=2025-03-22 |website=CNET |language=en}}</ref>
* [[Jon Hicks (designer)|'''Jon Hicks''']] - [[Firefox]], [[Skype]] [[emoticon]]s,<ref>{{Cite web|url=https://hicksdesign.co.uk/journal/new-skype-emoticons|title=New Skype Emoticons {{!}} Hicks Journal|website=hicksdesign.co.uk|language=en|access-date=2018-10-05}}</ref> Icon Handbook<ref>{{Cite book|title=The icon handbook|last=Jon|first=Hicks|others=Noun Project.|year=2011 |isbn=9781907828034|location=United Kingdom|oclc=778700859}}</ref>
* [[Jon Hicks (designer)|Jon Hicks]] – [[Firefox]], [[Skype]] [[emoticon]]s,<ref>{{Cite web|url=https://hicksdesign.co.uk/journal/new-skype-emoticons|title=New Skype Emoticons {{!}} Hicks Journal|website=hicksdesign.co.uk|language=en|access-date=2018-10-05}}</ref> Icon Handbook<ref>{{Cite book|title=The icon handbook|last=Jon|first=Hicks|others=Noun Project.|year=2011 |isbn=9781907828034|location=United Kingdom|publisher=Five Simple Steps|oclc=778700859}}</ref>
* '''[[The Iconfactory]]''' - [[Windows XP]], [[Windows Vista]],<ref>{{Cite web |last=Oiaga |first=Marius |date=2007-05-02 |title=Windows Vista Icons - The Prototypes |url=https://news.softpedia.com/news/Windows-Vista-Icons-The-Lost-Prototypes-53713.shtml |access-date=2025-03-22 |website=softpedia |language=english}}</ref> [[Twitter, Inc.|Twitter]] emoji<ref>{{Cite web |date=2015-06-26 |title=The designer behind Twitter's emoji suite: 'Of course I love the smiley poop' |url=https://digiday.com/media/designer-behind-twitters-new-emoji-suite-course-love-smiley-poop/ |access-date=2025-03-22 |website=Digiday |language=en-US}}</ref>
* [[The Iconfactory]] - [[Windows XP]], [[Windows Vista]],<ref>{{Cite web |last=Oiaga |first=Marius |date=2007-05-02 |title=Windows Vista Icons - The Prototypes |url=https://news.softpedia.com/news/Windows-Vista-Icons-The-Lost-Prototypes-53713.shtml |access-date=2025-03-22 |website=softpedia |language=english}}</ref> [[Twitter, Inc.|Twitter]] emoji<ref>{{Cite web |date=2015-06-26 |title=The designer behind Twitter's emoji suite: 'Of course I love the smiley poop' |url=https://digiday.com/media/designer-behind-twitters-new-emoji-suite-course-love-smiley-poop/ |access-date=2025-03-22 |website=Digiday |language=en-US}}</ref>


==See also==
==See also==

Latest revision as of 11:27, 16 November 2025

Template:Short description

File:Elevator (AIGA based).svg
DOT pictogram for an elevator. Such icons are often used in airports, train stations and hotels.

Icon design is the process of designing graphic symbols to represent physical objects (pictograms) and abstract concepts (ideograms). In the context of software applications, an icon often represents a program, an action, or data on a computer.[1]

Usage and process

Though the design of icons has existed as long as pictograms and ideograms have, modern icon design primarily exists in maps, public infrastructure like wayfinding, and user interfaces for video games, computers, and mobile devices. Physical venues and events make use of either existing symbols from governments (such as the DOT pictograms) or custom icon designs. Custom icons are most visible as application icons, favicons, and user interface toolbar icons on computers and mobile devices.[2][3]

File:Crystal Clear app vcalendar.png
Icon for a calendar app

Modern app icons have a maximum size of 1024×1024 pixels or greater, however icon design involves creating artwork at various sizes for legibility.[2] At smaller sizes, designers often eliminate or reduce unnecessary details while exaggerating important details. Especially for lower-density displays, icons are hinted at various sizes similar to digital type design by aligning shapes to pixel boundaries as to ensure visual clarity. Icons may also need to be altered for different display modes, such as dark mode. The design of icon sets includes consideration to a shared elements, such as a color palette, perspective, and style.[4][5]

The process of icon design includes defining a metaphor, drawing an illustration, creating any necessary alterations for various sizes, and occasionally assembling files into a folder, ICO file, or ICNS file. Vector icons in apps and websites are usually SVG files.

Due to their high visibility and relation to logo design and branding, new app icons are frequently criticized.[6][7][8][9]

Notable icon designers

Script error: No such module "Unsubst".

See also

References

  1. ↑ Script error: No such module "citation/CS1".
  2. ↑ a b Script error: No such module "citation/CS1".
  3. ↑ Script error: No such module "citation/CS1".
  4. ↑ Script error: No such module "citation/CS1".
  5. ↑ Script error: No such module "citation/CS1".
  6. ↑ Script error: No such module "citation/CS1".
  7. ↑ Script error: No such module "Citation/CS1".
  8. ↑ Script error: No such module "citation/CS1".
  9. ↑ Script error: No such module "citation/CS1".
  10. ↑ Script error: No such module "citation/CS1".
  11. ↑ Script error: No such module "citation/CS1".
  12. ↑ Script error: No such module "citation/CS1".
  13. ↑ Script error: No such module "citation/CS1".
  14. ↑ Script error: No such module "citation/CS1".

External links

Template:Design

Retrieved from "http://debianws.lexgopc.com/wiki143/index.php?title=Icon_design&oldid=5641635"