One guy so the app are going to be building is called top.
And the basic premise of the app is you know it's going to give you 10 articles on a topic you care
about a day or a week.
And this is something you can open up to pass the time you know if you have a quick second on a subway
or you know waiting in line for lunch or something.
You'll be able to open this up and read an article or a credible article about a topic you care about
whether this be tech business sports football you know anything goes.
And so like I said before you know there's three things that we're going to want to identify in order
to round out the vision of the app and help us mold it as we design it.
So the first question is what is the goal of your.
And like I said right here the goal is to keep the user up to date on a topic they care about in a brief
and engaging manner.
Right.
So we want to keep it short we want to keep it snappy.
You know if I was waiting in line for a sandwich and I saw this 30 page article I'd kind of gauge how
much I'd want to read it versus maybe a couple of paragraphs about the new Mac Book Pro coming out.
So that is the goal the I keep it brief and you know keeping the user up to date.
Describe your app as if it were a person.
So when I think about this app I want it to resonate with me.
And so I put you know like modern credible and deliberate and modern is kind of self-explanatory.
Credible is we want the user to feel like when they open it up they're not getting garbage they're not
getting stuff.
You can find on yahoo answers or littered in the deep dark web right.
You know it's it's a credible source and it's it's something that they can depend on.
That's going to be correct.
So modern credible.
And last but not least deliberate and deliberate kind of plays off of you know incredible a little bit
but mixed with the brevity the how brief it is and how to the point all of the content is going to be.
So that is how I would describe it if you know if it was a person you know maybe somebody my age or
your age that's credible and they mean what they say.
And who'll be using your apps so I'm anticipating that it's going to be 20 to 30 year old young busy
professionals.
And the reason why I say this is because people in this age really like to keep up with what's going
on.
But you know they're so busy getting their professional lives started they may have a really busy job
running around.
You know also having a night life having fun and doing a bunch of all sorts of other things so if you're
in this age range you and you know you and you're a young professional you might know what I'm talking
about.
So this is going to be geared towards them something that they can pick up real quick about something
they care about and set it down in 30 seconds to a minute.
So let's go ahead and get started on what we're going to want to do is open sketch now that you've downloaded
or bought it.
And so normally there's this there's interest free in you know if you already have a project open you
can go to file new to create in your project but this works great.
And what we're going to start with is inserting and art boards up here at the top left.
We are going to click this little plus button and click our board now our words act as canvases almost
like in some other programs you may be familiar with.
And basically what they allow us to do is start designing on a canvas or you know a place where we can
put all our assets so there's two ways that you can create our boards.
The first way as you can see my mouse turn this little cross-hair looking thing so you can click and
drag and Krynn are part of any in any dimension.
Right so here is what it looks like.
And we can also choose from one of the templates over here.
Now what's really really powerful about sketch is you can choose from templates from iOS design or iOS
devices web material design icons Android icons like the list goes on and on.
It's actually a pretty unreal.
But we are going to go ahead and just click iPhone 7 that works perfectly for what we're trying to do.
And if you'll notice on the left hand side over here the art board kind of got thrown into this little
little pain and it says Page 1 and this is kind of where all the organization lives like this is the
organization hierarchy over here.
And as you can probably tell you can have multiple pages.
I don't know why mine is stuck there.
OK.
Here we go.
So you can have multiple pages like you here I can add.
And you know another page.
And then within these pages we can have multiple art boards.
And those are Burts we're going to have her designs.
So I'm going to go ahead and delete these
pages because we only need one for now.
And we're going to go ahead and rename our board homescreen so you can see it changed up here.
Now what's really cool about scatch is they work off the point system which is the same system that
Apple designed in X code you know to handle their screen sizes and screen resolution.
So as you can as you can see over here the size actually three 175 points wide and 667 points high.
That's good to know and good to keep in mind.
All right so now what we're going to do is insert our navigation bar.
So we're going to go back up here to the insert button and click shape and rectangle.
And this is by the way this is where you're probably mostly going to live in this little insur area
as you can see you can do vector's pencil tonner shapes tacks images symbols slices you know you name
it pretty much so we'll go ahead and choose rectangle and then we're going to start a period at the
top left corner and we're going to left click and drag and we're going to go all the way across the
board.
Until it snaps and then we're going to go down to around 64 64 points high.
And we have our first shape in sketch so congratulations.
And as you can see this attributes pain kind of got filled up in it's referencing the rectangle.
So because we have the rectangle selected it's now saying OK look you can you know change the opacity
you can change the radius of the corners which is really cool right from here.
Phil Boyer's shadows Blur's a bunch of course stuff you can do here.
But for now we'll just go ahead and check the border.
And I want to make this Phil a darker color like a dark gray.
So go ahead and find a dark gray.
I'm going to use this because this looks pretty good.
If you can't find one that you like I'm going to use 3 7 3 7 3 7.
All right.
And that looks that looks good.
And so we're going to want to rename this so we don't get confused because as you start adding more
shapes and more elements onto your board it's really important to keep this side of the screen organized.
You know you'll end up having 30 rectangles and not know which ones which.
So go ahead and type in navigation rectangle.
Now let's go ahead and insert text so again appear at the top top left insert text.
That's huge.
Let's go ahead and bring this down just a bit and let's type top10 you top 10 in all caps one word and
I'll show you why in just a second and go ahead and choose a font that you like but remember that we
wanted to give off let's say a modern credible deliberate feel.
Right.
So this is the first example of you know going back to these three these three questions that we started
with are these three bullet points that we started with and using them to dictate our direction as we
go.
So I kind of want this to you know feel like it's a it's a modern modern brand.
So I am going to will first of all let's boldy and our show is pretty cool.
Right out the gate.
I'm using Avenue next.
I really like it.
I feel like it has a really good authoritative bold font.
Go ahead and choose something that you like.
That is a modern credible and deliberate and I am going to separate these two words.
I'm going to make top the word Top White for now and I think that looks really cool.
Now as you can see when you start dragging any elements you know in or around a shape these little red
grids will come up.
Are red lines.
And this is a really handy thing a sketch does basically telling you hey you know what.
Here's the center of this rectangle So if you put it here you know your ass it will be centered.
And here's the top and here's the bottom.
We're going to go ahead and just leave it here for now.
Right smack dab in the center and that is looking pretty good right.
So before we move on there's a couple of things that I wanted to point out and the first thing is if
you notice this top 10.
So like I said before we wanted to keep it one word but we split up the colors to denote that there
are actually two words you know top 10.
And it's really important whenever you can to find ways to speak with colors texts you know especially
with text Boulding things and you know keeping things maybe like light.
It enhances the personality of your app what you're trying to convey and since you're trying to convey
a modern ABW I thought this was a perfect example of how to use that in practice other things you can
do other things you could do is if you just highlight a top and maybe made it ultralite for example.
I mean that even looks I mean looks pretty cool.
But instead what we could do is keep you know make this white or vice versa.
Or maybe that's a little too bold but things like that where you can have some things like somethings
ball some things Demy bold and something regular you know really add adds character to your text.
And you know your UI.
So I'm going to go ahead and change this back because I like the way it was before.
And for 10 we had a green color.
It just shows one of these.
It looks pretty good.
We use that.
So go ahead and choose a green color that you like.
If you are having trouble finding one I'll be using this one it's for be five 5 4 9 looks pretty good.
The second thing that I wanted to point out is if you notice we made the navigation bar gray and the
reason why we're doing this is the the body or the rest of the app is going to basically be a table
view that's very image driven image heavy.
And as you're scrolling through especially with dynamic text you want to make sure that no colors are
going to really clash with the static assets that you have in your app right.
So thing but what I mean by static is things that are going to stay like the navigation bar or you know
like a button.
Right that's going to be overlaid on it.
And so for example if this was another bold color we'd have to worry about our dynamic assets maybe
you know some images that we're grabbing from a server.
Clashing with that.
So my advice is that if you have a lot of dynamic assets especially images that could be a variety of
colors you know grays are great black and white.
Basically anything in between.
You know do a really good job at keeping things looking nice clean and modern but also give your dynamic
assets room to shine.
So that is pretty much those two things I wanted to point out.
So yeah we'll go ahead and move on.
We are going to go up here to the top left and we're going to insert another shape and this is going
to be the placeholder for our essentially the first cell in the table view.
So we're going to go ahead and insert a rectangle around a left click and drag from right below the
navigation rectangle and we're going to go down around 175 175 points.
Now you notice I didn't quite get 175 but don't worry right over here in the on the right hand side
we can go ahead and change.
We can just hit you know delete 175 and we now have the dimensions that we wanted one thing to know
is that we have this little walk icon here and what that's going to do is when it is engaged when it's
locked it is going to keep all of the dimensions proportionate meaning if I decrease the height it is
also going to decrease the width to keep things aspect ratio.
So as I started decreasing it is you know adjusting accordingly to keep the proportions.
So we'll leave this unlocked for now and let's go ahead and take off the borders and since this is just
a placeholder tax let's go ahead and just have fun.
I want to make this all black all black because we're going to be putting stuff over it.
And I want to be able to see it flow.
So.
So that's good.
Let's go up here again and click insert text and I'll put this right in the middle and in all caps go
ahead and think of maybe a creative article title that we can use will do.
Maybe Apple releases new MacBook
OK.
So just roughly throw it in the center doesn't need to be perfect.
So are you going to do is select this text and you're going to hold down shift and also select the rectangle
behind it.
And what we are going to do is center this text in this rectangle and we're going to do that by clicking
this little icon right here.
It's a line vertically.
And basically what this does is it takes all of the selected elements and snaps them vertically like
the like the icon is shown here.
And we're going to be using these a lot.
You know there's a line from the bottom from the top left to right.
Horizontally We'll get to these in a little bit.
But if you click it you'll notice the snaps directly into the center of the of the rectangle.
And you know what made me say this rectangle popped out.
It shouldn't be in the navigation bar or navigation bar should be only have the rectangle and the text
in it.
So we're going to go ahead and rename this image cell one just so we know and this is looking good.
So now there's two elements that I want to add to this cell.
Before we move on we're going to go ahead and insert another text.
And let's go ahead and type in the date.
So say 10 26 2016 almost Halloween.
And again we're going to want to speak with our attacks and the date isn't as significant as the title
so we're going to make it a little smaller.
Size 15 is good and I'm going to make it.
Oh Troy.
Going to see what that looks like it might be a little.
You know what.
It is a little too light.
Let's go ahead and make it regular.
There we go.
Are right.
So we have our day and let's go ahead and insert one more text and I am going to write a mock comment.
Area.
So cynosure scrolling through all of this those are going to look like this.
And you'll quickly see the title.
You know I might catch your eye and then how many Kommissar are and the date that it was posted.
And there's a couple of things that we can do.
So these elements are obviously secondary to the title and we could either stack them like so you know
that doesn't look too bad actually.
It looks really nice.
We can kind of drag them out into the corners.
The only thing that I don't like about this and you might want to be wary when you're building your
own ABSs this tax is actually dynamic as well right.
So let's just say we had a title that was just said MacBook right now this looks pretty good.
I'd say it doesn't look bad but it's something that we want to keep in mind.
Is there a better solution since our titles are going to be stemming from the center and then moving
outward.
Maybe we should do the same thing with these two.
So I am going to insert a shape insert a line.
I'm going to try to make it right in the center right here and I'm holding down shift as well.
But keep it if you know as you're holding on.
Sure it's going to snap it to a 45 degree angle so to make sure it's a straight line down the middle.
And I'm going to turn the thickness up to maybe two two is good and I'm going to change the color a
pure white.
And so as you can see it's kind of snapping to the rectangles center we could also just to make sure
we can select it as well and a wider horizontally and then I'm going to take my comment and bring it
in just a little bit and bring this in.
Same with the date.
And I'm going to zoom in with command plus and just to make sure as you can see if I'm using the arrow
keys now but with the comments selected you can see how far apart the comments are.
So I'm going to make them twelve point five.
It doesn't need to be twelve point five on your end just as long as you have the number in mind.
And I'm also going to make sure that the this is left line because if we go in and edit these we want
them to expand outwards.
And now I'm going to go to my day and give it the same same distance to twelve point five away from
this this little little line that we just made and also making sure that this is this is right a line.
So if we went to edit it it would shoot out to the left.
Now I'm going to take all three of these elements so make sure they're all selected and I am going to
align them vertically just to make sure that they are all correctly aligned and pixel perfect.
So now you know what I'm going to do as well just to experiment.
I'm going to make this a little smaller.
I'm going to make this maybe 13.
Both of these both of these 13.
That looks a little better.
And with all of these selected again holding down shift I'm going to command you to group them.
And we'll call this so details
this is the title.
And so now with the cell details holding on shift clicking the title and the image cell we can go ahead
and throw all of these into it's own group and title it sell one.
Right so just to recap what we did here is we made sure that these had an equal distance apart from
this line that we created which we had a wind horizontally in the entire cell that was what.
And we made sure that this was had a left alignment and this had a right alignment so that if we went
to go back and change it it would expand outwards.
And similarly with the date awesome So now things are looking really really clean.
We have our cell one and group together.
Now what we're going to do is if you hold down option and left click on your cell one and you drag.
It's actually going to create a copy of it.
And so you can drag until it snaps to the bottom of the first cell.
And let's just go ahead and rename this cell to
our right now all we can do is go in and change all of these to something you know a little more little
more interesting you know instead of having eight or ten Apple releases a new Mac book.
Let's do I don't know.
Company X sells for 1 million.
That's fine and this could have you know six comments.
I don't know.
Not too many people are not as many people are excited about Company X than Apple.
All right.
So we're going to go ahead and do this all the way down for every single cell that we're going to have
showing so make sure that cell to a selected run all down option click and drag and analysts do it one
more time just so it can cap off its tail and right click and drag.
Let's go rename this cell three and this one is the cell for.
Now what's really cool is we could then take all of these so highly.
All of these and put that in its own group and call it Table View.
So I know this doesn't look all that great right now.
It looks like we just basically made a huge giant black square or rectangle and slap some text on it
but I promise you it will look better.
So now we're going to do is put some images behind it.
I grabbed four images off the internet that is going to loosely correlate with the title and what you're
going to want to do whenever you're filling in images or you know creating mock mock images like let's
just say you have a user profile and you want to fill it in with you know maybe some headshots you found
on Google.
I always strive to find the best pictures and find the best images that is going to fully enhance the
personality and the UI or the app.
And for a couple of reasons the first one is if I'm handing this off to a developer I want them to see
the vision.
Right.
I don't feel like I could easily hand this to you and I was developer and say like.
All right so I mean you kind of get it right but there is I know this is black space but there's going
to be images back here right.
Some people might get it.
Some people might see the vision and say this is perfect.
I get it.
This is awesome.
And some people won't.
And that's just the reality.
And so especially if you're designing for a client and you're going there are going to be handing this
off to a developer.
You always want to make everything as concrete as possible you know use the best images you can find
and try to simulate it as if it was an actual live app try to get as close to that as you can because
it'll work out really well in the long run you know if you're doing it for a client but also I've noticed
that a lot of people don't go down this path whether they're lazy or you know they don't see any value
in it.
But come to find out sometimes if you actually start plugging in things that you might use or you might
see in an app you may run into even better ways to present data and present information and images so
highly encourage you to go the full nine yards when you're designing.
Some people you know are I said are not going to see the value in it right off the bat but it's definitely
100 percent worth it.
So go ahead and find four images that are loosely tied to your titles and what we're going to do is
click the image sell.
So drill down into your groups and so you find the image sell and click fill.
Right.
And instead of this black we are going to click this little photos icon under the pattern fill and we're
going to choose image and I have mine saved to my desktop somewhere.
So I mean and grab it and there's the MacBook Pro right.
And let's go ahead and we'll leave it on Phil..
You can play around with these later because they're definitely worth looking at.
Fit will keep the image you have aspect ratio and they're just going to be a white space around like
as you get here at here stretch is going to make sure that all the corners are filled.
But now our Mac Pro is is you gained some gain some with and tile is basically going to talk to them
across so we're going to stick with Phil and I think there's some people Pardhan outside.
We're going to stick with Phil and as you may notice some parts of it are too light for our techs to
see through.
So we are going to decrease the capacity to let the black background show.
Oh you know what actually here's what it says so if we go to our site or our board and click background
color it's going to check off including export.
We're going to want that as well.
Click here.
And let's bring make this black and basically what this does is OUR out our board of board our art board
excuse me.
When we created it is transparent.
Right so every asset that we throw on top of it if we were to export it out it's not going to export
a white background.
It's going to export a transparent background.
And that's why when we selected background color we included it in the export because if we didn't we
would only see it here but we wouldn't see it when we export their design.
So now that our background is black and we decreased the opacity of this image.
Now our our white white Texas trying to show through and it's looking really good.
So you know you can increase or decrease the taste.
I for this project I want to keep it around 65 and that looks really good.
And then you can go ahead and do the same for the rest of the images so fill them in to find.
I saved an image that reminded me of something like a Company X that might sell that wasn't that wasn't
it but it looks like they're doing the deal and would decrease the capacity to 65.
You can either use the slider or type in a number if you know it
in this one.
We're also going to have to change the title on this too.
But let's throw an image on your first
office.
Bring this down to 65.
And again we don't want to be lazy.
We want to be full and thorough So even though there's no text here.
We're going to throw an image in here just to simulate an actual app have a skyscraper.
So here is one really really good benefit of filling things out and we wouldn't have caught this if
we hadn't done this.
But basically I almost feel like it is a little too busy with the opacity being 65.
Maybe we need to bring it down even more to have you know the everything stand out in its own little
block.
So I'm going to bring it down to 30 and then maybe we can work our way up from there.
That I think 30 might do the trick.
Now I wasn't even.
It was an even adjusted so that is looking a whole lot better.
Let's also you know do this one company
Y raises 65 million
and they should be on the same day.
That's fine.
OK.
So
you know like I said before if if we hadn't actually gone through this exercise of putting images in
to into our placeholders we might tell a developer or even do it ourselves say you know what just leave
the opacity sixty five is fine.
Or you know this should work but we we wouldn't have really seen what it looked like and you know as
you and funny funnier is the more that I'm looking at this the more I'm realizing that this this line
are not line of where the images break off are actually kind of visually cluttered with the date and
the comments of the previous cell.
Right.
Like if we're scrolling down I don't know if these comments and the state is with this one or this one
and things these assets need to be fully readable from a glance.
So what I'm going to do is I'm just going to move this up and drag this up all the way
and do the same thing for this one.
Drag it straight up.
That's it.
Third one.
All right.
Wow.
That looks so much better.
That looks a whole lot better see now things are sectioned off.
We still have you know these these techs coming out from the center.
Both of them the title and the comment.
The common area.
It's looking really really good.
And you know like I said before if we had just designed this with the placeholders we wouldn't have
known how this was going to show up once the three images in here.
And once we did we decided to adjust.
So just to recap you know go the full nine yards when you're when you're building your screens out.
And yeah this is this is a really great first app guys.