1 00:00:04,800 --> 00:00:05,870 One 2 00:00:08,210 --> 00:00:09,870 or I Guys welcome back. 3 00:00:09,870 --> 00:00:16,950 So as you can see filled in the Tabar hope you guys do the same. 4 00:00:16,950 --> 00:00:23,640 If you haven't go ahead and pause the video and make the tab bar look a little bit like it fits the 5 00:00:23,640 --> 00:00:24,610 app. 6 00:00:24,630 --> 00:00:26,630 This is what I ended up doing. 7 00:00:26,640 --> 00:00:33,100 Go ahead and grab icons from the Noun Project or whatever you might find. 8 00:00:33,180 --> 00:00:38,190 You might actually even be able to make some of these given the shapes that are provided and sketch 9 00:00:38,190 --> 00:00:40,690 which is really nice. 10 00:00:40,920 --> 00:00:47,420 So now what we're going to do is design what it looks like on the artist feet. 11 00:00:47,430 --> 00:00:55,260 So what I'm thinking about the artist and what they should probably see is a list of producers and maybe 12 00:00:55,270 --> 00:01:03,690 highlight one or two of their works or their songs that the artist can just browse and play through 13 00:01:03,690 --> 00:01:06,790 on the feed right then and there. 14 00:01:07,260 --> 00:01:09,570 Let's not send them over to any links or anything. 15 00:01:09,570 --> 00:01:10,890 I mean we could. 16 00:01:11,370 --> 00:01:14,190 But as far as product goes I think it's the most efficient. 17 00:01:14,190 --> 00:01:21,480 So what we're going to do is first we need to think about how this interaction is going to take place 18 00:01:21,480 --> 00:01:30,540 so we have this tap to change rate here and I'm thinking that once the user taps this this will change 19 00:01:30,540 --> 00:01:34,350 into artists and a new feed will load. 20 00:01:34,350 --> 00:01:41,270 And so that will kind of trigger the user to know that you know something has changed. 21 00:01:41,310 --> 00:01:43,610 We're switching into a different mode here. 22 00:01:44,010 --> 00:01:50,970 I don't think we need a drop down or anything since it's only one other mode producer and artist if 23 00:01:50,970 --> 00:01:56,650 we had maybe a producer artist and our guy sound engineer you know maybe we'd have some sort of drop 24 00:01:56,650 --> 00:02:02,010 down but simple marketplace app producer an artist is fine. 25 00:02:02,010 --> 00:02:06,550 So let's go ahead and incertain our board. 26 00:02:06,920 --> 00:02:08,960 IPhone 7 is fine. 27 00:02:09,210 --> 00:02:19,740 And let's go ahead now that we have our handy dandy feed navigation go ahead and insert the symbol navigation 28 00:02:19,740 --> 00:02:25,190 bar and the feed navigation that we had that we've created. 29 00:02:25,380 --> 00:02:30,390 Slap that right on there and let's just center everything and align it to the top to make sure that 30 00:02:31,410 --> 00:02:32,800 it's all good to go. 31 00:02:32,820 --> 00:02:36,360 And for the title this type in musician 32 00:02:38,910 --> 00:02:42,670 and or maybe you should do artist artists a little better. 33 00:02:42,990 --> 00:02:46,570 And for the subtitle tap to change again. 34 00:02:48,090 --> 00:02:52,190 And let's also go ahead and insert the status bar 35 00:02:56,700 --> 00:02:59,680 and make sure that it's snap to the top 00. 36 00:02:59,760 --> 00:03:00,350 OK. 37 00:03:02,740 --> 00:03:03,090 All right. 38 00:03:03,100 --> 00:03:05,230 This is really cool so. 39 00:03:05,440 --> 00:03:14,660 And lastly let's go ahead and answer our bottom bar tab bar 40 00:03:17,880 --> 00:03:24,960 if you added yours and created a new symbol for it. 41 00:03:25,020 --> 00:03:30,450 Go ahead and add whichever one is appropriate and OK that looks great. 42 00:03:30,460 --> 00:03:37,650 And let's go ahead and rename this so we know I'm going to call this artist so I call the other one 43 00:03:37,650 --> 00:03:38,540 producer. 44 00:03:38,610 --> 00:03:41,940 This is the producer of view and this is the artist's view. 45 00:03:42,660 --> 00:03:50,730 And so awesome so what I'm going to do to start is I'm going to copy this cell over. 46 00:03:51,160 --> 00:03:57,210 I'm going to control C and the spinning wheel of death and I'm going to go over to this art board. 47 00:03:57,240 --> 00:04:03,310 I'm going to paste and slap it right on here just to give us a little template to work with. 48 00:04:03,310 --> 00:04:10,550 Oh and before I forget with the artwork selected Let's go ahead and check background color. 49 00:04:11,100 --> 00:04:18,880 And I believe this was F3 F3 EF 3 that off white. 50 00:04:18,900 --> 00:04:20,700 All right cool. 51 00:04:20,730 --> 00:04:26,880 So the first thing I'm going to do is we'll leave the first and last name in the genre because we will 52 00:04:26,880 --> 00:04:36,950 probably have some sort of we'll probably have some sort of field in there for the producer. 53 00:04:37,590 --> 00:04:40,320 So we'll leave that. 54 00:04:40,320 --> 00:04:42,670 And let's get rid of this button that's been on Project button 55 00:04:45,770 --> 00:04:50,020 and let's get rid of this budget. 56 00:04:50,510 --> 00:04:55,820 We're going to go ahead and bring this up just a little bit and maybe this could be where the bio is 57 00:04:55,820 --> 00:05:00,020 for our producers so I have been producing 58 00:05:03,500 --> 00:05:09,580 etiam music for the past decade. 59 00:05:09,950 --> 00:05:24,170 I have a passion for music and look to create art at an affordable food affordable cost great and we 60 00:05:24,170 --> 00:05:25,160 can just move our little 61 00:05:29,880 --> 00:05:30,550 this up. 62 00:05:30,570 --> 00:05:31,810 This is actually. 63 00:05:32,040 --> 00:05:37,890 So this is cool I mean since these are going to be probably pulled from art from the producer profiles 64 00:05:38,160 --> 00:05:51,500 what we could do is we can just say based out of Los Angeles maybe there's like a location. 65 00:05:52,390 --> 00:05:54,300 OK so that is looking great. 66 00:05:54,300 --> 00:06:04,590 Now what I want to do is we also want the artist to be able to quickly scroll through and then maybe 67 00:06:04,590 --> 00:06:10,450 play a featured a featured song that is on the producers profile that kind of sells them a little bit. 68 00:06:10,470 --> 00:06:10,770 Right. 69 00:06:10,770 --> 00:06:16,500 So I'm going to drill down to the rectangle and I'm just going to scroll down a little bit to give us 70 00:06:16,500 --> 00:06:30,140 some room and let's go ahead and answer some text and we'll type in featured song 71 00:06:32,920 --> 00:06:43,380 and I want to make the size 15 let's give this our dark dark color or what we could do is give it our 72 00:06:43,740 --> 00:06:46,590 green color and see 73 00:06:49,620 --> 00:06:50,320 black in it. 74 00:06:50,330 --> 00:06:57,170 But I can just go over here featured song and then maybe give it a bold 75 00:06:59,910 --> 00:07:01,570 make it a little bold. 76 00:07:01,650 --> 00:07:10,200 I want to put this in the cell one so it's able to to read in the context. 77 00:07:10,230 --> 00:07:20,790 All right so we have our featured song and maybe we want to have the title of it so you can say 78 00:07:24,050 --> 00:07:27,770 I don't know let's make a cool song name. 79 00:07:34,080 --> 00:07:34,790 Burning 80 00:07:37,150 --> 00:07:38,530 tires. 81 00:07:43,010 --> 00:07:46,940 I would just call her remarks. 82 00:07:47,180 --> 00:07:51,700 I don't know maybe it's a song about racing her. 83 00:07:51,700 --> 00:07:52,390 I don't know. 84 00:07:52,420 --> 00:07:52,880 I don't know. 85 00:07:52,900 --> 00:07:55,710 I came to my mind but we'll just leave it. 86 00:07:55,830 --> 00:08:02,640 And to denote that even italicize it be pretty cool. 87 00:08:02,640 --> 00:08:04,130 Let's also put this in Sal one 88 00:08:09,920 --> 00:08:18,350 remix and give an artist name by the slap back fools. 89 00:08:19,070 --> 00:08:19,990 Sounds cool. 90 00:08:20,270 --> 00:08:20,710 OK. 91 00:08:20,720 --> 00:08:21,320 So 92 00:08:24,950 --> 00:08:28,870 I might want to decrease this just a little bit. 93 00:08:28,970 --> 00:08:33,990 So featured song kind of stands out a little more we want people to get excited when they see that. 94 00:08:34,040 --> 00:08:41,600 And I think all we should do is just have a play button. 95 00:08:41,600 --> 00:08:49,810 So let's go ahead and we can either make one or grab them from the Noun Project and go and do that. 96 00:08:49,850 --> 00:08:54,030 So I'm going to cook something else. 97 00:08:55,630 --> 00:08:57,500 Let's go ahead and type in play 98 00:09:01,080 --> 00:09:04,740 and this looks pretty cool I like this one and I download that 99 00:09:09,680 --> 00:09:13,220 and I'm a dragon over here. 100 00:09:13,220 --> 00:09:19,400 It ends up in the wrong art board someone plop it right here and it's kind of scale this and because 101 00:09:19,400 --> 00:09:21,800 this is crazy. 102 00:09:26,930 --> 00:09:32,000 And we're going to double click to go into edit mode and let's just highlight and zoom in a little bit. 103 00:09:32,000 --> 00:09:37,200 You can see it we're clicked over the text. 104 00:09:37,700 --> 00:09:38,790 Thank you. 105 00:09:38,790 --> 00:09:43,180 Those icons X icons Daco won't be needing that anymore. 106 00:09:43,310 --> 00:09:47,750 Hit enter and let's go ahead and 107 00:09:50,840 --> 00:09:53,070 put the play button right here. 108 00:09:53,070 --> 00:09:58,150 Now we want it big enough so that the user can just quickly tap on it. 109 00:09:59,030 --> 00:10:06,880 But what I'm thinking we do is we could even put the title right here. 110 00:10:08,940 --> 00:10:12,130 And I think that would be a nice little compliment to our play button. 111 00:10:12,160 --> 00:10:15,070 I'm going to rename this play or play button 112 00:10:19,870 --> 00:10:23,950 and we're going to want to fill this with a color. 113 00:10:24,350 --> 00:10:32,560 He even try orange that looks really nice actually right out of the box so I'm going to select the title 114 00:10:33,520 --> 00:10:34,750 and the play button. 115 00:10:34,930 --> 00:10:38,110 I'm going to align it vertically and then I'm going to group them 116 00:10:41,340 --> 00:10:48,840 and we'll name this featured song and we can go ahead and line this. 117 00:10:48,840 --> 00:10:55,980 So you see how it automatically reads that I'm 15 points away from the base out of Los Angeles Tex and 118 00:10:55,980 --> 00:10:58,140 then I'm 15 points away from the featured song. 119 00:10:58,140 --> 00:10:59,620 I like the way that's looking. 120 00:10:59,930 --> 00:11:03,010 So I'm going to go ahead and leave it. 121 00:11:03,060 --> 00:11:05,400 So let's bring this back. 122 00:11:05,730 --> 00:11:10,610 Let's select a rectangle and let's bring this back up just a tad. 123 00:11:10,950 --> 00:11:20,380 And the last thing that I want to do is some sort of indication that a song is playing. 124 00:11:20,670 --> 00:11:25,240 And I think to be really clean and slick if we had a little bar that runs along the bottom so let's 125 00:11:25,240 --> 00:11:27,890 just say I'm playing the featured song. 126 00:11:28,950 --> 00:11:33,320 I would then be able to see how far along the song is. 127 00:11:33,320 --> 00:11:35,000 I don't think any times or anything. 128 00:11:35,010 --> 00:11:43,290 I think it will be pretty apparent what's going on so let's go ahead and answer or insert a shape a 129 00:11:43,290 --> 00:11:49,380 rectangle and let's just draw one right below on the bottom right here. 130 00:11:51,320 --> 00:11:59,010 Looks pretty cool let's get rid to the borders and the high is eight I'm going to drop this down a little 131 00:11:59,010 --> 00:12:02,690 bit to maybe six I'm going to zoom in 132 00:12:06,020 --> 00:12:14,410 go now let's go ahead and whoops let's go ahead and bring this in just a little bit so it kind of looks 133 00:12:14,410 --> 00:12:21,080 like you know we're maybe halfway or a quarter way through the song and I'm going to fill this with 134 00:12:21,080 --> 00:12:24,750 her orange color because I think now looks really nice. 135 00:12:24,880 --> 00:12:28,450 So all right. 136 00:12:28,480 --> 00:12:33,040 That looks really really nice guys it looks really cool. 137 00:12:33,040 --> 00:12:35,750 So here is our cell one. 138 00:12:35,770 --> 00:12:37,480 Let's go ahead and throw a rectangle in. 139 00:12:37,480 --> 00:12:44,700 So one is well can actually put in our feature song group we have featured song. 140 00:12:45,540 --> 00:12:47,310 This title can go in there as well. 141 00:12:48,970 --> 00:12:57,680 And our cell details and the rectangle perfect than ourselves so let's go ahead. 142 00:12:57,680 --> 00:13:04,770 Now keep in mind as well since we want to make sure we have her bases covered every time these are taps 143 00:13:04,770 --> 00:13:05,700 on something right. 144 00:13:05,700 --> 00:13:12,670 So if we hit play we're also going to need a pause button ready. 145 00:13:12,810 --> 00:13:19,920 And so if you're designing this for yourself what I would do is go find a pause button make it the same 146 00:13:19,920 --> 00:13:29,250 dimensions and you could put it in the cell and you can have one hidden or you can have one hidden and 147 00:13:29,250 --> 00:13:31,370 then one where showing the play button. 148 00:13:31,500 --> 00:13:38,730 And basically what this will do is you can go back and forth to see you know what looks best and then 149 00:13:39,600 --> 00:13:42,590 let's go ahead and option drag this down. 150 00:13:45,470 --> 00:13:46,630 Here we go. 151 00:13:46,800 --> 00:13:48,340 You know I think this was 152 00:13:53,550 --> 00:13:54,590 good. 153 00:13:55,320 --> 00:14:04,340 I want to say we were 10 points away so let's make sure that we get that. 154 00:14:04,360 --> 00:14:09,350 So one two three four five six seven eight nine ten. 155 00:14:09,630 --> 00:14:13,010 Perfect awesome. 156 00:14:13,010 --> 00:14:20,990 So just for continuity sake since this is playing out this could also be possible let's go ahead and 157 00:14:20,990 --> 00:14:32,830 let's find a pause button because we are thorough product people we're going the whole nine yards to 158 00:14:33,080 --> 00:14:39,820 go ahead and go to the noun project find a pause button and let's go ahead and let's slap it on here. 159 00:14:41,090 --> 00:14:41,550 Right. 160 00:14:41,600 --> 00:14:44,150 And it's going to be in one. 161 00:14:44,390 --> 00:14:52,730 And let's bring this missed pause button down and let's WHV go on edit mode. 162 00:14:52,970 --> 00:14:53,720 Highlight. 163 00:14:53,720 --> 00:14:55,230 Thank you David Garcia. 164 00:14:55,550 --> 00:15:03,850 I'm going to delete that and let's click to see how what the dimensions are for this play button was 165 00:15:03,860 --> 00:15:14,690 so is 58 by 58 so we can just go in here type in 58 because the lock symbol is on. 166 00:15:15,530 --> 00:15:20,980 And let's just drag it right over and it looks perfect. 167 00:15:22,070 --> 00:15:25,100 So in feature song Let's go out and rename this first pause button 168 00:15:28,730 --> 00:15:36,220 and drag this right over the top and then let's change the fill to our orange. 169 00:15:36,230 --> 00:15:44,480 And so now we can do is we can hide our play button or pause button depending on what we want to show 170 00:15:45,410 --> 00:15:52,330 and that's denoted by this little AI AI AI when you hover over any asset middle height and toggle it 171 00:15:52,370 --> 00:15:53,480 between hidden and hidden. 172 00:15:53,480 --> 00:16:01,820 So now this looks a lot more like what you would see in an actual app you know there's there's a play 173 00:16:01,820 --> 00:16:07,970 bar or you know like a progress bar going on for when the song is being played. 174 00:16:08,110 --> 00:16:12,380 And you can posit here this is this is all great. 175 00:16:12,410 --> 00:16:19,880 And the last thing that we should probably do is put our bottom bar up to the top so that you can see 176 00:16:20,720 --> 00:16:21,570 your navigation. 177 00:16:21,570 --> 00:16:27,070 So this is our producer and artist mode. 178 00:16:27,070 --> 00:16:38,180 Now another thing to consider with these sort of toggles is if youre a producer you may want to say 179 00:16:38,210 --> 00:16:42,020 what did I do. 180 00:16:42,290 --> 00:16:46,440 You may think OK I'm a producer Intuitively I would be on here. 181 00:16:47,000 --> 00:16:49,840 But then you see all these artists posts. 182 00:16:49,850 --> 00:17:00,620 So while we could even do is type in producer mode to make it super explicit You always want to be as 183 00:17:00,620 --> 00:17:04,490 explicit as you can. 184 00:17:04,940 --> 00:17:06,980 So yeah thats looking great. 185 00:17:06,980 --> 00:17:14,590 So what I'm going to do is group these two cells or first or rename this one rename the cell to and 186 00:17:14,920 --> 00:17:17,970 I'm going to group it and this is going to be our table view. 187 00:17:20,570 --> 00:17:28,470 And if youre an artist you're going to want to post something right. 188 00:17:28,520 --> 00:17:35,840 So let's go ahead and create a call to action for our artist and artist Moat's going don't drag this 189 00:17:35,840 --> 00:17:37,580 down just a little bit. 190 00:17:39,480 --> 00:17:40,890 Give ourselves some room 191 00:17:44,980 --> 00:17:56,170 and what we can do now is go Insearch shape maybe use a rounded rectangle and let's just make a little 192 00:17:56,170 --> 00:17:56,990 button right here 193 00:18:01,420 --> 00:18:04,010 and we're going to center in on our board. 194 00:18:04,030 --> 00:18:05,920 Let's get rid of the borders. 195 00:18:06,710 --> 00:18:10,920 And what I want to do is give that green color that we had. 196 00:18:11,380 --> 00:18:20,360 I'd still probably say this to my colors but that green color that looks nice. 197 00:18:20,630 --> 00:18:31,510 And let's go ahead and insert some text and let's say post a post a job. 198 00:18:31,660 --> 00:18:32,370 That's fine. 199 00:18:35,560 --> 00:18:45,940 And let's make it white and I'm going to make this bold if you post a job for a producer and let's make 200 00:18:45,940 --> 00:18:54,310 this size 15 and throw this right in the middle and with the button selected We're going to line it 201 00:18:54,310 --> 00:18:58,640 vertically and horizontally and then Group it. 202 00:18:58,690 --> 00:19:03,510 So post a job button. 203 00:19:05,020 --> 00:19:13,030 And if I were to explain this to a developer or somebody else on the team what I would want to happen 204 00:19:13,060 --> 00:19:16,000 is this shows up at the top. 205 00:19:16,090 --> 00:19:23,920 And as you start scrolling it will eventually go behind the navigation. 206 00:19:23,930 --> 00:19:29,350 Right now we have this entire screen real estate to browse and to scroll. 207 00:19:29,350 --> 00:19:33,850 Right but I want this call to action to be right smack dab at the top so when once you jump in artist 208 00:19:33,850 --> 00:19:39,260 mode you can post a job for a producer. 209 00:19:39,280 --> 00:19:43,100 This is looking really really slick. 210 00:19:43,180 --> 00:19:53,860 So what I want you guys to do is maybe think about how these two screens could be better. 211 00:19:53,860 --> 00:20:03,760 Go ahead and design them and then fill in the user profiles so that it looks more like a live app and 212 00:20:03,760 --> 00:20:07,250 less like we just put a bunch of placeholder text in there. 213 00:20:07,870 --> 00:20:10,810 But yeah this is looking great guys all I see in the next video.