{"id":901,"date":"2022-06-30T18:48:26","date_gmt":"2022-06-30T18:48:26","guid":{"rendered":"https:\/\/weareco-lab.co.uk\/staging\/?p=901"},"modified":"2022-06-30T18:58:45","modified_gmt":"2022-06-30T18:58:45","slug":"ux-designer-vs-ui-designer","status":"publish","type":"post","link":"https:\/\/weareco-lab.co.uk\/staging\/ux-designer-vs-ui-designer\/","title":{"rendered":"UX Designer Vs UI Designer"},"content":{"rendered":"<h4><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-915 size-full aligncenter\" src=\"https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-scaled.jpg\" alt=\"\" width=\"1184\" height=\"2560\" srcset=\"https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-scaled.jpg 1184w, https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-324x700.jpg 324w, https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-473x1024.jpg 473w, https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-768x1661.jpg 768w, https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-710x1536.jpg 710w, https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-947x2048.jpg 947w, https:\/\/weareco-lab.co.uk\/staging\/wp-content\/uploads\/2022\/06\/Infographic-UX-Vs-UI-01-1568x3392.jpg 1568w\" sizes=\"auto, (max-width: 1184px) 100vw, 1184px\" \/><\/h4>\r\n<h4>UX Designer<\/h4>\r\n<!-- \/wp:post-content -->\r\n\r\n<!-- wp:paragraph -->\r\n<p><span style=\"font-weight: 400;\">Design based on the users interaction and research.<\/span><\/p>\r\n<h4>Human Centred Design for physical products<\/h4>\r\n<p><span style=\"font-weight: 400;\">UX stands for user experience and works on how you interact with a digital or physical product.<\/span> <span style=\"font-weight: 400;\">The main aim for a UX designer is to make a digital product as easy to use as possible.<\/span> <span style=\"font-weight: 400;\">UX designers gather research by running usability tests and understanding who is using the product.<\/span> <span style=\"font-weight: 400;\">How a user interacts will dictate how to improve a product which will help align common tasks and business goals.<\/span> \u00a0<\/p>\r\n<h5><span style=\"font-weight: 400;\">Creates&#8230;<\/span><\/h5>\r\n<ul>\r\n<li><span style=\"font-weight: 400;\">Personas<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Wireframes<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Prototypes<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Research<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">User journeys<\/span><\/li>\r\n<\/ul>\r\n<h5>\u00a0<\/h5>\r\n<h5><span style=\"font-weight: 400;\">Tools&#8230;<\/span><\/h5>\r\n<ul>\r\n<li><span style=\"font-weight: 400;\">Sketch<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Figma<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Invision<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Adobe XD<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Framer<br \/><\/span><\/li>\r\n<\/ul>\r\n<!-- \/wp:paragraph -->\r\n\r\n<!-- wp:heading {\"level\":4} -->\r\n<h4>\u00a0<\/h4>\r\n<h4>UI Designer<\/h4>\r\n<!-- \/wp:heading -->\r\n\r\n<!-- wp:paragraph -->\r\n<p><span style=\"font-weight: 400;\">Design based on the client\u2019s business requirements and aesthetics<\/span><\/p>\r\n<h4>Design based on the client&#8217;s requirements and aesthetics<\/h4>\r\n<!-- \/wp:paragraph -->\r\n\r\n<!-- wp:paragraph -->\r\n<p><span style=\"font-weight: 400;\">UI stands for user interface and works on how a digital or physical product will look.<\/span> <span style=\"font-weight: 400;\">UI designers take on board how a brand should be perceived. They design things like how a button will look, colour palettes and the right imagery to use. They ensure the UX designers goals are taken on board whilst keeping an application looking attractive as well as functional.<\/span><\/p>\r\n<h4>Human Centred Design for physical products<\/h4>\r\n<h5><span style=\"font-weight: 400;\">Creates&#8230;<\/span><\/h5>\r\n<ul>\r\n<li><span style=\"font-weight: 400;\">High fidelity mockups<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Graphics<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Layout<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Colour palettes<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Imagery<\/span><\/li>\r\n<\/ul>\r\n<h5>\u00a0<\/h5>\r\n<h5><span style=\"font-weight: 400;\">Tools&#8230;<\/span><\/h5>\r\n<ul>\r\n<li><span style=\"font-weight: 400;\">Photoshop<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Illustrator<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Invision<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Adobe XD<\/span><\/li>\r\n<li><span style=\"font-weight: 400;\">Sketch<\/span><\/li>\r\n<\/ul>\r\n<h1><span style=\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 2.8125em;\">88%<\/span><\/h1>\r\n<p><span style=\"font-weight: 400;\">of users are less likely to\u00a0 <\/span><span style=\"font-weight: 400;\">return to a website after\u00a0 <\/span><span style=\"font-weight: 400;\">a bad user experience.<\/span><\/p>\r\n<h1><span style=\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 2.8125em;\">53%<\/span><\/h1>\r\n<p><span style=\"font-weight: 400;\">of mobile users leave\u00a0 <\/span><span style=\"font-weight: 400;\">websites in 3 seconds.<\/span><\/p>\r\n<h1><span style=\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 2.8125em;\">42%<\/span><\/h1>\r\n<p><span style=\"font-weight: 400;\">of consumers say they\u2019ll\u00a0 <\/span><span style=\"font-weight: 400;\">leave a website that\u00a0 <\/span><span style=\"font-weight: 400;\">poorly functions.<\/span><\/p>\r\n<h1><span style=\"font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 2.8125em;\">75%<\/span><\/h1>\r\n<p><span style=\"font-weight: 400;\">of people say that <\/span><span style=\"font-weight: 400;\">credibility plays a part <\/span><span style=\"font-weight: 400;\">based on a websites\u00a0 <\/span><span style=\"font-weight: 400;\">aesthetics<\/span>.<\/p>\r\n<p>&nbsp;<\/p>\r\n<p><b>Working together<\/b><\/p>\r\n<p><span style=\"font-weight: 400;\">UX and UI work closely together and sometimes are thought of as the same thing <\/span><span style=\"font-weight: 400;\">but this is not the case. UI designers will sometimes cross over and work on tasks<\/span><\/p>\r\n<p><span style=\"font-weight: 400;\">that a UX designer would like designing wireframes.<\/span><\/p>\r\n<p><span style=\"font-weight: 400;\">While there can be a crossover with the tools they use and the tasks they perform <\/span><span style=\"font-weight: 400;\">they are very different disciplines.<\/span><\/p>\r\n<p><span style=\"font-weight: 400;\">The UX designer will inform the UI designer&#8217;s direction to a certain extent.<\/span><\/p>\r\n<p><span style=\"font-weight: 400;\">When they work together and collaborate they achieve the best results <\/span><span style=\"font-weight: 400;\">possible.<\/span><\/p>\r\n<p><span style=\"font-weight: 400;\">Design is a collaborative process not just between UX and UI designers but the <\/span><span style=\"font-weight: 400;\">client and the marketing manager or whoever makes business related decisions.<\/span><\/p>\r\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>UX Designer Design based on the users interaction and research. Human Centred Design for physical products UX stands for user experience and works on how you interact with a digital or physical product. The main aim for a UX designer is to make a digital product as easy to use as possible. UX designers gather [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":929,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,16],"tags":[],"class_list":["post-901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-ux","entry"],"_links":{"self":[{"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/posts\/901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/comments?post=901"}],"version-history":[{"count":25,"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/posts\/901\/revisions"}],"predecessor-version":[{"id":928,"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/posts\/901\/revisions\/928"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/media\/929"}],"wp:attachment":[{"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/media?parent=901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/categories?post=901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/weareco-lab.co.uk\/staging\/wp-json\/wp\/v2\/tags?post=901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}