{"id":4484,"date":"2021-08-02T08:43:37","date_gmt":"2021-08-02T08:43:37","guid":{"rendered":"https:\/\/codewaveinsdev.wpengine.com\/?p=4484"},"modified":"2023-08-01T16:12:56","modified_gmt":"2023-08-01T16:12:56","slug":"ui-design-branding","status":"publish","type":"post","link":"https:\/\/codewave.com\/insights\/ui-design-branding\/","title":{"rendered":"UI Design \u2013 Giving your brand a form to connect and communicate"},"content":{"rendered":"\n

In Sanskrit, there is a word called \u0928\u093e\u092e\u093e\u0930\u0942\u092a\u093e meaning \u201cname (n\u0101ma) and form (r\u016bpa)\u201d. Everything that we interact within our environment, as we navigate through our world, our reality \u2013 be it objects or space, has a name, form & function. <\/p>\n\n\n\n

We often gain a perception of brands first through their name & form, before we can get to experience their function. <\/p>\n\n\n\n

How do we make that first impression last? <\/p>\n\n\n\n

Almost every designer\u2019s aspiration & frustration is to get this<\/em> right. <\/p>\n\n\n\n

We draw inspiration from as many places as possible, speak to people who created the brand, speak to people who\u2019re engaging with the brand, observe how the world perceives the brand, and create that brand persona.<\/p>\n\n\n\n

In my view, the following points are extremely critical for great UI design.<\/p>\n\n\n\n

    \n
  1. Create a character<\/strong> as if the brand is coming alive for the user, interacting like a real human. The brand persona \u2013 with it\u2019s own unique appearance, language & attitude (avatar). If this brand was a person, how would they make an appearance in a social event, connect with people in a fast moving world of expressions?<\/li>\n\n\n\n
  2. Create a design language<\/strong>, unique to how the brand wants to listen, connect, understand, express, communicate, assure & amaze people. This language could be beyond english or words \u2013 it could be even a language of color, shapes, symbols & sounds. Remember, Microsoft\u2019s booting up sound?<\/li>\n\n\n\n
  3. Create a moodboard<\/strong> \u2013 put together a collection of fonts, colors, shapes, symbols, graphics, sounds, moods, tones, photo filters, text-inputs, voice-inputs, video-inputs, gesture-inputs defining how people can interact with the brand. How does this brand perceive reality? Is it the same 3D world we see as humans? Or is it a 2D vectorized world?<\/li>\n\n\n\n
  4. Centralize styles for consistency<\/strong>. Use UI elements, as building blocks to create a consistent look & feel across all interactions. Repeated use of colors, shapes & symbols lead to higher familiarity & recall. Make sure \u2013 the UI sets a distraction-free atmosphere for great conversations.<\/li>\n\n\n\n
  5. Consider standard Web\/mobile design systems<\/strong> well established by Apple, Google, Adobe, IBM & others that are popularly used by apps & websites globally. We don\u2019t recommend reinventing the wheel \u2013 as people are familiar with existing design systems. Apply your brand\u2019s unique touch and customize it where it matters.<\/li>\n<\/ol>\n\n\n\n

    \u201cMy aim is to omit everything superfluous so that the essential is shown to the best possible advantage.\u201d \u2014 Dieter Rams<\/em><\/p>\n\n\n\n

    Here are our design principles to help create effective digital interfaces:<\/p>\n\n\n\n

    \"\"\/<\/figure>\n\n\n\n

    Design Principles<\/p>\n\n\n\n

    What would you add?<\/p>\n\n\n\n

    We\u2019d love to hear from you.<\/p>\n\n\n\n

    hello@codewave.com<\/p>\n","protected":false},"excerpt":{"rendered":"In Sanskrit, there is a word called \u0928\u093e\u092e\u093e\u0930\u0942\u092a\u093e meaning \u201cname (n\u0101ma) and form (r\u016bpa)\u201d. Everything that we interact…\n","protected":false},"author":20,"featured_media":4485,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"full","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0,"footnotes":""},"categories":[35],"tags":[164,165,121,154,166,167],"yoast_head":"\nUI Design \u2013 Giving your brand a form to connect and communicate<\/title>\n<meta name=\"description\" content=\"Learn the best practices for designing web forms to improve user experience & conversions. Create visually appealing interfaces.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewave.com\/insights\/ui-design-branding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Design \u2013 Giving your brand a form to connect and communicate\" \/>\n<meta property=\"og:description\" content=\"Learn the best practices for designing web forms to improve user experience & conversions. Create visually appealing interfaces.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewave.com\/insights\/ui-design-branding\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-02T08:43:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-01T16:12:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1640\" \/>\n\t<meta property=\"og:image:height\" content=\"924\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vidhya Abhijith\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vidhya Abhijith\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewave.com\/insights\/ui-design-branding\/\",\"url\":\"https:\/\/codewave.com\/insights\/ui-design-branding\/\",\"name\":\"UI Design \u2013 Giving your brand a form to connect and communicate\",\"isPartOf\":{\"@id\":\"https:\/\/codewave.com\/insights\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewave.com\/insights\/ui-design-branding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewave.com\/insights\/ui-design-branding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg\",\"datePublished\":\"2021-08-02T08:43:37+00:00\",\"dateModified\":\"2023-08-01T16:12:56+00:00\",\"author\":{\"@id\":\"https:\/\/codewave.com\/insights\/#\/schema\/person\/de493d7cd1834cea2ed01286e3013169\"},\"description\":\"Learn the best practices for designing web forms to improve user experience & conversions. Create visually appealing interfaces.\",\"breadcrumb\":{\"@id\":\"https:\/\/codewave.com\/insights\/ui-design-branding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewave.com\/insights\/ui-design-branding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewave.com\/insights\/ui-design-branding\/#primaryimage\",\"url\":\"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg\",\"contentUrl\":\"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg\",\"width\":1640,\"height\":924,\"caption\":\"UI-design-brand-connection-communication\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codewave.com\/insights\/ui-design-branding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codewave.com\/insights\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Design \u2013 Giving your brand a form to connect and communicate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codewave.com\/insights\/#website\",\"url\":\"https:\/\/codewave.com\/insights\/\",\"name\":\"\",\"description\":\"Innovate with tech, design, culture\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewave.com\/insights\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewave.com\/insights\/#\/schema\/person\/de493d7cd1834cea2ed01286e3013169\",\"name\":\"Vidhya Abhijith\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewave.com\/insights\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4bfc56221f2830ebbc40a5e620570e77?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4bfc56221f2830ebbc40a5e620570e77?s=96&d=mm&r=g\",\"caption\":\"Vidhya Abhijith\"},\"description\":\"Designation : Founder, Codewave Author Bio : Founder @Codewave.com | CII-PwC Top 100 Women Innovators | PMI Future50 | Head - Design Thinking | UX Educator passionate about creating intentional, AI-augmented experiences.\",\"sameAs\":[\"https:\/\/codewave.com\",\"https:\/\/in.linkedin.com\/in\/vidhyaraghavan\"],\"url\":\"https:\/\/codewave.com\/insights\/author\/vid-abhijith\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Design \u2013 Giving your brand a form to connect and communicate","description":"Learn the best practices for designing web forms to improve user experience & conversions. Create visually appealing interfaces.","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:\/\/codewave.com\/insights\/ui-design-branding\/","og_locale":"en_US","og_type":"article","og_title":"UI Design \u2013 Giving your brand a form to connect and communicate","og_description":"Learn the best practices for designing web forms to improve user experience & conversions. Create visually appealing interfaces.","og_url":"https:\/\/codewave.com\/insights\/ui-design-branding\/","article_published_time":"2021-08-02T08:43:37+00:00","article_modified_time":"2023-08-01T16:12:56+00:00","og_image":[{"width":1640,"height":924,"url":"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg","type":"image\/jpeg"}],"author":"Vidhya Abhijith","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vidhya Abhijith","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/codewave.com\/insights\/ui-design-branding\/","url":"https:\/\/codewave.com\/insights\/ui-design-branding\/","name":"UI Design \u2013 Giving your brand a form to connect and communicate","isPartOf":{"@id":"https:\/\/codewave.com\/insights\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewave.com\/insights\/ui-design-branding\/#primaryimage"},"image":{"@id":"https:\/\/codewave.com\/insights\/ui-design-branding\/#primaryimage"},"thumbnailUrl":"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg","datePublished":"2021-08-02T08:43:37+00:00","dateModified":"2023-08-01T16:12:56+00:00","author":{"@id":"https:\/\/codewave.com\/insights\/#\/schema\/person\/de493d7cd1834cea2ed01286e3013169"},"description":"Learn the best practices for designing web forms to improve user experience & conversions. Create visually appealing interfaces.","breadcrumb":{"@id":"https:\/\/codewave.com\/insights\/ui-design-branding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewave.com\/insights\/ui-design-branding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewave.com\/insights\/ui-design-branding\/#primaryimage","url":"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg","contentUrl":"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min.jpg","width":1640,"height":924,"caption":"UI-design-brand-connection-communication"},{"@type":"BreadcrumbList","@id":"https:\/\/codewave.com\/insights\/ui-design-branding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codewave.com\/insights\/"},{"@type":"ListItem","position":2,"name":"UI Design \u2013 Giving your brand a form to connect and communicate"}]},{"@type":"WebSite","@id":"https:\/\/codewave.com\/insights\/#website","url":"https:\/\/codewave.com\/insights\/","name":"","description":"Innovate with tech, design, culture","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewave.com\/insights\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewave.com\/insights\/#\/schema\/person\/de493d7cd1834cea2ed01286e3013169","name":"Vidhya Abhijith","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewave.com\/insights\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4bfc56221f2830ebbc40a5e620570e77?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4bfc56221f2830ebbc40a5e620570e77?s=96&d=mm&r=g","caption":"Vidhya Abhijith"},"description":"Designation : Founder, Codewave Author Bio : Founder @Codewave.com | CII-PwC Top 100 Women Innovators | PMI Future50 | Head - Design Thinking | UX Educator passionate about creating intentional, AI-augmented experiences.","sameAs":["https:\/\/codewave.com","https:\/\/in.linkedin.com\/in\/vidhyaraghavan"],"url":"https:\/\/codewave.com\/insights\/author\/vid-abhijith\/"}]}},"featured_image_src":"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min-600x400.jpg","featured_image_src_square":"https:\/\/codewave.com\/insights\/wp-content\/uploads\/2022\/08\/UI-design-brand-connection-communication-min-600x600.jpg","author_info":{"display_name":"Vidhya Abhijith","author_link":"https:\/\/codewave.com\/insights\/author\/vid-abhijith\/"},"_links":{"self":[{"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/posts\/4484"}],"collection":[{"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/comments?post=4484"}],"version-history":[{"count":0,"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/posts\/4484\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/media\/4485"}],"wp:attachment":[{"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/media?parent=4484"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/categories?post=4484"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codewave.com\/insights\/wp-json\/wp\/v2\/tags?post=4484"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}