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.