1 00:00:07,800 --> 00:00:10,170 Are guys welcome back. 2 00:00:10,260 --> 00:00:17,760 We're going to do now is create a another screen that basically pops up when you select one of these 3 00:00:17,760 --> 00:00:26,400 articles in this top 10 app and we're going to do that by going over here and clicking this little plus 4 00:00:27,050 --> 00:00:37,390 add page icon and we'll go ahead and type article and we can now rename this page to home. 5 00:00:37,410 --> 00:00:44,430 Now you might be thinking why on earth are we making an entirely new page when we can just throw an 6 00:00:44,460 --> 00:00:49,790 art board in right next to here and you know keep working. 7 00:00:50,070 --> 00:00:57,590 I found that it's most efficient to keep the screens that you're working on together in the same page. 8 00:00:57,600 --> 00:01:02,800 And then when you have another screen to create an entirely separate page. 9 00:01:02,820 --> 00:01:13,080 And the reason why is we could have right now we only have iPhone on here but we could end up having 10 00:01:13,140 --> 00:01:23,100 a iphone 7 plus screen and then an iPad screen an Apple TV maybe an android or you know like a Web platform 11 00:01:23,110 --> 00:01:25,150 you know the list goes on and on. 12 00:01:25,350 --> 00:01:31,820 And I found that it works really well for workflow management. 13 00:01:31,830 --> 00:01:39,000 If you change something in one screen you're able to easily change it throughout the entire all the 14 00:01:39,000 --> 00:01:44,040 different screen sizes all the different platforms that you're working with and you can see them side 15 00:01:44,040 --> 00:01:45,990 by side and how they're going to be affected. 16 00:01:45,990 --> 00:01:54,150 So like I said Right now we only have one one screen but it's best practice to kind of get in the habit 17 00:01:54,150 --> 00:01:55,630 of doing this now. 18 00:01:56,160 --> 00:02:07,720 So right now we're going to go to our optical page and let's insert another our or iPhone 7 is fine 19 00:02:09,070 --> 00:02:11,550 and let's go ahead and rename this article 20 00:02:15,730 --> 00:02:19,150 and we're going to go over to our home screen. 21 00:02:19,180 --> 00:02:21,960 Let's just go ahead and copy the navigation bar. 22 00:02:22,320 --> 00:02:30,720 I'm going to command you to copy the article makes sure that the port is selected and then hit command 23 00:02:30,730 --> 00:02:33,270 via paste. 24 00:02:33,570 --> 00:02:39,300 And that should plop it right smack dab where we need it. 25 00:02:40,230 --> 00:02:49,420 Now I'm going to answer some texts is going to be the title and I believe the first one was new. 26 00:02:51,150 --> 00:03:00,820 Or Apple launches new MacBook Pro I think that's what it was Apple releases the Mac Pro rights 27 00:03:04,090 --> 00:03:07,080 and I'm going to make this size 25. 28 00:03:07,090 --> 00:03:11,830 I want it to be really big it's a title and I'm going to build this 29 00:03:14,660 --> 00:03:21,250 and what I'm also going to do is I'm going to hit Control G and that's going to toggle the grid. 30 00:03:21,350 --> 00:03:29,570 The grid is super useful for helping you align things align assets and kind of keep things nice and 31 00:03:29,570 --> 00:03:30,860 tidy. 32 00:03:31,360 --> 00:03:39,200 These And these little key boxes or squares are actually 20 points by 20 points that just kind of keep 33 00:03:39,200 --> 00:03:43,410 that in your back pocket as a reference. 34 00:03:43,880 --> 00:03:49,550 And I'm going to bring this down. 35 00:03:49,960 --> 00:03:54,470 So we're roughly 20 points on the left edge which is good. 36 00:03:54,760 --> 00:04:03,640 I mean I controlled you to toggle off make sure that looks nice and let's go ahead and insert the date. 37 00:04:04,240 --> 00:04:11,620 So it was only 10 26 2016. 38 00:04:11,690 --> 00:04:17,150 And I'm going to make this size 15 and regular is fine. 39 00:04:17,150 --> 00:04:20,300 We don't want it to stand out as much as the title. 40 00:04:20,820 --> 00:04:22,170 And I brought it up. 41 00:04:22,430 --> 00:04:26,280 I think it's right where the bottom edge is Yep. 42 00:04:26,550 --> 00:04:30,590 So that looks great. 43 00:04:33,670 --> 00:04:37,340 And let's go ahead and insert a picture. 44 00:04:37,360 --> 00:04:40,090 We'll just do a little placeholder for now. 45 00:04:40,090 --> 00:04:42,060 Shape a rectangle. 46 00:04:42,090 --> 00:04:48,100 I'm turned my grid on this because I want it to align with this this left edge right here were all our 47 00:04:48,100 --> 00:04:51,280 text is all started here. 48 00:04:52,400 --> 00:04:53,960 You know bring it out. 49 00:04:56,000 --> 00:04:59,810 That's maybe a 180 and an 80 y. 50 00:04:59,810 --> 00:05:09,400 Now what we're going to want to do is zoom in with command plus and I want to bring this in 51 00:05:11,890 --> 00:05:14,860 to roughly 20. 52 00:05:14,860 --> 00:05:26,880 So the same as this side I believe that is 20 on the dot she might be 35. 53 00:05:27,040 --> 00:05:30,870 So just no actually you know you know what. 54 00:05:30,880 --> 00:05:40,130 Let's let's do some quick math here so if we go ahead and select our our board right there with is 375 55 00:05:41,470 --> 00:05:45,360 and we like this rectangle we just made it is 3:35. 56 00:05:45,370 --> 00:05:54,970 So 375 minus the thirty five we are 40 40 points to work with and we know this is 20 because it's snapped 57 00:05:54,970 --> 00:06:01,750 to the edge so that must mean that this this right here even though you know it doesn't start on that 58 00:06:01,980 --> 00:06:02,760 on a cue. 59 00:06:02,770 --> 00:06:06,730 We know that that's 20 points from the right from the right edge. 60 00:06:06,730 --> 00:06:15,420 So let's get rid of the border and we'll throw actually that let's do it right now. 61 00:06:15,420 --> 00:06:25,750 Well we'll go ahead and find our picture that we had for we choose image and I believe it was this one 62 00:06:30,040 --> 00:06:32,010 our MacBook Pro. 63 00:06:32,290 --> 00:06:36,370 And I want to see what it looks like with a slight border. 64 00:06:36,370 --> 00:06:39,960 I'm going to 2.5. 65 00:06:40,170 --> 00:06:42,000 You know that doesn't look too bad. 66 00:06:42,010 --> 00:06:47,570 Kind of like that. 67 00:06:47,660 --> 00:06:50,210 We'll leave it off for now. 68 00:06:50,690 --> 00:06:58,690 And let's now consider the text so we'll go up here to the top left select text and let's just type 69 00:07:01,150 --> 00:07:06,850 to say this is all this is an article about the new 70 00:07:13,870 --> 00:07:19,930 it is super cool. 71 00:07:19,970 --> 00:07:22,840 Now normally when I'm designing 72 00:07:25,480 --> 00:07:33,320 I'm usually going to actually write something out that is going to look like it is. 73 00:07:33,700 --> 00:07:41,200 It's actually an article you could probably copy paste this from an actual site or something to give 74 00:07:41,200 --> 00:07:42,990 it that same look and feel. 75 00:07:43,240 --> 00:07:45,340 I don't want to get tagged for plagiarism or anything. 76 00:07:45,340 --> 00:07:51,100 So what I'm going to do is just copy and paste this sentence over and over again so that anybody who 77 00:07:51,100 --> 00:07:56,400 is reading it is going to understand how it's going to operate. 78 00:07:56,400 --> 00:08:07,290 So what I did here was I brought the the edges into a line with our with our 20 or 20 point margins 79 00:08:07,290 --> 00:08:08,030 here. 80 00:08:08,220 --> 00:08:18,850 And I'm just going to keep copy and pasting this until we go all the way down to the bottom and 81 00:08:21,550 --> 00:08:23,700 do this now. 82 00:08:23,970 --> 00:08:31,080 And now I want to simulate what it's like when the article scrolls below the arbor. 83 00:08:31,080 --> 00:08:37,830 Now watch if you notice the art board isn't showing anything that is off of it which is really cool. 84 00:08:37,830 --> 00:08:44,880 So even though we have this article or this text that is clearly off the screen when we export it to 85 00:08:44,880 --> 00:08:46,470 our board it's not going to show it. 86 00:08:46,470 --> 00:08:52,160 So this is looking really nice. 87 00:08:52,440 --> 00:09:00,740 And here's an opportunity for us to think about our how like a use case with our target demographic 88 00:09:00,750 --> 00:09:06,030 so I know that I always love reading comments. 89 00:09:06,060 --> 00:09:11,400 I like reading comments almost sometimes more than the actual article and I feel like a lot of people 90 00:09:12,140 --> 00:09:18,390 in the 20 to 30 age range you know they like to absorb information but they also like to absorb the 91 00:09:18,390 --> 00:09:19,530 opinions of others. 92 00:09:19,530 --> 00:09:23,770 So one way we can have an edge with this with this app. 93 00:09:24,090 --> 00:09:33,240 Aside from any other content aggregating application is I want to make a quick easy way to have users 94 00:09:33,240 --> 00:09:34,940 be able to read comments. 95 00:09:35,280 --> 00:09:39,990 And so what I'm going to do is make a button for it. 96 00:09:39,990 --> 00:09:45,310 So let's go ahead and insert a rounded rectangle. 97 00:09:45,350 --> 00:09:46,570 Don't put this right here. 98 00:09:49,940 --> 00:09:53,400 You can go ahead and make this a little little big. 99 00:09:53,420 --> 00:10:07,140 But go ahead and adjust it right here 34 35 35 skid and I'm going to align it horizontally. 100 00:10:09,150 --> 00:10:13,290 And let's remove the border and I'm going to add a shadow. 101 00:10:13,860 --> 00:10:21,100 So it gives off feel illusion that it's kind of floating off the screen and it's going to stay there 102 00:10:21,120 --> 00:10:29,490 so as usual scrawls that button will stay exactly in that in that position and will decrease the opacity 103 00:10:29,490 --> 00:10:33,660 just a little bit make it a little more subtle. 104 00:10:33,970 --> 00:10:41,410 And I want to make this the same color as the screen right here. 105 00:10:41,550 --> 00:10:47,000 So I'm going to control see again because I forget what the heck is I was going to click and it's going 106 00:10:47,000 --> 00:10:55,160 to make that button the same color as the green that we selected. 107 00:10:55,890 --> 00:11:03,060 All right so now let's go ahead and rename this comments button 108 00:11:06,280 --> 00:11:14,600 a navigation bar this is going to be our picture or our article text that's actually group this up to 109 00:11:14,600 --> 00:11:17,000 make things a lot prettier. 110 00:11:19,330 --> 00:11:24,150 So I'll group the data in the title and we'll call it article Hetter 111 00:11:30,600 --> 00:11:35,960 picture and then so go ahead and grab the text the picture and the article header. 112 00:11:35,970 --> 00:11:42,930 Let's go ahead and command you to group this and will tell it full article. 113 00:11:43,230 --> 00:11:43,470 Right. 114 00:11:43,470 --> 00:11:47,190 Everything that the article encompasses. 115 00:11:47,190 --> 00:11:47,430 All right. 116 00:11:47,430 --> 00:11:48,440 Cool. 117 00:11:50,200 --> 00:11:54,930 So now let's go ahead and insert text again right here. 118 00:11:54,970 --> 00:11:58,040 And let's just have been comments 119 00:12:01,880 --> 00:12:07,150 and actually you know they really cool let's put the amount of those 20 comments 120 00:12:11,600 --> 00:12:12,370 and we could even 121 00:12:15,580 --> 00:12:19,720 actually do this 20 comments 122 00:12:24,240 --> 00:12:24,760 right. 123 00:12:24,780 --> 00:12:31,320 And let's go ahead and make this bold see what that looks like it's kind of nice and we'll make the 124 00:12:31,320 --> 00:12:31,980 text white 125 00:12:35,850 --> 00:12:41,980 and let's select our text and hold down shift and select our new button or comments button. 126 00:12:42,270 --> 00:12:47,900 And we're going to align it horizontally and vertically so it's right there. 127 00:12:48,690 --> 00:12:55,390 And what's also group together so this is the comments button 128 00:13:00,000 --> 00:13:00,290 right. 129 00:13:00,290 --> 00:13:01,200 So that looks really cool. 130 00:13:01,200 --> 00:13:02,100 So now 131 00:13:04,650 --> 00:13:09,640 this page is going to come a long way for the five 10 minutes that we put into it. 132 00:13:09,720 --> 00:13:16,590 And if you can imagine this would probably be in some sort of custom table view. 133 00:13:16,590 --> 00:13:21,970 And when we click 20 comments you know maybe it'll just automatically scroll to the comments. 134 00:13:21,990 --> 00:13:24,900 I know a lot of a lot of people are even on Facebook right. 135 00:13:24,930 --> 00:13:26,700 There's there's a video that pops up. 136 00:13:26,700 --> 00:13:28,770 People want to go through the comments. 137 00:13:28,770 --> 00:13:35,430 They have to click the video and then you know start scrolling through whereas this will automatically 138 00:13:35,430 --> 00:13:36,810 jump to the comments. 139 00:13:36,810 --> 00:13:41,220 So two big takeaways here. 140 00:13:41,340 --> 00:13:50,760 The first one is the let's see the article. 141 00:13:51,270 --> 00:13:54,750 If you have assets that are off the board they won't show up. 142 00:13:54,780 --> 00:14:03,120 And if we went ahead and exported this it's not going to show up so I you know really advise or encourage 143 00:14:03,960 --> 00:14:09,210 you guys to you know take advantage of this because if we were to port this over to an iPhone 7 plus 144 00:14:10,230 --> 00:14:16,090 we wouldn't have to alter that much since the text is already going off the screen. 145 00:14:16,110 --> 00:14:23,820 The second big takeaway in this is probably even a bigger take away is the you want to think about how 146 00:14:23,970 --> 00:14:35,760 your demographic is going to use the app and buy us thinking like our you know target audience and knowing 147 00:14:35,760 --> 00:14:38,200 that they enjoy reading comments. 148 00:14:38,250 --> 00:14:46,890 We've created a little button just a little tiny interaction that will you know adds to the competitive 149 00:14:46,890 --> 00:14:49,920 edge that we are giving over. 150 00:14:49,920 --> 00:14:56,400 You know everybody else all the other you know content aggregators out there. 151 00:14:56,610 --> 00:15:01,670 The last thing that I want to say is tech. 152 00:15:01,680 --> 00:15:12,820 So a lot of times if you have black text over a white background or white text over a black background 153 00:15:12,820 --> 00:15:20,790 and it's pure black and pure white sometimes it can look great in artistic or minimal. 154 00:15:21,120 --> 00:15:25,960 But most of the time it kind of looks plain template. 155 00:15:26,220 --> 00:15:33,810 I think this works well with our scheme that we have going on with the dark dark gray and the black 156 00:15:33,810 --> 00:15:34,620 and the 10. 157 00:15:34,830 --> 00:15:36,840 And this looks really modern. 158 00:15:37,320 --> 00:15:47,170 But what we can also do is a lot of times a gray dark gray it would just look really nice. 159 00:15:47,210 --> 00:15:55,120 That's actually what I normally default to is a dark grey text on a white background looks phenomenal 160 00:15:55,130 --> 00:15:59,310 looks great looks really artsy and minimalistic. 161 00:15:59,700 --> 00:16:02,810 But yeah this is this is looking really good. 162 00:16:02,810 --> 00:16:06,430 Go ahead and save your project and move onto the next video.