{"id":72324,"date":"2019-10-30T04:20:40","date_gmt":"2019-10-30T11:20:40","guid":{"rendered":""},"modified":"2019-10-30T04:20:40","modified_gmt":"2019-10-30T11:20:40","slug":"what-is-modern-ui-design-10-tips-examples","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/","title":{"rendered":"What Is Modern UI Design? 10 Tips &amp; Examples"},"content":{"rendered":"<p>Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just <em>feels<\/em> dated.<\/p>\n<p>Modern UI design helps establish credibility for your website or brand because it has a style that fits what most people to be a <em>current<\/em> visual aesthetic. This might include visual trends, adapting to usability standards and patterns, and using development techniques that are appropriate for today\u2019s users. <\/p>\n<p>Here, we\u2019re going to look at elements that you\u2019ll find in modern user interfaces. Hopefully, most of these examples seem pretty familiar, but if not, it might be time to plan a little web refresh.<\/p>\n<p><span><\/span><\/p>\n<h2>1. Consistency<\/h2>\n<p><a href=\"https:\/\/johnreed.fitness\/en\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/johnreed.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>A consistent user interface is easy to use and understand. People won\u2019t have to think so hard about how to engage with your website, making it more likely to be used.<\/p>\n<div>You want elements within the design to be consistent with each other<\/div>\n<p>It might be best to think about consistency in two ways.<\/p>\n<p>First, you want the interface to look and behave consistently from one device to another. (This is why responsive design is so important.)<\/p>\n<p>Second, you want elements within the design to be consistent with each other \u2013 buttons that are the same color, size, and in common locations, for example \u2013 and follow common usage patterns. This type of design consistency makes your interface modern and usable. <\/p>\n<p>The <a href=\"https:\/\/www.interaction-design.org\/literature\/article\/principle-of-consistency-and-standards-in-user-interface-design\">Interaction Design Foundation<\/a> says UI consistency is important because: <\/p>\n<ul>\n<li>It can reduce learning time: Consistency limits the number of ways actions and operations are represented, ensuring that users do not have to learn new representations for each task.<\/li>\n<li>It can eliminate confusion: Users tend to apply rules they\u2019ve experienced outside of your website or product, bringing in a set of their own expectations. Knowing that, we should be mindful of whether or not we\u2019re causing confusion and alienation when we deviate from design standards and conventions. <\/li>\n<\/ul>\n<h2>2. Gradients and Depth<\/h2>\n<p><a href=\"https:\/\/catsanddogs.app\/\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/catsdogs.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>Modern interfaces use color to create depth and help people understand how to interact with the design. <\/p>\n<p>Gradients and subtle drop shadows are popular techniques. Gradient color use is rather trendy and provides an interesting visual to draw attention. Drop shadows aren\u2019t as obvious to the general eye, but seemingly lift elements off the background to encourage interaction. <\/p>\n<h2>3. Purposeful Animation<\/h2>\n<p><a href=\"https:\/\/ervaxx.com\/\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/ervaxx.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>Animation is almost everywhere when it comes to website design, making it even more important that this technique is not overused. <\/p>\n<p>Modern interfaces only animate elements when there is a reason for it. Purposeful animation might help a user click a button, provide navigation cues, give instruction, or serve as a simple delightful feature. <\/p>\n<p>To ensure that your website animations have a purpose and aren\u2019t pure decoration, think about the goal for the animated element and how it works as part of the overall design. <\/p>\n<h2>4. Easy to Read Font Sizes<\/h2>\n<p><a href=\"https:\/\/liftedlogic.com\/\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/liftedlogic.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>You\u2019ve probably noticed that the default sizes for body text have been slowly increasing. Eyes everywhere are thanking you.<\/p>\n<p>Tiny, nearly illegible, font sizes are one of the first things that will date your user interface. People have become accustomed to bigger, more readable typefaces. <\/p>\n<p>That might be 14- to 16-point body text on your website. While it may feel large at first, this size is more eye-pleasing, converts to a mobile screen at a readable size, and has become pretty standard. (Just don\u2019t forget to adjust the line spacing to an appropriate measure as well.)<\/p>\n<h2>5. Voice Interfaces<\/h2>\n<p>Does your website have information that\u2019s easy for users to find when they are communicating with voice? Interactive voice interfaces might be one of the most rapidly growing segments of user interface design. <\/p>\n<p>You can design your website in such a way that it makes it easier for voice interfaces and people to access your content. Ask and answer common questions, provide valuable information in small chunks, use examples to create an intention, and use visual feedback when the interface is listening.<\/p>\n<p>The message from the <a href=\"https:\/\/www.interaction-design.org\/literature\/article\/how-to-design-voice-user-interfaces\">Interaction Design Foundation<\/a> is:<\/p>\n<blockquote>\n<p>To design great voice user interfaces, you must find an elegant way to provide users with missing information about what they can do and how they can do it without overwhelming them.<\/p>\n<\/blockquote>\n<h2>6. Seamless Interaction<\/h2>\n<p><a href=\"https:\/\/www.mandr-group.com\/\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/mrg.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>Website interactions must be seamless on a single device as well as from one device to another. <\/p>\n<p>Users want the same experience when they move from page to page. They also want a website to look and act the same on their desktop computers and phones. <\/p>\n<p>All modern user interfaces adhere to these guidelines. If your site doesn\u2019t you need to start rethinking your website model and plan right away. <\/p>\n<h2>7. Smart Forms\/Inputs<\/h2>\n<p><a href=\"https:\/\/demo.themesberg.com\/spaces\/index.html\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/themesberg.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>Gone are the days of massive online forms that ask for too much information. Modern interfaces use short forms that only ask for what\u2019s needed to respect and honor each user\u2019s time (and short attention span). <\/p>\n<p>Modern interfaces use smart forms and inputs. This means that only the information you need is asked for (use if-then logic for form fields where appropriate) and validate data. The latter is so important on smaller devices in particular because it\u2019s easy to mistype and create errors; data validation tells the user something is wrong immediately and prevents frustration later in the process. <\/p>\n<h2>8. Secure and Trustworthy<\/h2>\n<p><a href=\"https:\/\/sebas.design\/\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/sebas.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>This one almost goes without saying, but your website must be secure and trustworthy. <\/p>\n<p>Users often look for the secure lock when shopping and browsing, making SSL and HTTPS a must. <em>Anything else is so 2010. <\/em><\/p>\n<h2>9. Customizable and Personalized<\/h2>\n<p><a href=\"https:\/\/www.amazon.com\/\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/zon.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>More interfaces are offering more customizable, personalized services for users. <\/p>\n<p>Using tools that pinpoint user location for language and currency support, cookies that hold shopping carts for a few days, or logins that allow users to create a more personal experience are the norm.<\/p>\n<p>Customization and personalization become a point of differentiation that will help people pick your website over others when they have the choice. These small details can make a lot of difference. <\/p>\n<h2>10. Evolving<\/h2>\n<p><a href=\"https:\/\/labs.swiggy.in\/\"><\/a><\/p>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/swiggy.jpg?w=900\" alt=\"modern ui design\" ><\/div>\n<\/p>\n<p>You must have a design that can evolve and change over time. <\/p>\n<p>We used to say that you need a new website design every three to five years; now you might need a website tweak every 6 months or so to stay fresh and relevant. (Technology is moving that fast.)<\/p>\n<p>From small design changes to usability updates, it\u2019s important to pay attention to what you are seeing on other websites and think about how those changes and advances could be beneficial on your own. <\/p>\n<h2>Conclusion<\/h2>\n<p>While it might seem like it at first, creating a modern UI isn\u2019t rocket science. It\u2019s more of a study of user behavior and patterns and the design choices that influence them.<\/p>\n<p>There\u2019s a fine line between trending and modern interface design. The latter tends to stick around longer and is a little more rooted in function and usability, where the former is mostly aesthetic.  <\/p>\n<p>Start with a mindset that web design is always changing. Then think about positive and memorable web experiences and consider those techniques in future revisions to your interfaces.<\/p>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[],"tags":[],"class_list":["post-72324","post","type-post","status-publish","format-standard","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"What Is Modern UI Design? 10 Tips &amp; Examples | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-30T11:20:40+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-30T11:20:40+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"What Is Modern UI Design? 10 Tips &amp; Examples | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#article\",\"name\":\"What Is Modern UI Design? 10 Tips & Examples | Design for Immersive Technologies\",\"headline\":\"What Is Modern UI Design? 10 Tips &amp; Examples\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"http:\\\/\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/johnreed.jpg\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#articleImage\"},\"datePublished\":\"2019-10-30T04:20:40-07:00\",\"dateModified\":\"2019-10-30T04:20:40-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#webpage\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#listItem\",\"name\":\"What Is Modern UI Design? 10 Tips &amp; Examples\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#listItem\",\"position\":2,\"name\":\"What Is Modern UI Design? 10 Tips &amp; Examples\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/\",\"name\":\"What Is Modern UI Design? 10 Tips & Examples | Design for Immersive Technologies\",\"description\":\"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/what-is-modern-ui-design-10-tips-examples\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"datePublished\":\"2019-10-30T04:20:40-07:00\",\"dateModified\":\"2019-10-30T04:20:40-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"What Is Modern UI Design? 10 Tips & Examples | Design for Immersive Technologies","description":"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#article","name":"What Is Modern UI Design? 10 Tips & Examples | Design for Immersive Technologies","headline":"What Is Modern UI Design? 10 Tips &amp; Examples","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/johnreed.jpg","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#articleImage"},"datePublished":"2019-10-30T04:20:40-07:00","dateModified":"2019-10-30T04:20:40-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#webpage"}},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#listItem","name":"What Is Modern UI Design? 10 Tips &amp; Examples"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#listItem","position":2,"name":"What Is Modern UI Design? 10 Tips &amp; Examples","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/","name":"What Is Modern UI Design? 10 Tips & Examples | Design for Immersive Technologies","description":"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"datePublished":"2019-10-30T04:20:40-07:00","dateModified":"2019-10-30T04:20:40-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"What Is Modern UI Design? 10 Tips &amp; Examples | Design for Immersive Technologies","og:description":"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/","article:published_time":"2019-10-30T11:20:40+00:00","article:modified_time":"2019-10-30T11:20:40+00:00","twitter:card":"summary","twitter:title":"What Is Modern UI Design? 10 Tips &amp; Examples | Design for Immersive Technologies","twitter:description":"Chances are that you might not be able to list the aesthetics of a modern user interface, but you sure know when you land on a website that doesn\u2019t use one. It just feels dated. Modern UI design helps establish credibility for your website or brand because it has a style that fits what most"},"aioseo_meta_data":{"post_id":"72324","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:03:21","updated":"2026-09-02 09:35:05","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tWhat Is Modern UI Design? 10 Tips &amp; Examples\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"What Is Modern UI Design? 10 Tips &amp; Examples","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/what-is-modern-ui-design-10-tips-examples\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-iOw","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=72324"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/72324\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=72324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=72324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=72324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}