WEBVTT 00:00.000 --> 00:14.040 Hello everyone, in this video, we will learn about UI versus UX. 00:14.040 --> 00:19.680 In the world of design, there are a few well-known debates that are never quite settled. 00:19.680 --> 00:23.920 One of the big ones is the difference between user interface design and user experience 00:23.920 --> 00:25.160 design. 00:25.160 --> 00:31.200 The difference between user interface, UI, and user experience, UX, is that UI refers 00:31.200 --> 00:36.320 to the aesthetic elements by which people interact with the product, while UX is about the 00:36.320 --> 00:39.600 experience a user has with a product or service. 00:39.600 --> 00:45.400 In this lesson, we will learn all about the differences between UI and UX. 00:45.400 --> 00:46.920 Introduction 00:46.920 --> 00:51.920 The very first thing to address here is that UI stands for user interface design, and 00:51.920 --> 00:54.880 UX stands for user experience design. 00:54.880 --> 00:58.520 The name tells us the essential difference between these two roles. 00:58.520 --> 01:02.880 UI refers to the visual and aesthetic elements that the users interact with, while using 01:02.880 --> 01:04.440 a digital product. 01:04.440 --> 01:07.320 A typical UI would look something like this. 01:07.320 --> 01:12.960 Here you have buttons, text boxes, icons, divisions, graphics, typography, and other 01:12.960 --> 01:14.720 visual elements. 01:14.720 --> 01:19.000 On the other hand, we have UX, which refers to the experience or emotions of the users 01:19.000 --> 01:22.600 that are invoked, while they are using your product. 01:22.600 --> 01:27.040 Even if the UI design is exceptional with aesthetically pleasing elements, if the users 01:27.040 --> 01:30.840 have a bad experience while they are interacting with the product. 01:30.840 --> 01:33.560 The product is not considered a success. 01:33.560 --> 01:38.320 The process of UX design starts before the work of the UI designer. 01:38.320 --> 01:41.760 They are responsible for researching the market for insights. 01:41.760 --> 01:45.360 They have to come up with wireframes and prototypes of the product. 01:45.360 --> 01:51.200 Finally, after many iterations, the final design is given to the UI designer who draws on 01:51.200 --> 01:56.280 pixels and makes sure every detail in color is up to the standards of requirements. 01:56.280 --> 02:00.040 Now let us take a look at the tools used by each of these job roles. 02:00.040 --> 02:05.440 First, I'll be giving out the tools for UI designers, and the first tool is Figma. 02:05.440 --> 02:09.400 It is the best UI design tool for collaborative prototyping. 02:09.400 --> 02:11.400 Next we have Adobe XD. 02:11.400 --> 02:15.320 It is the best UI design tool for prototyping on Windows. 02:15.320 --> 02:16.560 Next we have Sketch. 02:16.560 --> 02:20.920 It is the best UI design tool for prototyping on Mac operating system. 02:20.960 --> 02:25.360 Next we have Axier, and it is the best UI design tool for technical UI designers. 02:25.360 --> 02:29.360 Now, let us move on to the tools used by UX designers. 02:29.360 --> 02:31.720 Firstly, we have Mockflow. 02:31.720 --> 02:36.880 Mockflow aids in we're framing, site mapping, crafting design specifications, collaborative 02:36.880 --> 02:41.200 review, screenshot annotation, and even site hosting. 02:41.200 --> 02:46.880 Next tool, we have for UX designers, is Stories on board, and it is primarily used as a user 02:46.880 --> 02:53.600 journey or story mapping solution that invites UX designers to plot software project pathways. 02:53.600 --> 02:55.520 Next we have Design Mirror. 02:55.520 --> 03:00.200 Here, designers can display their interface designs on the most popular smartphones via 03:00.200 --> 03:03.200 Wi-Fi, USB, and browser link. 03:03.200 --> 03:05.720 Next up, we have Smart Look. 03:05.720 --> 03:10.480 The key features include always on recording and replay of real video recordings. 03:10.480 --> 03:14.160 That track how users interact along with heatmaps for highlighting precisely where 03:14.160 --> 03:15.960 they click most.