1 00:00:00,940 --> 00:00:01,610 Welcome back. 2 00:00:01,630 --> 00:00:08,650 So I gave everyone a big rant about design, fidelity and the proper way to jump into a higher fidelity 3 00:00:08,650 --> 00:00:14,250 designs and just general visual style exploration and all that fun stuff. 4 00:00:14,500 --> 00:00:15,760 And now we're actually going to do that. 5 00:00:16,210 --> 00:00:18,040 What I want to do is I want to start with the home page. 6 00:00:18,040 --> 00:00:22,240 I know big surprise home page, but the reason why I like to start with something like the home page 7 00:00:22,240 --> 00:00:23,680 is not always the home page. 8 00:00:23,680 --> 00:00:28,450 But the reason why I do start with the home page a lot of times is because it's a great place to find 9 00:00:28,450 --> 00:00:33,790 a lot of different types of, you know, elements we may incorporate just throughout the entire app. 10 00:00:34,450 --> 00:00:35,890 I see like cards here. 11 00:00:35,890 --> 00:00:40,420 I just see general variation in terms of typographic elements. 12 00:00:41,680 --> 00:00:44,710 I see other elements like iconography. 13 00:00:45,130 --> 00:00:46,870 I see our main navigation. 14 00:00:46,870 --> 00:00:50,050 And I think like there's also variation of cards here. 15 00:00:50,380 --> 00:00:51,970 We may not even build it like this. 16 00:00:51,970 --> 00:00:54,190 I think we're going to make some changes along the way as well. 17 00:00:54,670 --> 00:00:55,810 And that's something to note. 18 00:00:55,810 --> 00:00:58,960 In general, designs just never really stayed the same. 19 00:00:58,960 --> 00:01:07,000 We're constantly iterating based off of what our feedback is in terms of user feedback, also based 20 00:01:07,000 --> 00:01:09,860 off of what we think is a better design pattern. 21 00:01:09,880 --> 00:01:12,100 So I'm going to make some changes here. 22 00:01:12,100 --> 00:01:17,500 I'm going to jump right into a couple of portions of the homepage and hopefully you design along with 23 00:01:17,500 --> 00:01:17,790 me. 24 00:01:17,950 --> 00:01:22,420 You don't need to copy me directly, but I'm going to show you just some decisions I'll make in terms 25 00:01:22,420 --> 00:01:26,860 of like cards and stuff like that that should help you when you go and create your own. 26 00:01:27,520 --> 00:01:29,650 So let's jump right in. 27 00:01:29,980 --> 00:01:34,600 I think, like I've been talking about this a bunch, and I think we should redo the navigation a bit. 28 00:01:35,020 --> 00:01:40,570 I think these options are fine for now, but I really don't like to search at the very top. 29 00:01:40,990 --> 00:01:48,160 So I think we'll just incorporate it in a way where the user can easily just click at the navigation 30 00:01:48,160 --> 00:01:50,880 portion and they'll pop into it like an overlay. 31 00:01:51,160 --> 00:01:55,810 So let's go ahead and just create like a simple navigation. 32 00:01:56,980 --> 00:01:58,810 So I'm going to just kind of go in here. 33 00:01:59,170 --> 00:02:04,150 But I like to do is just create like a frame that's going to house Arnav. 34 00:02:05,260 --> 00:02:11,830 Let's just rename that to NAV, so we're going to create a little nap, we're here and we're going to 35 00:02:12,070 --> 00:02:13,260 pick some icons. 36 00:02:13,270 --> 00:02:15,350 So I like feather icons. 37 00:02:15,370 --> 00:02:16,070 They're really nice. 38 00:02:16,090 --> 00:02:18,430 So if I go, there's home. 39 00:02:19,850 --> 00:02:21,110 It should drop right in there. 40 00:02:21,140 --> 00:02:21,590 There it is. 41 00:02:21,620 --> 00:02:21,920 There it is. 42 00:02:22,190 --> 00:02:25,040 OK, so home, what else do we have? 43 00:02:26,180 --> 00:02:30,470 I think it would be like undersea or maybe if we just search a part and there it is. 44 00:02:32,000 --> 00:02:36,110 They're perfect's, their search. 45 00:02:37,240 --> 00:02:43,570 And when you're picking icons, I know I went over this before when we went through, like iconography 46 00:02:43,570 --> 00:02:45,690 and stuff like that, just make sure you're very consistent. 47 00:02:45,700 --> 00:02:47,520 You can even create your own like we did. 48 00:02:48,010 --> 00:02:50,710 So we have bookmark. 49 00:02:51,570 --> 00:02:52,430 Orders. 50 00:02:52,470 --> 00:02:54,110 I don't know this. 51 00:02:55,470 --> 00:02:57,230 Do you have anything for orders? 52 00:03:00,100 --> 00:03:05,230 I think, like, sometimes you just need to create your own, and that's fine here. 53 00:03:05,260 --> 00:03:06,760 This one this one can work. 54 00:03:08,950 --> 00:03:09,970 And what's next? 55 00:03:10,360 --> 00:03:11,830 We need a cart there. 56 00:03:11,830 --> 00:03:13,210 It is perfect. 57 00:03:13,450 --> 00:03:14,740 So we got all our icons. 58 00:03:16,000 --> 00:03:19,210 And what we're going to do is we're going to create our own. 59 00:03:19,670 --> 00:03:19,960 All right. 60 00:03:20,000 --> 00:03:21,030 There they are. 61 00:03:22,690 --> 00:03:24,070 We're in a critical navigation here. 62 00:03:25,120 --> 00:03:27,080 OK, so that's the shopping cart. 63 00:03:27,100 --> 00:03:27,820 Perfect. 64 00:03:27,910 --> 00:03:31,210 So these are all twenty four pixels and are they scalable? 65 00:03:31,240 --> 00:03:32,210 No, they're not scalable. 66 00:03:32,830 --> 00:03:33,880 That's totally fine. 67 00:03:34,850 --> 00:03:39,800 What we're just going to do here is we're just going to keep everything the way it currently is. 68 00:03:40,900 --> 00:03:50,800 In terms of the constraints, this should actually scale properly there it is to see how this works 69 00:03:50,800 --> 00:03:51,490 if we scale it. 70 00:03:53,550 --> 00:04:00,080 OK, so we have our icons and I'm just going to kind of place them into our frame for now. 71 00:04:01,890 --> 00:04:08,180 What I'm going to do is I'm going to make the search more prominent as a piece in terms of our navigation, 72 00:04:08,910 --> 00:04:13,620 and I'll tell you in a second, I'm going to do that so we could do Ottilia. 73 00:04:13,660 --> 00:04:21,480 I like doing Autolib just because it's a really easy way to lay everything out within your app and within 74 00:04:21,480 --> 00:04:22,910 frames in general. 75 00:04:22,920 --> 00:04:26,280 So let's do twenty four pixels on the side. 76 00:04:27,700 --> 00:04:31,670 Actually, not let's let's not do an auto layout. 77 00:04:31,720 --> 00:04:34,060 I think the best is just a grid. 78 00:04:34,070 --> 00:04:37,520 So we'll do a five five column grid. 79 00:04:38,170 --> 00:04:40,480 I have some grids in here. 80 00:04:41,760 --> 00:04:43,770 But I think we just got to create our own. 81 00:04:43,800 --> 00:04:46,230 So let's go ahead and create our own grid. 82 00:04:49,320 --> 00:04:52,360 So we're going to choose a college grad right now. 83 00:04:52,380 --> 00:04:58,660 We should just be kind of flying through here because we've done this so much, so we're just going 84 00:04:58,680 --> 00:04:59,290 16. 85 00:05:00,150 --> 00:05:05,370 And once again, I'm kind of working off of that baseline that we we talked about before when we talked 86 00:05:05,370 --> 00:05:06,360 about grades and spacing. 87 00:05:08,170 --> 00:05:10,300 OK, perfect. 88 00:05:11,080 --> 00:05:13,270 Just resize this frame. 89 00:05:14,820 --> 00:05:16,480 So that is nice. 90 00:05:16,510 --> 00:05:17,940 Let's go right in. 91 00:05:19,150 --> 00:05:25,960 And I'm just going to center this, what I like to do is like I'll just go like this perfect. 92 00:05:26,520 --> 00:05:28,450 Then just bring it back to twenty four. 93 00:05:30,300 --> 00:05:34,080 And even if it's not perfect, that's fine. 94 00:05:34,890 --> 00:05:39,270 So we are going to just keep it centered and centered. 95 00:05:40,520 --> 00:05:45,560 So it's going to stick to that same thing over here. 96 00:05:45,710 --> 00:05:53,990 I'm just going to make sure that center is at twenty four and that's going to be actually not the easiest 97 00:05:53,990 --> 00:05:59,900 way to do this is just to kind of select them all and fix the constraints all at once. 98 00:05:59,910 --> 00:06:07,910 So when if this somehow this frame gets resized, we won't have to worry about just general resizing 99 00:06:07,910 --> 00:06:08,390 issues. 100 00:06:09,740 --> 00:06:12,320 So we'll just leave that there, because I'm going to come back to that. 101 00:06:13,930 --> 00:06:16,390 So if you notice, like right now, I'm not really worried about color. 102 00:06:18,150 --> 00:06:21,780 I'm thinking about this hierarchy within the navigation. 103 00:06:23,400 --> 00:06:26,370 And what do we have here, 24 by 24? 104 00:06:28,880 --> 00:06:32,510 And I just want to make sure these are all spaced perfectly within this grid. 105 00:06:34,860 --> 00:06:36,780 May not be perfect, perfect, but close enough. 106 00:06:37,140 --> 00:06:40,440 OK, so what I want to do here is I want to. 107 00:06:41,630 --> 00:06:47,570 It's like to my lips to and I'm going to just create a big circle and I'm going to send that to the 108 00:06:47,570 --> 00:06:48,140 back. 109 00:06:49,790 --> 00:06:57,230 And as you can tell, I have a color style set up, so I'm starting to build out a design system slowly 110 00:06:57,240 --> 00:07:01,040 and I have some primary colors, like I mentioned, I have some UI colors. 111 00:07:01,310 --> 00:07:03,200 And don't worry, we're going to get into this later. 112 00:07:03,500 --> 00:07:07,100 But remember what I told you about just our general color palette. 113 00:07:07,100 --> 00:07:16,250 What we can do is we can go into our color and if we want to reuse it, we can just select that select 114 00:07:16,250 --> 00:07:18,530 creative style and just write your style. 115 00:07:18,770 --> 00:07:23,780 And the easiest way to do that is just to, like, write primary slash. 116 00:07:25,120 --> 00:07:26,180 I'm going to call it gold. 117 00:07:26,600 --> 00:07:28,590 And there it is. 118 00:07:28,640 --> 00:07:30,470 So that's a local style that we have now. 119 00:07:31,430 --> 00:07:35,870 And that's just it's just something that's just really easy to use and will speed up your workflow. 120 00:07:37,400 --> 00:07:40,060 OK, so I'm just going to select that. 121 00:07:40,910 --> 00:07:45,040 So I have a forty eight by forty eight pixel circle. 122 00:07:45,050 --> 00:07:46,880 I'm going to actually go back. 123 00:07:47,980 --> 00:07:52,900 And select that that is a white yes. 124 00:07:53,910 --> 00:07:57,540 OK, I'm going to turn my grid off right now just because it's a little. 125 00:07:59,740 --> 00:08:05,680 A little distracting, so I'm going to select all those and I'm going to just select a nice shade that's 126 00:08:05,680 --> 00:08:06,490 very light. 127 00:08:07,370 --> 00:08:12,760 Remember how we went through just creating neutrals and stuff like that in our color palette? 128 00:08:12,910 --> 00:08:14,890 Similar thing that we're doing right now. 129 00:08:15,550 --> 00:08:19,360 And I think that is pretty good. 130 00:08:20,570 --> 00:08:22,870 And let's just turn on our grid one more time. 131 00:08:24,590 --> 00:08:26,990 So if you want, you can kind of just. 132 00:08:29,320 --> 00:08:30,850 Get that nice. 133 00:08:33,690 --> 00:08:41,610 OK, so this is what I was thinking for our navigation, I think I'm going to have to make that a little 134 00:08:41,610 --> 00:08:42,870 smaller. 135 00:08:43,260 --> 00:08:46,830 So I'm just going to go 80 pixels. 136 00:08:46,830 --> 00:08:54,120 You know how all these pieces kind of stick together that needs to be sent to the center. 137 00:08:54,120 --> 00:08:55,940 So remember to always set your constraints. 138 00:08:55,950 --> 00:08:58,020 I mean, it just makes your life so much easier. 139 00:08:59,580 --> 00:09:03,960 OK, so these are all set nicely and I'm going to. 140 00:09:05,350 --> 00:09:09,510 Make sure that everything is centered, so I'm going to scan. 141 00:09:12,510 --> 00:09:14,670 Call this search 142 00:09:16,830 --> 00:09:20,610 background, and I'm just going to. 143 00:09:22,210 --> 00:09:29,410 Group that into a frame and call it a search and what we can do here is we can just like once again, 144 00:09:29,410 --> 00:09:30,250 Sinter Center. 145 00:09:31,610 --> 00:09:34,080 Everything stays together, so I think it is good. 146 00:09:34,100 --> 00:09:36,790 It's also a multiple of our baseline. 147 00:09:37,480 --> 00:09:44,740 I think we are missing one more thing and we're just going to add like maybe like a horizontal rule. 148 00:09:45,230 --> 00:09:47,510 I mean, there's a couple of ways we can do this. 149 00:09:47,550 --> 00:09:48,800 I like using the. 150 00:09:50,920 --> 00:09:53,710 We're using like a rule or you can use like a shadow. 151 00:09:55,820 --> 00:10:01,490 So there's our way too dark, so we're going to come in here and so there you go, like we're starting 152 00:10:01,490 --> 00:10:04,460 to build a NARVO and I'm really I'm really liking it. 153 00:10:11,540 --> 00:10:14,690 I'm just making sure there's enough contrast. 154 00:10:16,230 --> 00:10:21,960 And we start to look like you can start building that fidelity, like we started to use icons that maybe 155 00:10:21,960 --> 00:10:25,950 are much better for our use case just for our general application. 156 00:10:26,370 --> 00:10:32,520 We're starting to also think about like different types of hierarchy within the navigational structure, 157 00:10:32,850 --> 00:10:34,230 whether what is selected. 158 00:10:34,230 --> 00:10:36,060 So we'd be on the home screen right now. 159 00:10:37,320 --> 00:10:43,770 I think another thing that we should be thinking about is like, what is the micro interaction? 160 00:10:45,740 --> 00:10:53,560 For for an active navigation piece, so there's different ways we can do that. 161 00:10:58,630 --> 00:11:00,720 So I'm going to just use like a. 162 00:11:04,510 --> 00:11:11,320 A little line here that will help us just distinguish what is a. what is an active. 163 00:11:12,870 --> 00:11:13,500 Beautiful. 164 00:11:13,530 --> 00:11:18,030 So help me just make sure everything is centered. 165 00:11:20,950 --> 00:11:21,700 Perfect. 166 00:11:22,600 --> 00:11:28,630 OK, so that's how you build a really easy navigation and you can tell based off of what we've been 167 00:11:28,630 --> 00:11:31,770 building over time and some of the decisions that you've seen me make. 168 00:11:31,810 --> 00:11:35,440 I know I made this based off of a gut feeling, not actual user feedback. 169 00:11:35,440 --> 00:11:37,470 And this is just my assumption. 170 00:11:37,480 --> 00:11:43,300 The first thing I would do is I would test this before I make like a big leap to just general design. 171 00:11:43,300 --> 00:11:47,830 And I would test it again once I get here just because I need to make sure that this interaction is 172 00:11:47,830 --> 00:11:48,490 going to work. 173 00:11:48,820 --> 00:11:51,490 So that's it for the navigation. 174 00:11:51,490 --> 00:11:56,260 And the next video, I'm going to get into some other UI elements on this homepage that we have over 175 00:11:56,260 --> 00:11:56,560 here. 176 00:11:56,560 --> 00:11:58,080 This is our just our little wireframe. 177 00:11:58,450 --> 00:12:04,960 So, yeah, meet me back here again and we will jump right into designing some other elements.