1 00:00:00,450 --> 00:00:01,230 Welcome back. 2 00:00:01,260 --> 00:00:06,100 So in our last video, we talked about hierarchy and just style exploration for our cards. 3 00:00:06,480 --> 00:00:13,380 We did some very interesting stuff in terms of our image over here, even though we kind of admitted 4 00:00:13,380 --> 00:00:16,410 to ourselves that this may not be a scalable feature. 5 00:00:16,770 --> 00:00:22,490 We also talked a lot about just typography in the hierarchy that we have within our card. 6 00:00:22,830 --> 00:00:30,200 So we started working with what we wanted to be like in terms what we wanted to be the main source of 7 00:00:30,420 --> 00:00:32,200 a user's attention. 8 00:00:32,220 --> 00:00:38,550 So when I first come to this card, the first thing that pops to me is the actual price I made stand 9 00:00:38,550 --> 00:00:41,920 out much more in comparison to the product, the product name. 10 00:00:42,390 --> 00:00:46,620 We also added just some description content over here. 11 00:00:46,630 --> 00:00:52,830 But as you can tell, there is a bunch of great hierarchy here in terms of color between something like 12 00:00:52,830 --> 00:00:58,680 this, but also in terms of just size within elements. 13 00:00:59,220 --> 00:01:01,240 So I have larger cards here. 14 00:01:01,260 --> 00:01:04,440 The next thing I want to do is I want to think about like just user interest. 15 00:01:04,450 --> 00:01:09,150 So that's a big part of this current application that we're building for habitual. 16 00:01:09,160 --> 00:01:11,910 So we haven't really touched upon that a lot. 17 00:01:11,910 --> 00:01:13,980 And that's what I want to do next. 18 00:01:14,550 --> 00:01:17,640 So I'm just going to make sure that's affixed to the bottom. 19 00:01:20,190 --> 00:01:28,020 OK, let's just bring this just a little bit more so I'm kind of like I'm digging this this style a 20 00:01:28,020 --> 00:01:33,330 bit, we may not go with this color in the background, even though it's pretty interesting, but let's 21 00:01:33,330 --> 00:01:35,730 think about some other elements that we could build. 22 00:01:36,330 --> 00:01:46,800 I'm going to steal one of these elements, bring it out, and I'm going to have a section maybe called 23 00:01:46,800 --> 00:01:48,000 Like Your Interests. 24 00:01:49,310 --> 00:01:52,850 And over here, I'm going to change that. 25 00:01:55,860 --> 00:01:57,540 To become more bolded. 26 00:02:02,310 --> 00:02:07,680 Did copy, and I may have another that says like. 27 00:02:09,440 --> 00:02:19,160 See more and I don't know if I have an underlying style, so when I'm creating these textiles, I may 28 00:02:19,160 --> 00:02:22,550 have underlying styles, I may have all that kind of stuff. 29 00:02:22,560 --> 00:02:23,360 I do have a link. 30 00:02:23,360 --> 00:02:23,990 I think I do. 31 00:02:24,000 --> 00:02:24,410 Yes. 32 00:02:24,410 --> 00:02:25,430 Perfect. 33 00:02:26,070 --> 00:02:29,090 I try to create like for different use cases. 34 00:02:29,090 --> 00:02:37,220 I'm not to like strict, but I want to set some stuff up early just so it makes my life so easy. 35 00:02:37,500 --> 00:02:42,140 OK, and for the I mean we can maybe make that yellow. 36 00:02:42,770 --> 00:02:47,810 I don't want to have our page, you know, exploding with color. 37 00:02:47,810 --> 00:02:51,240 I want to keep things really simple because just the nature of our product. 38 00:02:51,260 --> 00:02:52,130 Let's take a step back. 39 00:02:52,130 --> 00:02:57,170 If we think about our product, there's a lot of images in terms of product images that could introduce 40 00:02:57,170 --> 00:02:59,960 a bunch of color that we can't necessarily control. 41 00:03:00,140 --> 00:03:04,160 And if we start splashing color everywhere, it'll muddy down the experience. 42 00:03:04,160 --> 00:03:10,040 It'll make it really, really amateurish in a way, make it seem kind of childish. 43 00:03:10,040 --> 00:03:14,400 So, you know, think about that when you're incorporating color. 44 00:03:14,420 --> 00:03:16,340 I'm just kind of using like a dark yellow. 45 00:03:16,370 --> 00:03:18,260 I know that's accessible. 46 00:03:18,860 --> 00:03:20,990 So this shouldn't expand beyond here. 47 00:03:21,830 --> 00:03:24,920 And this is fine where it currently is. 48 00:03:25,580 --> 00:03:27,290 It's going to set the constraints on that. 49 00:03:27,680 --> 00:03:29,630 And we're going to use I'm just going to grip this in a frame. 50 00:03:29,960 --> 00:03:34,970 I like to keep things really neat while I'm designing. 51 00:03:36,230 --> 00:03:39,170 So that way, like I can reuse all these types of things. 52 00:03:39,170 --> 00:03:41,660 I've title and 53 00:03:44,180 --> 00:03:44,570 link. 54 00:03:44,570 --> 00:03:50,830 So this link is going to push them to like a new page, possibly more beautiful. 55 00:03:51,260 --> 00:03:53,960 Next one we're going to do is I'm going to think about like your interest. 56 00:03:53,960 --> 00:04:01,520 So I want a little kind of feature that maybe has little cards in there where users can just like maybe 57 00:04:01,520 --> 00:04:02,570 swipe through. 58 00:04:03,350 --> 00:04:07,250 So we're going to do is I'm going to create like a larger frame. 59 00:04:10,750 --> 00:04:15,470 OK, and I'm just going to give it a radius of like 10 pixels. 60 00:04:15,490 --> 00:04:19,450 I want to give it a feel of like white. 61 00:04:20,780 --> 00:04:29,500 And in effect, oh, see, I have like I have shadows here built as well, which is a great so we have 62 00:04:29,510 --> 00:04:31,000 large shadow. 63 00:04:31,040 --> 00:04:31,590 Look at that. 64 00:04:31,610 --> 00:04:32,210 Perfect. 65 00:04:32,210 --> 00:04:36,510 So you can even make your effect's shadows and we're going to get into all that much later. 66 00:04:36,560 --> 00:04:39,200 This is just so it speeds up my workflow. 67 00:04:39,200 --> 00:04:40,730 It'll speed up your workflow. 68 00:04:41,090 --> 00:04:45,320 Don't get married to anything too early, but we'll have something we can work with. 69 00:04:45,320 --> 00:04:48,350 So that's a really subtle, really beautiful. 70 00:04:48,500 --> 00:04:51,080 The way that car just kind of pops up just a little bit. 71 00:04:51,440 --> 00:04:56,150 We can start thinking about, you know, do we want our elements to be really flat like this or do we 72 00:04:56,150 --> 00:04:59,410 want to actually start building cars that have actual shadow? 73 00:04:59,840 --> 00:05:03,200 So I know I'm mixing and matching a bit here, and that's totally fine. 74 00:05:03,260 --> 00:05:06,290 I mean, this is totally about exploring what our options are. 75 00:05:06,920 --> 00:05:12,140 But I want to start thinking about what cars can look like as well, like these types of cards. 76 00:05:13,370 --> 00:05:16,220 It could translate to me building out this card differently in the future. 77 00:05:16,790 --> 00:05:21,680 OK, so what I'm going to do here is I'm going to give this an actual layout grid. 78 00:05:22,820 --> 00:05:27,740 I don't think I have a little grid for this, so I'm just going to create one from scratch and I'm going 79 00:05:27,740 --> 00:05:30,230 to go to columns and just give it like three. 80 00:05:31,160 --> 00:05:39,080 Three simple columns will have a margin of 16 pixels and GUTTA 16. 81 00:05:41,100 --> 00:05:41,960 OK. 82 00:05:43,070 --> 00:05:50,210 Perfect, and I'm just going to steal this, bring it into my frame. 83 00:05:53,470 --> 00:05:57,430 So this can be like a little navigation that we can build. 84 00:05:58,860 --> 00:06:00,090 So we have gaming. 85 00:06:01,340 --> 00:06:08,300 I know we're kind of just defaulting to stuff like that, but it really helps just to think about the 86 00:06:08,300 --> 00:06:09,860 different types of options we can have. 87 00:06:10,280 --> 00:06:17,870 So if I think about this as a container, you could have multiple things like that. 88 00:06:18,530 --> 00:06:20,270 Maybe tech is one of them. 89 00:06:21,110 --> 00:06:21,980 Travel? 90 00:06:21,980 --> 00:06:22,640 I don't know. 91 00:06:23,000 --> 00:06:25,280 I'm just kind of a spitball in here. 92 00:06:25,820 --> 00:06:33,110 And when I'm going to do is I'm going to actually make this a frame and call this like my nav and we 93 00:06:33,110 --> 00:06:39,950 can do all the layout on it and we can space it by like forty eight pixels so we can have like a carousel 94 00:06:39,950 --> 00:06:41,060 thing going on here. 95 00:06:42,000 --> 00:06:46,340 Like I can have another one that bleeds off, as you can tell, like I have a clipping content. 96 00:06:46,340 --> 00:06:51,260 So anything that bleeds off it will not show up. 97 00:06:51,270 --> 00:06:52,700 So I have education. 98 00:06:53,600 --> 00:06:59,510 So this is fine for just like a dynamic nav that we can swipe through. 99 00:07:03,730 --> 00:07:10,030 We're going to make a line just to let the user know that, hey, you were on this line sorry, this 100 00:07:10,240 --> 00:07:10,810 section. 101 00:07:14,720 --> 00:07:20,990 OK, and what we're going to do next is we're actually going to have some, like, product images in 102 00:07:20,990 --> 00:07:25,910 here, possibly, woops, that was too large. 103 00:07:26,300 --> 00:07:31,670 So, you know, I'm probably just going to take this and make a copy of that. 104 00:07:33,030 --> 00:07:34,320 Bring it in to hear. 105 00:07:35,320 --> 00:07:41,140 Just to show you what it could look like, so we're starting to think about like just like style from 106 00:07:41,140 --> 00:07:47,770 the perspective, just different types of styles like we have like this full image instead of this. 107 00:07:48,020 --> 00:07:50,970 And I'm going to start to see, like, you know, what do I like more? 108 00:07:52,330 --> 00:07:56,020 What's something that I should probably take into account? 109 00:07:57,430 --> 00:08:02,080 OK, so we've been going with a price as the larger. 110 00:08:05,760 --> 00:08:11,760 The larger element, and we can stick with that, I guess the more prominent element. 111 00:08:15,220 --> 00:08:20,380 So we have product name when I'm going to do is I am going to Jerse. 112 00:08:21,960 --> 00:08:22,410 So. 113 00:08:24,480 --> 00:08:31,030 Perfect, and I'm just going to make sure that's there and this is not going to bleed on that. 114 00:08:31,500 --> 00:08:33,630 So this is going to be a frame. 115 00:08:35,300 --> 00:08:41,150 I know there's a lot of frames, right, and that's just so we keep things really clean and it helps 116 00:08:41,150 --> 00:08:45,020 us as we build fidelity, we can easily edit all these different types of things. 117 00:08:46,520 --> 00:08:51,010 Like once we start building our design system, we can start thinking more about where the different 118 00:08:51,230 --> 00:08:52,910 elements we need, where the sizes. 119 00:08:52,920 --> 00:08:59,060 Oh, I have this already built within a frame so I can just pull this from that and just reuse and make 120 00:08:59,060 --> 00:09:00,650 a much more consistent design. 121 00:09:01,700 --> 00:09:03,830 So we've got product details. 122 00:09:04,730 --> 00:09:05,630 Beautiful. 123 00:09:07,220 --> 00:09:09,010 Let's make that auto layout. 124 00:09:09,410 --> 00:09:10,720 I mean, I like using our layout. 125 00:09:10,740 --> 00:09:12,080 You don't need to use all layout. 126 00:09:16,220 --> 00:09:19,100 Like in this case we can probably get away with just like zero. 127 00:09:20,750 --> 00:09:22,640 Um, OK. 128 00:09:22,640 --> 00:09:27,740 What else we have here so we can even make this a frame. 129 00:09:27,890 --> 00:09:34,430 We don't have to make it out a little because it is adhering to our larger frames layout grid and we 130 00:09:34,430 --> 00:09:35,390 can just call this 131 00:09:38,030 --> 00:09:38,870 small card. 132 00:09:38,870 --> 00:09:40,820 So we're starting to see like the details. 133 00:09:40,820 --> 00:09:44,540 And I'm not having a description over here because it's way too small. 134 00:09:44,700 --> 00:09:49,970 If there is a sale, then I have to think about what that looks like as well on this card. 135 00:09:51,290 --> 00:09:54,590 So making sure this is Sinton. 136 00:09:56,020 --> 00:10:00,040 This will be only affected by the left and this should only be affected by the right. 137 00:10:00,670 --> 00:10:02,200 So if I start to move this. 138 00:10:07,460 --> 00:10:12,080 Interesting, that's just because of the Autolib, so that's another thing, although isn't necessarily 139 00:10:12,080 --> 00:10:13,970 responsive, so keep that in mind. 140 00:10:13,970 --> 00:10:16,910 I'm not worried because I'm using mobile only. 141 00:10:19,810 --> 00:10:23,380 So 16 pixels, perfect spacing. 142 00:10:27,780 --> 00:10:32,100 And now we can actually start spacing the whole thing, we can use the for this whole thing if we wanted 143 00:10:32,100 --> 00:10:32,340 to. 144 00:10:33,330 --> 00:10:35,520 So I'm actually going to. 145 00:10:39,450 --> 00:10:39,930 That. 146 00:10:41,080 --> 00:10:43,480 I'm I can actually use Autolib, but. 147 00:10:55,450 --> 00:11:00,580 If I go up here and I hold a shift and down, I'm going to move in increments of four 148 00:11:04,900 --> 00:11:06,610 and I can just. 149 00:11:10,040 --> 00:11:14,390 He's the position this so we have enough space. 150 00:11:14,420 --> 00:11:18,800 OK, so I'm going to turn off my grid because I can't really see what I've been doing. 151 00:11:19,220 --> 00:11:22,730 So we're going to create hierarchy within this this level of YNAB. 152 00:11:25,960 --> 00:11:30,490 And as you can tell, like we started to create something really interesting here, like maybe this 153 00:11:30,490 --> 00:11:37,540 is like a year interest card and what happens here is that for each of your interests, they'll provide 154 00:11:37,540 --> 00:11:40,630 like the top three products so you can just swipe through. 155 00:11:41,260 --> 00:11:43,810 So very interesting feature that we built. 156 00:11:43,810 --> 00:11:49,720 And I'm starting to like this kind of exploration in terms of very nice, subtle shadow of the card. 157 00:11:49,720 --> 00:11:55,480 I may actually go back to this card and update that this probably needs like a maybe a light stroke 158 00:11:56,020 --> 00:11:58,240 or what we can do here is just add that. 159 00:12:00,920 --> 00:12:05,900 Perfect, and maybe we can even think about what the background could look like. 160 00:12:05,930 --> 00:12:07,710 I mean, right now it's standard white. 161 00:12:07,730 --> 00:12:10,190 What happens if I just add like a light gray like that? 162 00:12:10,940 --> 00:12:12,490 Things look a little differently? 163 00:12:12,500 --> 00:12:16,460 What happens if I add a gradient? 164 00:12:16,940 --> 00:12:18,350 So different things to think about? 165 00:12:18,530 --> 00:12:20,440 I think it's perfectly fine right now. 166 00:12:21,080 --> 00:12:26,990 And that's how you create just a little feature from scratch, but also just kind of building upon your 167 00:12:26,990 --> 00:12:31,430 style exploration that we have here, we can start seeing, OK, this may work. 168 00:12:31,430 --> 00:12:33,500 I actually may like these images. 169 00:12:33,930 --> 00:12:38,630 This is the right amount of hierarchy and I'll probably go back and test with users on this to see if 170 00:12:38,630 --> 00:12:40,040 this interaction makes sense. 171 00:12:40,310 --> 00:12:42,260 Like are they swiping on the whole card? 172 00:12:42,500 --> 00:12:45,320 Are they swiping on these little little things? 173 00:12:45,320 --> 00:12:47,750 And now what does this interaction look like? 174 00:12:47,750 --> 00:12:49,030 Is it confusing for them? 175 00:12:49,820 --> 00:12:53,660 But that's how you kind of start to build that level of fidelity. 176 00:12:54,090 --> 00:12:55,340 We're going to keep on doing that. 177 00:12:55,370 --> 00:12:56,570 Our next video.