Are guys welcome back.
We're going to do now is create a another screen that basically pops up when you select one of these
articles in this top 10 app and we're going to do that by going over here and clicking this little plus
add page icon and we'll go ahead and type article and we can now rename this page to home.
Now you might be thinking why on earth are we making an entirely new page when we can just throw an
art board in right next to here and you know keep working.
I found that it's most efficient to keep the screens that you're working on together in the same page.
And then when you have another screen to create an entirely separate page.
And the reason why is we could have right now we only have iPhone on here but we could end up having
a iphone 7 plus screen and then an iPad screen an Apple TV maybe an android or you know like a Web platform
you know the list goes on and on.
And I found that it works really well for workflow management.
If you change something in one screen you're able to easily change it throughout the entire all the
different screen sizes all the different platforms that you're working with and you can see them side
by side and how they're going to be affected.
So like I said Right now we only have one one screen but it's best practice to kind of get in the habit
of doing this now.
So right now we're going to go to our optical page and let's insert another our or iPhone 7 is fine
and let's go ahead and rename this article
and we're going to go over to our home screen.
Let's just go ahead and copy the navigation bar.
I'm going to command you to copy the article makes sure that the port is selected and then hit command
via paste.
And that should plop it right smack dab where we need it.
Now I'm going to answer some texts is going to be the title and I believe the first one was new.
Or Apple launches new MacBook Pro I think that's what it was Apple releases the Mac Pro rights
and I'm going to make this size 25.
I want it to be really big it's a title and I'm going to build this
and what I'm also going to do is I'm going to hit Control G and that's going to toggle the grid.
The grid is super useful for helping you align things align assets and kind of keep things nice and
tidy.
These And these little key boxes or squares are actually 20 points by 20 points that just kind of keep
that in your back pocket as a reference.
And I'm going to bring this down.
So we're roughly 20 points on the left edge which is good.
I mean I controlled you to toggle off make sure that looks nice and let's go ahead and insert the date.
So it was only 10 26 2016.
And I'm going to make this size 15 and regular is fine.
We don't want it to stand out as much as the title.
And I brought it up.
I think it's right where the bottom edge is Yep.
So that looks great.
And let's go ahead and insert a picture.
We'll just do a little placeholder for now.
Shape a rectangle.
I'm turned my grid on this because I want it to align with this this left edge right here were all our
text is all started here.
You know bring it out.
That's maybe a 180 and an 80 y.
Now what we're going to want to do is zoom in with command plus and I want to bring this in
to roughly 20.
So the same as this side I believe that is 20 on the dot she might be 35.
So just no actually you know you know what.
Let's let's do some quick math here so if we go ahead and select our our board right there with is 375
and we like this rectangle we just made it is 3:35.
So 375 minus the thirty five we are 40 40 points to work with and we know this is 20 because it's snapped
to the edge so that must mean that this this right here even though you know it doesn't start on that
on a cue.
We know that that's 20 points from the right from the right edge.
So let's get rid of the border and we'll throw actually that let's do it right now.
Well we'll go ahead and find our picture that we had for we choose image and I believe it was this one
our MacBook Pro.
And I want to see what it looks like with a slight border.
I'm going to 2.5.
You know that doesn't look too bad.
Kind of like that.
We'll leave it off for now.
And let's now consider the text so we'll go up here to the top left select text and let's just type
to say this is all this is an article about the new
it is super cool.
Now normally when I'm designing
I'm usually going to actually write something out that is going to look like it is.
It's actually an article you could probably copy paste this from an actual site or something to give
it that same look and feel.
I don't want to get tagged for plagiarism or anything.
So what I'm going to do is just copy and paste this sentence over and over again so that anybody who
is reading it is going to understand how it's going to operate.
So what I did here was I brought the the edges into a line with our with our 20 or 20 point margins
here.
And I'm just going to keep copy and pasting this until we go all the way down to the bottom and
do this now.
And now I want to simulate what it's like when the article scrolls below the arbor.
Now watch if you notice the art board isn't showing anything that is off of it which is really cool.
So even though we have this article or this text that is clearly off the screen when we export it to
our board it's not going to show it.
So this is looking really nice.
And here's an opportunity for us to think about our how like a use case with our target demographic
so I know that I always love reading comments.
I like reading comments almost sometimes more than the actual article and I feel like a lot of people
in the 20 to 30 age range you know they like to absorb information but they also like to absorb the
opinions of others.
So one way we can have an edge with this with this app.
Aside from any other content aggregating application is I want to make a quick easy way to have users
be able to read comments.
And so what I'm going to do is make a button for it.
So let's go ahead and insert a rounded rectangle.
Don't put this right here.
You can go ahead and make this a little little big.
But go ahead and adjust it right here 34 35 35 skid and I'm going to align it horizontally.
And let's remove the border and I'm going to add a shadow.
So it gives off feel illusion that it's kind of floating off the screen and it's going to stay there
so as usual scrawls that button will stay exactly in that in that position and will decrease the opacity
just a little bit make it a little more subtle.
And I want to make this the same color as the screen right here.
So I'm going to control see again because I forget what the heck is I was going to click and it's going
to make that button the same color as the green that we selected.
All right so now let's go ahead and rename this comments button
a navigation bar this is going to be our picture or our article text that's actually group this up to
make things a lot prettier.
So I'll group the data in the title and we'll call it article Hetter
picture and then so go ahead and grab the text the picture and the article header.
Let's go ahead and command you to group this and will tell it full article.
Right.
Everything that the article encompasses.
All right.
Cool.
So now let's go ahead and insert text again right here.
And let's just have been comments
and actually you know they really cool let's put the amount of those 20 comments
and we could even
actually do this 20 comments
right.
And let's go ahead and make this bold see what that looks like it's kind of nice and we'll make the
text white
and let's select our text and hold down shift and select our new button or comments button.
And we're going to align it horizontally and vertically so it's right there.
And what's also group together so this is the comments button
right.
So that looks really cool.
So now
this page is going to come a long way for the five 10 minutes that we put into it.
And if you can imagine this would probably be in some sort of custom table view.
And when we click 20 comments you know maybe it'll just automatically scroll to the comments.
I know a lot of a lot of people are even on Facebook right.
There's there's a video that pops up.
People want to go through the comments.
They have to click the video and then you know start scrolling through whereas this will automatically
jump to the comments.
So two big takeaways here.
The first one is the let's see the article.
If you have assets that are off the board they won't show up.
And if we went ahead and exported this it's not going to show up so I you know really advise or encourage
you guys to you know take advantage of this because if we were to port this over to an iPhone 7 plus
we wouldn't have to alter that much since the text is already going off the screen.
The second big takeaway in this is probably even a bigger take away is the you want to think about how
your demographic is going to use the app and buy us thinking like our you know target audience and knowing
that they enjoy reading comments.
We've created a little button just a little tiny interaction that will you know adds to the competitive
edge that we are giving over.
You know everybody else all the other you know content aggregators out there.
The last thing that I want to say is tech.
So a lot of times if you have black text over a white background or white text over a black background
and it's pure black and pure white sometimes it can look great in artistic or minimal.
But most of the time it kind of looks plain template.
I think this works well with our scheme that we have going on with the dark dark gray and the black
and the 10.
And this looks really modern.
But what we can also do is a lot of times a gray dark gray it would just look really nice.
That's actually what I normally default to is a dark grey text on a white background looks phenomenal
looks great looks really artsy and minimalistic.
But yeah this is this is looking really good.
Go ahead and save your project and move onto the next video.