{"id":838,"date":"2015-12-10T12:42:34","date_gmt":"2015-12-10T09:42:34","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=838"},"modified":"2023-08-17T14:10:04","modified_gmt":"2023-08-17T14:10:04","slug":"icons-in-ui-design-great-power-of-small-details","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/","title":{"rendered":"Icons in UI Design. Great Power of Small Details"},"content":{"rendered":"

In one of our previous articles called \u00a0Iconic Simplicity. The Vital Role of Icons<\/a> we have shared our vision on the importance and features of icons in efficient UI\/UX design. Our designers always work thoroughly on icons for every project we take over. Going further, we created special UI concepts to present icons at work in different applications. The presentations are created on the basis of original icons packs made by Tubik Studio designer Arthur Avakyan.<\/span><\/p>\n

Multimedia Icons Presentation<\/a>\u00a0was already published on Behance and\u00a0featured at\u00a0App Design Served<\/a>. It was followed by\u00a0Valentine’s Day Icons Presentation<\/a>\u00a0which presented one more UI concept showing another type of environment for design. So, today we decided to tell a bit more on those presentations here.<\/span><\/p>\n

 <\/p>\n

Multimedia Icons Presentation<\/span><\/h2>\n

 <\/p>\n

The first UI concept was created on the basis of a Multimedia Icons Set.\u00a0<\/span><\/p>\n

\"icons<\/span><\/p>\n

 <\/p>\n

To present some items from the set in practice,\u00a0we designed the UI concept of Media Player App. The screens of the player designed for the concept demonstrate the icons with well-thought-out placement and functionality presented via their symbolic meaning and simple easily recognizable forms.<\/span><\/p>\n

 <\/p>\n

\"Tubik<\/span><\/p>\n

\"tubik<\/p>\n

 <\/p>\n

On the screens, you can see the icons from the presented set featuring all the necessary functions (Play\/Pause, Back\/Forward, Repeat, Mute, etc.). On the feed screen, three more functions were presented with icons, which provide not only clear metaphors and symbols, but also particular style features and bright visual details. \u00a0The aim of both designers was to create icons which do not overload the general layout of the screens, look harmonic with the background and create a simple and clear user interface, easy to use in any environment. Therefore, all the icons were carefully drawn and shaped.<\/span><\/p>\n

\"Tubik<\/span><\/p>\n

 <\/p>\n

So, this concept shows the important part of such small details as icons in creating efficient UI design that feels integral and stylish throughout the app.<\/span><\/p>\n

 <\/p>\n

\"tubik<\/span><\/p>\n

 <\/p>\n

Valentine’s Day Icons Presentation<\/span><\/h2>\n

One more set of icons was specially created\u00a0for Valentine’s Day theme.<\/span><\/p>\n

\"tubik<\/span><\/p>\n

 <\/p>\n

Designing icons for the set, the designer took much time and effort to make them clear, recognizable, and meaningful in the general layout of the user interface. Based on this, we worked out one more UI concept demonstrating the broad functionality of this set even beyond the seasonal topic of the St. Valentine’s Day celebration.<\/span><\/p>\n

\"Tubik<\/span><\/p>\n

 <\/p>\n

To demonstrate the icons in action, the designer created the concept of a Dating App. It is designed and thought out as a sort of social network for dating and easy communication. Here you can see the Profile screen, the Calendar screen, and Feed screen. The Profile screen shows user’s data and statistics as well as featuring the use of icons of the presented set in the tapbar. The icons represent main steps of navigation and at the same time become a harmonic addition to the general visual representation of the screen.<\/span><\/p>\n

 <\/p>\n

\"tubik<\/span><\/p>\n

 <\/p>\n

The Calendar screen shows the interactive calendar of the app, where the vector icons are represented as symbols of the gifts and actions planned for the particular date. Also, the small icon on the avatar becomes a little symbol of marking a person you are dating with. So, the icons become an efficient tool for the visualization of navigational functions as well as for marking specific data. Moreover, they play the role of visual elements not only functional but also decorating the screens, making them lively, cute, and stylish. As in the previous case, all the shapes, proportions and curves were accomplished with great attention for the mentioned aims.<\/span><\/p>\n

 <\/p>\n

\"Tubik<\/span><\/p>\n

 <\/p>\n

So, the second presentation also shows the great potential\u00a0and high level of functionality of such small elements as icons.<\/span><\/p>\n

\"tubik<\/p>\n

 <\/p>\n

UI Kits<\/span><\/h2>\n

 <\/p>\n

Working on different projects in Tubik Studio, our designers prepare UI Kits – the sets of user interface elements that can be integrated in various web or app design. Working on the concepts for icons presentations described here, the designer also prepared\u00a0the UI Kits.<\/span><\/p>\n

 <\/p>\n

\"Tubik<\/span><\/p>\n

 <\/p>\n

\"Tubik<\/span><\/p>\n

 <\/p>\n

The work on icons and concepts continues to present even more options and the high creative potential of icons as vital elements of the user-friendly interface and successful interaction, providing a positive user experience. Our designers have already created and presented several packs of icons, including the ones shown here, on Dribbble<\/a>,\u00a0Behance,<\/a> Creative Market<\/a>, and\u00a0Envato<\/a>. Hopefully, our work will be helpful for other designers and perhaps will save some time and effort for those who are in search of necessary icons for their projects.<\/span><\/p>\n

 <\/p>\n

Now we are also preparing the articles which will tell you more about the full path of icon design, from the rough sketches to polished digitized versions. Don’t miss them in our next posts. Meanwhile, welcome to check the review of types and functions of interface icons<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

The article shows high potential of icons as vital details of efficient user interface design. It presents app concepts featuring original icons by Tubik Studio.<\/p>\n","protected":false},"author":3,"featured_media":846,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6,7,9],"tags":[237,248,256,258,261,319,365,437,447,20,457,100,472,147,479,151,482,212,491,233,502,235,515],"coauthors":[],"class_list":["post-838","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-illustration","category-processes_and_tools","category-ui_ux","tag-icons","tag-illustration","tag-interaction-design","tag-interface-animation","tag-interface-design","tag-mobile-app","tag-product-design","tag-tips","tag-tubik-studio","tag-app-design","tag-ui","tag-design","tag-ui-elements","tag-design-studio","tag-usability","tag-design-tips","tag-user-experience","tag-graphic-design","tag-user-interface","tag-human-computer-interaction","tag-ux","tag-icon-design","tag-uxui"],"acf":[],"yoast_head":"\nIcons in UI. Great Power of Small Details<\/title>\n<meta name=\"description\" content=\"The article shows high potential of icons as vital details of efficient user interface design. It presents app concepts featuring original icons by Tubik Studio\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Icons in UI. Great Power of Small Details\" \/>\n<meta property=\"og:description\" content=\"The article shows high potential of icons as vital details of efficient user interface design. It presents app concepts featuring original icons by Tubik Studio\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-10T09:42:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T14:10:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/\",\"name\":\"Icons in UI. Great Power of Small Details\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg\",\"datePublished\":\"2015-12-10T09:42:34+00:00\",\"dateModified\":\"2023-08-17T14:10:04+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article shows high potential of icons as vital details of efficient user interface design. It presents app concepts featuring original icons by Tubik Studio\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg\",\"width\":2400,\"height\":1600,\"caption\":\"Tubik Studio icons set\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Icons in UI Design. Great Power of Small Details\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Icons in UI. Great Power of Small Details","description":"The article shows high potential of icons as vital details of efficient user interface design. It presents app concepts featuring original icons by Tubik Studio","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:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/","og_locale":"en_US","og_type":"article","og_title":"Icons in UI. Great Power of Small Details","og_description":"The article shows high potential of icons as vital details of efficient user interface design. It presents app concepts featuring original icons by Tubik Studio","og_url":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2015-12-10T09:42:34+00:00","article_modified_time":"2023-08-17T14:10:04+00:00","og_image":[{"width":2400,"height":1600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/","url":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/","name":"Icons in UI. Great Power of Small Details","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg","datePublished":"2015-12-10T09:42:34+00:00","dateModified":"2023-08-17T14:10:04+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article shows high potential of icons as vital details of efficient user interface design. It presents app concepts featuring original icons by Tubik Studio","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/Tubik-Studio-icons-1.jpg","width":2400,"height":1600,"caption":"Tubik Studio icons set"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/icons-in-ui-design-great-power-of-small-details\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Icons in UI Design. Great Power of Small Details"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=838"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/838\/revisions"}],"predecessor-version":[{"id":14770,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/838\/revisions\/14770"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/846"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=838"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}