1 00:00:00,610 --> 00:00:02,080 Hey, everyone, and welcome back. 2 00:00:02,290 --> 00:00:09,490 So what we're going to do today for this little kind of video, we are going to actually prototype some 3 00:00:09,490 --> 00:00:12,680 micro interactions for our navigation. 4 00:00:12,910 --> 00:00:17,860 So if you remember, we were working on some visual style exploration and this is where we kind of left 5 00:00:17,860 --> 00:00:20,290 off in terms of our home screen. 6 00:00:20,710 --> 00:00:26,390 Now, I'm actually going to just delete everything here and I'm going to just keep our nav. 7 00:00:26,410 --> 00:00:29,150 I think that's a good place to start for now. 8 00:00:29,170 --> 00:00:32,320 Anyways, we're going to just bring that up. 9 00:00:33,720 --> 00:00:35,850 And what I want to do here is. 10 00:00:37,010 --> 00:00:41,060 Let's actually take our NAV out, I'm going to just duplicate it. 11 00:00:41,090 --> 00:00:43,450 I'm going to just work on the NAV right here for now. 12 00:00:44,030 --> 00:00:46,340 So let's just hide that. 13 00:00:47,570 --> 00:00:49,610 Let's bring this color. 14 00:00:50,520 --> 00:01:03,260 OK, I'm going to just detached, like wrap that and OK, so we have our little nav and you know, for 15 00:01:03,260 --> 00:01:10,610 the sake of this this little test, what I'm going to do is I'm just going to bump this all the way 16 00:01:10,610 --> 00:01:11,780 up to, I think. 17 00:01:12,880 --> 00:01:15,460 One hundred is going to be fine. 18 00:01:18,460 --> 00:01:22,480 I'm going to bring them up and this is going to be enough to work with so what I want to do is I want 19 00:01:22,480 --> 00:01:24,930 to create a couple of different interactions here. 20 00:01:24,940 --> 00:01:29,290 I mean, I know we're all mobile, but I want to show some of our interactions as well, some clicking 21 00:01:29,290 --> 00:01:35,520 interactions, just different examples of things we can do and what's in the realm of possibility. 22 00:01:35,920 --> 00:01:40,210 So what I'm going to do is I'm going to just like my text while I'm going to just write something and 23 00:01:40,210 --> 00:01:40,870 write home. 24 00:01:42,610 --> 00:01:45,580 Um, let me just detach that. 25 00:01:45,590 --> 00:01:50,810 So I'm going to do is I can do that's a little too big. 26 00:01:50,830 --> 00:01:52,150 So we got home. 27 00:01:58,090 --> 00:01:59,090 Perfect. 28 00:02:00,720 --> 00:02:07,540 Let's just change one hundred percent so I have home over here and I'm going to actually make that a 29 00:02:07,540 --> 00:02:14,230 frame and just call it home will still be our other frame there. 30 00:02:14,830 --> 00:02:20,820 So we're going to call that home and that I want to have pop in over there. 31 00:02:21,130 --> 00:02:22,460 So I'm just gonna leave that there for now. 32 00:02:23,350 --> 00:02:30,580 So this is just going to be just an auto layout we got home in there. 33 00:02:30,610 --> 00:02:31,600 Perfect. 34 00:02:31,840 --> 00:02:33,120 Let's keep that centered. 35 00:02:34,270 --> 00:02:37,030 I'm going to create another one and another one. 36 00:02:37,030 --> 00:02:37,810 And another one. 37 00:02:39,990 --> 00:02:40,600 Perfect. 38 00:02:40,890 --> 00:02:43,680 So this one is going to be wish-list. 39 00:02:44,520 --> 00:02:50,850 This one is going to be orders and this one's going to be cards. 40 00:02:52,110 --> 00:02:55,390 OK, let's rename each frame. 41 00:02:56,190 --> 00:02:57,240 This is important. 42 00:02:57,480 --> 00:02:59,900 So we keep things in order. 43 00:03:02,580 --> 00:03:07,020 So we got all our different just copy in general. 44 00:03:08,190 --> 00:03:09,650 What else can we do here? 45 00:03:10,860 --> 00:03:15,660 We can make copies of these. 46 00:03:17,940 --> 00:03:21,690 Actually, let's keep it like that for now. 47 00:03:22,260 --> 00:03:24,660 Let's just prototype quickly what we got here. 48 00:03:25,320 --> 00:03:29,310 So what we're going to do is on a hover, we're going to like that. 49 00:03:30,350 --> 00:03:30,760 Weird. 50 00:03:30,920 --> 00:03:32,780 OK, let's you on. 51 00:03:34,550 --> 00:03:38,870 I'm going to open an overlay and that overlay is going to be home. 52 00:03:41,620 --> 00:03:50,650 And we can select how we want to feature that, I mean, that can show up right there, that's a little. 53 00:03:52,340 --> 00:03:53,280 Perfect. 54 00:03:53,540 --> 00:04:00,290 So we got home, that's what's going to happen on hover, and that is going to be a dissolve. 55 00:04:01,160 --> 00:04:04,370 That's OK, let's see what that looks like, actually. 56 00:04:04,820 --> 00:04:11,110 So what I want to do is I want to just do you see that is a micro interaction. 57 00:04:11,210 --> 00:04:14,600 We're going to hover, boom, hover gone. 58 00:04:16,470 --> 00:04:18,710 So really nice feedback we're getting there. 59 00:04:21,800 --> 00:04:26,900 Just changing the background colour, and we're going to do that for everything else as well. 60 00:04:27,920 --> 00:04:30,800 So on, however, we are going to. 61 00:04:32,160 --> 00:04:40,280 That's just shoot while hovering, we are going to do that dissolve, we're going to navigate open overlay, 62 00:04:40,320 --> 00:04:47,490 we are going to keep that to manual and eight pixels just below. 63 00:04:48,940 --> 00:04:53,250 And Senad, so we're going to do that and we'll just do that for this one as well. 64 00:04:53,890 --> 00:04:59,470 So what we're seeing here is just a very, very simple micro interaction on hovering. 65 00:05:01,420 --> 00:05:04,080 Let's do that. 66 00:05:04,090 --> 00:05:04,720 So. 67 00:05:05,680 --> 00:05:11,650 He got eight pixels and let's finally do it for Cartes as well. 68 00:05:12,070 --> 00:05:15,430 So we got unclick while hovering. 69 00:05:16,800 --> 00:05:23,550 Open overlay, customer manual, so you can overlay any which way you want. 70 00:05:23,580 --> 00:05:27,150 I'm doing manual because I wanted to be perfectly centered. 71 00:05:28,940 --> 00:05:31,940 OK, I'm trying to get it perfectly centered, but. 72 00:05:35,090 --> 00:05:37,250 OK, let's take a look at our micro interaction. 73 00:05:38,280 --> 00:05:40,170 That's looking sharp. 74 00:05:43,570 --> 00:05:44,330 I really love it. 75 00:05:44,350 --> 00:05:46,040 So that is a micro interaction. 76 00:05:46,060 --> 00:05:47,860 Let's see if we can bump up. 77 00:05:50,160 --> 00:05:56,760 That's really why, but it's all right, so we got our wish list, our home, our orders and our cards. 78 00:05:57,340 --> 00:06:07,110 Now what we can try and do is we can actually make the actual icons come in and darken. 79 00:06:07,560 --> 00:06:09,320 So well, images. 80 00:06:09,330 --> 00:06:11,160 I'm going to also. 81 00:06:14,140 --> 00:06:16,110 So there's a couple of ways we can actually do this. 82 00:06:18,470 --> 00:06:23,030 So I'm going to just take all this and delete. 83 00:06:32,730 --> 00:06:37,960 OK, so let's go back to design, so we're just going to set this up really nicely and quickly, we 84 00:06:37,980 --> 00:06:42,980 are going to make these a vertical and I'm going to drop that in there. 85 00:06:44,260 --> 00:06:49,100 I'm going to drop that in there and I'm going to drop that one in there, OK? 86 00:06:49,920 --> 00:06:50,800 Oh, no. 87 00:06:56,060 --> 00:06:59,750 So as you can tell, what I'm doing is I'm just. 88 00:07:06,590 --> 00:07:15,000 Beautiful and let's select all of these and make the spacing between items eight pixels. 89 00:07:16,310 --> 00:07:21,510 So what happens is perfect. 90 00:07:22,880 --> 00:07:28,340 They're all going to turn black and let's see what the animation will look like. 91 00:07:28,370 --> 00:07:33,770 So when I do that, what's going to happen is I'm going to have to just overlay that. 92 00:07:35,900 --> 00:07:37,490 Over my. 93 00:07:38,360 --> 00:07:38,700 OK. 94 00:07:38,720 --> 00:07:40,220 That's that's fine for now. 95 00:07:40,880 --> 00:07:42,450 Same thing over here. 96 00:07:42,470 --> 00:07:46,970 I want to bring that up. 97 00:07:47,960 --> 00:07:54,740 For some reason, it is not a line and but that's OK and I'm going to bring this one up to nice. 98 00:07:54,950 --> 00:07:55,930 That's good. 99 00:07:55,940 --> 00:07:59,810 And this one I'm going to bring you here. 100 00:08:00,020 --> 00:08:02,540 So let's click on that. 101 00:08:05,120 --> 00:08:06,850 OK, so that one's perfect. 102 00:08:07,340 --> 00:08:13,250 OK, so let's take a look at our record interaction so as you can tell, when we hover over, we're 103 00:08:13,250 --> 00:08:15,950 getting that nice little black overlay. 104 00:08:16,430 --> 00:08:18,800 It's a little shaky on these, but that's fine. 105 00:08:19,820 --> 00:08:23,930 And now we can see just the actual the label as well. 106 00:08:24,760 --> 00:08:25,730 So that's really nice. 107 00:08:26,270 --> 00:08:32,280 In our next video, we're actually going to jump in and animate this search experience over here. 108 00:08:32,330 --> 00:08:39,230 We're going to work on the micro interaction for what happens when we actually click on this or even 109 00:08:39,230 --> 00:08:39,800 hover on it. 110 00:08:40,010 --> 00:08:44,660 So that is it for hovering on each navigation item.