{"id":697,"date":"2022-05-28T19:56:36","date_gmt":"2022-05-28T17:56:36","guid":{"rendered":"https:\/\/www.bellingo.de\/blog\/?p=697"},"modified":"2022-05-28T20:07:41","modified_gmt":"2022-05-28T18:07:41","slug":"devblog-our-app-icon-is-here","status":"publish","type":"post","link":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/","title":{"rendered":"DevBlog: Our App Icon is here!"},"content":{"rendered":"\n<p>We put quite some thought and effort into creating an app icon for <a href=\"https:\/\/www.bellingo.de\/blog\/devblog-the-idea-behind-network-traders\/\" target=\"_blank\" rel=\"noreferrer noopener\">Network Traders<\/a>. Finally, we have a version which is ready to be deployed. What do you think of our &#8222;flying merchant&#8220;? Read more about the design process and leave a comment about your first impression!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>The times when <a href=\"https:\/\/www.bellingo.de\/blog\/devblog-why-early-play-testing-is-so-important\/\" target=\"_blank\" rel=\"noreferrer noopener\">our testers<\/a> associated Network Traders with the <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Unity_2021.svg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Unity icon<\/a> are finally over. I had a few ideas in my mind and <a href=\"https:\/\/twitter.com\/andi_scribbles\" target=\"_blank\" rel=\"noreferrer noopener\">Andrea<\/a> has been busy drafting them out for the last couple of weeks. The merchants, travelling from device to device, are central to Network Traders. Therefore, and because we humans are just good at associating faces, a merchant had to be the main figure of our app Icon.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">From Idea to App Icon<\/h2>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"alignright size-full is-resized\"><a href=\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Sketches.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Sketches.png\" alt=\"\" class=\"wp-image-701\" width=\"200\" height=\"200\" srcset=\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Sketches.png 400w, https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Sketches-300x300.png 300w, https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Sketches-150x150.png 150w\" sizes=\"auto, (max-width: 200px) 100vw, 200px\" \/><\/a><figcaption>Different design stages of our app icon.<\/figcaption><\/figure><\/div>\n\n\n\n<p>The app icon should reflect the main features of the game, which are certainly merchants and city building. The first icon sketches already reflected this. But what I consider the core feature of Network Traders is the travelling of the merchants from one device to another. So we soon homed in on a composition which also includes a smartphone the merchant is leaving for new markets and trade opportunities. The rest was lots of fine-tuning, little details (did you see the main screen village on the phone screen?), and, finally, colouring.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"alignleft size-full is-resized\"><a href=\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/AppIcon_scale-test.png\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/AppIcon_scale-test.png\" alt=\"\" class=\"wp-image-703\" width=\"256\" height=\"256\" srcset=\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/AppIcon_scale-test.png 512w, https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/AppIcon_scale-test-300x300.png 300w, https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/AppIcon_scale-test-150x150.png 150w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/a><figcaption>Key lines to place your icon in (background image: <a href=\"https:\/\/developer.android.com\/distribute\/google-play\/resources\/icon-design-specifications\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google<\/a>)<\/figcaption><\/figure><\/div>\n\n\n\n<p>A very strange thing are the icon layout specifications of Google. The Android page on <a href=\"https:\/\/developer.android.com\/distribute\/google-play\/resources\/icon-design-specifications\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Play icon design<\/a> holds lots of information about sizes and focus areas. An icon for the Google Play Store is supposed to be 512 by 512 pixels in size. But the actual app icon on your device is cropped by the circled area in the center shown on the left. <a href=\"https:\/\/www.reddit.com\/r\/Unity3D\/comments\/nu70hs\/app_icon_too_zoomed_in\/\" target=\"_blank\" rel=\"noreferrer noopener\">Others have puzzled about this<\/a>, too, so if you wonder how to handle this, this is what we did: take the actual icon, scale it to 344&#215;344 pixels, and paste it onto a 512&#215;512 pixels background. This way, the whole icon is visible on your device&#8217;s menu screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Your Opinion<\/h2>\n\n\n\n<p>What do you think about our icon? What is your first impression? I would very much like to hear your opinion! Is it actually possible to AB test an app icon? What are your criteria for selecting your final icon? Simply comment below, or leave a note on <a href=\"https:\/\/twitter.com\/GamesVineyard\/status\/1530611608682119168\">Twitter<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We put quite some thought and effort into creating an app icon for Network Traders. Finally, we have a version which is ready to be deployed. What do you think of our &#8222;flying merchant&#8220;? Read more about the design process and leave a comment about your first impression!<\/p>\n","protected":false},"author":1,"featured_media":705,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163,241,229,55],"tags":[167,269,259,230,271,231,67],"class_list":["post-697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-art","category-devblog","category-unity-en","tag-android","tag-app-icon","tag-art","tag-devblog","tag-google-play-store","tag-network-traders","tag-unity-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>DevBlog: Our App Icon is here! - Games:Tech:Blog<\/title>\n<meta name=\"description\" content=\"The App Icon for Network Traders is finally done! Read about the design process and how to handle scaling issues on Android devices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DevBlog: Our App Icon is here! - Games:Tech:Blog\" \/>\n<meta property=\"og:description\" content=\"The App Icon for Network Traders is finally done! Read about the design process and how to handle scaling issues on Android devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/\" \/>\n<meta property=\"og:site_name\" content=\"Games:Tech:Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-28T17:56:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-28T18:07:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png\" \/>\n\t<meta property=\"og:image:width\" content=\"829\" \/>\n\t<meta property=\"og:image:height\" content=\"464\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ingo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ingo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/\"},\"author\":{\"name\":\"Ingo\",\"@id\":\"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9\"},\"headline\":\"DevBlog: Our App Icon is here!\",\"datePublished\":\"2022-05-28T17:56:36+00:00\",\"dateModified\":\"2022-05-28T18:07:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/\"},\"wordCount\":402,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9\"},\"image\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png\",\"keywords\":[\"Android\",\"App Icon\",\"Art\",\"DevBlog\",\"Google Play Store\",\"Network Traders\",\"Unity\"],\"articleSection\":[\"Android\",\"Art\",\"DevBlog\",\"Unity\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/\",\"url\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/\",\"name\":\"DevBlog: Our App Icon is here! - Games:Tech:Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png\",\"datePublished\":\"2022-05-28T17:56:36+00:00\",\"dateModified\":\"2022-05-28T18:07:41+00:00\",\"description\":\"The App Icon for Network Traders is finally done! Read about the design process and how to handle scaling issues on Android devices.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage\",\"url\":\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png\",\"contentUrl\":\"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png\",\"width\":829,\"height\":464,\"caption\":\"App Icon of Network Traders\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bellingo.de\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DevBlog: Our App Icon is here!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bellingo.de\/blog\/#website\",\"url\":\"https:\/\/www.bellingo.de\/blog\/\",\"name\":\"Games:Tech:Blog\",\"description\":\"A Blog about Games, Technology in Games, and Technology in General\",\"publisher\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bellingo.de\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9\",\"name\":\"Ingo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/93a4b9881ee1983f4fafc7e996ce82a42c3a1540c18f7417809c08a19658f167?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/93a4b9881ee1983f4fafc7e996ce82a42c3a1540c18f7417809c08a19658f167?s=96&d=mm&r=g\",\"caption\":\"Ingo\"},\"logo\":{\"@id\":\"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/image\/\"},\"url\":\"https:\/\/www.bellingo.de\/blog\/author\/ingo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DevBlog: Our App Icon is here! - Games:Tech:Blog","description":"The App Icon for Network Traders is finally done! Read about the design process and how to handle scaling issues on Android devices.","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:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/","og_locale":"de_DE","og_type":"article","og_title":"DevBlog: Our App Icon is here! - Games:Tech:Blog","og_description":"The App Icon for Network Traders is finally done! Read about the design process and how to handle scaling issues on Android devices.","og_url":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/","og_site_name":"Games:Tech:Blog","article_published_time":"2022-05-28T17:56:36+00:00","article_modified_time":"2022-05-28T18:07:41+00:00","og_image":[{"width":829,"height":464,"url":"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png","type":"image\/png"}],"author":"Ingo","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Ingo","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#article","isPartOf":{"@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/"},"author":{"name":"Ingo","@id":"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9"},"headline":"DevBlog: Our App Icon is here!","datePublished":"2022-05-28T17:56:36+00:00","dateModified":"2022-05-28T18:07:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/"},"wordCount":402,"commentCount":0,"publisher":{"@id":"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9"},"image":{"@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png","keywords":["Android","App Icon","Art","DevBlog","Google Play Store","Network Traders","Unity"],"articleSection":["Android","Art","DevBlog","Unity"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/","url":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/","name":"DevBlog: Our App Icon is here! - Games:Tech:Blog","isPartOf":{"@id":"https:\/\/www.bellingo.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage"},"image":{"@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png","datePublished":"2022-05-28T17:56:36+00:00","dateModified":"2022-05-28T18:07:41+00:00","description":"The App Icon for Network Traders is finally done! Read about the design process and how to handle scaling issues on Android devices.","breadcrumb":{"@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#primaryimage","url":"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png","contentUrl":"https:\/\/www.bellingo.de\/blog\/wp-content\/uploads\/2022\/05\/Beitragsbild-App-Icon.png","width":829,"height":464,"caption":"App Icon of Network Traders"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bellingo.de\/blog\/devblog-our-app-icon-is-here\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bellingo.de\/blog\/"},{"@type":"ListItem","position":2,"name":"DevBlog: Our App Icon is here!"}]},{"@type":"WebSite","@id":"https:\/\/www.bellingo.de\/blog\/#website","url":"https:\/\/www.bellingo.de\/blog\/","name":"Games:Tech:Blog","description":"A Blog about Games, Technology in Games, and Technology in General","publisher":{"@id":"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bellingo.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/82498f8ac21d11f5948cab6d0a9807e9","name":"Ingo","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/93a4b9881ee1983f4fafc7e996ce82a42c3a1540c18f7417809c08a19658f167?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93a4b9881ee1983f4fafc7e996ce82a42c3a1540c18f7417809c08a19658f167?s=96&d=mm&r=g","caption":"Ingo"},"logo":{"@id":"https:\/\/www.bellingo.de\/blog\/#\/schema\/person\/image\/"},"url":"https:\/\/www.bellingo.de\/blog\/author\/ingo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/posts\/697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/comments?post=697"}],"version-history":[{"count":8,"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/posts\/697\/revisions"}],"predecessor-version":[{"id":708,"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/posts\/697\/revisions\/708"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/media\/705"}],"wp:attachment":[{"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/media?parent=697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/categories?post=697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bellingo.de\/blog\/wp-json\/wp\/v2\/tags?post=697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}