1
00:00:00,120 --> 00:00:00,640
Hey, everyone.

2
00:00:00,660 --> 00:00:01,260
Welcome back.

3
00:00:01,530 --> 00:00:05,550
So we've been talking a lot about cards, and I think that's totally fine and I think we're going to

4
00:00:05,550 --> 00:00:06,930
do a little bit more, actually.

5
00:00:07,650 --> 00:00:14,010
Now, I've been working on the order list, so when you make an order, it has different variations

6
00:00:14,010 --> 00:00:15,170
like ship.

7
00:00:15,390 --> 00:00:17,300
I have one that says almost there.

8
00:00:17,310 --> 00:00:19,290
I have one that says delivered.

9
00:00:19,620 --> 00:00:23,880
And we also have a list like you can probably filter and that list has a title.

10
00:00:23,880 --> 00:00:29,220
And different cards look different for things that are in the shipping process.

11
00:00:29,490 --> 00:00:33,950
And I've actually started to build out like a little card like that.

12
00:00:34,440 --> 00:00:40,950
So I have one that's over here and this is just like kind of like a live tracker.

13
00:00:41,460 --> 00:00:43,860
And maybe this becomes a component.

14
00:00:44,610 --> 00:00:50,490
It probably should become a component, but we're going to create it into a recipe for now and then.

15
00:00:50,910 --> 00:00:51,660
That's another thing.

16
00:00:51,810 --> 00:00:54,510
As I said, design systems will evolve.

17
00:00:54,510 --> 00:01:00,660
You will add to them, you will remove from them things that were once useful, don't become useful

18
00:01:00,660 --> 00:01:03,730
anymore in things that are needed, become components so you can use them.

19
00:01:03,930 --> 00:01:06,390
So in this case, this will probably become a component.

20
00:01:07,570 --> 00:01:12,040
Now, let me show you what it would look like, so if I had an order card.

21
00:01:13,130 --> 00:01:18,320
OK, so I'm just going to grab just a regular order card.

22
00:01:20,950 --> 00:01:31,030
So this will be that with this, like I said, we can make this into an auto layout, so let's bring

23
00:01:31,030 --> 00:01:33,890
this all the way up so we can see exactly what we're working with.

24
00:01:33,890 --> 00:01:38,820
So we have an order shipped card over here and we have our product.

25
00:01:38,830 --> 00:01:41,470
So this is probably like 15 dollar book.

26
00:01:47,040 --> 00:01:52,060
I start up so we have a ship.

27
00:01:53,480 --> 00:01:58,520
And what I've done here, I've gone ahead and I started thinking about creating like, you know, like

28
00:01:58,520 --> 00:02:05,000
a little track or something very nice for people to kind of see how things are panning out with their

29
00:02:05,000 --> 00:02:05,620
package.

30
00:02:05,930 --> 00:02:10,100
You know, there's probably a portion of this that we're missing something here.

31
00:02:10,400 --> 00:02:16,860
So I'm going to do is I'm actually going to take pills small.

32
00:02:16,880 --> 00:02:23,630
If we can even use the base pill in this instance, I'm going to use the baseball at least, and I'm

33
00:02:23,630 --> 00:02:28,790
just going to say something like delivered by.

34
00:02:31,540 --> 00:02:42,310
08, 08, 20, 20, even though we are past that date at the moment, so we are going to be delivered

35
00:02:42,310 --> 00:02:45,850
by then and that base poll, we can also just.

36
00:02:47,850 --> 00:02:50,650
Change that you are, we can do a couple different things.

37
00:02:50,670 --> 00:02:59,950
It really depends like we can make it back round of yellow and the text can be like dark like that.

38
00:03:01,410 --> 00:03:04,300
This is, I think, fine for now.

39
00:03:04,320 --> 00:03:09,900
So maybe delivery by that date.

40
00:03:10,560 --> 00:03:11,280
That looks good.

41
00:03:11,520 --> 00:03:15,870
When I'm going to do is I'm actually going to turn this into an Autolib.

42
00:03:16,470 --> 00:03:17,460
Big surprise.

43
00:03:17,890 --> 00:03:20,890
Well, so let's see what happened here.

44
00:03:20,910 --> 00:03:22,650
So we have a package tracker.

45
00:03:25,760 --> 00:03:28,730
We'll see what happens so that.

46
00:03:29,910 --> 00:03:32,130
Interesting that didn't.

47
00:03:34,950 --> 00:03:37,770
So what we can do is bring a copy of that.

48
00:03:40,330 --> 00:03:42,910
Select where I want it.

49
00:03:43,540 --> 00:03:45,040
So that is one.

50
00:03:47,440 --> 00:03:55,300
Piece of the list and over here, what I'm going to do is I'm going to create an effect and the background

51
00:03:56,140 --> 00:03:59,320
product we can call this medium.

52
00:04:02,400 --> 00:04:09,240
So this is the problem, we have a package tracker, and so we're using the background color, that's

53
00:04:09,240 --> 00:04:09,660
the problem.

54
00:04:09,900 --> 00:04:10,230
OK.

55
00:04:10,550 --> 00:04:12,900
OK, and this is going to be our background color.

56
00:04:12,910 --> 00:04:14,340
We're going to just use a frame.

57
00:04:16,650 --> 00:04:25,590
And we are going to use 10 pixels for the radius and then we are going to apply the recipe to Vasilis

58
00:04:25,590 --> 00:04:27,810
and not clip that content right now.

59
00:04:28,200 --> 00:04:28,900
And there you go.

60
00:04:30,460 --> 00:04:32,880
Here, a card that is probably.

61
00:04:34,880 --> 00:04:40,040
To unnoticeable, so we have a card here, so this probably should become a component.

62
00:04:41,480 --> 00:04:44,050
I'll leave it up to your discretion if you want to do that.

63
00:04:44,330 --> 00:04:50,540
We have you I stroke just just that border there so that you can distinguish between that and the next

64
00:04:50,540 --> 00:04:50,870
card.

65
00:04:51,500 --> 00:04:58,030
So we have our border status so we can say a border ship.

66
00:04:59,360 --> 00:05:06,810
And what I'm going to do is I'm actually going to create another frame and I'm going to call this order

67
00:05:06,950 --> 00:05:07,280
list.

68
00:05:08,990 --> 00:05:13,670
And you guessed it Autolib when you 16 pixels.

69
00:05:15,140 --> 00:05:18,740
And we are going to go ahead and grab one of our cards here.

70
00:05:19,280 --> 00:05:21,280
We're going to go and find our order card.

71
00:05:21,290 --> 00:05:22,040
Where is it?

72
00:05:22,490 --> 00:05:28,510
And we'll find a delivered card and we'll just place it there for now.

73
00:05:29,780 --> 00:05:34,460
And this delivery card will go into our order list.

74
00:05:39,260 --> 00:05:41,600
So that is fine.

75
00:05:45,230 --> 00:05:48,410
So I can actually, like, remove this background.

76
00:05:51,110 --> 00:05:52,100
Let's.

77
00:05:53,920 --> 00:05:57,820
Make that like that, let's.

78
00:05:59,960 --> 00:06:01,160
To that.

79
00:06:02,020 --> 00:06:12,430
And then when I'm going to do it, I'm going to remove the background color or the background.

80
00:06:18,980 --> 00:06:20,370
So we have a map tracker.

81
00:06:20,390 --> 00:06:23,600
We have a map, we can just pump that up.

82
00:06:26,410 --> 00:06:34,420
And yet so I am going to actually remove this stroke because I think we can just keep it flat and these

83
00:06:34,420 --> 00:06:41,470
can be maybe spaced out policy, it can be spaced out probably by 20 or.

84
00:06:42,250 --> 00:06:45,390
And these ones probably around eight.

85
00:06:46,330 --> 00:06:49,350
So we have that connection.

86
00:06:50,740 --> 00:06:52,830
So I think that's kind of fine for now.

87
00:06:52,840 --> 00:06:53,800
I'm liking it.

88
00:06:54,220 --> 00:06:57,090
What we're going to do is we can add another item.

89
00:06:57,970 --> 00:07:01,660
So when I think of these lists, I think there's something here.

90
00:07:01,660 --> 00:07:04,210
We probably put a horizontal rule, but let's move ahead.

91
00:07:12,330 --> 00:07:20,790
So I'm going to go back and I'm going to, you know, make that title, so if I want to think about

92
00:07:20,820 --> 00:07:26,400
more or less, we probably should be able to filter it on the studio that.

93
00:07:27,420 --> 00:07:37,470
And then let's grab a filter button, so I've been using like this checkbox variant that I've made where

94
00:07:37,860 --> 00:07:42,300
it's so easy to grow, that's been really good.

95
00:07:42,840 --> 00:07:48,210
And we're going to scan to call this filters so we can probably filter by different things price and

96
00:07:50,340 --> 00:07:52,170
maybe just timeline.

97
00:07:54,250 --> 00:07:55,450
Let's.

98
00:07:58,470 --> 00:08:00,210
Bring that together, we can.

99
00:08:02,480 --> 00:08:04,730
We can just call this filters.

100
00:08:07,850 --> 00:08:12,170
And I'm going to expand that all the way to the floor with.

101
00:08:18,710 --> 00:08:26,310
I'm going way out here, OK, so I'm going to take that, that and I am going to make sure there is

102
00:08:26,310 --> 00:08:32,330
a center to each other and then I am actually going to take my friend does now.

103
00:08:35,980 --> 00:08:43,450
And I'm going to put the filter list in there, so I have my order list, I have my filters and I'm

104
00:08:43,450 --> 00:08:48,760
going to create another frame is called the appropriate list.

105
00:08:50,500 --> 00:08:53,040
And yet, Ottilia.

106
00:08:53,860 --> 00:08:55,090
Twenty four pixels.

107
00:08:56,330 --> 00:09:01,280
Maybe this one is 16, but.

108
00:09:04,200 --> 00:09:09,970
Let's clean that up so now like you can create an easy list of different types of products.

109
00:09:09,990 --> 00:09:13,860
You'll notice that we have our last three months plus our filters.

110
00:09:14,100 --> 00:09:16,710
We have like a current shipped status.

111
00:09:17,010 --> 00:09:25,070
I mean, you can also go ahead and change some of these things, like you can say in transit.

112
00:09:25,950 --> 00:09:32,220
So you have different variations, kind of like a live tracker that we've designed here that you can

113
00:09:32,220 --> 00:09:34,110
just kind of like copy.

114
00:09:34,300 --> 00:09:35,830
I can just take this like this.

115
00:09:35,860 --> 00:09:40,920
OK, I need to use an order list right now for when I'm designing a filter list and I'm just going to

116
00:09:40,920 --> 00:09:42,480
drop that right into my designs.

117
00:09:44,380 --> 00:09:44,990
Easy peasy.

118
00:09:45,970 --> 00:09:50,530
So, yeah, definitely use recipes, recipes are going to speed up your workflow, recipes are going

119
00:09:50,530 --> 00:09:57,010
to set a good standard for your team on what different collection of components look like, what components

120
00:09:57,010 --> 00:10:01,640
are going to interact with each other, whether that be like these cards or like buttons checkboxes.

121
00:10:01,850 --> 00:10:06,880
You also sometimes make you and forced you to think about what you may be missing from the components.

122
00:10:06,880 --> 00:10:11,740
So we may go back and add this map tracker as a component where people can kind of, you know, use

123
00:10:11,740 --> 00:10:14,710
that default map just to display a map.

124
00:10:15,010 --> 00:10:21,360
And also using this kind of pinging thing, we can possibly even animate that.

125
00:10:21,640 --> 00:10:28,300
So like we can make it go in and out or more specifically, just the background.

126
00:10:28,300 --> 00:10:32,470
We could just make it pulse when we think about like micro interaction.

127
00:10:32,470 --> 00:10:38,050
So pull those different things out of your designs that they're going to really help you figure out

128
00:10:38,050 --> 00:10:41,230
what you need to build and also make your workflow much more easier.

129
00:10:41,260 --> 00:10:42,670
That's why I do a lot of these things.

130
00:10:42,940 --> 00:10:46,780
This design system is just going to help us, you know, add to this app.

131
00:10:46,900 --> 00:10:51,850
We can turn it around, make something else from this, but it sets a good standard on what a design

132
00:10:51,850 --> 00:10:53,260
system should kind of look like.

133
00:10:53,650 --> 00:10:55,130
And it's going to be different for everyone.

134
00:10:55,360 --> 00:10:59,110
So this is my design of the orders list.