1 00:00:00,750 --> 00:00:08,130 So let's talk about cards now, cards can be really complex components that can be really simple components. 2 00:00:08,130 --> 00:00:08,820 It really depends. 3 00:00:08,820 --> 00:00:12,120 I have the whole spectrum right here to show you. 4 00:00:12,480 --> 00:00:16,830 These are all the different types of cards I've designed in like this design system. 5 00:00:17,010 --> 00:00:20,220 I have something simple as just like an icon in a title card. 6 00:00:20,670 --> 00:00:26,580 I have something simple, like just even text and icon imagery. 7 00:00:26,910 --> 00:00:29,430 I have something really complex like this. 8 00:00:30,090 --> 00:00:33,190 So many different elements, other components in there as well. 9 00:00:33,540 --> 00:00:38,120 You'll notice that I have like Pils, which is over here. 10 00:00:38,580 --> 00:00:41,370 These are really simple components, kind of based off of our buttons. 11 00:00:41,760 --> 00:00:42,630 So let's go back to cards. 12 00:00:44,560 --> 00:00:48,010 I have icons, I have typography. 13 00:00:49,320 --> 00:00:55,680 I have imagery, so I have different things even in this one, I have all of that, plus I have buttons. 14 00:00:58,840 --> 00:01:03,160 So and these ones kind of have like an interaction built in. 15 00:01:03,520 --> 00:01:07,180 So these are the different types of base components are built for carts. 16 00:01:07,420 --> 00:01:10,810 And I want to show you how I went ahead and built these. 17 00:01:11,910 --> 00:01:19,740 So you'll notice that I have a base card over here that has everything included, like it has reviews 18 00:01:19,740 --> 00:01:24,720 and has like a staff pick bill, it has a percentage bill of sale. 19 00:01:25,140 --> 00:01:26,550 It has, like strikethrough. 20 00:01:26,880 --> 00:01:30,990 I thought about all the different use cases that you can have in a card and not saying that every card 21 00:01:30,990 --> 00:01:32,010 is going to look like that. 22 00:01:32,370 --> 00:01:35,730 It may be rare that every card is going to have all this information. 23 00:01:35,910 --> 00:01:37,800 In fact, most cards look at this. 24 00:01:39,390 --> 00:01:43,920 You see, they have turned them off, turn that all off in this variation of create a new component 25 00:01:43,920 --> 00:01:47,310 called a large default product card. 26 00:01:47,820 --> 00:01:50,640 And all I have is I have my. 27 00:01:51,660 --> 00:01:53,200 Product name price. 28 00:01:53,220 --> 00:01:58,950 I have a small description on these larger cards, I have the amount of reviews and the level of the 29 00:01:58,950 --> 00:01:59,430 review. 30 00:01:59,640 --> 00:02:01,110 This is like a five star product. 31 00:02:01,260 --> 00:02:02,310 And I have the category. 32 00:02:03,520 --> 00:02:10,920 Now, I do have a variation where there is a sale and I have a straight through at it and I have a sale 33 00:02:11,560 --> 00:02:15,430 now I have one with just a staff pick and I have both. 34 00:02:16,210 --> 00:02:19,390 So I've created all different components for those use cases. 35 00:02:19,580 --> 00:02:22,300 You know, I may not use these all the time. 36 00:02:22,300 --> 00:02:24,760 I may use them just to show variation within my designs. 37 00:02:24,760 --> 00:02:29,080 But I'm also using them to communicate with my developers that, you know, these are the different 38 00:02:29,080 --> 00:02:31,570 types of options that we need to think about in code. 39 00:02:32,630 --> 00:02:34,610 So if I were to take a variation of this. 40 00:02:36,020 --> 00:02:40,830 I can easily go ahead and I'll show you what the makeup of this card has. 41 00:02:41,270 --> 00:02:46,040 So if I wanted to say that this card is liked, let's go into my save button. 42 00:02:46,040 --> 00:02:51,980 So you see my I have my product image section, which is like my top layer, and I have my product info 43 00:02:51,980 --> 00:02:54,050 section, which is my bottom layer. 44 00:02:55,240 --> 00:03:00,070 And everything else, and this is also true in Australia, and the reason why I'm using Aurélio in this 45 00:03:00,070 --> 00:03:04,990 instance, this instance is because it isn't going to be responsive in my designs. 46 00:03:04,990 --> 00:03:09,430 I'm only using it like in one screen and I'm showing you how that looks. 47 00:03:10,210 --> 00:03:16,060 But what you could do is if you really wanted to, you can use all the Layo to help space things out. 48 00:03:16,060 --> 00:03:20,260 And then once you're happy with that, you can just turn that off and it'll just automatically revert 49 00:03:20,260 --> 00:03:23,620 to another frame, a regular frame with the same spacing that you've applied. 50 00:03:24,130 --> 00:03:26,010 You just won't get the nice variation of like. 51 00:03:27,110 --> 00:03:32,180 If this copy went over the line, the card would not grow. 52 00:03:33,150 --> 00:03:34,750 That's what I really love about Autolib. 53 00:03:35,450 --> 00:03:41,150 Anyways, let's get into a very different type of ways we can customize this card. 54 00:03:41,280 --> 00:03:46,830 So if I was thinking about this heart, I may want to fill it. 55 00:03:47,340 --> 00:03:48,870 So I have hearts. 56 00:03:49,350 --> 00:03:56,100 I want 24 pixel heart, and I'm just going to fill that with a red accents or someone to think about 57 00:03:56,100 --> 00:03:57,170 what images I have. 58 00:03:57,180 --> 00:04:00,000 So I've set it up in a way where I have a lot of variation. 59 00:04:00,330 --> 00:04:08,340 I have electronics, I have music, I have books so far to turn that off like music. 60 00:04:08,350 --> 00:04:12,030 So there's different ways we can turn all these on and off. 61 00:04:13,980 --> 00:04:20,090 So I have like a record player, I have like different types of CDs or Vinals. 62 00:04:23,350 --> 00:04:28,900 If you wanted to show, like, fashion, I have let's get into that. 63 00:04:29,350 --> 00:04:31,420 I have different variations. 64 00:04:31,430 --> 00:04:32,860 I have glasses. 65 00:04:32,860 --> 00:04:34,030 I have shoes. 66 00:04:36,810 --> 00:04:39,480 I have Schertz. 67 00:04:43,800 --> 00:04:51,810 So what I've done is I've used that plugin called Remove Background to create easy ways for us to have 68 00:04:51,810 --> 00:04:58,860 like a nice pale background, this nice grey background and have just the image of, like, the product 69 00:04:58,860 --> 00:05:00,840 that we are trying to show. 70 00:05:01,350 --> 00:05:05,760 So let's see what what we have here for electronic stuff, like a ultraright screen monitor that's really 71 00:05:05,760 --> 00:05:06,450 ultraright. 72 00:05:07,080 --> 00:05:17,690 I have like a VR kit, I have a MacBook, I have both headphones, I have an iPhone in here, Xbox ILIE 73 00:05:17,700 --> 00:05:20,850 Controller and I have airports. 74 00:05:21,450 --> 00:05:28,740 So say if I were to use the Xbox controller, Xbox elite controller. 75 00:05:29,640 --> 00:05:35,220 And, you know, we're in Canada over here, so this is going to be really overpriced maybe I think 76 00:05:35,220 --> 00:05:37,260 it's like maybe one hundred dollars, I don't know. 77 00:05:37,590 --> 00:05:38,760 And we have a description. 78 00:05:40,640 --> 00:05:47,330 This controller is going to change your life. 79 00:05:49,440 --> 00:05:53,220 Mainly because it is also so. 80 00:05:54,850 --> 00:06:01,030 I can also change like the category I can say something along the lines of this is in Jamie. 81 00:06:02,140 --> 00:06:07,150 Oh, maybe this can fit into two categories, maybe if I want to just kind of. 82 00:06:13,190 --> 00:06:20,180 You know, I'm more I wanted to that's up to you what you think is best for the product. 83 00:06:20,330 --> 00:06:26,750 It may just be best to kind of narrow it down to just the one totally up to you and totally what's best 84 00:06:26,750 --> 00:06:27,320 for the product. 85 00:06:27,650 --> 00:06:30,570 So I can also change the number here. 86 00:06:30,860 --> 00:06:34,190 There's four and there is maybe it's a four star. 87 00:06:34,610 --> 00:06:39,740 And their reviews are like there's like two thousand and thirty four reviews. 88 00:06:40,250 --> 00:06:44,040 So different ways that you can kind of customize that card. 89 00:06:44,180 --> 00:06:46,730 I've also created like smaller horizontal carts. 90 00:06:46,910 --> 00:06:48,650 You'll see that there is a sale. 91 00:06:48,650 --> 00:06:51,500 I don't have a sale here just because there's not enough screen real estate. 92 00:06:51,750 --> 00:06:55,550 I did give myself enough for like maybe like a staff pick, but. 93 00:06:57,030 --> 00:07:01,650 On the smart cards, these bully boys like on category pages where we're just kind of stacking them 94 00:07:01,650 --> 00:07:05,630 in the grid and these cards are much smaller just in nature. 95 00:07:07,400 --> 00:07:11,340 So that is what I've done for just my standard vertical cards. 96 00:07:11,600 --> 00:07:14,480 I've also created horizontal cards, so I've even broken these down. 97 00:07:14,510 --> 00:07:16,120 So these are more like standard. 98 00:07:16,130 --> 00:07:16,880 Let's remove this. 99 00:07:17,350 --> 00:07:18,980 These are like your vertical cards. 100 00:07:19,330 --> 00:07:21,470 They can be used for different instances. 101 00:07:21,470 --> 00:07:27,910 But when I mean vertical, I mean image on top and the descriptions on the bottom horizontal cards. 102 00:07:27,920 --> 00:07:29,910 I've used them in search results. 103 00:07:30,710 --> 00:07:32,660 So this is my default. 104 00:07:34,450 --> 00:07:36,310 This is my cell version. 105 00:07:37,240 --> 00:07:45,810 And my staff pick version and my sale NSA version, so you see, like the system is very much following, 106 00:07:45,820 --> 00:07:52,150 like a set of rules with these unwritten rules, like everything is placed, like left aligned, similar 107 00:07:52,150 --> 00:07:55,390 over here, my staff picks always going to be on my right side. 108 00:07:55,510 --> 00:07:56,860 Same with my cell. 109 00:07:57,760 --> 00:07:59,710 I'm keeping things incredibly consistent. 110 00:07:59,920 --> 00:08:03,070 While we're creating this design system, we're also creating the language. 111 00:08:04,170 --> 00:08:09,930 So I also have wish-List card, so if something's on my wishlist, I have a default where it is saved, 112 00:08:10,200 --> 00:08:12,750 if I click that, that would remove it from the wish list. 113 00:08:13,350 --> 00:08:15,960 I have more of the important details here. 114 00:08:15,990 --> 00:08:18,270 I care less about if it's a staff pick at this point. 115 00:08:18,280 --> 00:08:20,340 You know, I've already adding it to my wish list. 116 00:08:20,550 --> 00:08:22,710 I care more about its price. 117 00:08:23,810 --> 00:08:28,220 And, you know, maybe it's reviews its category, that kind of information, and I've given it like 118 00:08:28,220 --> 00:08:31,370 a little CTA where it's an add to cart button. 119 00:08:32,290 --> 00:08:37,910 People can easily that to cart, so if there is a price change that is also reflected in this cart. 120 00:08:38,200 --> 00:08:42,610 So like I'm saying, like there are cases where I have a wishlist card, but I don't have to create, 121 00:08:42,610 --> 00:08:46,210 like, unnecessary options that we'll never see. 122 00:08:46,390 --> 00:08:49,980 I don't need to create a static option because we'll never have that option here. 123 00:08:51,610 --> 00:08:58,900 I've also gone ahead and taken this variant, so if you notice was all cards and the wishes cards are 124 00:08:59,110 --> 00:09:02,440 both the same variants of the horizontal product card here. 125 00:09:03,880 --> 00:09:05,890 Now, what makes them work is unallowed. 126 00:09:06,970 --> 00:09:14,560 So if I were to go into my default component here, you'll see that I've actually hidden that primary 127 00:09:14,560 --> 00:09:18,930 button, if I were to show it, everything would just pop right back up and center itself. 128 00:09:19,480 --> 00:09:25,270 So, like I said, create a one based version and allow that to be like your source of truth. 129 00:09:25,270 --> 00:09:27,100 And, you know, iterate on that. 130 00:09:27,640 --> 00:09:31,170 I have a smaller horizontal card, which I'm using for order cards. 131 00:09:31,360 --> 00:09:37,020 So when you have an order that's maybe shipped order in transit, I've created like a little link, 132 00:09:37,030 --> 00:09:40,920 a text link here with a little icon and delivered. 133 00:09:41,500 --> 00:09:45,760 I want people to know that they can click this and interact with it in some way, shape or form, maybe 134 00:09:45,760 --> 00:09:48,670 to see a receipt or maybe to see, like all those order details. 135 00:09:49,270 --> 00:09:54,070 And for my horizontal product cards here, these are more simple where that's just a product name in 136 00:09:54,070 --> 00:09:54,510 a sale. 137 00:09:54,760 --> 00:09:56,470 I'm not worried about anything else at that point. 138 00:09:57,190 --> 00:09:58,930 And I'll show you how that's used in a recipe. 139 00:10:00,230 --> 00:10:05,510 We have our car cars, which are pretty standard, we have our like our default and then our quantity 140 00:10:05,510 --> 00:10:10,550 version, when we swipe left, we can edit the quantity and we have our color cards here. 141 00:10:11,180 --> 00:10:12,120 Very simple. 142 00:10:12,170 --> 00:10:13,760 These are our growing cards. 143 00:10:14,000 --> 00:10:16,190 So they will grow based off of the content. 144 00:10:16,190 --> 00:10:17,900 So if I select a new image. 145 00:10:18,900 --> 00:10:19,450 Well, I'm going to do. 146 00:10:19,510 --> 00:10:21,420 I'm just going to bring this all the way up so we can see. 147 00:10:22,770 --> 00:10:24,090 We have our electronics. 148 00:10:24,120 --> 00:10:27,300 I'm going to hide that, and if I bring in. 149 00:10:29,060 --> 00:10:31,070 A new image will shrink. 150 00:10:32,050 --> 00:10:34,480 Same with fashion, same with. 151 00:10:39,270 --> 00:10:46,680 So I've done the same exact thing for this, so if I wanted to create like a text button or maybe like 152 00:10:46,680 --> 00:10:53,160 this is a checkbox kind of thing, you know, select all the different types of categories that you're 153 00:10:53,160 --> 00:10:53,970 interested in. 154 00:10:53,970 --> 00:10:59,280 And this one could be gaming if I selected an Internet with a yellow background, with the black text 155 00:10:59,280 --> 00:10:59,760 on top. 156 00:11:00,180 --> 00:11:03,150 So just to show it selected, I have a text about button. 157 00:11:03,150 --> 00:11:04,530 I have just a text card. 158 00:11:04,560 --> 00:11:08,400 And I've created these just because I don't know if I'll ever use them. 159 00:11:08,970 --> 00:11:11,790 I don't even think like if I if I were to use something like this. 160 00:11:13,790 --> 00:11:18,380 And there is my variation, I don't think I would use orange, I would probably use something more subtle, 161 00:11:18,380 --> 00:11:20,260 maybe I would use like nice light gray. 162 00:11:20,810 --> 00:11:24,110 So, I mean, you don't have to stick to the colors that you're creating these components. 163 00:11:24,110 --> 00:11:26,270 And they're meant to be used in an industry like. 164 00:11:27,170 --> 00:11:31,730 And then I have a fixed button here, so nothing's going to change as I. 165 00:11:35,220 --> 00:11:40,750 And that's meant to be that way on purpose, so that way I know I'll have maybe two lines of text here 166 00:11:40,750 --> 00:11:44,690 or three lines at most, and these will all be able to say maybe like if I. 167 00:11:45,810 --> 00:11:46,620 Create like a grid. 168 00:11:47,000 --> 00:11:49,170 I'll show you what that looks like. 169 00:11:53,150 --> 00:11:59,120 And they go like, I have a grid that is able to accompany things like just the rest of the page, but 170 00:11:59,120 --> 00:12:04,730 also it really complements if I want to create like a section here that says, like, you know, latest 171 00:12:04,730 --> 00:12:09,040 trends and so on and so forth and just appoint people into other funnels. 172 00:12:09,620 --> 00:12:11,270 So that's how I've set up cards. 173 00:12:11,270 --> 00:12:13,460 And you can see they're incredibly complex. 174 00:12:13,460 --> 00:12:14,890 Like these ones are pretty complex. 175 00:12:15,950 --> 00:12:21,710 But, you know, these are kind of like necessary, especially for argues case, we're using a lot of 176 00:12:21,710 --> 00:12:23,080 cards, especially with products. 177 00:12:23,270 --> 00:12:29,420 There's a lot of descriptions, there are a lot of different elements like prices, oil prices, pills, 178 00:12:29,420 --> 00:12:34,370 reviews, categories, names, buttons, icons, imagery. 179 00:12:34,730 --> 00:12:42,110 So this is an example of a really complex component and how we can use them if we look into our assets. 180 00:12:43,730 --> 00:12:51,710 Just very quickly, we can see we have our cards here and I can see all my different cards, so if I 181 00:12:51,710 --> 00:12:54,860 wanted my larger vertical cards, I'm going to go my vertical. 182 00:12:55,980 --> 00:13:02,250 I'm going to see all the variation, I see large scale, large stuff pick, I want to salekhard and 183 00:13:02,250 --> 00:13:03,360 right there I can. 184 00:13:04,440 --> 00:13:08,510 Go right in and you may be thinking why there are so many different folders. 185 00:13:09,470 --> 00:13:11,310 I mean, if there weren't, it would be a mess. 186 00:13:12,810 --> 00:13:17,250 So have 20 percent off sale, and I can just easily add to that. 187 00:13:18,800 --> 00:13:25,370 If I wanted to, I can take this and be like, OK, I'm creating some sort of recipe and we're going 188 00:13:25,370 --> 00:13:30,080 to do that soon, I'm creating a recipe and I want oh, I don't want another Salekhard. 189 00:13:30,080 --> 00:13:31,520 I actually want a large default card. 190 00:13:31,880 --> 00:13:37,340 And this is where it's so powerful within FEMA to create these variations and easily swap them. 191 00:13:37,910 --> 00:13:39,860 Oh, I don't want another default card. 192 00:13:39,860 --> 00:13:42,360 I want salen stacked deck. 193 00:13:42,380 --> 00:13:44,060 I don't want to sail and stuff pick. 194 00:13:44,420 --> 00:13:46,250 I want just a static. 195 00:13:47,740 --> 00:13:53,020 So, you know, create those variations for those different use cases and you'll see like just like 196 00:13:53,020 --> 00:13:56,890 that, I've created four different variations and I can go in there and select all the different options 197 00:13:56,890 --> 00:13:58,570 and customize them the way I like. 198 00:13:58,570 --> 00:14:03,180 And I'm not going to create a component based off of that, but it just gives me all the options I need. 199 00:14:03,790 --> 00:14:09,520 And that is how I've built out cards for our design system.