One
or I Guys welcome back.
So as you can see filled in the Tabar hope you guys do the same.
If you haven't go ahead and pause the video and make the tab bar look a little bit like it fits the
app.
This is what I ended up doing.
Go ahead and grab icons from the Noun Project or whatever you might find.
You might actually even be able to make some of these given the shapes that are provided and sketch
which is really nice.
So now what we're going to do is design what it looks like on the artist feet.
So what I'm thinking about the artist and what they should probably see is a list of producers and maybe
highlight one or two of their works or their songs that the artist can just browse and play through
on the feed right then and there.
Let's not send them over to any links or anything.
I mean we could.
But as far as product goes I think it's the most efficient.
So what we're going to do is first we need to think about how this interaction is going to take place
so we have this tap to change rate here and I'm thinking that once the user taps this this will change
into artists and a new feed will load.
And so that will kind of trigger the user to know that you know something has changed.
We're switching into a different mode here.
I don't think we need a drop down or anything since it's only one other mode producer and artist if
we had maybe a producer artist and our guy sound engineer you know maybe we'd have some sort of drop
down but simple marketplace app producer an artist is fine.
So let's go ahead and incertain our board.
IPhone 7 is fine.
And let's go ahead now that we have our handy dandy feed navigation go ahead and insert the symbol navigation
bar and the feed navigation that we had that we've created.
Slap that right on there and let's just center everything and align it to the top to make sure that
it's all good to go.
And for the title this type in musician
and or maybe you should do artist artists a little better.
And for the subtitle tap to change again.
And let's also go ahead and insert the status bar
and make sure that it's snap to the top 00.
OK.
All right.
This is really cool so.
And lastly let's go ahead and answer our bottom bar tab bar
if you added yours and created a new symbol for it.
Go ahead and add whichever one is appropriate and OK that looks great.
And let's go ahead and rename this so we know I'm going to call this artist so I call the other one
producer.
This is the producer of view and this is the artist's view.
And so awesome so what I'm going to do to start is I'm going to copy this cell over.
I'm going to control C and the spinning wheel of death and I'm going to go over to this art board.
I'm going to paste and slap it right on here just to give us a little template to work with.
Oh and before I forget with the artwork selected Let's go ahead and check background color.
And I believe this was F3 F3 EF 3 that off white.
All right cool.
So the first thing I'm going to do is we'll leave the first and last name in the genre because we will
probably have some sort of we'll probably have some sort of field in there for the producer.
So we'll leave that.
And let's get rid of this button that's been on Project button
and let's get rid of this budget.
We're going to go ahead and bring this up just a little bit and maybe this could be where the bio is
for our producers so I have been producing
etiam music for the past decade.
I have a passion for music and look to create art at an affordable food affordable cost great and we
can just move our little
this up.
This is actually.
So this is cool I mean since these are going to be probably pulled from art from the producer profiles
what we could do is we can just say based out of Los Angeles maybe there's like a location.
OK so that is looking great.
Now what I want to do is we also want the artist to be able to quickly scroll through and then maybe
play a featured a featured song that is on the producers profile that kind of sells them a little bit.
Right.
So I'm going to drill down to the rectangle and I'm just going to scroll down a little bit to give us
some room and let's go ahead and answer some text and we'll type in featured song
and I want to make the size 15 let's give this our dark dark color or what we could do is give it our
green color and see
black in it.
But I can just go over here featured song and then maybe give it a bold
make it a little bold.
I want to put this in the cell one so it's able to to read in the context.
All right so we have our featured song and maybe we want to have the title of it so you can say
I don't know let's make a cool song name.
Burning
tires.
I would just call her remarks.
I don't know maybe it's a song about racing her.
I don't know.
I came to my mind but we'll just leave it.
And to denote that even italicize it be pretty cool.
Let's also put this in Sal one
remix and give an artist name by the slap back fools.
Sounds cool.
OK.
So
I might want to decrease this just a little bit.
So featured song kind of stands out a little more we want people to get excited when they see that.
And I think all we should do is just have a play button.
So let's go ahead and we can either make one or grab them from the Noun Project and go and do that.
So I'm going to cook something else.
Let's go ahead and type in play
and this looks pretty cool I like this one and I download that
and I'm a dragon over here.
It ends up in the wrong art board someone plop it right here and it's kind of scale this and because
this is crazy.
And we're going to double click to go into edit mode and let's just highlight and zoom in a little bit.
You can see it we're clicked over the text.
Thank you.
Those icons X icons Daco won't be needing that anymore.
Hit enter and let's go ahead and
put the play button right here.
Now we want it big enough so that the user can just quickly tap on it.
But what I'm thinking we do is we could even put the title right here.
And I think that would be a nice little compliment to our play button.
I'm going to rename this play or play button
and we're going to want to fill this with a color.
He even try orange that looks really nice actually right out of the box so I'm going to select the title
and the play button.
I'm going to align it vertically and then I'm going to group them
and we'll name this featured song and we can go ahead and line this.
So you see how it automatically reads that I'm 15 points away from the base out of Los Angeles Tex and
then I'm 15 points away from the featured song.
I like the way that's looking.
So I'm going to go ahead and leave it.
So let's bring this back.
Let's select a rectangle and let's bring this back up just a tad.
And the last thing that I want to do is some sort of indication that a song is playing.
And I think to be really clean and slick if we had a little bar that runs along the bottom so let's
just say I'm playing the featured song.
I would then be able to see how far along the song is.
I don't think any times or anything.
I think it will be pretty apparent what's going on so let's go ahead and answer or insert a shape a
rectangle and let's just draw one right below on the bottom right here.
Looks pretty cool let's get rid to the borders and the high is eight I'm going to drop this down a little
bit to maybe six I'm going to zoom in
go now let's go ahead and whoops let's go ahead and bring this in just a little bit so it kind of looks
like you know we're maybe halfway or a quarter way through the song and I'm going to fill this with
her orange color because I think now looks really nice.
So all right.
That looks really really nice guys it looks really cool.
So here is our cell one.
Let's go ahead and throw a rectangle in.
So one is well can actually put in our feature song group we have featured song.
This title can go in there as well.
And our cell details and the rectangle perfect than ourselves so let's go ahead.
Now keep in mind as well since we want to make sure we have her bases covered every time these are taps
on something right.
So if we hit play we're also going to need a pause button ready.
And so if you're designing this for yourself what I would do is go find a pause button make it the same
dimensions and you could put it in the cell and you can have one hidden or you can have one hidden and
then one where showing the play button.
And basically what this will do is you can go back and forth to see you know what looks best and then
let's go ahead and option drag this down.
Here we go.
You know I think this was
good.
I want to say we were 10 points away so let's make sure that we get that.
So one two three four five six seven eight nine ten.
Perfect awesome.
So just for continuity sake since this is playing out this could also be possible let's go ahead and
let's find a pause button because we are thorough product people we're going the whole nine yards to
go ahead and go to the noun project find a pause button and let's go ahead and let's slap it on here.
Right.
And it's going to be in one.
And let's bring this missed pause button down and let's WHV go on edit mode.
Highlight.
Thank you David Garcia.
I'm going to delete that and let's click to see how what the dimensions are for this play button was
so is 58 by 58 so we can just go in here type in 58 because the lock symbol is on.
And let's just drag it right over and it looks perfect.
So in feature song Let's go out and rename this first pause button
and drag this right over the top and then let's change the fill to our orange.
And so now we can do is we can hide our play button or pause button depending on what we want to show
and that's denoted by this little AI AI AI when you hover over any asset middle height and toggle it
between hidden and hidden.
So now this looks a lot more like what you would see in an actual app you know there's there's a play
bar or you know like a progress bar going on for when the song is being played.
And you can posit here this is this is all great.
And the last thing that we should probably do is put our bottom bar up to the top so that you can see
your navigation.
So this is our producer and artist mode.
Now another thing to consider with these sort of toggles is if youre a producer you may want to say
what did I do.
You may think OK I'm a producer Intuitively I would be on here.
But then you see all these artists posts.
So while we could even do is type in producer mode to make it super explicit You always want to be as
explicit as you can.
So yeah thats looking great.
So what I'm going to do is group these two cells or first or rename this one rename the cell to and
I'm going to group it and this is going to be our table view.
And if youre an artist you're going to want to post something right.
So let's go ahead and create a call to action for our artist and artist Moat's going don't drag this
down just a little bit.
Give ourselves some room
and what we can do now is go Insearch shape maybe use a rounded rectangle and let's just make a little
button right here
and we're going to center in on our board.
Let's get rid of the borders.
And what I want to do is give that green color that we had.
I'd still probably say this to my colors but that green color that looks nice.
And let's go ahead and insert some text and let's say post a post a job.
That's fine.
And let's make it white and I'm going to make this bold if you post a job for a producer and let's make
this size 15 and throw this right in the middle and with the button selected We're going to line it
vertically and horizontally and then Group it.
So post a job button.
And if I were to explain this to a developer or somebody else on the team what I would want to happen
is this shows up at the top.
And as you start scrolling it will eventually go behind the navigation.
Right now we have this entire screen real estate to browse and to scroll.
Right but I want this call to action to be right smack dab at the top so when once you jump in artist
mode you can post a job for a producer.
This is looking really really slick.
So what I want you guys to do is maybe think about how these two screens could be better.
Go ahead and design them and then fill in the user profiles so that it looks more like a live app and
less like we just put a bunch of placeholder text in there.
But yeah this is looking great guys all I see in the next video.