One.
All right guys.
Welcome back.
What we're going to do now is handle what happens when you click one of these buttons we need to be
as thorough as possible.
Right so what happens when you click on bid on a project and what happens when you click on post a job
for a producer.
So let's go ahead and start with post a job just because we're kind of in that mindset already you got
that track going and what so let's think about this for a second.
So what do we want.
What kind of information do we want.
When someone posts a job well we have a budget.
The first and last name and their genre could probably be grabbed from the profile but maybe the genre
might be different.
So we'll need John-Roger budget
and maybe the bio or something is going to be pulled from the profile.
So that might be all we need.
I'm envisioning this as sort of a segue from the bottom bottom up.
And so the user can just dismiss it if they want to cancel.
So let's go ahead and insert our board Phone 7 and let's bring this down to right by our feed.
And you might be wondering or asking yourself why are we putting all of these side by side.
I thought you said Evan that we should separate these out in the pages.
Well this page is actually housing everything that is going on from the feed view from the feed screen.
So we want to keep all of these together.
If we were going to saved we'd want to have another page for that.
So that's why we're keeping everything on the same page.
So let's go ahead and we will we could insert our our symbol but we don't need this subtitle here so
let's just go ahead and make a shape in sort of shape and we'll drag this over 65 points high is fine.
Change that
and let's get rid of the border and throw in our awesome orange color.
And I also want to add in the
status bar so white 100 percent because we always have a full charge to make sure everything is lined
up.
Now let's go ahead and give this a title so we're going to insert text.
It's going to say post a job because that's exactly what we're doing.
And I want to snap this to the center.
This actually looks really good.
The top of this is aligned to the center of the rectangle.
And let's go ahead and grab all of these elements and command you to group them.
Call it navigation bar.
Awesome.
Now there's one more thing we need to add and that is maybe like the dismiss or cancel.
I either like to put an X up here or on this side or sometimes cancel a lot of people are really particular
about putting a Cancel on the left side and done or complete on the right side.
I honestly don't think it matters.
I think the consumers nowadays are used to just looking up at the top left or right to see what their
options are and how to close things so I like I'm going to put an X right here so let's go over to the
Noun Project.
These are my head shots from over here.
So let's find a close and you guys can go ahead and find one that fits your personality your personality
one that you think works best.
I'm going to grab this simple little X right here and say it's huge.
It's screw.
Bring this guy up and scale them down a little bit and we're going to double click to add it and we're
just going to go ahead and delete this.
And I think that is getting close to what we want as far as size goes maybe 23 20 is good.
Let's just drag this over here.
I'm going to toggle the grid on just so I can get a sense of where this is.
I like to line this with that so that works well and then
I want this aligned with our posted job.
So let's go ahead and throw this icon into our navigation bar folder that we made.
Now we should be able to kind of line this thing up.
There we go.
All right.
We're going to make this quite
book and see it as a little bag actually I mean just bring this down 18
right.
That looks good.
And since we started with a iOS UI template Let's go ahead and go to our symbol and we're going to go
to keyboard and let's grab.
Well let's think about this for a second.
Let's go ahead and grab the light keyboard.
Someone's going to be typing right.
And I'm just going to align this and snap it to the bottom.
Right.
This is good.
So here's a great opportunity for us to say give the user instructions through a placeholder tech So
instead of us explicitly writing you know tell us what you need.
We could use that.
We could do that through the placeholder text.
Another thing to be mindful of as we're as we're doing this is
there's a couple of fields that we need and we could always always do it in some sort of form style
right.
So have cells stacked upon cells and hey this is my name.
This is the genre.
And here's my budget.
Those tend to get a little boring and it almost feels like you're feeling a format at the DMV or you're
registering for a license or something.
And my suggestion is if you if your personality is anywhere close to modern or for a younger group of
people people who want more of an experience I would say stick to one at most two elements on a form
this could be a sign up post a job like we're doing right now.
These will really really help.
So let's go ahead and let's think of the first thing that we are going to need so we could probably
we could probably get away
with doing something like this
Proxima Nova we'll do a lot italic.
Well actually we'll just do regular and I want to make this a letter grade and it could say something
like
choose a type of genre.
Right.
And then we can also on the bottom we can either have a huge button or just a small little Next can
be right here.
You can go ahead and make this our green color and let's bump the size up a little bit and make it bold.
I think that looks really cool.
I'm going to talk with the grid on just so I have a little bit of
so we can go ahead and do that.
We can also you know how I'm going to bump this up a little bit more the the benefits of doing this
is since there's not a lot of elements on the screen the user is going to see everything and that way
we don't have to.
We're not fighting for attention.
We don't need to put this in a large huge button.
We can.
But this I think looks really clean so type of genre.
Let's go ahead and put this.
Let's rename this first.
This was our close button.
And what I'm going to do now is I'm just going to rename this first.
So it's going to be post the job one.
And now I'm going to auction drag this to duplicate it.
And the reason why is most of these are not going to change.
It's just basically going to be.
Now it's going to be a wussy type of description.
Description next.
And this one this last one.
It's going to be tight or you know give us a budget.
Sit tight your budget.
And for this we're going to get rid of our keyboard because it's going to be a numeric keypad.
I was going to slap this rant on here
and let's just make sure that is in the center and snap to the bottom that looks great.
Karen heard of see what's going on.
Oh that's why.
Let's go to our boards and let's make our background that EF 3 3 or 3 color just in just enough Y and
you know what it doesn't look too great let's just leave the light and that's good.
So yeah that's great.
This for the budget one this is kind of a huge deal.
And the numbers is only going to be so big whereas the description could be pretty lengthy.
We could even do this to the genre if we wanted to too.
But what I'm going to do is I'm going to make this smack dab in the center on a boost up to the font
just a little bit.
And I'm going to go ahead and insert a line right here.
And I'm going to make this our orange color because I think that'll be really cool.
And let's also make sure it's center aligned vertically and what we could do.
Let's go ahead and do something like this.
Let's see what this looks like.
Haven't done this yet before but I want to try this.
No shame in trying stuff right.
So we could also do something like this where I'm sorry my discraft out of memory and so stop the recording.
I guess I should listen to those little pop ups that were showing up but we can also do something like
this where we really really showcase what they're supposed to do what these are supposed to do here.
And and then we can just have this small instruction right here type your budget or you know we can
get real personal Let us know your budget and what I really like about this is it gives you a chance.
You as the creator of the app a chance to make it feel like a conversation instead of a human interacting
with technology.
It feels like a humans interacting with a human and it just so happens that the medium is technology
which is really really great.
So I think this looks
awesome it's fantastic.
Let's go ahead and make that orange as well.
And I'm going to make this light light just looks better when it's huge huge number so we could we could
definitely do that for the genre.
Except for the genre.
If we have Texas big it might fall off the screen if it's some some indie name or some subject where
no one's ever heard of it's like rock psychedelic ETM trance something ride's going to be super long
so let's keep that.
And then the last thing we need to do is for next instead of next it's going to be finish.
So let's make sure we're right aligned and say done
that is awesome.
And the last the last last thing I want to do is rename these boards.
I'm going to call this post a job too and this is going to be post a job 3.
All right.
So another thing to note here is if there's one two or maybe even three steps to something
it is generally OK to not have some sort of progress indicator.
If you go past three I mean I would I might even put one here just like three little dots and every
time you click next it goes onto the next stop so the user knows hey you know what we're on number two.
There's only one more left.
But if there was like four or five or six and I'm going under five and there's no indication of when
this thing is going and I might just opt out of it altogether and I just kind of creates a bad experience.
So one last thing to note for the post a job for the producer as a developer is you're going to need
to handle what's going to happen if you click on any of these screens so probably something like If
you click on here and nothing is typed it would just say or it would just dismiss if you absolutely
typed in any of these and you dismiss it all say Hey are you sure you want to dismiss.
You got some stuff in here you've already typed out and that is probably something you'll need to think
about if you're handing this up to a developer or another team member or if you're making of yourself.
All right.
So once the user hits done we'll probably want some sort of micro interaction to let the user know that
it's been completed.
So what we can do is let's go ahead and answer on our board
and drag this down.
And what we can do for this for this feed is I'm going to turn this into a symbol.
So this entire our board into a symbol.
And now I just can just throw this right on top of here and I going to make sure the X and Y positions
are zero.
And just like we did with the other app I'm going to insert a rectangle over this entire thing I'm going
to get rid of the borders and to make this pitch black and let's decrease the opacity.
Bring it to like 20 or 25 usually gives a nice clean look.
And let's go up to insert
and we'll do well do a rounded rectangle since there are buttons around it as well and we'll create
almost the same interaction we did with our top 10 so I'm going to make this completely white and I'm
going to center it vertically and horizontally.
If you don't have anything selected it's going to center it vertically and horizontally in the airport
itself.
So I'm going to go ahead and give it a shadow and just decrease it just a little bit.
And we should probably write something like
Job posted you know give these are some confirmation that the job was posted and then maybe what you
can do is find a checkmark that you like you could use the same one from the top 10 as well.
That is going to know that the job was posted.
And we can have this probably appear for one or two seconds and then disappear just a little micro interaction
to let the user know what they did went through because without it we would just send them back here
and they'd be like did anything that I do register.
So try and find a checkmark
and it's
this was the one I use last time and I liked the way I like the way it looked look nice.
So throw it on our board
and let's name this checkmark
and let's decrease the size.
They always give it to you at like 10000 by 10000 points.
I want to delete the the text.
Let's bring this in a little more.
Throw this right here and I'm going to make this that same green light that green.
It's a cool color.
All right.
So I'm going to go ahead and group these two together.
And they call this job posted assets and then I'm going to click the rectangle and center it vertically
and horizontally.
Make sure it's smack dab in the middle.
I command you to group and then posted pop over
awesome so that is the full interaction from here all the way to to our complete a job posting.
Let's go ahead and rename this as well.
Post a job finished
great
this is looking really really good guys.
All right so now let's go ahead and work on the producer side of things so we're going to bid on a project.
Luckily this is going to be pretty similar to the flow here.
We could actually probably even copy and paste one of these art boards because I think the only thing
that would probably need and if we're looking at it from an artist perspective if I posted a job and
someone is bidding on my project all we would really need to see is how much they're willing to do or
how much they are willing to work for and maybe like a small description.
Obviously when the user gets it it's going to be in the box to be able to link back to their profile
and you know take a deep dive further into the producer.
But for the actual work flow of producers bidding on projects I think this will be fantastic.
So what I'm going to do is since this is pretty much already set up I'm going to grab one of these boards
right here and I'm going to option dragons click all the way up here
and we're going to change a couple of things right into the title and do bid on project and I'm going
to center aligned this.
I didn't do it.
I'm still here
and will instruct them to write a note and say Write
a note
about this project
and then lastly we can do is
going to copy this one over here.
And same thing we're going to change the title.
You know what.
Let me do this before forget.
Bid on project and I'm actually going to go and change this.
I didn't realize I didn't in all caps go over here and bid on project
and here we can just say let us know your bid center that and then hit done.
Let's also rename these our board so we don't get confused.
It's going to be bid on Project 1 and they don't project to
so we'll probably also need to have a micro interaction or confirmation to show that your bid went through
in the same way that we did the poster job so let's go ahead and insert an art board.
And I found seven.
And what we'll do is we'll turn this into a symbol as well.
I think I already did it see.
Go ahead and turn the feed producer into a symbol.
And once you're done go ahead and insert that symbol right in the art board that you just created.
Make sure that everything lines up and all we can even do is grab our job posted pop over and the rectangle
the partially dark rectangle and let's go ahead just copy it
and paste it right into our new cardboard.
So a lot of free flowing functionality now that we have all these pieces started to come together.
Let's go ahead and do bid on project finished and now it's always got to do is change here to
get sent.
And we can go ahead and line that main line that vertically in the in the box.
And this is an amazing guy.
So sit back and just kind of take a look at what you guys what you guys did.
So we've created one screen out of this one screen.
We split the functionality into different modes and fully fleshed out what every single screen should
look like.
This is super super super important.
I can't stress this enough to actually go through this.
I know it's kind of a pain and you might think you know what I have it in my head.
I do not need to design this.
I'm just going to hit X code hot and heavy.
But this is such a crucial process.
I can't stress it enough.
And along the way you know we've decided to change some things on the fly.
Once we saw how it looked and it also allowed us to think about the functionality before we even were
you know dove into code for example our xplain you know what happens if there is text in here versus
no text.
And if you're you know somewhere in the process that isn't step 1 Do you want to have a pop up that
says Do you want to leave or you know you have some information already you want to cancel or discard
it.
So this is great this is how you should definitely be approaching your products as you're designing
them out.
And yeah this is awesome.
I'll see you guys in the next video.