{"id":3998,"date":"2013-08-29T12:27:35","date_gmt":"2013-08-29T10:27:35","guid":{"rendered":"https:\/\/www.mozaik.com\/blog\/?p=3998"},"modified":"2022-11-21T10:39:05","modified_gmt":"2022-11-21T10:39:05","slug":"iconography-and-digital-navigation","status":"publish","type":"post","link":"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/","title":{"rendered":"Iconography and Digital Navigation"},"content":{"rendered":"

The Digital use of Semiotics in information architecture and navigation systems<\/strong><\/p>\n

Semiotics <\/strong>refers to the study of signs or in the case of the web, to the study of icons. Icons are a simple visual language suggesting actions and communicating information.Systematically in our everyday life, we visually scan and identify icons subconsciously<\/strong>, from road signs to web interaction, as we permanently need to be oriented in our circulation or navigation.<\/strong><\/p>\n

Icons in web design play a major role in the website\u2019s usability enhancing considerably the user-experience.<\/strong><\/p>\n

Because reading icons is fast, intuitive and familiar, iconography can effectively boost the UX and navigation challenges.<\/strong> It offers an easiest way for the end-user to find the information he seeks<\/strong> only through visual aids.\"pictograms<\/p>\n

Why icons<\/strong><\/span><\/p>\n

The use of icons can sustain immediate visual identification.<\/strong> Adding icons to your website can not only increase its aesthetic appeal but also speed up the process for visual lecture.<\/strong> Well-designed icons are those that suggest the action or function,<\/strong> those that highlight the topic to which they refer<\/strong>, and communicate a clear message with or without caption.<\/strong> This visual language enables users to easily navigate throughout the site while simultaneously understanding the message and identifying the brand.<\/strong><\/p>\n

The use of icons in web design is a grown trend arising around menus. Icons can be used instead of the text or as a supportive visual language<\/strong> in their navigational scheme.<\/p>\n

\"aia<\/p>\n

Best Practices\/Tips<\/span><\/strong><\/p>\n

Here are some tips for creating good web iconography.<\/strong><\/p>\n

    \n
  1. Add <\/strong>branding to personalize icon. Brand identification is essential.<\/li>\n
  2. Customize <\/strong>your icons according to clients\u2019 needs.<\/li>\n
  3. Place<\/strong> them in the right position with the right context. Information Architecture is crucial.<\/li>\n
  4. Design <\/strong>icons should be universally recognizable.<\/li>\n
  5. Use <\/strong>clean and intuitive icons to enhance the user experience.<\/li>\n
  6. Use<\/strong> your icons as webfont. It allows full scalability as well as the total integration of the menu in a responsive site.<\/li>\n
  7. Less is more.<\/strong> Complicated icons or extensive use can lead to negative results.(complexity of lecture, loading)<\/li>\n
  8. Test<\/strong> your design. Icons don’t serve their purpose if they don’t convey what they stand for instantaneously.\"aia<\/li>\n<\/ol>\n

    AIA iconography<\/span><\/strong><\/p>\n

    Exclusively for the Athens International Airport Website, Mozaik creative team and development staff created a set of 130 icons to support the site\u2019s navigational scheme<\/strong>.<\/p>\n

    The scope was to create clean, seamless navigation, enhanced by straightforward and effective iconography.<\/strong> The icons are designed to apply in multiple applications and carry the AIA branding elements<\/strong>.<\/p>\n

    A set of fully customized flat icons with a 2px radius was designed and converted into a webfont<\/strong> to serve the menu\u2019s responsive features.<\/p>\n

    This set of specific pictograms appears throughout the website as well as in the mobile app, info-points and interactive map,<\/strong> indicating the types of available action, function and information.\"aia<\/p>\n

    The new website\u2019s navigation is particularly remarkable and distinctive.<\/p>\n

    The large icons, responsive as the menu itself, offer the user striking, immediate and straightforward information.<\/strong><\/p>\n

    Mozaik transposed the visual relationship visitors can have with the airport\u2019 s signage (on-site)<\/strong> into the online navigation system of the website. When they visit the website to acquire specific information, web-users relate unconsciously with the images and visual reference, they are already familiar with.<\/strong><\/p>\n

    Because an icon worth a thousand word, \u00a0Mozaik invites you to navigate through AIA new website<\/a>.<\/strong><\/em><\/p>\n

    http:\/\/www.aia.gr<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    The Digital use of Semiotics in information architecture and navigation systems Semiotics refers to the study of signs or in the case of the web, to the study of icons. Icons are a simple visual language suggesting actions and communicating information.Systematically in our everyday life, we visually scan and identify icons subconsciously, from road signs […]<\/p>\n","protected":false},"author":2,"featured_media":5807,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[111,113],"tags":[41],"acf":[],"yoast_head":"\nIconography and Digital Navigation - Mozaik Journal<\/title>\n<meta name=\"description\" content=\"Learn about iconography, the practise of using icons as a simple visual language in your website, in order to enhance user-experience.\" \/>\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.mozaik.com\/blog\/iconography-and-digital-navigation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Iconography and Digital Navigation - Mozaik Journal\" \/>\n<meta property=\"og:description\" content=\"Learn about iconography, the practise of using icons as a simple visual language in your website, in order to enhance user-experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/\" \/>\n<meta property=\"og:site_name\" content=\"Mozaik Journal\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MozaikOnline\/?fref=ts\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-29T10:27:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-11-21T10:39:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2013\/08\/aia_pictograms_main.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"746\" \/>\n\t<meta property=\"og:image:height\" content=\"475\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"mozaik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mozaikagency\" \/>\n<meta name=\"twitter:site\" content=\"@mozaikagency\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mozaik\" \/>\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:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/\",\"url\":\"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/\",\"name\":\"Iconography and Digital Navigation - Mozaik Journal\",\"isPartOf\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/#website\"},\"datePublished\":\"2013-08-29T10:27:35+00:00\",\"dateModified\":\"2022-11-21T10:39:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533\"},\"description\":\"Learn about iconography, the practise of using icons as a simple visual language in your website, in order to enhance user-experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.mozaik.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Iconography and Digital Navigation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#website\",\"url\":\"https:\/\/www.mozaik.com\/blog\/\",\"name\":\"Mozaik Journal\",\"description\":\"Mozaik Journal Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.mozaik.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533\",\"name\":\"mozaik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g\",\"caption\":\"mozaik\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Iconography and Digital Navigation - Mozaik Journal","description":"Learn about iconography, the practise of using icons as a simple visual language in your website, in order to enhance user-experience.","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.mozaik.com\/blog\/iconography-and-digital-navigation\/","og_locale":"en_US","og_type":"article","og_title":"Iconography and Digital Navigation - Mozaik Journal","og_description":"Learn about iconography, the practise of using icons as a simple visual language in your website, in order to enhance user-experience.","og_url":"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/","og_site_name":"Mozaik Journal","article_publisher":"https:\/\/www.facebook.com\/MozaikOnline\/?fref=ts","article_published_time":"2013-08-29T10:27:35+00:00","article_modified_time":"2022-11-21T10:39:05+00:00","og_image":[{"width":746,"height":475,"url":"https:\/\/www.mozaik.com\/blog\/wp-content\/uploads\/2013\/08\/aia_pictograms_main.jpg","type":"image\/jpeg"}],"author":"mozaik","twitter_card":"summary_large_image","twitter_creator":"@mozaikagency","twitter_site":"@mozaikagency","twitter_misc":{"Written by":"mozaik","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/","url":"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/","name":"Iconography and Digital Navigation - Mozaik Journal","isPartOf":{"@id":"https:\/\/www.mozaik.com\/blog\/#website"},"datePublished":"2013-08-29T10:27:35+00:00","dateModified":"2022-11-21T10:39:05+00:00","author":{"@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533"},"description":"Learn about iconography, the practise of using icons as a simple visual language in your website, in order to enhance user-experience.","breadcrumb":{"@id":"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.mozaik.com\/blog\/iconography-and-digital-navigation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.mozaik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Iconography and Digital Navigation"}]},{"@type":"WebSite","@id":"https:\/\/www.mozaik.com\/blog\/#website","url":"https:\/\/www.mozaik.com\/blog\/","name":"Mozaik Journal","description":"Mozaik Journal Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mozaik.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/0d09103aa252462df2b6445f7f3ff533","name":"mozaik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mozaik.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c82a5c3832bbe410d93d8f2f8af39da3?s=96&d=mm&r=g","caption":"mozaik"}}]}},"_links":{"self":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/3998"}],"collection":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/comments?post=3998"}],"version-history":[{"count":3,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/3998\/revisions"}],"predecessor-version":[{"id":9077,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/posts\/3998\/revisions\/9077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/media\/5807"}],"wp:attachment":[{"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/media?parent=3998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/categories?post=3998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mozaik.com\/blog\/wp-json\/wp\/v2\/tags?post=3998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}