1 00:00:05,040 --> 00:00:08,060 One are at. 2 00:00:08,070 --> 00:00:09,990 So are almost done here. 3 00:00:09,990 --> 00:00:12,770 Things are looking really really good. 4 00:00:13,250 --> 00:00:22,960 The the last thing that I want us to think about is the experience when you first open the app and first 5 00:00:22,960 --> 00:00:25,150 impressions are everything. 6 00:00:25,150 --> 00:00:32,680 Just like if you're meeting a person which is why I ask or you should be asking in the beginning of 7 00:00:32,680 --> 00:00:39,100 every single project you know what is the personality of this app and if this app was a person how would 8 00:00:39,100 --> 00:00:41,580 it want to be interacted with. 9 00:00:41,650 --> 00:00:51,850 And so you only get a couple of seconds to get the user intrigued engaged and excited about your app 10 00:00:52,990 --> 00:01:01,900 which is a huge task because because it's it's still a lot different than meeting a person for the first 11 00:01:01,900 --> 00:01:02,990 time. 12 00:01:03,040 --> 00:01:10,210 And if you don't like where a conversation is going in the first five minute or five seconds with an 13 00:01:10,210 --> 00:01:15,760 actual human being it's not like you can just walk away and leave or say like I don't want to talk to 14 00:01:15,760 --> 00:01:16,380 you anymore. 15 00:01:16,390 --> 00:01:20,520 I mean you could but then you'd just be the rudest person in the room. 16 00:01:20,530 --> 00:01:27,280 But with an out you could just close out of it and move on to the next thing like this. 17 00:01:27,520 --> 00:01:31,210 There's there's no there's no shame in doing that. 18 00:01:31,210 --> 00:01:37,540 I mean it's just the nature of the beast so you've got a couple of seconds to get them hooked right 19 00:01:37,540 --> 00:01:47,320 now as it stands if I jumped in here and saw producer my tap to change all of this stuff bit on Project 20 00:01:47,320 --> 00:01:48,970 post a job for it like I'd be like. 21 00:01:48,970 --> 00:01:49,410 All right. 22 00:01:49,430 --> 00:01:51,070 I don't what is what is all this. 23 00:01:51,070 --> 00:01:55,460 Like I can play songs like I don't know where to even start. 24 00:01:55,780 --> 00:02:03,490 So we're going to handle that right now and we're going to pretend that someone just downloaded the 25 00:02:03,490 --> 00:02:03,820 app. 26 00:02:03,830 --> 00:02:08,070 Now there's a couple of things to think about in this scenario right. 27 00:02:08,170 --> 00:02:16,330 Either they stumbled across the app because they're searching a specific key term that we strategically 28 00:02:16,570 --> 00:02:23,500 put into the app store so they will have some context of the app if they stumble upon it randomly because 29 00:02:23,890 --> 00:02:25,870 it's tied to a key term. 30 00:02:25,870 --> 00:02:32,290 And if you stumble upon an app you may have skimmed the description or the title or something so there's 31 00:02:32,620 --> 00:02:40,810 slight context or you read about it online or some sort of marketing tactic or word of mouth. 32 00:02:40,810 --> 00:02:47,800 So we're going to assume that there is some very very minimal baseline assumptions about our app meaning 33 00:02:47,800 --> 00:02:55,120 that whoever is downloading it knows that it's some sort of thing for musicians and producers to connect. 34 00:02:55,120 --> 00:03:05,770 So what I think will be really cool is if we just had some sort of really quick one or two second interaction 35 00:03:06,010 --> 00:03:16,140 that gets them started and guides the path to exploring more via what we're going to do is in other 36 00:03:16,270 --> 00:03:22,770 airport iPhone 7 and this one we're going to drag all the way up to the top over here. 37 00:03:26,020 --> 00:03:36,740 Things are just be easier to work with and go ahead and insert your symbol could either be the artist 38 00:03:36,740 --> 00:03:37,590 or the producer. 39 00:03:37,600 --> 00:03:40,930 I'm just going to go with the artist for now. 40 00:03:42,030 --> 00:03:46,170 And I'm just going to slap it right on the iPhone 7. 41 00:03:46,170 --> 00:03:52,060 Let's go ahead and center things horizontally and vertically so it falls nicely. 42 00:03:53,210 --> 00:03:54,210 Into it. 43 00:03:54,290 --> 00:04:05,330 And let's also create a semi transparent black background so I'm going to insert a rectangle. 44 00:04:05,330 --> 00:04:15,390 You guys know the drill am going to take off the borders and then make the fill pitch black and I'm 45 00:04:15,390 --> 00:04:20,840 going to decrease the opacity to 20. 46 00:04:20,930 --> 00:04:25,670 So what am I doing here. 47 00:04:25,700 --> 00:04:37,460 I think it would be great if the user opens the app and they get two options and it's clear it's deliberate. 48 00:04:37,460 --> 00:04:45,950 It's to the point and it will clearly indicate that the content that's being shown is specifically for 49 00:04:45,950 --> 00:04:47,000 them or what they show. 50 00:04:47,000 --> 00:04:51,820 So let's do this and insert a rounded rectangle. 51 00:04:55,390 --> 00:05:02,030 Just going to create one round this big doesn't need to be the exact exact dimensions. 52 00:05:02,530 --> 00:05:13,020 And I'm going to get rid of the borders and then make this white and add a shadow. 53 00:05:13,090 --> 00:05:16,810 All of these presets are fine and is going to decrease the opacity a little bit. 54 00:05:17,080 --> 00:05:20,110 It's maybe 25 so it's not so intense. 55 00:05:20,640 --> 00:05:23,400 And now I'm going to answer some text. 56 00:05:24,050 --> 00:05:27,360 It's going to say I am a 57 00:05:30,510 --> 00:05:39,280 or maybe just I am me and let's make this bold because we are making a bold statement. 58 00:05:39,300 --> 00:05:41,450 I am what 59 00:05:48,190 --> 00:05:53,400 and it's going to be an artist or producer. 60 00:05:53,400 --> 00:06:03,660 So let's go ahead and find Or maybe we might get a bunch of like paint brushes and stuff. 61 00:06:03,660 --> 00:06:14,430 Let's go to Hendee musician. 62 00:06:14,830 --> 00:06:19,680 You know what I think would be cooler saw this instead of I am. 63 00:06:19,720 --> 00:06:21,340 I am looking for 64 00:06:24,070 --> 00:06:29,080 every go. 65 00:06:29,100 --> 00:06:40,830 OK so let me backtrack and unpack this one by one so I am looking for has a lot more intense than I 66 00:06:40,830 --> 00:06:41,790 am right. 67 00:06:41,850 --> 00:06:46,690 I am could be like I am an artist and a producer right. 68 00:06:46,800 --> 00:06:57,360 But I am looking for is a lot more deliberate has a lot more intent and its a clear message. 69 00:06:57,480 --> 00:07:09,650 So let's go ahead and let's find a musician Why are all these so funky. 70 00:07:09,690 --> 00:07:10,650 I don't know. 71 00:07:10,770 --> 00:07:11,070 Well 72 00:07:15,010 --> 00:07:20,080 I I'm just going to choose this little guy for now. 73 00:07:20,080 --> 00:07:20,920 He seems 74 00:07:25,110 --> 00:07:25,920 good for now. 75 00:07:25,920 --> 00:07:26,550 Good enough for this. 76 00:07:26,550 --> 00:07:35,130 And of course this is 10000 points by whatever scale this down and I'm going to jump into edit mode 77 00:07:35,160 --> 00:07:37,610 and get rid of this text. 78 00:07:41,730 --> 00:07:46,440 And let's get crazy let's let's make this dude orange our orange. 79 00:07:46,470 --> 00:07:48,050 And a little smaller 80 00:07:52,620 --> 00:07:56,830 and I'm going to put them over here and I'm going to insert some text. 81 00:07:57,380 --> 00:07:59,210 Say I am looking for a 82 00:08:02,490 --> 00:08:03,170 musician 83 00:08:11,500 --> 00:08:11,810 right. 84 00:08:11,810 --> 00:08:21,660 Well change this to regular and I'm going to decrease the size to around 15. 85 00:08:21,930 --> 00:08:23,440 So that's cool. 86 00:08:23,520 --> 00:08:26,190 Go ahead and group those. 87 00:08:26,190 --> 00:08:30,490 So that's musician I'm looking for a musician. 88 00:08:30,520 --> 00:08:32,660 And let's find a producer. 89 00:08:37,000 --> 00:08:41,300 Let's see I think out and we're getting produce of course. 90 00:08:41,780 --> 00:08:42,920 Maybe we'll do 91 00:08:46,690 --> 00:08:58,000 a recording. 92 00:08:58,110 --> 00:09:04,140 I don't want to spend a whole lot of time looking for an icon but you guys get the idea. 93 00:09:04,140 --> 00:09:10,400 Go ahead and search for a an icon that suits it. 94 00:09:10,420 --> 00:09:14,060 Well if not you might be able to make one. 95 00:09:16,390 --> 00:09:21,850 I might even just go back and look at musicians real quick let me give this one more shot here. 96 00:09:24,030 --> 00:09:41,930 Let's see if there is any I mean the conductors kind of kind of fits it. 97 00:09:42,050 --> 00:09:42,600 I don't know. 98 00:09:42,860 --> 00:09:44,460 We'll just go with him. 99 00:09:44,750 --> 00:09:49,590 This maistre seems like a good standup guy. 100 00:09:49,850 --> 00:09:59,550 And let's downside downscaled give just a little bit bring this and double click to jump into a mode. 101 00:09:59,600 --> 00:10:07,220 Get rid of the text scale this and even more. 102 00:10:07,450 --> 00:10:11,080 And we could even just make this that green color. 103 00:10:11,080 --> 00:10:14,650 I think that the way to go it's not that one. 104 00:10:14,770 --> 00:10:17,130 Know that for sure. 105 00:10:18,460 --> 00:10:19,700 Which one is it. 106 00:10:19,930 --> 00:10:21,430 Well let's do this. 107 00:10:21,430 --> 00:10:25,630 I'm going to go ahead and just Control-C on this screen 108 00:10:30,630 --> 00:10:36,180 and let's insert some text lets just type producer 109 00:10:40,400 --> 00:10:40,910 OK. 110 00:10:41,200 --> 00:10:51,050 Let's go ahead and group that and say producer and now we can do is just kind of have these side by 111 00:10:51,050 --> 00:10:54,320 side make sure the spacing is good. 112 00:10:54,320 --> 00:10:59,000 I'm going to highlight both of these and center the or I'm sorry. 113 00:10:59,060 --> 00:11:07,280 Snap them to the bottom to the bottom because we want the text to be along the same line. 114 00:11:07,330 --> 00:11:16,310 I'm going to group this call in options and with the rectangle selected I'm going to step to the center 115 00:11:17,960 --> 00:11:18,390 right. 116 00:11:18,440 --> 00:11:27,970 Again I think this one or this this one I don't even remember the term is called is throwing us off 117 00:11:27,970 --> 00:11:28,670 just a little bit. 118 00:11:28,690 --> 00:11:33,170 I'm going to scoot this over a couple of points. 119 00:11:33,170 --> 00:11:39,350 It's really it really should be your eyes are drawn to the to the text and where they are in relation 120 00:11:39,350 --> 00:11:43,290 to the edges not so much the icons but yeah. 121 00:11:43,310 --> 00:11:47,870 So this is a great what. 122 00:11:47,900 --> 00:11:50,440 So why don't we do this right. 123 00:11:51,050 --> 00:11:53,080 You go into the app. 124 00:11:53,150 --> 00:11:57,360 I am looking for a musician or producer instantly. 125 00:11:58,010 --> 00:11:59,390 You can select one of these. 126 00:11:59,420 --> 00:12:07,880 And then the mode will change based upon based upon whatever is selected and then what's really cool. 127 00:12:07,880 --> 00:12:18,290 So here let's just rename this really quickly call this intro call to action maybe insert another our 128 00:12:18,320 --> 00:12:18,670 airport 129 00:12:21,230 --> 00:12:23,770 and drag us all the way up 130 00:12:29,610 --> 00:12:33,870 and I'm going to insert the field again. 131 00:12:33,940 --> 00:12:34,470 Artist 132 00:12:41,700 --> 00:12:46,610 we could have actually just copied it as well but that's OK. 133 00:12:46,650 --> 00:12:53,890 So go ahead and just copy your your semi transparent rectangle and just throw that over your new art 134 00:12:53,890 --> 00:12:59,370 board and make sure it's a line vertically and horizontally. 135 00:12:59,760 --> 00:13:08,080 And so once you choose one of these what we could also do is let them know that hey you know what you 136 00:13:08,080 --> 00:13:17,710 can change this right appear so let's decrease the height of our semi-transparent rectangle to show 137 00:13:17,710 --> 00:13:19,080 the navigation bar. 138 00:13:22,360 --> 00:13:26,530 And let's do this 139 00:13:29,990 --> 00:13:32,720 go ahead and insert a rectangle 140 00:13:35,780 --> 00:13:48,970 and I want you to oh go oh we are going to insert a rectangle leave maybe 15 or 20 points from the bottom 141 00:13:48,970 --> 00:13:56,710 of the neph and we're going to have it stretch all the way to the right and maybe have it be 70 points 142 00:13:56,710 --> 00:13:57,490 high. 143 00:13:57,740 --> 00:14:04,740 Get let's get rid of the borders and we're going to make this white. 144 00:14:04,790 --> 00:14:12,890 Now what's cool about sketch is you can create points and manipulate them as a shape. 145 00:14:12,890 --> 00:14:19,100 So what I want to do is add a little triangle here and we can do a couple of things but we're going 146 00:14:19,100 --> 00:14:21,500 to do it one way first. 147 00:14:21,620 --> 00:14:25,850 Double click it to go into that mode. 148 00:14:25,880 --> 00:14:29,060 Why is this still showing up all right. 149 00:14:29,270 --> 00:14:34,180 Well as you can see you have these little these little dots on the edges right. 150 00:14:34,190 --> 00:14:38,620 And these didn't know where there is a change in direction. 151 00:14:38,700 --> 00:14:42,330 That's obviously because you have a rectangle there is four. 152 00:14:42,640 --> 00:14:46,520 Let's go ahead and create a point on here somewhere. 153 00:14:46,710 --> 00:14:51,280 If you drag it along it'll denote where the center is so let's just bring it up. 154 00:14:52,490 --> 00:14:59,080 All the way to the top and we are going to go ahead and choose straight right here and we're going to 155 00:14:59,080 --> 00:15:02,710 do is just make this a solid point. 156 00:15:02,710 --> 00:15:04,820 Now let's create a point right here. 157 00:15:04,850 --> 00:15:06,420 Let's track it down. 158 00:15:08,510 --> 00:15:09,960 All the way until 159 00:15:13,960 --> 00:15:14,500 we've 160 00:15:17,040 --> 00:15:23,760 created almost a line between our left point and this one. 161 00:15:23,970 --> 00:15:28,700 And go ahead and click straight and we're going to do the same thing on this side. 162 00:15:28,780 --> 00:15:30,160 And we want to make it 163 00:15:33,630 --> 00:15:38,990 equidistant to go ahead and head straight and I'm going to talk with a grid on. 164 00:15:39,010 --> 00:15:48,010 I think we got pretty close. 165 00:15:48,310 --> 00:15:48,760 All right. 166 00:15:48,900 --> 00:15:49,320 So 167 00:15:54,890 --> 00:15:57,590 that looks really really cool. 168 00:15:57,950 --> 00:16:00,730 And let's just go ahead and answer some text we're going to say 169 00:16:03,890 --> 00:16:04,960 don't worry. 170 00:16:05,330 --> 00:16:08,600 You can change this at any time. 171 00:16:14,380 --> 00:16:20,280 All right that's perfect regular size 15. 172 00:16:20,490 --> 00:16:27,140 And let's just put it smack dab in the middle. 173 00:16:30,110 --> 00:16:39,150 And yeah this is perfect so if I am new to the app I sign up and I am looking for a musician. 174 00:16:39,150 --> 00:16:40,270 I click this. 175 00:16:40,270 --> 00:16:45,400 This is a small interaction that takes two seconds for me to digest. 176 00:16:45,400 --> 00:16:47,270 Don't worry I can change it any time. 177 00:16:47,290 --> 00:16:48,160 OK I got it. 178 00:16:48,160 --> 00:16:54,960 I know where I'm supposed to do here and now I can dive right into the app and keep exploring. 179 00:16:55,390 --> 00:17:01,770 So this is this is really really deep guys is awesome. 180 00:17:02,200 --> 00:17:10,720 What I want you guys to do is I purposely left out the inbox and the ME the inbox because it was you 181 00:17:10,720 --> 00:17:18,100 know you'd be messaging people very similar to saved except for you know there'd be more of a message 182 00:17:18,100 --> 00:17:21,720 interface and the ME is a profile. 183 00:17:21,730 --> 00:17:28,600 And what I want you guys to do is get really creative and think about how the profile might look. 184 00:17:28,600 --> 00:17:36,820 I want you guys to build this out on your own and using all the principles and user interface and user 185 00:17:36,820 --> 00:17:46,280 experience things that we've covered in these past couple videos create the profiles screen. 186 00:17:46,300 --> 00:17:48,550 I want to see what you guys come up with. 187 00:17:48,550 --> 00:17:51,460 Find me on Dischord find me on Facebook YouTube. 188 00:17:51,460 --> 00:17:52,270 I don't care. 189 00:17:52,270 --> 00:17:56,050 I want to see what you guys can do with this. 190 00:17:56,050 --> 00:18:03,060 Here is the situation you guys have been you know given $500000 seed around to start this. 191 00:18:03,070 --> 00:18:08,630 You're designing and as a product manager whatever they hand this off to you. 192 00:18:08,770 --> 00:18:13,250 Hey I need you to design the profile screen. 193 00:18:13,510 --> 00:18:14,050 Go for it. 194 00:18:14,050 --> 00:18:14,800 Make something happen. 195 00:18:14,800 --> 00:18:18,050 So that's it for this video. 196 00:18:18,050 --> 00:18:18,850 I'll see you in the next 197 00:18:23,910 --> 00:18:25,400 one.