1 00:00:05,040 --> 00:00:07,710 One. 2 00:00:08,300 --> 00:00:09,670 All right guys welcome back. 3 00:00:09,670 --> 00:00:13,420 So the app that we're going to build next is called Audio tangle. 4 00:00:13,750 --> 00:00:22,510 And basically what it is is it is a marketplace that allows musicians to find producers and have those 5 00:00:22,510 --> 00:00:26,910 producers bid on jobs and they can work together. 6 00:00:27,010 --> 00:00:35,440 It may sound a little complicated but what I like to do is grab inspiration from actual real world companies 7 00:00:36,580 --> 00:00:43,240 ideas that have been pitched or are funded because that's going to give you the best understanding as 8 00:00:43,240 --> 00:00:46,510 we go through designing a sap and building this app. 9 00:00:46,510 --> 00:00:52,090 So that is pretty much the premise of the app. 10 00:00:52,270 --> 00:01:01,470 This design designing this application is going to be the most thorough thing that we've done so far. 11 00:01:01,900 --> 00:01:07,470 Basically any button that goes anywhere is going to be tied to a screen. 12 00:01:07,480 --> 00:01:12,040 We're going to make sure that all of our bases are covered because that is what you're going to be doing 13 00:01:12,610 --> 00:01:20,380 prior to developing any app or getting funded or you know pursuing your idea or any kind. 14 00:01:20,380 --> 00:01:29,860 So we are going to there's going to be a full fleshed design and so the three questions just like in 15 00:01:29,860 --> 00:01:31,760 the beginning that we need to answer. 16 00:01:31,900 --> 00:01:38,680 What is the goal of the app the app like I said earlier is a marketplace that allows musicians to find 17 00:01:38,680 --> 00:01:44,800 producers to work with in their area and you know allows them to bid on prices from the producers so 18 00:01:46,690 --> 00:01:49,430 kind of like a marketplace of sorts. 19 00:01:49,720 --> 00:01:53,980 If our app was a person theyd be friendly easygoing and modern. 20 00:01:53,980 --> 00:02:04,950 We want to give it a a new feel refreshed feel from the music industry standard so modern friendly easy 21 00:02:04,950 --> 00:02:05,690 going. 22 00:02:05,710 --> 00:02:11,200 Its not this cutthroat application that is going to hound you for money. 23 00:02:11,260 --> 00:02:16,530 You guys are if you guys understand the music industry theres some pretty dark corners to it. 24 00:02:16,540 --> 00:02:25,540 So we want to get away from that and who will be using our Apso music professionals from 20 to 50 part 25 00:02:25,540 --> 00:02:32,590 time or full time musicians now since it is a marketplace we're most likely going to have younger a 26 00:02:32,590 --> 00:02:39,310 younger demographic that are musicians and then people who are the professionals that are going to be 27 00:02:39,310 --> 00:02:40,860 producing them. 28 00:02:41,020 --> 00:02:43,580 You know might tend to be a little older. 29 00:02:43,720 --> 00:02:54,210 So not to say that there are younger producers or older musicians but generally that is going to be 30 00:02:54,550 --> 00:02:57,580 the break out with a few outliers here and there. 31 00:02:57,580 --> 00:03:05,140 So all right so what we're going to do now is we're going to go to file and we're going to go new from 32 00:03:05,140 --> 00:03:11,520 template just like we did in the previous video and we're going to choose iOS UI design. 33 00:03:11,740 --> 00:03:15,200 And that's going to give us some symbols to work with. 34 00:03:15,200 --> 00:03:19,000 Now let's go ahead and create a page. 35 00:03:19,000 --> 00:03:25,260 We'll call this the feed. 36 00:03:25,810 --> 00:03:30,300 And let's go ahead and insert our first our board so we're going to do our board. 37 00:03:30,300 --> 00:03:35,590 I found seven is fine. 38 00:03:36,250 --> 00:03:43,290 And let's go ahead and start with inserting a tab bar so we're going to go to our symbol 39 00:03:47,000 --> 00:03:53,590 and let's find a bottom bar tab right here we go. 40 00:03:53,760 --> 00:03:56,870 So we're just going to get the layout going. 41 00:03:58,050 --> 00:04:03,750 Let's go ahead and align it horizontally and snap it to the bottom. 42 00:04:04,740 --> 00:04:08,560 So we know that it is right where it needs to be. 43 00:04:09,780 --> 00:04:17,460 And let's also select our board and check this little background color and we're going to make this 44 00:04:17,460 --> 00:04:19,810 kind of an off white. 45 00:04:20,310 --> 00:04:26,400 It's going to be let's just go with EF 3 EF 3 3 which should give us kind of a little gray and you'll 46 00:04:26,400 --> 00:04:32,940 be hearing me say this a lot through the designing of this application. 47 00:04:32,940 --> 00:04:39,270 There are many ways to speak to the importance of things and break things off. 48 00:04:39,330 --> 00:04:46,440 And those two big main things are text sizes and you know Boulding them keeping them regular or light. 49 00:04:46,830 --> 00:04:53,940 So the size and the shape and the fonts as well as using whites and off whites or blacks and off blacks 50 00:04:53,940 --> 00:05:02,520 to to break off certain sections of the screen without a line sometimes using lines are too harsh and 51 00:05:02,610 --> 00:05:04,410 I'll show you what I mean. 52 00:05:04,410 --> 00:05:09,090 As you start building out this screen but something to keep in mind something to definitely take note 53 00:05:09,090 --> 00:05:10,880 of are right. 54 00:05:10,890 --> 00:05:17,080 So let's go ahead and for the navigation bar we've been building them from scratch the entire time. 55 00:05:17,100 --> 00:05:27,330 But let us now insert a symbol navigation bar and we'll go ahead to this one and click subtitle and 56 00:05:27,330 --> 00:05:31,230 let's just go ahead and drag it up to the top as best we can. 57 00:05:31,770 --> 00:05:37,390 If yours isn't perfect you can just go 0 in the X and 0 in the y position. 58 00:05:38,370 --> 00:05:46,980 And let's actually we're going to use this break this off from the symbol and make our own symbol so 59 00:05:46,980 --> 00:05:53,080 go ahead and click and click the stateroom symbol. 60 00:05:53,130 --> 00:05:54,940 So now we can kind of manipulate these. 61 00:05:55,020 --> 00:06:01,950 Let's get rid of the back and click the Add obscurity at it as well. 62 00:06:01,950 --> 00:06:10,950 And what I want to do before we start altering that let's go ahead and insert a status bar. 63 00:06:11,130 --> 00:06:15,600 We'll go ahead and find maybe a white one on a percent battery. 64 00:06:15,600 --> 00:06:20,340 I never like to be on low battery with my phone. 65 00:06:20,820 --> 00:06:29,790 Let's make sure this is 0 0 so lines up and so let's go ahead and click our bar or rectangle and let's 66 00:06:29,790 --> 00:06:34,760 find a color you can choose whatever color scheme you want. 67 00:06:34,770 --> 00:06:39,390 Keep in mind though that we wanted to be friendly inviting and modern. 68 00:06:39,960 --> 00:06:45,210 So something that's going to speak to speak to musicians in that way. 69 00:06:45,210 --> 00:06:54,340 I think a cool cool orange or red might be kind of nice and actually it looks pretty cool. 70 00:06:56,930 --> 00:07:03,080 Be cool to know I'm going to go ahead and go with this color right here. 71 00:07:03,080 --> 00:07:10,020 If you if you want to use this color see all that's a good one. 72 00:07:10,040 --> 00:07:15,570 The hecks is EF 0 7 5 2 8 right here. 73 00:07:15,570 --> 00:07:18,820 And if not go ahead and definitely find a color around. 74 00:07:19,430 --> 00:07:26,120 And I am going to change this up a little bit so I'm going to choose a font 75 00:07:28,610 --> 00:07:31,660 actually the number usually really nice. 76 00:07:31,910 --> 00:07:40,990 I'll keep it size of T and I'm going to make it white and I am going to fold it. 77 00:07:41,210 --> 00:07:44,510 Now what I'll do up here the title is I'll just type in 78 00:07:47,950 --> 00:07:48,520 actually you know what. 79 00:07:48,520 --> 00:07:50,510 Let's leave that let's see that for now. 80 00:07:51,040 --> 00:07:53,320 And in the subtitle. 81 00:07:53,380 --> 00:07:58,230 Let's go ahead change the font. 82 00:07:59,020 --> 00:08:01,450 Well go ahead and keep it. 83 00:08:02,200 --> 00:08:07,390 Size 11 would just make it white and keep it regular. 84 00:08:09,010 --> 00:08:11,770 And now let's go ahead and grab this entire thing. 85 00:08:11,770 --> 00:08:20,650 So this entire navigation bar and I'm going to turn it into a symbol and it'll be subtitled. 86 00:08:20,650 --> 00:08:28,060 Now here's something else so these backslashes actually didn't know the folder in which the symbol was 87 00:08:28,060 --> 00:08:28,450 going. 88 00:08:28,450 --> 00:08:34,110 So for example if you noticed what we did insert symbol. 89 00:08:34,200 --> 00:08:37,480 It went to navigation bar and then we found the subtitle right. 90 00:08:37,480 --> 00:08:45,700 So by having a backslash it's basically saying you're going to find this in the navigation bar. 91 00:08:45,700 --> 00:08:48,820 What do you want to call it right now it's called subtitle. 92 00:08:48,820 --> 00:08:51,340 So I'm going to go ahead and change this to 93 00:08:53,980 --> 00:08:57,490 feed navigation 94 00:09:00,200 --> 00:09:01,010 right. 95 00:09:01,050 --> 00:09:07,120 So now let's go have it go ahead and override our title and subtitle for our title. 96 00:09:07,290 --> 00:09:11,680 We will go ahead and type in producer. 97 00:09:12,390 --> 00:09:18,210 And then for subtitle Let's type tap to change. 98 00:09:18,210 --> 00:09:28,290 So the idea behind this this screen is it's going to be a feed of artists who are posting that they 99 00:09:28,290 --> 00:09:36,210 want worked under their songs and they'll have a bid bid price that producers can go ahead and submit 100 00:09:36,210 --> 00:09:37,260 a bid on. 101 00:09:37,320 --> 00:09:44,820 So if you're a producer what you're going to want to do is you can you can just scroll through and find 102 00:09:44,910 --> 00:09:47,150 find jobs or find work. 103 00:09:47,150 --> 00:09:53,550 And then if you want to change the feed to let's just say the artists or the musicians side it would 104 00:09:53,550 --> 00:09:59,520 just maybe be like a list of producers or something or something that we can easily change from here. 105 00:09:59,520 --> 00:10:04,520 So I will start with the producer the producers feed. 106 00:10:04,530 --> 00:10:09,920 Let's go ahead and save this let's call this audio tangle. 107 00:10:11,760 --> 00:10:20,040 And now let's go ahead into here and let's just change a couple of these so we can get a feel for how 108 00:10:20,040 --> 00:10:21,060 the app is going to flow. 109 00:10:21,090 --> 00:10:24,910 So first on the feed. 110 00:10:25,810 --> 00:10:28,870 So for the second one we can actually have it just be saved. 111 00:10:29,000 --> 00:10:34,570 I think it be cool if there is a way to save our post that you've seen for later. 112 00:10:35,220 --> 00:10:45,710 We'll go ahead and type in inbox the center me for the fourth one starts your profile and then five 113 00:10:45,710 --> 00:10:48,450 will just go ahead and do more. 114 00:10:48,450 --> 00:10:55,720 All right so that is looking pretty good. 115 00:10:56,160 --> 00:10:59,850 So let's go ahead and design out what the feed is going to look like. 116 00:10:59,850 --> 00:11:03,030 Now let's think about this for a second. 117 00:11:03,030 --> 00:11:07,350 So this is most likely going to be in a table view. 118 00:11:07,350 --> 00:11:11,370 What I want to do is let's go ahead and insert a rectangle. 119 00:11:11,650 --> 00:11:21,060 And all right Pulo the navigation bar Alysha snap it over to the right and bring it down roughly 250 120 00:11:21,300 --> 00:11:27,240 points that should give us plenty of space to work with for now. 121 00:11:28,530 --> 00:11:30,780 And let's get rid of the border. 122 00:11:30,960 --> 00:11:37,280 And I want to make this completely white completely white and let's give it a shadow 123 00:11:39,810 --> 00:11:41,880 and that shadow is pretty intense. 124 00:11:41,880 --> 00:11:47,330 I'm going to bring this down to maybe 20 Alpha and you can also use the slider as well. 125 00:11:47,790 --> 00:11:52,800 So this is going to be a cell where the posts are going to live. 126 00:11:52,800 --> 00:11:55,230 Now I want to point something out. 127 00:11:55,230 --> 00:12:00,990 Like I said before I'm using whites and off whites to denote changes. 128 00:12:00,990 --> 00:12:07,080 So what we could have done is just made lines across the screen which would have denoted there was a 129 00:12:07,080 --> 00:12:12,190 change a new cell that wouldn't have looked bad. 130 00:12:12,480 --> 00:12:19,560 But I think that using white and off Whites are a lot more elegant and they're a lot lighter. 131 00:12:19,560 --> 00:12:19,820 Right. 132 00:12:19,830 --> 00:12:25,590 If you can see you know we don't have any lines it's actually just a break of white and off white and 133 00:12:25,590 --> 00:12:31,640 then we're using the shadow to really kind of accentuate the difference. 134 00:12:31,740 --> 00:12:35,910 It just gives it like a really nice and modern feel without having to put lines everywhere. 135 00:12:35,910 --> 00:12:40,310 So this is this is looking great. 136 00:12:40,320 --> 00:12:46,360 So what is a poster going to need. 137 00:12:46,480 --> 00:12:52,030 We're going to have a couple of things we're going to have a picture there name. 138 00:12:52,530 --> 00:12:57,090 Probably some type of description like hey I'm a musician looking for a producer to help me with this 139 00:12:57,090 --> 00:12:59,770 ETM track. 140 00:13:00,270 --> 00:13:04,700 Probably a big number which we want to have stand out. 141 00:13:04,740 --> 00:13:08,800 And then a call to action for our producers if they like what they see. 142 00:13:08,800 --> 00:13:19,110 You know maybe they can save it or place a bid something something to that nature so let us let's go 143 00:13:19,110 --> 00:13:22,630 ahead and insert an oval for the picture. 144 00:13:23,160 --> 00:13:23,580 Let's go ahead. 145 00:13:23,580 --> 00:13:24,870 I'm going to toggle the grid on 146 00:13:27,800 --> 00:13:31,220 and let's make the picture 60 by 60. 147 00:13:31,860 --> 00:13:33,160 That's a nice size. 148 00:13:33,340 --> 00:13:42,150 To get rid of the borders and you know since since it is it's just a placeholder. 149 00:13:42,380 --> 00:13:46,370 You know we don't need to color it in anything specific. 150 00:13:46,370 --> 00:13:54,900 I brought it 20 points from the left edge and then roughly 20 from the top for now. 151 00:13:55,910 --> 00:13:59,240 And let's go ahead and type in the name where the name is going to go. 152 00:13:59,270 --> 00:14:05,610 And the and the let's see the name and maybe like a description so 153 00:14:08,400 --> 00:14:12,140 let's go ahead and type in name and we'll make this left a line. 154 00:14:12,810 --> 00:14:14,560 And I want to bring this up. 155 00:14:14,610 --> 00:14:19,100 So 15 is our header that looks like a nice size limits. 156 00:14:19,590 --> 00:14:24,130 Metro 17 looks like and it's all white. 157 00:14:24,150 --> 00:14:25,020 Can't see anything. 158 00:14:25,020 --> 00:14:29,860 So go ahead and make this a gray. 159 00:14:29,880 --> 00:14:37,480 Here's another perfect example of a gray that is going to look really nice instead of just a dark black. 160 00:14:37,480 --> 00:14:41,100 All right so let's make this 17 161 00:14:43,400 --> 00:14:46,990 and railers fine. 162 00:14:47,480 --> 00:14:51,690 Let's go first and last name. 163 00:14:52,050 --> 00:14:55,500 You know at 17 might be a little big let's just bump this down 15. 164 00:14:55,720 --> 00:14:58,650 That's a look that will look good. 165 00:14:59,030 --> 00:15:00,670 OK. 166 00:15:00,680 --> 00:15:06,440 So and let's also insert a description so maybe there's a place in the profile for us to put 167 00:15:09,390 --> 00:15:14,640 a description or what we could even do is put a genre which would be cool. 168 00:15:14,640 --> 00:15:19,480 So maybe it's just rock you like this. 169 00:15:19,680 --> 00:15:26,070 Shawna rock. 170 00:15:26,250 --> 00:15:36,000 And since this is kind of different and if I were scrolling through I kind of want to scan these specific 171 00:15:36,000 --> 00:15:36,510 things. 172 00:15:36,510 --> 00:15:45,780 I am going to make it so my bold and I'm going to make it the color of this orange 173 00:15:49,840 --> 00:15:54,960 and that looks OK it's pretty good. 174 00:15:55,640 --> 00:16:04,220 All right well we're also going to do is we are going to create a start creating our color palette. 175 00:16:04,220 --> 00:16:14,980 Now what sketch allows us to do is we can go ahead and see where is it we go. 176 00:16:15,040 --> 00:16:15,740 So our. 177 00:16:15,740 --> 00:16:22,700 So if you click a little plus here and I'll actually add this hex to the global colors. 178 00:16:22,840 --> 00:16:30,550 And there's also document colors so global colors will be accessible across projects if you open up 179 00:16:30,550 --> 00:16:34,030 another sketch file you can access your global colors. 180 00:16:34,100 --> 00:16:42,610 I like to use these for things like specific text colors like greys or blacks that I've chosen that 181 00:16:42,610 --> 00:16:48,300 I kind of go to for text things that are going to be specific to the project you're working on. 182 00:16:48,370 --> 00:16:53,200 You'll probably want to keep in document colors so let's go ahead and add new preset right here this 183 00:16:53,200 --> 00:17:01,320 little bottom plus and that's going to add are orange to our color palette. 184 00:17:01,320 --> 00:17:08,790 So now if we're going over here we could have just easily clicked way down there. 185 00:17:09,170 --> 00:17:17,270 You can see it well there goes my screen is too small but it is it is in the document colors. 186 00:17:17,380 --> 00:17:18,030 What we could do. 187 00:17:18,040 --> 00:17:21,190 I'm just going to add it to the global colors for now just so I can see it. 188 00:17:21,260 --> 00:17:29,380 And you guys can see it but that is what it's there for so this is looking good. 189 00:17:29,830 --> 00:17:33,000 Let's go ahead and group these. 190 00:17:33,900 --> 00:17:39,700 So put this in a group and we'll call it post user details. 191 00:17:41,280 --> 00:17:53,000 And now let's hold down shift and click the profile picture and group that let's call it user details. 192 00:17:57,270 --> 00:18:05,440 All right now we're going to do is create the body of the cell so let's insert some text and then some 193 00:18:05,440 --> 00:18:13,590 make something up let's just let's just bring this back to our gray This will probably be a good opportunity 194 00:18:13,740 --> 00:18:16,910 for us to choose a grey. 195 00:18:16,920 --> 00:18:21,470 I think I already have this as forby for me for me 196 00:18:24,330 --> 00:18:26,220 and I'm going to want to make this regular 197 00:18:29,650 --> 00:18:31,360 And let's see what this looks like. 198 00:18:31,360 --> 00:18:34,530 I'm going to bring the size down just to see what it looks like. 199 00:18:36,050 --> 00:18:47,710 And let's go ahead and type I'm looking for a producer to help with down ETM track. 200 00:18:47,710 --> 00:18:48,680 I'm working 201 00:18:53,510 --> 00:18:54,080 one more line. 202 00:18:54,080 --> 00:18:55,750 Let's think of something cool to say. 203 00:18:56,120 --> 00:19:01,730 I am a singer of five years. 204 00:19:02,560 --> 00:19:09,310 And the genre is rocks Let's go and change a stadium just just to be keep ourselves sane here. 205 00:19:09,370 --> 00:19:09,970 OK. 206 00:19:12,250 --> 00:19:13,180 So that's good. 207 00:19:13,210 --> 00:19:16,390 I'm going to bring this up a little bit. 208 00:19:16,590 --> 00:19:24,990 And the last thing are the couple last things is the bid and the call to action so I'm going to drag 209 00:19:24,990 --> 00:19:26,250 us down a little more. 210 00:19:26,250 --> 00:19:28,070 I want the beard to stand out. 211 00:19:29,230 --> 00:19:34,730 And I want people to know where it is at all times right. 212 00:19:34,730 --> 00:19:43,520 So let's go ahead and insert text and I'm going to put the bid right above this description here. 213 00:19:43,530 --> 00:19:53,190 So will go ahead and type budget maybe $500. 214 00:19:53,520 --> 00:19:53,870 Right. 215 00:19:53,880 --> 00:19:57,430 And let's go find a green that we can use. 216 00:19:57,930 --> 00:20:00,750 I have one of these already in here. 217 00:20:00,870 --> 00:20:10,140 Or we can go take our hechsherim or orange and we can go out and find a maybe. 218 00:20:10,260 --> 00:20:19,740 Palatine has a good headset they can spit out for us and we can start with at least. 219 00:20:19,740 --> 00:20:21,390 So here's a cool green. 220 00:20:21,570 --> 00:20:23,470 Why not. 221 00:20:23,610 --> 00:20:26,250 Why not go ahead and copy that Hex. 222 00:20:26,250 --> 00:20:31,830 Let's bring it back over and let's change this color and see if it makes a difference and actually looks 223 00:20:31,830 --> 00:20:35,860 really nice. 224 00:20:37,260 --> 00:20:39,570 I'm going to bold that. 225 00:20:39,570 --> 00:20:40,000 All right. 226 00:20:40,010 --> 00:20:40,560 So 227 00:20:43,460 --> 00:20:51,770 let's go ahead and I want this to be let's see that that's a good size away maybe bring this up just 228 00:20:51,770 --> 00:20:57,030 a little bit away from the description. 229 00:20:57,710 --> 00:21:04,440 And I'm going to slide both these and a line into the left and then I'm going to group them. 230 00:21:04,520 --> 00:21:09,180 So this is going to be the host body. 231 00:21:09,970 --> 00:21:16,510 And then I'm going to drag it over I want to align it to the left edge of the profile picture. 232 00:21:16,510 --> 00:21:19,890 And as you can see it's 15 points from the description. 233 00:21:24,710 --> 00:21:25,310 All right. 234 00:21:25,320 --> 00:21:26,570 This is looking great. 235 00:21:26,570 --> 00:21:30,120 So now we've done a couple of things here. 236 00:21:30,210 --> 00:21:35,820 If you were looking for a specific genre you know exactly where to look as you're scrolling through 237 00:21:35,940 --> 00:21:40,570 you know ETM and maybe we can have a filter on the top right somewhere eventually. 238 00:21:41,040 --> 00:21:41,690 And a budget. 239 00:21:41,690 --> 00:21:48,300 So if you're scrolling through you can quickly just put your eyes in this general area and be able to 240 00:21:48,300 --> 00:21:51,240 see the two things that stand out the genre. 241 00:21:51,240 --> 00:21:56,780 Maybe you're only you only do ETM or Iraq and the budget right. 242 00:21:56,790 --> 00:21:58,820 How much you're going to make if you're a producer. 243 00:21:58,920 --> 00:22:00,610 Pretty cool. 244 00:22:00,660 --> 00:22:05,670 The last thing we're going to do is let's add a call to action. 245 00:22:05,670 --> 00:22:08,910 So we're going to go ahead and insert a shape. 246 00:22:08,910 --> 00:22:16,430 Let's do a rounded rectangle and let's just drag it over here. 247 00:22:17,110 --> 00:22:17,910 Seems like a good 248 00:22:20,710 --> 00:22:21,750 size for a button. 249 00:22:21,760 --> 00:22:28,350 I'm going to get rid of the borders and let's go ahead and make this that green color that we had. 250 00:22:28,420 --> 00:22:29,620 I don't think I saved it. 251 00:22:29,650 --> 00:22:36,150 And I should have saved it but I'm going to go ahead and just grab this green. 252 00:22:36,700 --> 00:22:37,790 That might be a little harsh. 253 00:22:37,790 --> 00:22:39,580 We'll go ahead and edit that later. 254 00:22:40,360 --> 00:22:42,580 And I'm going to insert text. 255 00:22:42,580 --> 00:22:53,340 I'm going to say it's a bid on a project I'm going to make this white in color. 256 00:22:56,370 --> 00:23:03,810 And don't hold down shift and grab the button and I'm going to align it horizontally and vertically. 257 00:23:04,110 --> 00:23:06,600 And while they were highlighted I should agree with them. 258 00:23:06,630 --> 00:23:08,840 Go ahead and grip them go. 259 00:23:08,970 --> 00:23:10,070 Bid button 260 00:23:16,330 --> 00:23:16,750 awesome. 261 00:23:16,750 --> 00:23:18,570 This is pretty sweet. 262 00:23:18,940 --> 00:23:26,840 You know what I also want to do is I want to add that date because I think that is also pretty important. 263 00:23:26,860 --> 00:23:31,060 And we didn't add that in and I just thought of this now so I'm going to drag this down just a little 264 00:23:31,060 --> 00:23:33,090 bit. 265 00:23:33,100 --> 00:23:35,440 Grab this button and drag it down. 266 00:23:35,950 --> 00:23:40,170 And let's go ahead and post body. 267 00:23:40,270 --> 00:23:48,700 I'm going to insert some text right below it and I'm going to say posted and I'm going to make it white 268 00:23:48,760 --> 00:23:49,990 so I can see it. 269 00:23:50,410 --> 00:23:54,340 I mean gray so I can see it while I'm here. 270 00:23:54,340 --> 00:24:01,090 Let's go ahead and make this a regular and go to size 11. 271 00:24:01,090 --> 00:24:01,970 All right. 272 00:24:02,110 --> 00:24:05,220 So posted at. 273 00:24:05,290 --> 00:24:07,090 Think of a time. 274 00:24:07,090 --> 00:24:08,590 4:15 p.m. 275 00:24:12,590 --> 00:24:14,390 on Tuesday 276 00:24:19,350 --> 00:24:19,800 you know what 277 00:24:24,520 --> 00:24:36,520 by Los Angeles I know I am a huge fan of these like times and dates and locations looking organic posted 278 00:24:36,520 --> 00:24:43,210 at 4:00 4:15 on Tuesday in Los Angeles in Los Angeles. 279 00:24:43,210 --> 00:24:46,070 I think it's really really cool. 280 00:24:46,600 --> 00:24:51,510 And to me it kind of clashes with the actual body. 281 00:24:51,570 --> 00:25:00,430 I'm going to make this a lighter grey something that kind of is there but it's not obtrusive and that 282 00:25:00,460 --> 00:25:01,190 looks really good. 283 00:25:01,210 --> 00:25:08,860 So I'm going to bring this into my posts body and I'm going to bring it up just a little bit so that 284 00:25:10,530 --> 00:25:12,180 it looks like it's part of it. 285 00:25:14,410 --> 00:25:17,570 And see what happens when we bring it down. 286 00:25:17,660 --> 00:25:18,410 I could work to 287 00:25:21,990 --> 00:25:24,220 go go go out and play with that. 288 00:25:24,300 --> 00:25:27,180 Make sure it looks good to you. 289 00:25:27,180 --> 00:25:28,100 I like it. 290 00:25:28,230 --> 00:25:30,980 And I'm going to bring this button back up a little bit. 291 00:25:31,760 --> 00:25:35,740 So everything fits nicely in the cell and then bring this back up. 292 00:25:38,440 --> 00:25:39,510 Looks pretty good. 293 00:25:39,620 --> 00:25:46,150 Now one thing I always look out for as well as the top and bottom space so we're being really good about 294 00:25:46,240 --> 00:25:54,880 keeping 20 points from the left edge roughly the same margins on the right and the top and bottom should 295 00:25:54,880 --> 00:25:56,290 also have that same feel. 296 00:25:56,290 --> 00:25:59,760 So this is roughly 20 maybe a little little more. 297 00:26:00,070 --> 00:26:05,230 Let's go ahead and make sure that this bottom we give it enough padding so it kind of looks the same 298 00:26:05,230 --> 00:26:09,800 as the top looks great. 299 00:26:10,810 --> 00:26:22,810 That looks great guys so now we have our body we ever user details and we have a button with all of 300 00:26:22,810 --> 00:26:25,040 these selected let's command you to group them. 301 00:26:25,060 --> 00:26:31,110 Keep everything tidy and we'll say cell cell details. 302 00:26:31,190 --> 00:26:32,550 That's fine. 303 00:26:32,650 --> 00:26:37,040 And then let's go ahead and group it with the rectangle. 304 00:26:37,240 --> 00:26:39,700 Call it cell 1. 305 00:26:39,690 --> 00:26:44,680 All right so now everything is in the cell right. 306 00:26:45,600 --> 00:26:52,300 So now we can do is if we wanted to we can hold down option and click and drag and it'll create a copy 307 00:26:52,300 --> 00:27:01,510 of it and we can simulate an actual feed which is awesome and we want to make sure that our bottom bar 308 00:27:01,510 --> 00:27:12,400 is at the top at the top of the hierarchy so that anything that we copy and paste this is being over 309 00:27:12,400 --> 00:27:13,840 the content. 310 00:27:13,870 --> 00:27:18,570 So this is looking this is looking great. 311 00:27:18,760 --> 00:27:23,500 Guys a couple of things to recap on. 312 00:27:23,620 --> 00:27:34,280 We created a symbol we are using colors and fonts bold and regular to show things of importance. 313 00:27:34,900 --> 00:27:42,340 We're also keeping or being aware of where the eyes are scanning to look for certain things right. 314 00:27:42,340 --> 00:27:48,670 If I had budget at the end of the sentence everybody that was scrolling through would be frantically 315 00:27:48,670 --> 00:27:51,130 trying to find the bulge or the end of the sentence right. 316 00:27:51,130 --> 00:27:54,980 But this is something that's going to stay there all the time. 317 00:27:55,300 --> 00:28:02,220 So the genre the budget and the BEEN ON project those are the static lengths that are going to stay 318 00:28:02,220 --> 00:28:02,910 there. 319 00:28:03,390 --> 00:28:10,530 And we added this this towbar which is which is really really nice so go ahead and save your project 320 00:28:10,620 --> 00:28:18,460 what we're going to do now is I want you to pause the video and stylize this tab bar. 321 00:28:18,840 --> 00:28:27,000 As if as if it was you know your own your own project so you can detach it from the symbol go ahead 322 00:28:27,000 --> 00:28:30,490 and work on it and then turn it back into a symbol. 323 00:28:30,540 --> 00:28:39,050 Throw some icons on here to make it look really nice find it find a feed icon saved in box profile more 324 00:28:39,670 --> 00:28:41,960 on the whole nine yards. 325 00:28:42,170 --> 00:28:45,300 And yeah that's pretty much it. 326 00:28:45,300 --> 00:28:48,080 Keep in mind are apps personality as you do that. 327 00:28:48,130 --> 00:28:50,790 And we'll see you in the next video. 328 00:28:55,030 --> 00:28:55,930 When.