{"id":1434,"date":"2015-05-29T09:35:11","date_gmt":"2015-05-29T09:35:11","guid":{"rendered":"https:\/\/www.appagent.co\/blog\/2015\/05\/29\/3-rules-for-designing-a-sexy-app-icon\/"},"modified":"2015-05-29T09:35:11","modified_gmt":"2015-05-29T09:35:11","slug":"3-rules-for-designing-a-sexy-app-icon","status":"publish","type":"post","link":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/","title":{"rendered":"3 rules for designing a sexy app icon (+ giveaway!)"},"content":{"rendered":"<p>I\u2019ve shared insights about Apple\u2019s strategies for selecting the best apps and games in my interview at <a href=\"http:\/\/www.appmasters.co\/flow-studio-petr-fodor\/\">Appmasters.co<\/a> recently. Apple simply follows how ordinary people behave in the store. As you would expect the key factor is the icon. It makes sense that the editorial team places all new and noteworthy apps in the form of an icon on a single grid as the first step of separating the great from the average.<\/p>\n<p>Knowing this, the role of the icon in app marketing is unlimited. Basically, a bad icon kills ones chances of having the app selected for promoted spots. Today, I would like to share with you three examples of poor icons which we\u2019ve redesigned into shiny new ones at Flow Studio. I believe this will give you an idea of how to create the icon concept and polish it therefore resulting in an ico which is &ldquo;tasty&rdquo; and &ldquo;eye catching&rdquo;.<\/p>\n<p><b>Qubies<\/b><\/p>\n<p>Qubies is a match-3 game mixed with falling blocks. Our friend, Lukas Korba, had a rather generic icon which wasn\u2019t representing the game very well, nor was &ldquo;catchy&rdquo; enough. Richard quickly came up with an idea of the letter Q created from blocks which simply showed the games mechanics and created a colorful design.<\/p>\n<p><b>Rule #1: <\/b>Try to destill the essence of the app or game. What is it about? What is the key element or the most significant part of the design? Think about the icon as one drop from your bucket of features and screens in the app.<\/p>\n<figure class=\"tmblr-full\"><img decoding=\"async\" src=\"https:\/\/66.media.tumblr.com\/8ee9e1a7889ae4bc4e852036843a6e41\/tumblr_inline_np3uecCAwG1roeoc7_540.png\" alt=\"image\" \/><\/figure>\n<p><b>Octagon<\/b><\/p>\n<p>Octagon was originally named Octoad and looked.. well, red \ud83d\ude42 Lukas Korba, the great mind behind Octagon, was open to completely reskinning the game into trippy colors and add several thousand lines of code to offer players a greater variety of racing tracks. Overall, both the gameplay and design flourished and made Octagon a great hit among fast-reaction games. <a href=\"https:\/\/www.youtube.com\/watch?v=1sSK7pL8Wa4\">Watch the video<\/a> comparison of the game before and after the redesign.<\/p>\n<p>The game&rsquo;s new looks were heavily inspired by the iOS7 colors and the logo of WWDC 2013. Again, we tried to minimalize the gameplay into a single symbol. Later, we tweaked colors and prepared versions for different stores &#8211; for example, the Mac version has a different shape than iOS to match the style of desktop icons. We also tested the icons on device screens as well as on App Store mockups to select the icon which stood out from the crowd the most.<\/p>\n<p><b>Rule #3:<\/b> Experiment and try different approaches. Don\u2019t just stick to the first version if you\u2019re not convinced. Test the icon in different shapes and environments. Tailor the icon for different stores.<\/p>\n<figure class=\"tmblr-full\"><img decoding=\"async\" src=\"https:\/\/66.media.tumblr.com\/3d8b4cf376fcf17d81149065c4c303a0\/tumblr_inline_np3ufxqbRc1roeoc7_540.png\" alt=\"image\" \/><\/figure>\n<p><b>Ocean Blast<\/b><\/p>\n<p>Albert Kolacek, from Pandastic Games, just finished his second game called Ocean Blast. It\u2019s a hyperpolish match-3 game with strategic elements and will launch this summer on iOS, Android and Facebook. Albert originally used one of the game characters which we call \u201cNemo\u201d but this approach wasn\u2019t doing a good job in comparison to other similar games. We recommended him to create the icon in the \u201cPixar style\u201d: 3D, with an incredible amount of detail and big emotions. The audience is mostly women who love cuteness, so the icon must look sweet.<\/p>\n<p><b>Rule #3: <\/b>Bring the emotion and don\u2019t be afraid to be different. It was groundbreaking to have a flat icon back in 2013 but today it is the opposite as the 3D and more realistic look might be a smart way to stand out from the crowd.<\/p>\n<figure class=\"tmblr-full\"><img decoding=\"async\" src=\"https:\/\/66.media.tumblr.com\/b804b6ea2e1bcc325c199cdb4f89ff4f\/tumblr_inline_np3uggRXN81roeoc7_540.png\" alt=\"image\" \/><\/figure>\n<p><b>GIVEAWAY<\/b><\/p>\n<p>We love design icons. We really enjoy the process and \u00a0hunting for shiny eye candies. That\u2019s why we\u2019re opening a giveaway contest in cooperation with Steve P. Young from AppMasters. The winner will get one free icon redesign by Flow Studio\u2019s art director Richard Horin and graphic designer Petr Stefek. The rules are pretty simple. You could enter the contest by tweeting about this post and get additional entries by subscribing to <a href=\"http:\/\/www.appmasters.co\/blog\/\">Steve\u2019s<\/a> and <a href=\"http:\/\/blog.flowstudiogames.com\">Flow Studio\u2019s<\/a> blogs. Retweets of your friends count as well. The contest will be running until June 14 and the winner will be announced on our <a href=\"http:\/\/www.twitter.com\/Flow_Studio\">Twitter<\/a> the following week. So, if you want a gorgeous icon for your app or game, join the contest now!<\/p>\n<p><a class=\"rcptr\" href=\"http:\/\/www.rafflecopter.com\/rafl\/display\/79bee08c1\/\" rel=\"nofollow\" id=\"rcwidget_jm6csemm\">App Icon Redesign Giveaway<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019ve shared insights about Apple\u2019s strategies for selecting the best apps and games in my interview at Appmasters.co recently. Apple simply follows how ordinary people behave in the store. As you would expect the key factor is the icon. It makes sense that the editorial team places all new and noteworthy apps in the form [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":1435,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205],"tags":[],"class_list":["post-1434","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>3 rules for designing a sexy app icon (+ giveaway!) - AppAgent<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 rules for designing a sexy app icon (+ giveaway!) - AppAgent\" \/>\n<meta property=\"og:description\" content=\"I\u2019ve shared insights about Apple\u2019s strategies for selecting the best apps and games in my interview at Appmasters.co recently. Apple simply follows how ordinary people behave in the store. As you would expect the key factor is the icon. It makes sense that the editorial team places all new and noteworthy apps in the form [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/\" \/>\n<meta property=\"og:site_name\" content=\"AppAgent\" \/>\n<meta property=\"article:published_time\" content=\"2015-05-29T09:35:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2018\/10\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"304\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Peter Fodor\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Peter Fodor\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/\"},\"author\":{\"name\":\"Peter Fodor\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/#\\\/schema\\\/person\\\/d5a1b96a3fa7af62b01ecb89f0dc33c4\"},\"headline\":\"3 rules for designing a sexy app icon (+ giveaway!)\",\"datePublished\":\"2015-05-29T09:35:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/\"},\"wordCount\":731,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png\",\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/\",\"url\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/\",\"name\":\"3 rules for designing a sexy app icon (+ giveaway!) - AppAgent\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png\",\"datePublished\":\"2015-05-29T09:35:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/#\\\/schema\\\/person\\\/d5a1b96a3fa7af62b01ecb89f0dc33c4\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png\",\"contentUrl\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/wp-content\\\/uploads\\\/2018\\\/10\\\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png\",\"width\":540,\"height\":304},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/3-rules-for-designing-a-sexy-app-icon\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"All\",\"item\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/category\\\/uncategorized\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"3 rules for designing a sexy app icon (+ giveaway!)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/#website\",\"url\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/\",\"name\":\"AppAgent\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/#\\\/schema\\\/person\\\/d5a1b96a3fa7af62b01ecb89f0dc33c4\",\"name\":\"Peter Fodor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/Petr-Fodor.png\",\"url\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/Petr-Fodor.png\",\"contentUrl\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/Petr-Fodor.png\",\"caption\":\"Peter Fodor\"},\"url\":\"https:\\\/\\\/webrixstudio.online\\\/aa\\\/blog\\\/author\\\/petr-fodorflowstudiogames-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 rules for designing a sexy app icon (+ giveaway!) - AppAgent","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"3 rules for designing a sexy app icon (+ giveaway!) - AppAgent","og_description":"I\u2019ve shared insights about Apple\u2019s strategies for selecting the best apps and games in my interview at Appmasters.co recently. Apple simply follows how ordinary people behave in the store. As you would expect the key factor is the icon. It makes sense that the editorial team places all new and noteworthy apps in the form [&hellip;]","og_url":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/","og_site_name":"AppAgent","article_published_time":"2015-05-29T09:35:11+00:00","og_image":[{"width":540,"height":304,"url":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2018\/10\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png","type":"image\/png"}],"author":"Peter Fodor","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Peter Fodor","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#article","isPartOf":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/"},"author":{"name":"Peter Fodor","@id":"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/d5a1b96a3fa7af62b01ecb89f0dc33c4"},"headline":"3 rules for designing a sexy app icon (+ giveaway!)","datePublished":"2015-05-29T09:35:11+00:00","mainEntityOfPage":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/"},"wordCount":731,"commentCount":0,"image":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2018\/10\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png","articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/","url":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/","name":"3 rules for designing a sexy app icon (+ giveaway!) - AppAgent","isPartOf":{"@id":"https:\/\/webrixstudio.online\/aa\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#primaryimage"},"image":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2018\/10\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png","datePublished":"2015-05-29T09:35:11+00:00","author":{"@id":"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/d5a1b96a3fa7af62b01ecb89f0dc33c4"},"breadcrumb":{"@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#primaryimage","url":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2018\/10\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png","contentUrl":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2018\/10\/tumblr_inline_np3uecCAwG1roeoc7_540-1.png","width":540,"height":304},{"@type":"BreadcrumbList","@id":"https:\/\/webrixstudio.online\/aa\/blog\/3-rules-for-designing-a-sexy-app-icon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webrixstudio.online\/aa\/"},{"@type":"ListItem","position":2,"name":"All","item":"https:\/\/webrixstudio.online\/aa\/blog\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"3 rules for designing a sexy app icon (+ giveaway!)"}]},{"@type":"WebSite","@id":"https:\/\/webrixstudio.online\/aa\/#website","url":"https:\/\/webrixstudio.online\/aa\/","name":"AppAgent","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webrixstudio.online\/aa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/webrixstudio.online\/aa\/#\/schema\/person\/d5a1b96a3fa7af62b01ecb89f0dc33c4","name":"Peter Fodor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2021\/06\/Petr-Fodor.png","url":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2021\/06\/Petr-Fodor.png","contentUrl":"https:\/\/webrixstudio.online\/aa\/wp-content\/uploads\/2021\/06\/Petr-Fodor.png","caption":"Peter Fodor"},"url":"https:\/\/webrixstudio.online\/aa\/blog\/author\/petr-fodorflowstudiogames-com\/"}]}},"_links":{"self":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/posts\/1434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/comments?post=1434"}],"version-history":[{"count":0,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/posts\/1434\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/media\/1435"}],"wp:attachment":[{"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/media?parent=1434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/categories?post=1434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webrixstudio.online\/aa\/wp-json\/wp\/v2\/tags?post=1434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}