All right everybody welcome back.
So things are looking really really good right now.
We pretty much completed the feed tab.
Now one thing to keep in mind is if you click on a user's picture or name you're probably going to take
them to their profile page which you guys are going to do later on.
But other than that the feed tab is pretty much done and it looks good.
So we're going to do now is move on to the Save tab.
Now let's think about exactly what's going to happen when a user saves either a producer or or a post.
Right.
So first of all we'll probably need some sort of icon saved icon on our custom cells that we're making
to allow the user to easily save them.
So let's let's do that right now.
Actually let's go ahead and open up to the Noun Project and you can either find the icon that you used
to represent the save tab.
I'm just going to go ahead and dive in here and grab that grab that little star.
Just go ahead and copy it and then go back to my feed page and what I can do is drill down into my groups
until I find that first cell.
So with that high lead I can just go ahead and paste
and let's just drag this right over here
and all we can do is kind of give it to like a wider fill because it isn't actually saved yet.
When the user taps on it we can give it a color like a yellow or gold or something.
So this is to indicate that it is not tapped yet it didn't go into this so let's go ahead and do that.
Now what's really cool is if you have something in a group and you have it selected over here in this
this pain and you option click into another group it's going to put it in the exact same location as
the cell just in the appropriate spot.
I'll show you what I mean.
So we have our favorites button if we hold down option and click and drag into our copy which is this
guy right here.
You'll see that the favorite's icon was duplicated in the exact same spot.
So that's super useful.
So you don't have to go back and calculate exactly where it was and try to copy paste it directly in
there and it's now in the appropriately grouped folder so that's super super convenient.
So are at it.
I'm going to go ahead and rename this cell to just to keep things nice and tidy.
And let's go ahead and do the same thing for the artist mode so that and drill down in here.
So I had my cell one in my cell too and I'm going to grab my favorites are saved Iconium and hold down
option and drag it in my first cell folder.
Boom pops another way Skechers making our lives super easy.
And I see it one more time for the second so awesome so now.
And how cool is this.
So we manipulated our feed for the artist and for the producer and now our bid on project or posted
job our boards have updated appropriately because we made them symbols.
Right.
So these are the symbols that we inserted behind our micro interactions are now automatically updating
which which is super super awesome so.
Good stuff.
Now the user has a way to save certain posts or producers.
So let's go ahead and create a new page.
We'll call this saved
and let's insert our Since there are four iPhone seven is perfect and we're going to go ahead and insert
a symbol.
Go ahead and find your.
Let's see.
Well first of all want the bottom bar.
So do the tab bar.
Our custom one once you go ahead and put that in there and let's make sure that everything is aligned
perfectly.
So you want to center it horizontally and then to the bottom and go ahead and click it and click over
here and we're just going to detach it from the symbol because it's no longer selected in the feeds.
I just want to change the colors around to show that we're on the saved have now.
So go ahead and turn this into a gray.
I don't remember what call this was specifically so I'm just going to control C into this gray and turn
it that way.
Looks like it was just that.
Oh I already had it saved.
And let's go ahead and swap these out with our orange stay Rigaud
right now go ahead and up at insert you're going to want to insert.
Let's just go ahead and grab our our navigation from our feed screen.
Go ahead and throw that on there and we're going to make sure it's all line snap to the top and for
this one I want to I'm going to do taxes as well because really do a couple of custom things to this
one so let's manipulate this title first.
But go ahead and just call this saved
and let's go ahead and delete subtitle we don't need subtitles for now.
I'm going to bring this down and I'm going to snap the top of this to the center of our navigation bar.
And then while we're here let's go ahead and answer a status bar.
And make sure it's aligned horizontally and snap to the top so that it is looking good.
So I mean so far and you know three to five minutes with using symbols and things that we've already
created or easily able to create basically a template for our entire saved tab which is awesome.
So now what we want to do.
So let's think about this for a second because in our feed right being good good product people and
anticipating what the user is going to experience and be on this app for so you're going to be one of
two things you're either going to be a producer looking for work or you're going to be a musician looking
for a producer right.
And if I anticipate that you're going to be most likely one of one of those two.
And stick to it.
There could be a small percentage that is both ends going to toggle back and forth.
But since it is a marketplace most likely you're going to be one or the other.
So I think what we should do is for saved since we can either save a project or a producer I don't want
to have them all grouped in the same table view because I think that the likelihood of that scenario
playing out where I'm a producer and I'm saving a bunch of posts then I switch to artist mode and I'm
saving a bunch of producers.
I don't think I don't anticipate that being an ideal use scenario.
And this is something that you guys want to think about as you're building out your products.
You know what is the ideal use case scenario and then how do we optimize the experience for that.
How do we create the ideal user flow and then build out the UI from there.
So I think it's going to be one or the other and so we should have probably a filter that either defaults
to producer or artist and then from there the table view will show you know either saved posts or saved
producers.
And what's even cooler about that is this if you were writing this out in code you can have this tab
talk to your feed tab and say OK if I'm in producer mode let's have the default filter be saved you
know saved post for people looking for work right.
So the app is able to anticipate what the users therefore I'm a producer.
I don't care about saving other producers right now.
I just I'm just looking for jobs right.
So another another way you want to dig deep mentally into the mind of who is using your app and optimized
for that experience.
So enough of me talking.
Let's go ahead and build this out.
I am going to start with the producer mode so we're going to have a list of save jobs from artists so
let's go ahead and insert a shape.
Ovals fine.
And I'm going to talk my grid on control G I'm going to make this roughly.
Well let's see let's see how big this one was because this was kind of a good size I forget 60.
OK.
It's not too bad.
So 60 and I'm going to align it 20 points from the left.
It's fine to get rid of the border and leave that there for now let's go ahead and insert some text
and I'm going to make sure that this is left aligned as well and I'm going to type the first name.
We can go ahead and change the text color to the gray that we we have set for it.
I'll just put this maybe 20 20 points away.
Regular is fine and size 15 or whatever size you guys have already go.
Nice sized 15.
So far this is first and last name so their full name and.
So here's something to think about if I am a producer
and I'm looking through and I have all these jobs saved what is some crucial information that we're
going to want to have.
Scannable.
Right.
Right now at our disposal we have the time that it was posted the day was posted.
Where was the post the budget the genre and the name.
I am not entirely sure that that is John-Roger matters as much as the budget the name because when you're
scanning you're going to associate the picture with the name.
And that's going to stick out in your mind.
And I think I want to default organize this by the time saved right so that somebody's going to have
to keep in mind if you're building this app out or sending it to a developer you know the default would
be from top to bottom from most recent to least.
So I think I'm going to go with the first and last name and I'm going to limit it to two lines of a
description so it will be scription.
This is a description a description that is two lines right.
And I'm going to decrease the size because I don't want to take up the same scan ability scannable space
as the first and last name of the picture.
I don't want it to detract from that so
it's good going to bring this up.
So that's eight points away.
And let's go ahead.
Well let's let's group the description and the name.
So this is going to be post name and description.
And now let's go ahead ingroup it with our picture.
So it's going to.
We can also while we have this go ahead in the line it vertically.
And that kind of fits nicely nicely.
They're really really close to the same height.
And while we're at it let's go in group and post.
Well post description and picture
are right.
So the last thing I think I'm going to want to know if I am a producer that I've saved all these jobs
and probably going to follow up with them later is the bid amount and we want this in a place that's
easily scannable in this area.
This entire side right here is taken up by the name and the picture which I think is super super important
already since the eyes read from left to right.
So let's insert text I'm going to put it on the right side.
I'm going to say good $500
and I'm going to make it that green color.
So we had it think it was out one bold it make it stick out a little bit more.
And I want to make sure that it does not interfere with our dynamic text and what I mean by that is
this first and last name right now.
This is the great right.
With the big amount right here.
Seems like it's out of the way enough.
What if I had a last name that was this long and since the user can put in anything they can do it in
all caps whatever they want to do.
Right now it's getting awfully close to the good amount.
So always keep in mind dynamic text when you're creating your apps you know users will find a way to
mess up everything that you've had envisioned and they'll they'll write super long descriptions and
you'll have to go back and fix your code or I've had an app where I didn't put any character limits
on it.
And then the name just went off the screen or it wrapped around the entire the entire width of the screen
it was crazy.
So you always want to account for those sort of things so.
And of course I spelled that wrong.
So while this is here I'm going to find a good high that's going to float right above it.
And I want it roughly 20 points away from the right edge.
So roughly it doesn't to be perfect we can actually go to the right and then count 20 out.
But this is fine.
For now it's not going to go ahead and delete this text.
And I think that looks great.
So let me add this to the group.
I can actually you know what I'm going to do.
I'm going to throw this in here and I'm going to rename this post details
OK.
So now that we have some grid lines as you can see
we can kind of tell where the how big the post is going to go ahead and add a line
that's got me here insert shade and you grab a line and toggle my grid on I'm going to start 20 points
from the left.
I mean a whole down shift.
I'm going to drag it all the way out to the right edge as close as I can.
And then you can also zoom in if you want to make it a little more perfect.
Just my opinion.
I find that having a one point line is a little afiq.
So I like to just go point 5 over here in the border section of the line and that I'll usually drop
it down.
I may get a nice nice then line you can even decrease the opacity.
I think that looks nice.
Fifty percent.
Kind of like a letter grade.
OK.
So I'm going to go ahead and
sort of give it the same space it had from the from this top to the knife to the bottom of her nav.
And then the bottom two our are aligned so it is rough if you want it to be exact.
We could actually see so that's 40
Do we have a line here you know.
Go ahead.
I'm going to clean this up.
This is probably my my doing but if you had a shot or a line that you can go out and clean that up.
And so we want this to be roughly 40 away.
Let's see what that looks like.
You know it looks a little spaced out.
I don't I don't mind it but go ahead and adjust to taste and use the this picture as a guideline for
how you want this line to be spaced from the top and the bottom because this is all this is all kind
of not as as relevant when you're at first glance and the bid is just kind of off to the right so I
think if anything people are going to be drawn to this general area right here and then see like I said
if this is too close then this huge circle is out of center.
Bring this back up just a little bit.
So I brought it up seven seven points I do the same thing for my line
I feel like it didn't
it looks like it's roughly 15 years and bring it up a little more.
What we can also do as well and I've done this a couple of times before is I'll go ahead and insert
a rectangle in the background and I'll use that as kind of a guideline so that I can use these handy
dandy tools right here.
And so if you're mocking something up for perfection you can insert a rectangle.
Go ahead and throw it over and for this I'm going to go ahead and make it 120
high and let's go ahead and throw it in our post details we're gonna put it all of the at the bottom
because you wanted to be in the background and I'm going to get rid of the border and I'm going to make
the fill white.
Now you could also if you wanted to use the border as a separator you would just have to sacrifice not
having this like little little space which I think looks really nice.
I'm going to keep that.
Go ahead.
You can bring your line into your post details folder.
And let's go ahead and align it to the bottom of our rectangle.
Go ahead and snap that.
And I think actually it it move the rectangle down so I'm going to go in group this and then we'll just
do a rectangle template and line I'm going to bring this up.
All the way to the top
of my navigation.
And now we can do
is grab all of these
and we can group them
post information.
I am running out of names.
Call these things and select our second group.
Let's go ahead and align it vertically.
So you know we're going to have to do is take our bid out of this because it's actually offsetting our
our
our circle here and now just go ahead and with this with this post so it's just going to be the picture
the name and the description.
Select the rectangle template and you're going to align it vertically.
And that will snap it perfectly to the center and then you can go ahead and bring your bed back up.
Make sure it looks good in a good spot and once you're done you can throw it back in back into the Citigroup
folder.
So that looks really really good.
What we can also do
now that we have all of this is we can go ahead and just
option click and drag it down to create a couple more.
And obviously what you're going to want to do is change the bed numbers.
Throw some cool headshots in here.
Change the names make it look super real.
And lastly for this section what we're going to want to do is make sure that the user knows they are
in producer mode.
So we get to that one of two ways we could manipulate the title.
And this is more of what you would want to do is personal preference.
We could manipulate the title to say saved job postings
and we can put like a little drop down or filter like the same way we have it in our feed where they
could toggle between save job postings or saved producers so I kind of like that idea.
I'm going to see I think we used a filter triangle somewhere.
If not we can just make one.
We did not.
OK.
All right so let's go ahead and just make one really quickly.
We can go up to insert triangle.
Let's just go ahead and make it a little trying going.
Take the border off and make it white.
Let's rotate
OK.
It's a little big I'm going to click the lock so we stay proportionate with all our dimensions are going
to just decrease the width.
So that's going to bring down the height a little bit and then slap this right over here.
So now the user knows that they if they tap this what will will probably happen is it will become a
toggle.
So go ahead and drag your triangle into your navigation bar.
And we can go ahead and group the triangle and our title.
Let's go ahead and just call this title and I'm going to position it or line it horizontally.
I'm sorry.
So
that's looking good.
So here is a quick tidbit.
I don't know if it's just me but when you add icons either to the left or to the right of text and you
Center it obviously it's grabbing this edge and this edge and making sure that the equidistant on both
sides.
But for some reason I think visually the text makes it look like it's not aligned and I'm not sure why
and this might be just my personal preference but I always offset it a little bit towards the direction
in which we have the icon right.
So it looks a little too far left.
I'm just going to bump it over to the right just a little bit.
And I find that helps to make things look a little more even.
Similarly if we have this icon on the left and we centered it would probably want to tap it over to
the left a couple of times so that is looking great guys.