1
00:00:00,420 --> 00:00:01,170
Welcome back.

2
00:00:01,500 --> 00:00:03,900
In this lesson, we're going to learn about design patterns.

3
00:00:04,590 --> 00:00:07,380
So what our design patterns.

4
00:00:08,460 --> 00:00:14,520
Well, design patterns are the reoccurring solutions that solve a lot of our design problems that we

5
00:00:14,520 --> 00:00:15,640
always have the solution for.

6
00:00:15,840 --> 00:00:19,200
And these are kind of like your standard reference points as a designer.

7
00:00:20,770 --> 00:00:24,670
That can mean, like infinite scrolls, they just keep loading.

8
00:00:25,910 --> 00:00:31,490
That could mean also like breadcrumbs, and these are a few examples of design patterns that we're all

9
00:00:31,490 --> 00:00:32,560
kind of familiar with.

10
00:00:33,350 --> 00:00:39,080
Now, if you're designing a new product, you'll want to figure out the easiest way that users can interact

11
00:00:39,080 --> 00:00:39,440
with it.

12
00:00:40,340 --> 00:00:45,110
So let's think of something that we always do, login and registration.

13
00:00:46,040 --> 00:00:51,710
Now, we always ask people to sign up, sign in, log in and log.

14
00:00:51,920 --> 00:00:57,200
And each of us use numerous web and mobile applications on a daily basis.

15
00:00:57,200 --> 00:01:03,620
And I think we can all agree that constantly entering your name like over here or your password over

16
00:01:03,620 --> 00:01:05,910
and over again, it's tiresome.

17
00:01:06,650 --> 00:01:15,350
So like this completely tiresome to constantly enter your email, your name, your username, your password.

18
00:01:15,620 --> 00:01:17,540
And there are design patterns that solve that.

19
00:01:17,840 --> 00:01:24,170
So we can usually use like a python like this where there's like a social log in or there is some kind

20
00:01:24,170 --> 00:01:25,710
of like, remember me?

21
00:01:25,760 --> 00:01:27,230
These are design patterns.

22
00:01:28,370 --> 00:01:31,130
Now, the first step is finding the problem.

23
00:01:31,730 --> 00:01:38,030
So users, understandably, are short on time and patience from having to complete small tasks repeatedly

24
00:01:38,030 --> 00:01:40,680
to access their information or get their work accomplished.

25
00:01:41,120 --> 00:01:45,010
So in this case, our problem is that users want to sign in quickly.

26
00:01:45,500 --> 00:01:50,140
Now, we often try to find ways to eliminate that pain point.

27
00:01:50,150 --> 00:01:52,090
That's the next step is like the solution.

28
00:01:52,790 --> 00:01:56,900
So we want to find ways to eliminate or at least diminish this pain point for them.

29
00:01:57,530 --> 00:02:04,130
So over here, a solution could be like social login, like I mentioned before, or having like a remember

30
00:02:04,130 --> 00:02:05,680
me checkbox.

31
00:02:05,750 --> 00:02:09,930
So those are ways that you can kind of solve that issue that we're all very familiar with.

32
00:02:10,640 --> 00:02:18,380
Now, there is no need to recreate the wheel every single time, although we could design our own solution

33
00:02:18,380 --> 00:02:19,340
to the problem.

34
00:02:19,700 --> 00:02:24,430
Several useful solutions have already been designed in the past and they're proven to be effective.

35
00:02:24,440 --> 00:02:31,040
So there's no need to for you to go out there and kind of retry or redesign something like that over

36
00:02:31,040 --> 00:02:34,660
and over again to get a different result when there's no need to.

37
00:02:35,060 --> 00:02:40,280
So, for example, like I mentioned before, some sites like have the ability to allow users to sign

38
00:02:40,280 --> 00:02:41,720
in using social media.

39
00:02:42,080 --> 00:02:46,070
Others sometimes don't even ask users to sign in until they really need to.

40
00:02:46,070 --> 00:02:50,960
Another, save the users data and kind of populate that within the sign fields.

41
00:02:51,650 --> 00:02:59,090
So there are different ways that we can actually solve for this without necessarily having to do extra

42
00:02:59,090 --> 00:02:59,390
work.

43
00:03:00,290 --> 00:03:03,320
Now, let's talk about the categories of patterns.

44
00:03:03,770 --> 00:03:11,570
So there are six categories of design patterns and this kind of changes based off of people's ideas

45
00:03:11,570 --> 00:03:12,660
of what design patterns are.

46
00:03:12,700 --> 00:03:16,650
I mean, there's no like one truth, but these are the six categories that I usually follow.

47
00:03:17,060 --> 00:03:18,680
So the first one is data input.

48
00:03:18,680 --> 00:03:25,280
So over here we have like a kind of like a drag and drop that is considered like a data and input category.

49
00:03:25,640 --> 00:03:32,060
And these patterns handle data input and feedback that a product gives in response to the data it receives.

50
00:03:33,080 --> 00:03:34,700
The second one is content structuring.

51
00:03:35,800 --> 00:03:43,060
So these patterns streamline the overall kind of flow of our user experience and they ensure accessibility

52
00:03:43,060 --> 00:03:48,120
of all page elements so users feel confident while they're browsing your product.

53
00:03:48,430 --> 00:03:54,580
So that can mean like just natural flow of the page, allowing users to have that really accessible

54
00:03:54,580 --> 00:03:56,020
and easy flow.

55
00:03:56,020 --> 00:04:00,370
And just the way you kind of structure your content over here, like just the different options and

56
00:04:00,520 --> 00:04:05,740
how it's neatly structured is one way that we kind of find design patterns.

57
00:04:07,160 --> 00:04:13,250
Another one is navigation, so these patterns ensure, like effortless navigation through your product.

58
00:04:13,280 --> 00:04:16,370
So over here we have an example of just a sidebar navigation.

59
00:04:16,610 --> 00:04:17,840
That is one design pattern.

60
00:04:17,870 --> 00:04:20,360
There are many different types of navigation design patterns.

61
00:04:21,140 --> 00:04:25,850
And so they're just kind of structured and we can go much deeper into what navigation necessarily means

62
00:04:25,850 --> 00:04:28,340
and how to have an effective navigation.

63
00:04:28,820 --> 00:04:31,470
Next is incentivization.

64
00:04:31,520 --> 00:04:38,060
So these parents kind of push your users to perform certain actions with rewards or successfully completed

65
00:04:38,060 --> 00:04:38,660
actions.

66
00:04:39,670 --> 00:04:46,090
One thing that comes to mind that I think of is like workout based applications where they reward users

67
00:04:46,090 --> 00:04:48,970
based off of things that they complete or games.

68
00:04:49,390 --> 00:04:53,170
So these are different types of ways to kind of include those design patterns.

69
00:04:53,170 --> 00:04:57,370
And those are the types of scenarios that you would necessarily see them in high.

70
00:04:58,210 --> 00:05:03,550
So these parents help you craft a visual hierarchy so you can easily distinguish primary elements.

71
00:05:04,180 --> 00:05:09,700
So over here we have like primary buttons, secondary buttons, even just like elements in terms of

72
00:05:09,700 --> 00:05:14,360
like what is selected and how things are kind of laid out on the page.

73
00:05:14,680 --> 00:05:17,560
So a bunch of different types of design parents for that as well.

74
00:05:17,830 --> 00:05:24,040
And I will link a resource for different types of design patterns, its UI patterns, dot com, I believe.

75
00:05:24,490 --> 00:05:29,920
And that is a great place to see all the different types of patterns and different types of categories

76
00:05:29,920 --> 00:05:31,090
that you can kind of dig into.

77
00:05:31,780 --> 00:05:33,680
And the last one is social media.

78
00:05:34,060 --> 00:05:38,670
So these are patterns that kind of encourage users to share and interact with others online.

79
00:05:39,040 --> 00:05:44,250
So that could be like links that could be just like share buttons or apply buttons.

80
00:05:44,260 --> 00:05:49,150
I mean, there's different ways that users can interact through social media like tags, I would say

81
00:05:49,150 --> 00:05:51,070
are kind of a part of that as well.

82
00:05:51,760 --> 00:05:56,980
So there are a bunch of different types of design patterns in relation to social media, and that's

83
00:05:56,980 --> 00:05:59,410
it for our categories on design patterns.