{"id":10446,"date":"2012-12-18T17:09:10","date_gmt":"2012-12-18T22:09:10","guid":{"rendered":"https:\/\/webhostinggeeks.com\/blog\/?p=10446"},"modified":"2021-10-19T06:50:01","modified_gmt":"2021-10-19T10:50:01","slug":"icons-best-metaphor-wins","status":"publish","type":"post","link":"https:\/\/webhostinggeeks.com\/blog\/icons-best-metaphor-wins\/","title":{"rendered":"Icons: Best Metaphor Wins"},"content":{"rendered":"<p>TWENTY SECONDS. \u00a0Website icons are visual metaphors. Quickly, within the mere twenty seconds you have to draw someone into the content of your website, an effective icon connects different pages and ideas with a compelling image and often a single keystroke. Icons should enhance text, replace text, never clutter a page nor add confusing decoration. Icons are small intuitive symbols that stand for something else entirely, something much more complicated. STOP.<\/p>\n<p>That was twenty seconds. Your visitor should already have clicked on an icon.<\/p>\n<p>Like a wedding band is an simple immediate iconic symbol of the complexity of marriage, website icons should symbolize elegantly something about your website. Icons must be fitting and compelling. \u00a0Two articles loaded with examples of how to use icons are \u201c<a title=\"SpoonfedDesign\" href=\"http:\/\/www.spoonfeddesign.com\/a-guide-to-using-icons-in-web-design\">A Guide to Using Icons in Web Design<\/a>,\u201d<em> Spoonfed Design<\/em> and \u201c<a title=\"SmashingMagazine\" href=\"https:\/\/www.smashingmagazine.com\/2009\/03\/how-to-use-icons-to-support-content-in-web-design\/\">How To Use Icons To Support Content In Web Design,<\/a>\u201d<em> Smashing Magazine.<\/em><\/p>\n<p>When icons work best, the icons themselves create an experience of what they connect to. Icons should also resonate with your logo. \u00a0Do you remember the first time you saw the Twitter Bird or the RSS icon, or even the Reddit guy? The image itself was interesting, or at least weird enough, to draw you in, and the feeling of their website merged with the feeling of that image. But like all metaphors, used often enough, icons eventually become stale. They become cliches. They die. That is not to say they don\u2019t work any more. \u00a0Even a stale icon stills symbolizes something. The conventional Twitter bird still takes us to Twitter. \u00a0But the icon just isn\u2019t that interesting anymore. \u201c<a title=\"Monty Python\" href=\"https:\/\/www.youtube.com\/watch?v=4vuW6tQ0218\">The bird is dead<\/a>.\u201d It doesn\u2019t feel like a twittering bluebird anymore. It\u2019s just the button you click to go somewhere else. \u00a0Rarely does anyone even recognize the conventional Twitter icon as a bird anymore. \u00a0It\u2019s just the Twitter button.<\/p>\n<p>The challenge of an <strong><em>icon contest <\/em><\/strong>is figuring out how to breath new life into the merely functional icon that has become a dead metaphor. Let\u2019s first see how an expert did it, a sort of \u201cspur of the moment\u201d thing:<\/p>\n<p>\u201cI feel the spur of the moment thrust deep into my side. The present is an inexorable rider\u201d <a title=\"The Spur of the Moment\" href=\"https:\/\/books.google.com\/books?id=uvMRAAAAYAAJ&amp;pg=PA231&amp;lpg=PA231&amp;dq=Time+is+an+inexorable+rider+I+feel+the+spur+of+the+moment+thrust+deeply+in+my+side&amp;source=bl&amp;ots=jS-9sIyww3&amp;sig=OLccqoiphuPd6vlbwFew1Ap55So&amp;hl=en&amp;sa=X&amp;ei=g6jQUP3uG8u30gHg0YEQ&amp;sqi=2#v=onepage&amp;q=Time%20is%20an%20inexorable%20rider%20I%20feel%20the%20spur%20of%20the%20moment%20thrust%20deeply%20in%20&amp;f=false\">Henry David Thoreau<\/a> .\u00a0\u00a0 Ugh! \u00a0And now revived, the \u201cspur of the moment\u201d metaphor lives again to prod us painfully into the future. This is what an icon must do. We all know too well the cliche icons&#8230; arrows, trashcans, life buoys etc.\u00a0 Yet, an effective icon cannot be so new that no one knows what it means, nor can it simply repeat the ho hum up arrow for upload. \u00a0It takes both poetic sensibility and design skill to create an elegant new icon.<\/p>\n<div id=\"attachment_10454\" style=\"width: 138px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/webhostinggeeks.com\/blog\/aberthol_128x128\/\" rel=\"attachment wp-att-10454\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10454\" class=\"size-full wp-image-10454 lazyload\" data-src=\"https:\/\/webhostinggeeks.com\/blog\/wp-content\/uploads\/2012\/12\/aberthol_128x128.png\" alt=\"Aberthol Twitter Ugly Bird\" width=\"128\" height=\"128\" data-srcset=\"https:\/\/webhostinggeeks.com\/blog\/wp-content\/uploads\/2012\/12\/aberthol_128x128.png 128w, https:\/\/webhostinggeeks.com\/blog\/wp-content\/uploads\/2012\/12\/aberthol_128x128-120x120.png 120w\" data-sizes=\"(max-width: 128px) 100vw, 128px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 128px; --smush-placeholder-aspect-ratio: 128\/128;\" \/><\/a><p id=\"caption-attachment-10454\" class=\"wp-caption-text\">Aberthol Ugly Bird on left side of the ring<\/p><\/div>\n<p>Let\u2019s look at <a title=\"Ugly Bird Contest\" href=\"https:\/\/www.designcontest.com\/ugly-birds\/\">The Ugly Bird<\/a> Icon contest being run by DesignContest.com and see if these renditions of the Twitter bird might breath life back in to the old bird again. All of these Twitter birds can be downloaded for free. DesignContest is also running another Twitter icon contest with<a title=\"Twitter All Stars\" href=\"https:\/\/www.designcontest.com\/twitter-all-stars\/\"> less ugly birds<\/a>, also free to download.<\/p>\n<div id=\"attachment_10456\" style=\"width: 138px\" class=\"wp-caption alignright\"><a href=\"https:\/\/webhostinggeeks.com\/blog\/crystal128\/\" rel=\"attachment wp-att-10456\"><img decoding=\"async\" aria-describedby=\"caption-attachment-10456\" class=\"size-full wp-image-10456 lazyload\" data-src=\"https:\/\/webhostinggeeks.com\/blog\/wp-content\/uploads\/2012\/12\/crystal128.png\" alt=\"\" width=\"128\" height=\"128\" data-srcset=\"https:\/\/webhostinggeeks.com\/blog\/wp-content\/uploads\/2012\/12\/crystal128.png 128w, https:\/\/webhostinggeeks.com\/blog\/wp-content\/uploads\/2012\/12\/crystal128-120x120.png 120w\" data-sizes=\"(max-width: 128px) 100vw, 128px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 128px; --smush-placeholder-aspect-ratio: 128\/128;\" \/><\/a><p id=\"caption-attachment-10456\" class=\"wp-caption-text\">Crystal Twitter on the Right side of the ring<\/p><\/div>\n<p>In fact, DesignContest is a design crowdsourcing platform that specializes in icon contests, in order to recruit designers who will do paid design work for the design contests they run for their clients. DesignContest&#8217;s idea is to create a stable of great artist boxers competing in-house to do artwork for clients who post art jobs they want DesignContest artists to complete. <a href=\"https:\/\/www.designcontest.com\/\">DesignContest <\/a>runs the competition between their own artists, and the clients get the best work at the lowest price.\u00a0 These contests for work also help the designers continually advance their skills through competition. \u00a0Here is yet another batch of social network <a title=\"social comics icons\" href=\"https:\/\/www.designcontest.com\/social-comics-icons\/\">comic style icons<\/a> they are featuring.<\/p>\n<p>DesignContest holds icon contests both to bring in <a title=\"Join us\" href=\"https:\/\/www.designcontest.com\/designers-join-us\/\">new design talent<\/a>, and to develop that talent through competition with each other professionally. \u00a0DesignContest designers enter a competition for a paid job and then the client picks the best job. DesignContest monitors the progress and quality of their competing designers. The winning design gets the gold and the job, second place gets a silver award, third bronze. The icon design competitors are akin to poetry cage-fighters: whoever designs the best metaphor wins. \u00a0<a title=\"jctoledo poet pugilist\" href=\"https:\/\/www.designcontest.com\/designer\/jctoledo\/\">Jctoledo<\/a> and <a title=\"Morabira poet pugilist\" href=\"https:\/\/www.designcontest.com\/designer\/morabira\/\">Morabira<\/a> are their top designer poet-pugilists at the moment.\u00a0 Don&#8217;t mess with them unless you know how to handle a metaphor!\u00a0 But you can certainly pit them against each other and choose the victor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TWENTY SECONDS. \u00a0Website icons are visual metaphors. Quickly, within the mere twenty seconds you have to draw someone into the content of your website, an effective icon connects different pages&#8230;<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10446","post","type-post","status-publish","format-standard","hentry","category-random-stuff"],"views":73,"_links":{"self":[{"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/posts\/10446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/comments?post=10446"}],"version-history":[{"count":0,"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/posts\/10446\/revisions"}],"wp:attachment":[{"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/media?parent=10446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/categories?post=10446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webhostinggeeks.com\/blog\/wp-json\/wp\/v2\/tags?post=10446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}