1 00:00:00,480 --> 00:00:01,140 Welcome back. 2 00:00:01,380 --> 00:00:07,890 So we're going to create a couple a little quick prototypes here, and this is what I usually do when 3 00:00:07,890 --> 00:00:12,930 I'm like just getting out of wireframe, in of wireframe the new interaction or new flow. 4 00:00:13,230 --> 00:00:18,870 I essentially just kind of jump right into Fidelma with my wire frames and I just link some quick things 5 00:00:18,870 --> 00:00:19,250 together. 6 00:00:19,250 --> 00:00:25,200 I sometimes I don't necessarily link together a massive prototype unless I'm trying to test end to end 7 00:00:25,200 --> 00:00:25,950 usability. 8 00:00:25,950 --> 00:00:31,470 But what I usually do is like linked together some flows that make sense. 9 00:00:31,860 --> 00:00:40,530 So what we're going to do is we're going to link together a search experience and then we'll link together 10 00:00:40,530 --> 00:00:42,720 just some navigation pieces. 11 00:00:42,720 --> 00:00:47,880 So we have some places to go and we'll kind of use some of the things we learned, like with scrolling 12 00:00:48,240 --> 00:00:49,350 and stuff like that. 13 00:00:49,740 --> 00:00:51,720 So let's jump right in. 14 00:00:52,170 --> 00:00:56,350 What we're going to start with is our little search. 15 00:00:56,370 --> 00:01:02,350 So what we're going to do is we're just going to click prototype and we are going to do on tap. 16 00:01:02,880 --> 00:01:06,390 So when the user types that we were going to navigate. 17 00:01:07,490 --> 00:01:13,340 To so no scrolling behavior yet, we're going to navigate to search. 18 00:01:15,700 --> 00:01:18,040 Let's call this one search TypePad. 19 00:01:20,690 --> 00:01:26,000 OK, and we're actually going to take this out of here, that's going to be its own frame. 20 00:01:26,720 --> 00:01:33,140 And you know, what we're going to do here is we're just going to go on top. 21 00:01:33,140 --> 00:01:37,220 We're going to go navigate to home. 22 00:01:37,250 --> 00:01:43,190 I was home, boom, perfect and on delay. 23 00:01:44,090 --> 00:01:47,840 So I just want to kind of link together what this search experience could look like. 24 00:01:47,840 --> 00:01:51,470 And this is what I would do if I were working on this client project. 25 00:01:52,430 --> 00:01:54,820 I urge you to kind of get your wire frames. 26 00:01:54,830 --> 00:02:00,650 You can use these wire frames and your resources and you can actually design with me and prototype with 27 00:02:00,650 --> 00:02:00,920 me. 28 00:02:02,790 --> 00:02:08,700 OK, so I have to delay a hundred milliseconds, I think that's fine, we're going to open the overlay 29 00:02:09,090 --> 00:02:11,790 and that overlay is going to be this. 30 00:02:12,390 --> 00:02:16,170 And that's going to come from the it's going to be locked to the bottom center. 31 00:02:17,260 --> 00:02:24,910 You can click outside and close it and the animation, you can have it as move and we can get into animations 32 00:02:25,360 --> 00:02:31,000 in a later lesson when we cover micro interactions and motion and stuff like that, that is going to 33 00:02:31,000 --> 00:02:32,050 be some really cool stuff. 34 00:02:32,050 --> 00:02:33,990 And I'll show you what you can do with Sigma right now. 35 00:02:34,000 --> 00:02:38,860 I don't think it's necessarily needed, but it can help stimulate certain things like quick move ins 36 00:02:38,860 --> 00:02:43,000 and outs and all that kind of stuff in terms of like how things behave on the screen. 37 00:02:43,000 --> 00:02:47,020 You can start thinking about that and you should definitely start thinking about that kind of stuff. 38 00:02:47,380 --> 00:02:53,570 So we're going to have the come up and the behavior on here is OK. 39 00:02:53,590 --> 00:02:57,360 So if I search, I want this to come up again. 40 00:02:57,580 --> 00:02:59,550 So it's going to actually behave like an overlay. 41 00:02:59,560 --> 00:03:04,140 You'll notice that Sigma already does the work for you, which is amazing. 42 00:03:04,630 --> 00:03:05,680 So move in. 43 00:03:06,820 --> 00:03:08,980 OK, perfect. 44 00:03:09,550 --> 00:03:15,490 And what we'll do here is if I do tap on here, I want to actually. 45 00:03:17,180 --> 00:03:18,110 Have this come in? 46 00:03:22,020 --> 00:03:23,850 Yeah, that's fine. 47 00:03:24,240 --> 00:03:27,750 No, actually, I want this to be instant. 48 00:03:29,430 --> 00:03:31,230 Yeah, I think that's cool. 49 00:03:31,920 --> 00:03:33,840 This will link back. 50 00:03:35,260 --> 00:03:42,070 On top, navigate to and it's going to navigate to our home screen perfect. 51 00:03:42,820 --> 00:03:47,410 And if I click on this, actually, you know what? 52 00:03:47,620 --> 00:03:48,790 Let's make a frame. 53 00:03:51,580 --> 00:03:55,160 So I have those of frames will be one large topical area. 54 00:03:55,360 --> 00:03:59,080 We're going to actually go to our search results and they'll be instant as well. 55 00:03:59,740 --> 00:04:01,300 This is going to go back. 56 00:04:02,230 --> 00:04:04,150 To our home. 57 00:04:05,330 --> 00:04:08,130 As well, remember, this is not changing at all. 58 00:04:08,540 --> 00:04:10,720 The only thing that's changing is the content within. 59 00:04:10,730 --> 00:04:14,360 So we kind of have to simulate that behavior a bit. 60 00:04:15,140 --> 00:04:18,410 OK, so this is navigating back to home. 61 00:04:19,160 --> 00:04:21,800 Perfect if we do want to search. 62 00:04:22,130 --> 00:04:24,140 I do want to go back to here. 63 00:04:27,510 --> 00:04:28,670 That looks good. 64 00:04:31,900 --> 00:04:35,190 OK, I think that's good. 65 00:04:35,830 --> 00:04:37,190 Let's take a look at what it looks like. 66 00:04:37,900 --> 00:04:44,890 So as you can see, like once you're done linking together some things, oops, this should go to home. 67 00:04:45,280 --> 00:04:45,900 Perfect. 68 00:04:46,720 --> 00:04:47,650 And yeah, OK. 69 00:04:47,890 --> 00:04:51,900 So you'll notice that once we kind of link together some things, it gets really messy really quickly. 70 00:04:51,910 --> 00:04:57,040 And you can imagine on a larger prototype, it'll just be like complete chaos. 71 00:04:58,030 --> 00:04:59,820 It really depends what your goal is. 72 00:04:59,830 --> 00:05:04,660 I feel like the main use for prototyping is to validate your assumptions, you know, use them with 73 00:05:04,660 --> 00:05:07,060 users, get good feedback from clients. 74 00:05:07,270 --> 00:05:13,150 You don't necessarily need to make like an end to end prototype from beginning to end of all your designs, 75 00:05:13,330 --> 00:05:15,790 especially if you have a large product that it's kind of crazy. 76 00:05:15,820 --> 00:05:20,200 So what I would do is I would kind of break it into pieces, maybe different flows that you want to 77 00:05:20,200 --> 00:05:24,850 highlight things that aren't maybe as clear, like certain interactions, like maybe how this could 78 00:05:24,850 --> 00:05:27,730 play out, especially when you get to the high fidelity stage. 79 00:05:27,730 --> 00:05:31,180 You may want to consider, like, actually. 80 00:05:32,320 --> 00:05:39,370 You know, creating more like in-depth animations and motion, so it's totally up to you and what your 81 00:05:39,490 --> 00:05:45,900 workflow may be, but I would try to avoid creating like a crazy, huge prototype. 82 00:05:45,910 --> 00:05:48,090 I mean, there's not many use cases for it. 83 00:05:48,100 --> 00:05:50,740 The big one would be to show your developers. 84 00:05:50,740 --> 00:05:55,060 But if you're working really closely with them throughout your entire product, like every day in terms 85 00:05:55,060 --> 00:06:01,450 of like your sprints or if you're just working from like the beginning of kick off with the development 86 00:06:01,450 --> 00:06:08,050 team all the way to the end of handoff, you're essentially they know what's going on and you should 87 00:06:08,050 --> 00:06:10,040 be really communicating all these little things. 88 00:06:10,040 --> 00:06:15,370 They shouldn't need to wait all the way till the end of the design process to get like a fully animated 89 00:06:15,370 --> 00:06:18,390 prototype, even though that is pretty cool. 90 00:06:18,420 --> 00:06:19,310 Not going to lie. 91 00:06:20,350 --> 00:06:22,870 So let's take a look at what this looks like. 92 00:06:22,870 --> 00:06:23,800 We're going to play. 93 00:06:24,710 --> 00:06:27,010 Oops, I am still in combat mode over here. 94 00:06:27,500 --> 00:06:31,750 OK, so we're just going to remove that so we can see search. 95 00:06:32,470 --> 00:06:35,110 So I click on Search and there's my keyboard. 96 00:06:35,110 --> 00:06:36,400 I'm actually in click search again. 97 00:06:36,940 --> 00:06:39,520 So I moved in from the right so we can go back and fix that. 98 00:06:40,770 --> 00:06:42,600 So let's just. 99 00:06:44,540 --> 00:06:46,700 I want that to come in from the bottom. 100 00:06:47,000 --> 00:06:49,190 OK, so if we just test that. 101 00:06:52,140 --> 00:06:52,680 Cool. 102 00:06:52,710 --> 00:06:53,890 I love it, OK? 103 00:06:53,910 --> 00:06:59,720 And if we do that, we have our results perfect. 104 00:06:59,730 --> 00:07:02,400 I love it and then we can go back. 105 00:07:03,900 --> 00:07:11,760 If we want or we can actually I think we're missing something really cool here. 106 00:07:14,970 --> 00:07:20,370 Yep, so you should be able to if we think through the flow of this, if I want to search again, I 107 00:07:20,370 --> 00:07:21,290 should be able to search again. 108 00:07:21,720 --> 00:07:24,380 So let's actually do that. 109 00:07:24,390 --> 00:07:26,850 We're going to on tap. 110 00:07:26,850 --> 00:07:33,510 We are going to actually if we link right there, will open the overlay for us again, Perfect's. 111 00:07:35,730 --> 00:07:43,330 And OK, so if I do want to search, actually, I feel like this one should actually go here. 112 00:07:43,770 --> 00:07:45,750 OK, so let's get going. 113 00:07:45,880 --> 00:07:46,730 Let's see what it looks like. 114 00:07:47,520 --> 00:07:48,140 Search. 115 00:07:49,780 --> 00:07:50,430 Love it. 116 00:07:52,890 --> 00:07:55,680 OK, and I'm going to click that. 117 00:07:59,090 --> 00:08:07,580 So that animation is a little wonky, so if I go back and I click that, it should just be instantaneous. 118 00:08:08,190 --> 00:08:14,040 OK, so if I click search, actually, I would probably want to come here maybe. 119 00:08:14,110 --> 00:08:17,140 OK, so, I mean, it's not going to be perfect. 120 00:08:17,150 --> 00:08:21,710 You know, you may want certain things to happen all the time or certain overlays to happen all the 121 00:08:21,710 --> 00:08:22,070 time. 122 00:08:22,070 --> 00:08:26,750 And that's where you kind of just have to have a really good discussion with your developers. 123 00:08:27,860 --> 00:08:28,430 And there we go. 124 00:08:28,430 --> 00:08:30,320 We kind of have like a little product flow. 125 00:08:30,620 --> 00:08:34,820 Where we can do is we can clean this up like we if we do want to have a navigation, stick it to the 126 00:08:34,820 --> 00:08:35,200 bottom. 127 00:08:35,210 --> 00:08:36,980 So remember to fix that positioning. 128 00:08:37,520 --> 00:08:39,710 We can also fix this positioning if we want. 129 00:08:41,360 --> 00:08:42,740 We're going to actually create a frame. 130 00:08:44,510 --> 00:08:45,680 Let's do this. 131 00:08:46,930 --> 00:08:50,770 Perfect, and we're going to fill that with whites. 132 00:08:51,900 --> 00:08:53,680 OK, we're just going to call this heter. 133 00:08:56,090 --> 00:08:56,750 OK. 134 00:08:56,780 --> 00:08:57,910 Boom, boom, boom. 135 00:08:57,980 --> 00:08:58,610 This. 136 00:09:00,930 --> 00:09:02,620 Line 18, Ekso. 137 00:09:03,810 --> 00:09:06,010 OK, perfect. 138 00:09:06,930 --> 00:09:13,740 So that's in there as well, and we can actually fix this to the top so we can yeah, perfect. 139 00:09:14,160 --> 00:09:16,450 We can fix that to the top and I'll show you what that looks like. 140 00:09:17,010 --> 00:09:18,690 So let's go through that search for. 141 00:09:24,630 --> 00:09:30,880 If I were to scroll, I would see that the content goes behind both the header and the footer. 142 00:09:31,290 --> 00:09:32,060 So there we go. 143 00:09:32,070 --> 00:09:34,830 We have our little own search prototype. 144 00:09:35,070 --> 00:09:37,770 If we want to go back, we can go back to the home page. 145 00:09:39,960 --> 00:09:45,240 I mean, this is not perfect by any means, but OK, so we can see that we have our keyboard here, 146 00:09:45,240 --> 00:09:48,060 keyboards, a little weird and wonky, but that's totally cool. 147 00:09:48,690 --> 00:09:51,960 And we can just click a result and it'll bring us to results. 148 00:09:51,960 --> 00:09:53,480 Page Perfect. 149 00:09:54,090 --> 00:09:57,870 So that's an easy way to create like a very quick flow. 150 00:09:59,130 --> 00:10:03,270 In terms of different types of like search interactions that we have. 151 00:10:04,480 --> 00:10:06,430 Actually, we can extend this some more. 152 00:10:08,160 --> 00:10:10,810 So if we do cut that, I would love this to come in. 153 00:10:12,360 --> 00:10:14,430 This could be like navigate to. 154 00:10:14,490 --> 00:10:15,350 It could be interesting. 155 00:10:15,360 --> 00:10:16,130 Doesn't matter. 156 00:10:17,610 --> 00:10:20,880 We could just on topic and go back. 157 00:10:22,110 --> 00:10:24,150 I want this to be stickied. 158 00:10:27,600 --> 00:10:30,580 Perfect, we can even make this sticky, but it's all right for now. 159 00:10:31,050 --> 00:10:32,170 Let's take a look at that one more time. 160 00:10:32,920 --> 00:10:33,230 There we go. 161 00:10:33,240 --> 00:10:34,230 We got two filters. 162 00:10:36,480 --> 00:10:37,000 Boom. 163 00:10:37,170 --> 00:10:43,560 And I would have this be dynamic based off of the different types of filters, so you can even go in 164 00:10:43,560 --> 00:10:44,880 and make a smaller prototype. 165 00:10:45,840 --> 00:10:48,750 This can update based off of that prototype, which is really cool. 166 00:10:49,740 --> 00:10:50,200 OK. 167 00:10:50,220 --> 00:10:50,760 And that's it. 168 00:10:50,760 --> 00:10:54,570 That's how you create a quick prototype within Sigma, just using a quick flow. 169 00:10:54,570 --> 00:10:58,440 And in the next video, we're just going to kind of get a little bit more in depth in terms of like 170 00:10:58,590 --> 00:10:59,940 different types of interactions.