{"id":2268,"date":"2021-12-28T08:43:00","date_gmt":"2021-12-28T16:43:00","guid":{"rendered":"http:\/\/areteworks.local\/?p=2268"},"modified":"2023-02-28T10:14:34","modified_gmt":"2023-02-28T18:14:34","slug":"icons-user-interface-design","status":"publish","type":"post","link":"https:\/\/areteworks.com\/icons-user-interface-design\/","title":{"rendered":"User interface design and icons | UX Design Company"},"content":{"rendered":"

Icons and user interface design are practically inseparable. Icons convey meaning, can cross language barriers, help establish brands, give products and devices a contemporary look and feel, and make for easy touch targets. Their creation and use, however, can still be full of missteps and confusion.<\/p>\n

The absence of a standard for icons can make their use more problematic. For example, there are very few \u201cuniversal\u201d icons which immediately convey a singular meaning to the majority of people. Icons such as \u201cHome\u201d and \u201cPrint\u201d are among those considered universal in meaning. By contrast, icons such the star icon and the heart icon can can confuse users as to whether or not they hold the same meaning. If the feature, function or action the icon represents is not immediately conveyed to the user, the icon is reduced to confusing graphical eye candy and visual noise that gets in the way of task completion.<\/p>\n

The process of creating icons involves approaching them from all angles. Icon theme investigation can  help in generating symbolism that is unique to a product and company. Color selection can promote, or in some cases obscure, the icon\u2019s meaning. This is especially true for medical devices where specific colors may convey specific meanings and should not be used for icons. Additionally, determining whether to use high or low fidelity icons has a significant effect on the appearance of the user interface and product as a whole. The old saying of good icons should be able to be drawn in the sand with a stick may not hold true anymore as skeuomorphic icons became popular. Although the trend has been a return to flatter, lower fidelity icons it hasn\u2019t eliminated photo-realistic iconography from the UI equation. Also, the decision to use labels for icons affects the location and layout of the user interface. Labels for icons is rarely a bad idea as it eliminates confusion. However, one of the benefits of icons is that they can be space savers while still remaining large enough touch targets on touchscreens. Adding labels means taking up more space per icon.<\/p>\n

Icon generation requires attention to detail and a thorough investigation of symbols, themes, styles and colors. It also requires validation through usability testing. They may appear simple, but successful icon creation involves a knowledgeable multi-angled approach.<\/p>\n

\"user<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Icons and user interface design are practically inseparable. Icons convey meaning, can cross language barriers, help establish brands, give products and devices a contemporary look and feel, and make for easy touch targets. Their creation and use, however, can still be full of missteps and confusion. The absence of a standard for icons can make…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[50],"tags":[24,25,30,31,33,18,32,19,20,26],"acf":[],"yoast_head":"\nUser interface design and icons | UX Design Company - Areteworks<\/title>\n<meta name=\"description\" content=\"Icon generation and their place in user interface design involves approaching their inclusion and creation from multiple angles.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/areteworks.com\/icons-user-interface-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"User interface design and icons | UX Design Company - Areteworks\" \/>\n<meta property=\"og:description\" content=\"Icon generation and their place in user interface design involves approaching their inclusion and creation from multiple angles.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/areteworks.com\/icons-user-interface-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Areteworks\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-28T16:43:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-28T18:14:34+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/03\/ProposalIcons.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steven Liu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/areteworks.com\/#website\",\"url\":\"https:\/\/areteworks.com\/\",\"name\":\"Areteworks\",\"description\":\"UI UX Design Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/areteworks.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/areteworks.com\/icons-user-interface-design\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/03\/ProposalIcons.jpg\",\"contentUrl\":\"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/03\/ProposalIcons.jpg\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/areteworks.com\/icons-user-interface-design\/#webpage\",\"url\":\"https:\/\/areteworks.com\/icons-user-interface-design\/\",\"name\":\"User interface design and icons | UX Design Company - Areteworks\",\"isPartOf\":{\"@id\":\"https:\/\/areteworks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/areteworks.com\/icons-user-interface-design\/#primaryimage\"},\"datePublished\":\"2021-12-28T16:43:00+00:00\",\"dateModified\":\"2023-02-28T18:14:34+00:00\",\"author\":{\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\"},\"description\":\"Icon generation and their place in user interface design involves approaching their inclusion and creation from multiple angles.\",\"breadcrumb\":{\"@id\":\"https:\/\/areteworks.com\/icons-user-interface-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/areteworks.com\/icons-user-interface-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/areteworks.com\/icons-user-interface-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/areteworks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User interface design and icons | UX Design Company\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\",\"name\":\"Steven Liu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/areteworks.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"caption\":\"Steven Liu\"},\"url\":\"https:\/\/areteworks.com\/author\/steven-liu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"User interface design and icons | UX Design Company - Areteworks","description":"Icon generation and their place in user interface design involves approaching their inclusion and creation from multiple angles.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/areteworks.com\/icons-user-interface-design\/","og_locale":"en_US","og_type":"article","og_title":"User interface design and icons | UX Design Company - Areteworks","og_description":"Icon generation and their place in user interface design involves approaching their inclusion and creation from multiple angles.","og_url":"https:\/\/areteworks.com\/icons-user-interface-design\/","og_site_name":"Areteworks","article_published_time":"2021-12-28T16:43:00+00:00","article_modified_time":"2023-02-28T18:14:34+00:00","og_image":[{"url":"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/03\/ProposalIcons.jpg"}],"twitter_card":"summary","twitter_misc":{"Written by":"Steven Liu","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/areteworks.com\/#website","url":"https:\/\/areteworks.com\/","name":"Areteworks","description":"UI UX Design Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/areteworks.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/areteworks.com\/icons-user-interface-design\/#primaryimage","inLanguage":"en-US","url":"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/03\/ProposalIcons.jpg","contentUrl":"http:\/\/areteworks.com\/wp-content\/uploads\/2018\/03\/ProposalIcons.jpg"},{"@type":"WebPage","@id":"https:\/\/areteworks.com\/icons-user-interface-design\/#webpage","url":"https:\/\/areteworks.com\/icons-user-interface-design\/","name":"User interface design and icons | UX Design Company - Areteworks","isPartOf":{"@id":"https:\/\/areteworks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/areteworks.com\/icons-user-interface-design\/#primaryimage"},"datePublished":"2021-12-28T16:43:00+00:00","dateModified":"2023-02-28T18:14:34+00:00","author":{"@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a"},"description":"Icon generation and their place in user interface design involves approaching their inclusion and creation from multiple angles.","breadcrumb":{"@id":"https:\/\/areteworks.com\/icons-user-interface-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/areteworks.com\/icons-user-interface-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/areteworks.com\/icons-user-interface-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/areteworks.com\/"},{"@type":"ListItem","position":2,"name":"User interface design and icons | UX Design Company"}]},{"@type":"Person","@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a","name":"Steven Liu","image":{"@type":"ImageObject","@id":"https:\/\/areteworks.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","caption":"Steven Liu"},"url":"https:\/\/areteworks.com\/author\/steven-liu\/"}]}},"_links":{"self":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/2268"}],"collection":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/comments?post=2268"}],"version-history":[{"count":1,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/2268\/revisions"}],"predecessor-version":[{"id":4565,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/2268\/revisions\/4565"}],"wp:attachment":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/media?parent=2268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/categories?post=2268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/tags?post=2268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}