One.
All right guys welcome back.
So the app that we're going to build next is called Audio tangle.
And basically what it is is it is a marketplace that allows musicians to find producers and have those
producers bid on jobs and they can work together.
It may sound a little complicated but what I like to do is grab inspiration from actual real world companies
ideas that have been pitched or are funded because that's going to give you the best understanding as
we go through designing a sap and building this app.
So that is pretty much the premise of the app.
This design designing this application is going to be the most thorough thing that we've done so far.
Basically any button that goes anywhere is going to be tied to a screen.
We're going to make sure that all of our bases are covered because that is what you're going to be doing
prior to developing any app or getting funded or you know pursuing your idea or any kind.
So we are going to there's going to be a full fleshed design and so the three questions just like in
the beginning that we need to answer.
What is the goal of the app the app like I said earlier is a marketplace that allows musicians to find
producers to work with in their area and you know allows them to bid on prices from the producers so
kind of like a marketplace of sorts.
If our app was a person theyd be friendly easygoing and modern.
We want to give it a a new feel refreshed feel from the music industry standard so modern friendly easy
going.
Its not this cutthroat application that is going to hound you for money.
You guys are if you guys understand the music industry theres some pretty dark corners to it.
So we want to get away from that and who will be using our Apso music professionals from 20 to 50 part
time or full time musicians now since it is a marketplace we're most likely going to have younger a
younger demographic that are musicians and then people who are the professionals that are going to be
producing them.
You know might tend to be a little older.
So not to say that there are younger producers or older musicians but generally that is going to be
the break out with a few outliers here and there.
So all right so what we're going to do now is we're going to go to file and we're going to go new from
template just like we did in the previous video and we're going to choose iOS UI design.
And that's going to give us some symbols to work with.
Now let's go ahead and create a page.
We'll call this the feed.
And let's go ahead and insert our first our board so we're going to do our board.
I found seven is fine.
And let's go ahead and start with inserting a tab bar so we're going to go to our symbol
and let's find a bottom bar tab right here we go.
So we're just going to get the layout going.
Let's go ahead and align it horizontally and snap it to the bottom.
So we know that it is right where it needs to be.
And let's also select our board and check this little background color and we're going to make this
kind of an off white.
It's going to be let's just go with EF 3 EF 3 3 which should give us kind of a little gray and you'll
be hearing me say this a lot through the designing of this application.
There are many ways to speak to the importance of things and break things off.
And those two big main things are text sizes and you know Boulding them keeping them regular or light.
So the size and the shape and the fonts as well as using whites and off whites or blacks and off blacks
to to break off certain sections of the screen without a line sometimes using lines are too harsh and
I'll show you what I mean.
As you start building out this screen but something to keep in mind something to definitely take note
of are right.
So let's go ahead and for the navigation bar we've been building them from scratch the entire time.
But let us now insert a symbol navigation bar and we'll go ahead to this one and click subtitle and
let's just go ahead and drag it up to the top as best we can.
If yours isn't perfect you can just go 0 in the X and 0 in the y position.
And let's actually we're going to use this break this off from the symbol and make our own symbol so
go ahead and click and click the stateroom symbol.
So now we can kind of manipulate these.
Let's get rid of the back and click the Add obscurity at it as well.
And what I want to do before we start altering that let's go ahead and insert a status bar.
We'll go ahead and find maybe a white one on a percent battery.
I never like to be on low battery with my phone.
Let's make sure this is 0 0 so lines up and so let's go ahead and click our bar or rectangle and let's
find a color you can choose whatever color scheme you want.
Keep in mind though that we wanted to be friendly inviting and modern.
So something that's going to speak to speak to musicians in that way.
I think a cool cool orange or red might be kind of nice and actually it looks pretty cool.
Be cool to know I'm going to go ahead and go with this color right here.
If you if you want to use this color see all that's a good one.
The hecks is EF 0 7 5 2 8 right here.
And if not go ahead and definitely find a color around.
And I am going to change this up a little bit so I'm going to choose a font
actually the number usually really nice.
I'll keep it size of T and I'm going to make it white and I am going to fold it.
Now what I'll do up here the title is I'll just type in
actually you know what.
Let's leave that let's see that for now.
And in the subtitle.
Let's go ahead change the font.
Well go ahead and keep it.
Size 11 would just make it white and keep it regular.
And now let's go ahead and grab this entire thing.
So this entire navigation bar and I'm going to turn it into a symbol and it'll be subtitled.
Now here's something else so these backslashes actually didn't know the folder in which the symbol was
going.
So for example if you noticed what we did insert symbol.
It went to navigation bar and then we found the subtitle right.
So by having a backslash it's basically saying you're going to find this in the navigation bar.
What do you want to call it right now it's called subtitle.
So I'm going to go ahead and change this to
feed navigation
right.
So now let's go have it go ahead and override our title and subtitle for our title.
We will go ahead and type in producer.
And then for subtitle Let's type tap to change.
So the idea behind this this screen is it's going to be a feed of artists who are posting that they
want worked under their songs and they'll have a bid bid price that producers can go ahead and submit
a bid on.
So if you're a producer what you're going to want to do is you can you can just scroll through and find
find jobs or find work.
And then if you want to change the feed to let's just say the artists or the musicians side it would
just maybe be like a list of producers or something or something that we can easily change from here.
So I will start with the producer the producers feed.
Let's go ahead and save this let's call this audio tangle.
And now let's go ahead into here and let's just change a couple of these so we can get a feel for how
the app is going to flow.
So first on the feed.
So for the second one we can actually have it just be saved.
I think it be cool if there is a way to save our post that you've seen for later.
We'll go ahead and type in inbox the center me for the fourth one starts your profile and then five
will just go ahead and do more.
All right so that is looking pretty good.
So let's go ahead and design out what the feed is going to look like.
Now let's think about this for a second.
So this is most likely going to be in a table view.
What I want to do is let's go ahead and insert a rectangle.
And all right Pulo the navigation bar Alysha snap it over to the right and bring it down roughly 250
points that should give us plenty of space to work with for now.
And let's get rid of the border.
And I want to make this completely white completely white and let's give it a shadow
and that shadow is pretty intense.
I'm going to bring this down to maybe 20 Alpha and you can also use the slider as well.
So this is going to be a cell where the posts are going to live.
Now I want to point something out.
Like I said before I'm using whites and off whites to denote changes.
So what we could have done is just made lines across the screen which would have denoted there was a
change a new cell that wouldn't have looked bad.
But I think that using white and off Whites are a lot more elegant and they're a lot lighter.
Right.
If you can see you know we don't have any lines it's actually just a break of white and off white and
then we're using the shadow to really kind of accentuate the difference.
It just gives it like a really nice and modern feel without having to put lines everywhere.
So this is this is looking great.
So what is a poster going to need.
We're going to have a couple of things we're going to have a picture there name.
Probably some type of description like hey I'm a musician looking for a producer to help me with this
ETM track.
Probably a big number which we want to have stand out.
And then a call to action for our producers if they like what they see.
You know maybe they can save it or place a bid something something to that nature so let us let's go
ahead and insert an oval for the picture.
Let's go ahead.
I'm going to toggle the grid on
and let's make the picture 60 by 60.
That's a nice size.
To get rid of the borders and you know since since it is it's just a placeholder.
You know we don't need to color it in anything specific.
I brought it 20 points from the left edge and then roughly 20 from the top for now.
And let's go ahead and type in the name where the name is going to go.
And the and the let's see the name and maybe like a description so
let's go ahead and type in name and we'll make this left a line.
And I want to bring this up.
So 15 is our header that looks like a nice size limits.
Metro 17 looks like and it's all white.
Can't see anything.
So go ahead and make this a gray.
Here's another perfect example of a gray that is going to look really nice instead of just a dark black.
All right so let's make this 17
and railers fine.
Let's go first and last name.
You know at 17 might be a little big let's just bump this down 15.
That's a look that will look good.
OK.
So and let's also insert a description so maybe there's a place in the profile for us to put
a description or what we could even do is put a genre which would be cool.
So maybe it's just rock you like this.
Shawna rock.
And since this is kind of different and if I were scrolling through I kind of want to scan these specific
things.
I am going to make it so my bold and I'm going to make it the color of this orange
and that looks OK it's pretty good.
All right well we're also going to do is we are going to create a start creating our color palette.
Now what sketch allows us to do is we can go ahead and see where is it we go.
So our.
So if you click a little plus here and I'll actually add this hex to the global colors.
And there's also document colors so global colors will be accessible across projects if you open up
another sketch file you can access your global colors.
I like to use these for things like specific text colors like greys or blacks that I've chosen that
I kind of go to for text things that are going to be specific to the project you're working on.
You'll probably want to keep in document colors so let's go ahead and add new preset right here this
little bottom plus and that's going to add are orange to our color palette.
So now if we're going over here we could have just easily clicked way down there.
You can see it well there goes my screen is too small but it is it is in the document colors.
What we could do.
I'm just going to add it to the global colors for now just so I can see it.
And you guys can see it but that is what it's there for so this is looking good.
Let's go ahead and group these.
So put this in a group and we'll call it post user details.
And now let's hold down shift and click the profile picture and group that let's call it user details.
All right now we're going to do is create the body of the cell so let's insert some text and then some
make something up let's just let's just bring this back to our gray This will probably be a good opportunity
for us to choose a grey.
I think I already have this as forby for me for me
and I'm going to want to make this regular
And let's see what this looks like.
I'm going to bring the size down just to see what it looks like.
And let's go ahead and type I'm looking for a producer to help with down ETM track.
I'm working
one more line.
Let's think of something cool to say.
I am a singer of five years.
And the genre is rocks Let's go and change a stadium just just to be keep ourselves sane here.
OK.
So that's good.
I'm going to bring this up a little bit.
And the last thing are the couple last things is the bid and the call to action so I'm going to drag
us down a little more.
I want the beard to stand out.
And I want people to know where it is at all times right.
So let's go ahead and insert text and I'm going to put the bid right above this description here.
So will go ahead and type budget maybe $500.
Right.
And let's go find a green that we can use.
I have one of these already in here.
Or we can go take our hechsherim or orange and we can go out and find a maybe.
Palatine has a good headset they can spit out for us and we can start with at least.
So here's a cool green.
Why not.
Why not go ahead and copy that Hex.
Let's bring it back over and let's change this color and see if it makes a difference and actually looks
really nice.
I'm going to bold that.
All right.
So
let's go ahead and I want this to be let's see that that's a good size away maybe bring this up just
a little bit away from the description.
And I'm going to slide both these and a line into the left and then I'm going to group them.
So this is going to be the host body.
And then I'm going to drag it over I want to align it to the left edge of the profile picture.
And as you can see it's 15 points from the description.
All right.
This is looking great.
So now we've done a couple of things here.
If you were looking for a specific genre you know exactly where to look as you're scrolling through
you know ETM and maybe we can have a filter on the top right somewhere eventually.
And a budget.
So if you're scrolling through you can quickly just put your eyes in this general area and be able to
see the two things that stand out the genre.
Maybe you're only you only do ETM or Iraq and the budget right.
How much you're going to make if you're a producer.
Pretty cool.
The last thing we're going to do is let's add a call to action.
So we're going to go ahead and insert a shape.
Let's do a rounded rectangle and let's just drag it over here.
Seems like a good
size for a button.
I'm going to get rid of the borders and let's go ahead and make this that green color that we had.
I don't think I saved it.
And I should have saved it but I'm going to go ahead and just grab this green.
That might be a little harsh.
We'll go ahead and edit that later.
And I'm going to insert text.
I'm going to say it's a bid on a project I'm going to make this white in color.
And don't hold down shift and grab the button and I'm going to align it horizontally and vertically.
And while they were highlighted I should agree with them.
Go ahead and grip them go.
Bid button
awesome.
This is pretty sweet.
You know what I also want to do is I want to add that date because I think that is also pretty important.
And we didn't add that in and I just thought of this now so I'm going to drag this down just a little
bit.
Grab this button and drag it down.
And let's go ahead and post body.
I'm going to insert some text right below it and I'm going to say posted and I'm going to make it white
so I can see it.
I mean gray so I can see it while I'm here.
Let's go ahead and make this a regular and go to size 11.
All right.
So posted at.
Think of a time.
4:15 p.m.
on Tuesday
you know what
by Los Angeles I know I am a huge fan of these like times and dates and locations looking organic posted
at 4:00 4:15 on Tuesday in Los Angeles in Los Angeles.
I think it's really really cool.
And to me it kind of clashes with the actual body.
I'm going to make this a lighter grey something that kind of is there but it's not obtrusive and that
looks really good.
So I'm going to bring this into my posts body and I'm going to bring it up just a little bit so that
it looks like it's part of it.
And see what happens when we bring it down.
I could work to
go go go out and play with that.
Make sure it looks good to you.
I like it.
And I'm going to bring this button back up a little bit.
So everything fits nicely in the cell and then bring this back up.
Looks pretty good.
Now one thing I always look out for as well as the top and bottom space so we're being really good about
keeping 20 points from the left edge roughly the same margins on the right and the top and bottom should
also have that same feel.
So this is roughly 20 maybe a little little more.
Let's go ahead and make sure that this bottom we give it enough padding so it kind of looks the same
as the top looks great.
That looks great guys so now we have our body we ever user details and we have a button with all of
these selected let's command you to group them.
Keep everything tidy and we'll say cell cell details.
That's fine.
And then let's go ahead and group it with the rectangle.
Call it cell 1.
All right so now everything is in the cell right.
So now we can do is if we wanted to we can hold down option and click and drag and it'll create a copy
of it and we can simulate an actual feed which is awesome and we want to make sure that our bottom bar
is at the top at the top of the hierarchy so that anything that we copy and paste this is being over
the content.
So this is looking this is looking great.
Guys a couple of things to recap on.
We created a symbol we are using colors and fonts bold and regular to show things of importance.
We're also keeping or being aware of where the eyes are scanning to look for certain things right.
If I had budget at the end of the sentence everybody that was scrolling through would be frantically
trying to find the bulge or the end of the sentence right.
But this is something that's going to stay there all the time.
So the genre the budget and the BEEN ON project those are the static lengths that are going to stay
there.
And we added this this towbar which is which is really really nice so go ahead and save your project
what we're going to do now is I want you to pause the video and stylize this tab bar.
As if as if it was you know your own your own project so you can detach it from the symbol go ahead
and work on it and then turn it back into a symbol.
Throw some icons on here to make it look really nice find it find a feed icon saved in box profile more
on the whole nine yards.
And yeah that's pretty much it.
Keep in mind are apps personality as you do that.
And we'll see you in the next video.
When.