{"id":18506,"date":"2020-01-06T04:14:07","date_gmt":"2020-01-06T12:14:07","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=18506"},"modified":"2024-05-19T23:47:03","modified_gmt":"2024-05-20T06:47:03","slug":"common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/","title":{"rendered":"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them"},"content":{"rendered":"\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600-1024x512.png\" alt=\"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them\" class=\"wp-image-18514\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\r\n\r\n\r\n\r\n<p>User interface design has a lot to do with the \u2018outside\u2019 of design, the visual aspects that the audience see. Whether it be an app or a website, the placement of elements and features of each design can make or break it.<\/p>\r\n<p>It is important to ensure that the meaning of the design is fully conveyed. Like with any design that we see daily, such as street signs or even those in the supermarkets, if the design doesn\u2019t provide complete clarity, then the audience can quickly become confused. Within this blog, we will be looking at what the user interface is, but also the most common mistakes in UI design and how you too can avoid making these mistakes. <\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">What Is User Interface Design?<\/h4>\r\n\r\n\r\n\r\n<p>User interface (UI) design is the process of using <a href=\"https:\/\/www.novatech.co.uk\/workstation\/graphics\/\">graphic workstations<\/a> to create layers of interfaces in software or applications, with the designer focussing fully on looks and style. In order for a user interface designer to be successful, they must always create with three key criteria in mind. These guidelines ensure that the designs are engaging, attractive and create an emotional response from the user, helping to minimise the amount of common mistakes in UI design made by the designer.&nbsp;<\/p>\r\n<p>Being able to uphold these audience desires can be rather difficult for a UI designer. With users being extremely judgemental and somewhat impatient with the interfaces they are using. To put it into perspective, it has been <a href=\"https:\/\/blog.sagipl.com\/web-design-statistics\/\">researched and concluded<\/a> that:&nbsp;<\/p>\r\n<ul>\r\n<li>94% of device users will shut down and stop using a website if their web design is not up to scratch<\/li>\r\n<li>38% of users will avoid a website if their content or layout is unattractive<\/li>\r\n<li>47% of users will expect a web page to load in less than 2 seconds, and will not use the site if it fails to do so<\/li>\r\n<\/ul>\r\n<p>With very high expectations, the job of a graphic designer is not for the faint hearted and requires being taken seriously at all times. In order to succeed, every design must be different, innovative and always to a high quality to avoid those clear and ruthless website killers. Otherwise, your work will quickly become unused, and building a brand name will become impossible.<\/p>\r\n<p>Because of this, below are some of the top common mistakes in UI design that an user interface designers will make throughout their careers, and how they can best be avoided. <\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Unresponsive Designs<\/h4>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"460\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/graphic-responsive-700x460.jpg\" alt=\"Responsive vs Non-responsive websites\" class=\"wp-image-18507\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/graphic-responsive-700x460.jpg 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/graphic-responsive-700x460-457x300.jpg 457w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption><br><a href=\"https:\/\/poweredbyawesome.com\/2017\/05\/24\/non-responsive-website-killing-business\/\">https:\/\/poweredbyawesome.com\/2017\/05\/24\/non-responsive-website-killing-business\/<\/a><\/figcaption><\/figure>\r\n\r\n\r\n\r\n<p>Having a responsive design is the ability to be able to access and view a website across a range of different devices. From the large computer screens to the tiny mobile phones, a responsive website will be actionable, attractive and easy to use for all. But this is a very difficult task to succeed in.&nbsp;<\/p>\r\n<p>An unresponsive design prevents the creators from providing users with the best possible interface. It adds an extreme amount of effort on top of the design process, and in unfortunate circumstances, forces the customers to use a different web page for a better experience.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Inconsistency In Elements<\/h4>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/Make-Your-Facebook-FeedWork-Absolutely-Wonderul-For-You-Today.png\" alt=\"Facebook feed example - UXPin Studio\" class=\"wp-image-18508\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/Make-Your-Facebook-FeedWork-Absolutely-Wonderul-For-You-Today.png 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/Make-Your-Facebook-FeedWork-Absolutely-Wonderul-For-You-Today-300x300.png 300w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/Make-Your-Facebook-FeedWork-Absolutely-Wonderul-For-You-Today-768x768.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/Make-Your-Facebook-FeedWork-Absolutely-Wonderul-For-You-Today-200x200.png 200w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/Make-Your-Facebook-FeedWork-Absolutely-Wonderul-For-You-Today-230x230.png 230w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/Make-Your-Facebook-FeedWork-Absolutely-Wonderul-For-You-Today-120x120.png 120w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption><br><a href=\"https:\/\/inspiretothrive.com\/your-facebook-feed\/\">https:\/\/inspiretothrive.com\/your-facebook-feed\/<\/a><br><\/figcaption><\/figure>\r\n\r\n\r\n\r\n<p>Another common mistake in UI designer and that is many designers may often become slightly too adventurous within their processes, and begin to branch out using new and innovative tools and layouts. However, this inconsistency doesn\u2019t show creativity as many would assume. In fact, it will only send mixed signals to the users of the interface.<\/p>\r\n<p>The key is to keep up with repeating patterns and elements at any chance given.&nbsp;<\/p>\r\n<p>In doing this, there is a sense of trust built up from the customers or users, when the designer is creating inviting and enjoyable user experiences. Including this, it allows any user to get to know the interface they are using, which will allow functions such as purchases to be dealt with a lot faster.<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Too Much Text<\/h4>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/too-wordy.jpg\" alt=\"Design Rules - too wordy\" class=\"wp-image-18509\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/too-wordy.jpg 800w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/too-wordy-700x263.jpg 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/too-wordy-768x288.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption><br><a href=\"https:\/\/visme.co\/blog\/graphic-design-rules\/\">https:\/\/visme.co\/blog\/graphic-design-rules\/<\/a><\/figcaption><\/figure>\r\n\r\n\r\n\r\n<p>When users google sites online, they usually do not take the time to read through everything produced on that page. Instead, they focus on skimming through the text, trying to reach the few points they need most, skipping out on anything extra and useless to their needs.&nbsp;<\/p>\r\n<p>Having too much text on a page doesn\u2019t actually serve any purpose. It will only send users away, or (as said before) will give them a reason to skip through everything seen. For a designer, the temptation to brag about services, products or prices will be hard to fight, but the key to learn, is that less is far more.&nbsp;<\/p>\r\n<p>Having emotion in what is written is key to know that what has been said, no matter how short, will help to create an impact, drawing them in further, converting them and preventing them from exiting to go on to use another site. <\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Confusing Forms<\/h4>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"406\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/7u51rr8j-Webydo-Infographic-w550-foreign-tongue.png\" alt=\"Confusing design - UXPin\" class=\"wp-image-18510\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/7u51rr8j-Webydo-Infographic-w550-foreign-tongue.png 812w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/7u51rr8j-Webydo-Infographic-w550-foreign-tongue-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/7u51rr8j-Webydo-Infographic-w550-foreign-tongue-768x384.png 768w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><figcaption><br><a href=\"https:\/\/yourstory.com\/mystory\/46e3dafe96-content-or-design-whi\">https:\/\/yourstory.com\/mystory\/46e3dafe96-content-or-design-whi<\/a><\/figcaption><\/figure>\r\n\r\n\r\n\r\n<p>A form is one of the most important parts of the user journey. Surprisingly named, a form is a pop-up feature given to log in, check out, sign out, or proceed further into the site. These aspects are essentially the most important. Especially for those that have sites where users will be <a href=\"https:\/\/businessservicesweek.com\/the-changing-face-of-consumer-purchasing-behaviours\/\">purchasing products<\/a>.&nbsp;<\/p>\r\n<p>Providing clear guidance through these parts of the user processes will avoid any issues being made, or customers getting annoyed and deciding not to use the site.&nbsp;<\/p>\r\n<p>To do this, avoid using colour to show that the user has selected something in error. Instead, use commentary feedback such as \u2018Password Incorrect\u2019, in order to show a mistake has been made. This way, every user processes should function swiftly, with few errors occuring, helping to create a positive user experience. <\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Distinction Between Buttons<\/h4>\r\n\r\n\r\n\r\n<p>When designing apps and software, there are likely going to be functions that the user has to complete in order to progress further into either the site or complete their transaction. For example, with the app \u2018Instagram\u2019, the user can follow, like and comment on anything they wish, with each task having a different button to click to perform each task.<\/p>\r\n\r\n\r\n\r\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"270\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/cca-bluebuttons.png\" alt=\"Button color contrast for accessibility\" class=\"wp-image-18511\"\/><figcaption><br><a href=\"https:\/\/uxmovement.com\/buttons\/the-myths-of-color-contrast-accessibility\/\">https:\/\/uxmovement.com\/buttons\/the-myths-of-color-contrast-accessibility\/<\/a><\/figcaption><\/figure>\r\n\r\n\r\n\r\n<p>The problem most designers will have is unintuitive buttons. This is either the buttons being too small, too large or each being too similar in size that an action chosen cannot be performed &#8211; this will, of course, ruin the user experience.&nbsp;<\/p>\r\n<p>This is also valid when it comes to differentiating between primary and secondary actions. For example, a \u2018login\u2019 button should be in a contrasting colour or size to the \u2018sign up\u2019 button. This way, there is a distinctive difference, and the users will never get confused, or click for the site to perform something they do not wish. In turn, leading to a negative experience.&nbsp;<\/p>\r\n\r\n\r\n\r\n<h4 class=\"wp-block-heading\">Summary<\/h4>\r\n\r\n\r\n\r\n<p>User Interface design does not come without its challenges. The creator, without a doubt, has a sure set amount of obstacles that have to be overcome before being able to make immersive, entertaining and attractive applications, software or websites.\u00a0<\/p>\r\n<p>The designer must ensure that the user experience is kept always in mind. Just because the page looks pretty, it doesn\u2019t mean it performs well. Similarly with building the interface, if it is too difficult or jam-packed with high-end features, a user may find it difficult and challenging to use, and therefore find somewhere else to aid their needs.<\/p>\r\n<p>The users are always going to be the most judgemental and hard to please group, and as a designer, be aware that the audience is continually changing and requires a well designed and functioning website to cater to their every need.\u00a0<\/p>\r\n<p>By following our common mistakes in UI design and using them as a checklist to avoid, you too can make sure that you have created a well designed, attractive and functioning website with the perfect user interface that users will enjoy navigating their way around.\u00a0<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>What Is User Interface Design? Unresponsive Designs Inconsistency In Elements Too Much Text Confusing Forms Distinction Between Buttons Summary<\/p>\n","protected":false},"author":175,"featured_media":18514,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-18506","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"yoast_title":"Common UI Design Mistakes And How Graphic Designers Can Avoid Them","yoast_metadesc":"Whether an app or a website, the placement of elements and features of each design can make or break it. Learn how to avoid common missteps.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Common UI Design Mistakes And How Graphic Designers Can Avoid Them<\/title>\n<meta name=\"description\" content=\"Whether an app or a website, the placement of elements and features of each design can make or break it. Learn how to avoid common missteps.\" \/>\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.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them\" \/>\n<meta property=\"og:description\" content=\"Whether an app or a website, the placement of elements and features of each design can make or break it. Learn how to avoid common missteps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-06T12:14:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-20T06:47:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Charlotte Johnson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Charlotte Johnson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/\"},\"author\":{\"name\":\"Charlotte Johnson\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/16b0ff7b0e27a98d700e1eec24bde5b9\"},\"headline\":\"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them\",\"datePublished\":\"2020-01-06T12:14:07+00:00\",\"dateModified\":\"2024-05-20T06:47:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/\"},\"wordCount\":1324,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/BlogHeader_UIMistakesToAvoid_1200x600.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/\",\"name\":\"Common UI Design Mistakes And How Graphic Designers Can Avoid Them\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/BlogHeader_UIMistakesToAvoid_1200x600.png\",\"datePublished\":\"2020-01-06T12:14:07+00:00\",\"dateModified\":\"2024-05-20T06:47:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/16b0ff7b0e27a98d700e1eec24bde5b9\"},\"description\":\"Whether an app or a website, the placement of elements and features of each design can make or break it. Learn how to avoid common missteps.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/BlogHeader_UIMistakesToAvoid_1200x600.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/BlogHeader_UIMistakesToAvoid_1200x600.png\",\"width\":1200,\"height\":600,\"caption\":\"BlogHeader UIMistakesToAvoid 1200x600\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/16b0ff7b0e27a98d700e1eec24bde5b9\",\"name\":\"Charlotte Johnson\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/charlotte-johnson\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Common UI Design Mistakes And How Graphic Designers Can Avoid Them","description":"Whether an app or a website, the placement of elements and features of each design can make or break it. Learn how to avoid common missteps.","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.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/","og_locale":"en_US","og_type":"article","og_title":"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them","og_description":"Whether an app or a website, the placement of elements and features of each design can make or break it. Learn how to avoid common missteps.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/","og_site_name":"Studio by UXPin","article_published_time":"2020-01-06T12:14:07+00:00","article_modified_time":"2024-05-20T06:47:03+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600.png","type":"image\/png"}],"author":"Charlotte Johnson","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Charlotte Johnson","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/"},"author":{"name":"Charlotte Johnson","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/16b0ff7b0e27a98d700e1eec24bde5b9"},"headline":"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them","datePublished":"2020-01-06T12:14:07+00:00","dateModified":"2024-05-20T06:47:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/"},"wordCount":1324,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600.png","articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/","name":"Common UI Design Mistakes And How Graphic Designers Can Avoid Them","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600.png","datePublished":"2020-01-06T12:14:07+00:00","dateModified":"2024-05-20T06:47:03+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/16b0ff7b0e27a98d700e1eec24bde5b9"},"description":"Whether an app or a website, the placement of elements and features of each design can make or break it. Learn how to avoid common missteps.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2019\/12\/BlogHeader_UIMistakesToAvoid_1200x600.png","width":1200,"height":600,"caption":"BlogHeader UIMistakesToAvoid 1200x600"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/common-mistakes-in-ui-design-and-how-graphic-designers-can-avoid-them\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Common Mistakes In UI Design And How Graphic Designers Can Avoid Them"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/16b0ff7b0e27a98d700e1eec24bde5b9","name":"Charlotte Johnson","url":"https:\/\/www.uxpin.com\/studio\/author\/charlotte-johnson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/18506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/175"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=18506"}],"version-history":[{"count":1,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/18506\/revisions"}],"predecessor-version":[{"id":53052,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/18506\/revisions\/53052"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/18514"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=18506"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=18506"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=18506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}