WEBVTT 00:00:06.640 --> 00:00:10.652 A lot of the users have now become very tech-savvy. 00:00:10.652 --> 00:00:16.259 A lot of the people using apps and using websites have been using them for 15 or 20 years now. 00:00:16.259 --> 00:00:21.390 And they are pretty skilled, so they understand the typical patterns. 00:00:21.390 --> 00:00:25.534 They know that a checkout icon should be in the top-right corner. 00:00:25.534 --> 00:00:31.520 They know how a good login and registration works; so, all things like that 00:00:31.520 --> 00:00:35.781 are kind of predetermined and there's pretty  little innovation here. 00:00:35.781 --> 00:00:39.705 So, you can do research to test the viability of the product. 00:00:39.705 --> 00:00:44.044 But in a couple of really, really like pattern cases 00:00:44.080 --> 00:00:50.880 there isn't really much way to innovate and user  interface – the *visuals can be the differentiator*, 00:00:50.880 --> 00:00:55.200 and of course, we can use a design system like  Material Design, but that would be a horrible 00:00:55.200 --> 00:01:00.300 world to live in because those apps would be all  looking boring and soulless. 00:01:00.300 --> 00:01:05.288 And people want that design – that's why people buy Apple products among other things, 00:01:05.288 --> 00:01:10.869 because they look good and they are different than everything else, at least sometimes. 00:01:10.869 --> 00:01:14.942 So, *people buy with their eyes* and we really need to remember that. 00:01:14.942 --> 00:01:20.461 And also, there is something called *aesthetic usability effect*, which means that 00:01:20.461 --> 00:01:26.542 if something looks good, it's naturally perceived by people as being more usable even if it's not. 00:01:26.542 --> 00:01:31.464 So, those visuals are important  and we really, really need to keep that in mind. 00:01:31.760 --> 00:01:36.337 Okay, so let's get to the actual  UI after that lengthy intro. 00:01:37.120 --> 00:01:41.491 Let's start with *visualizing* because we need to  visualize what we're going to make 00:01:41.491 --> 00:01:47.139 and of course, if we don't have a lot of experience, we need to kind of use what we have. 00:01:47.139 --> 00:01:53.098 So, the *less experience we have, the harder it is to visualize* the things that we want to design. 00:01:53.471 --> 00:01:58.367 And I have a very good example of how it often ends up and how it actually discourages people 00:01:58.367 --> 00:02:00.400 that comes from 'The Simpsons'. 00:02:00.400 --> 00:02:05.495 So, you see an image in your head and you try to recreate it 00:02:05.495 --> 00:02:11.384 and you end up with something like this and you say to yourself, 'Why doesn't mine look like that?' 00:02:11.384 --> 00:02:17.471 And this is because we often think that it's really easy to just recreate something that 00:02:17.471 --> 00:02:22.634 we have in our head without the foundational elements that are making up a good design, 00:02:22.634 --> 00:02:27.218 and we think that those Dribbble shots – you know – with like semi-transparent buttons 00:02:27.218 --> 00:02:32.686 are what is good design, so we kind of skip the whole grid, skip the typography, 00:02:32.686 --> 00:02:37.330 just add a nice gradient and we  think that's going to be fine. Well, it's not the case. 00:02:37.680 --> 00:02:42.799 So, what is UI design? In general, what you really, really need to learn first, 00:02:42.799 --> 00:02:46.850 because everything else comes with practice, is *grid typography*, 00:02:46.850 --> 00:02:50.745 *hierarchy*, *readability* and *some basic aesthetics*, 00:02:50.745 --> 00:02:55.343 but you don't really need to be an artist, and design is definitely not art. 00:02:55.554 --> 00:03:01.544 It's not art because you have a very limited kind of scope of what you can do, 00:03:01.544 --> 00:03:05.752 and you can't be "too creative" because that's going to make it unusable. 00:03:05.752 --> 00:03:10.089 So, a lot of those Dribbble shots are basically artworks and they're 00:03:10.160 --> 00:03:15.760 just not able to become a real product because  they are done in a way to just kind of have like 00:03:15.760 --> 00:03:18.902 a flashy visual. So, we need to understand that, 00:03:18.902 --> 00:03:23.035 but what I think is the most important thing is *the grid and the layout*. 00:03:24.509 --> 00:03:29.612 But I often tell the junior designers what I think a UI design really is 00:03:29.612 --> 00:03:35.971 because this whole design thing is  really like created to feel difficult to people. 00:03:35.971 --> 00:03:41.059 Like, you know, we have those super genius UX designers talking about lengthy processes, 00:03:41.059 --> 00:03:45.591 and as a junior we get discouraged – we  get like, 'Oh, I'm not going to learn that ever 00:03:45.591 --> 00:03:51.230 because I'm not a super genius like they  are.' But in reality, a lot of the design is 00:03:51.280 --> 00:03:56.905 basically moving rectangles around. So, you take a rectangle and based on some research and some 00:03:56.905 --> 00:04:02.146 knowledge you move it to a different position, change the color, change the size and that's it. 00:04:02.146 --> 00:04:07.760 And it's all rectangles, even if you're moving ovals because the bounding boxes are rectangular as well. 00:04:07.760 --> 00:04:13.840 So, if you learn *how and why and where to  move those rectangles to*, you're set to go.