First night here.

And this is the second video of us designing our application.

I hope you already have your sketches ready because we're gonna take this sketches in tournament to Adobe ex defiles where we're just gonna do the log in screen in the feed.

Similar to what we sketched up and I will be including my designs of ones that I designed in the church in box below.

Once I get that uploaded to dribble or be hands, I have to look into him.

I'll figure out which platform gonna use and then post it here.

And you guys can use those however you want.

You can change them however you want, but I'm also going to finish up the social media screen's gonna make, I don't know, 10 to 20.

I haven't done it yet, But once I complete those, I'm one of the others over on the creative market for, like, 10 bucks.

And if you realize that you have more money than you have time and you don't care to create it on your own, then go ahead and purchase that or if you wish to support the channel, go ahead and purchase that, and you can change those.

However you wish your yours to use freely.

And if you realize that you don't want to purchase that and you just want to go with creating them on your own because you want to learn how or you have more time than money, that won't hurt my feelings at all.

It doesn't matter to me.

That's perfectly fine if you do not.

But that's out there for anyone who wish to support the channel.

Continue allowing me to create these videos for you guys.

So keep that in mind while we create these applications.

These designs.

So this may be the last video of this design, Siri's, because I'm gonna turn this design into a prototype in this video, and I'm also going to start developing this application.

Not this one, but the one I'm creating on my own.

This application, these designs are strictly for you two for purposes, because I don't want to give away all the ideas or the design of my actual application.

So this is just to help you guys out.

So this is what it looks like.

And with that being said, let's go ahead and get started on creating that design that you just saw.

So right now we're gonna make the sign in screen in the content feet, starting with the sign in screen.

Let's go ahead.

You open your ex d, Of course.

Let's change this.

Just a name it.

Sign in and make sure you periodically save your file so you don't lose anything if you're something happens in the program crashes, which hasn't happened to me yet, but Premier has.

So I'm kind of skittish about anything crashing.

You just want to say periodically something you learned a long time ago.

But let's name the sign in this change background color to like a gray because we're gonna be using some white thoughts on because we're going to change this background to an image and we're gonna mess with a little bit right now.

Let's create the wire frame where the wire frame it doesn't have all those fancy dancy colors.

Maybe one or two is just kind of the basic idea, something that you would make you would send over to your client or whoever you know for yourself, be like All right, I approve of this.

This is good to go now you can implement the colors.

Otherwise, it would be like, All right, I don't like that sign in screen.

What I would like to see is this this or that.

So just make a wire frame, give it to the client, get their approval, and then implement images and things like that of that nature.

But right now, we're gonna make fun of the wife first.

So let's make this look gray.

And I like to work with grid of 15 square grid because it's just elected a space things out.

15 apart from the edge.

First, let's head in our name and logo.

Since we don't have a Logan.

Just gonna kind of leave a blank right here.

Normally.

Put a logo here in the name here.

So let's name this.

We're gonna name this biscuit, all caps, a biscuit.

How Vatican knew.

Yeah, we'll keep it like that just because it'll be easier that way.

Existence as a default text for this purpose.

For this purpose.

I don't need to keep going back and changing that text to something like a boat, a rowboat over Botto or anything that I would use alternatively, So let's put this at 50 like that for this centered not all the way centered like this, but centered vertically and up above.

There would be room right here for a logo.

Yeah, let's put it right there.

And that's through this toe white.

Is that what I want to do?

One of medium bodied Let's make a medium body.

I like that a little bit.

And then we're gonna do is create the boxes for our email in our password in order to enter and then hit the sign in.

But so let's make our boxes from the 15.

Let me scroll in a little bit.

I like that Me scroll out a little bit too 60.

Let's make it 60 for right now.

And I love to take these all the way in.

I like that.

Look, it looks good.

So that's what I'm gonna use.

And it'll obviously, whenever it comes to this, I like it 30 and on each side, Not 15 but 30.

So it still works with 15 Great block email.

I wouldn't change this toe white.

They were gonna change the background of this.

Just make a dark gray with email there.

Let me take off this border and then let me throw this in the center.

Sometimes it doesn't look centered.

As you can see, it looks like there's more weight on the bottom than on the top.

And that's exactly what's going on when you have all mostly lower case letters instead of all caps.

So we can adjust that up.

One if we wish, which will make it look better and more center to the eye and then we're gonna do is merge These mixture that's not selected you can you can do is highlight it like that or flicked pulled down shift selected.

The other item and then command G or when you can do is come up here.

Object group C command E un grip is shift Command ji, We're gonna take this boat.

Hold on, art.

Turn down here password typed password.

And here there's a little bigger.

So that looks just as good.

Everything's just saying this is already grouped together, I believe Yeah, and I just hit Command Z to undo that.

I just wanted to see if the group together, just like these are since I duplicated it and then be low that we're gonna have, ah, forgot password or lost password lost password.

That's also going to be white text, but we're gonna make it smaller.

So, like 14 loss, pastor Pastor is never as prominent as any of the other text because you don't use it is often so center their space of 15 apart, and then we have to have our sign it.

But so let's also felt drag this down.

It's that 14 right now.

So I'm going to do is let go drop down, you know, using uh down arrow just to drop it down to use your up arrow your side to side a row.

But now it's centered vertically.

Third down, 15 space and then we don't want to say password.

You wanted to say sign and then hit escape.

To get out of that, make sure you're selected on the actual text box, not the whole thing, or else it'll move it all.

You got to come up there we go.

And so it doesn't look like the rest.

Let's let's pick a color for this.

What would be good for, like a restaurant or recipe?

I have no clue.

Um, come to fill what color do you think of orange?

Sure, let's make it orange.

Maybe don't like orange.

But if you do decide to download these files, you can change the color to whatever you want.

So let's just make it orange.

And then below that, we're gonna have like, uh, sign up button.

So we're at 14.

Let's drop down.

More signed up, had escaped to get out.

Drag it over.

I don't know why it always was locking at 14 made because the text is a little bit more lined up that way.

But we're not gonna play that game.

We're gonna go ahead and do 15 I'd already had.

I just want to be show.

And then that's That's it with logging tree and just imagine a logo up here so it doesn't look so bottom heavy, kind of beam or central, more neutral.

If there's a logo up here, you know, we could add in just like a bee logo if we wanted to.

For example, this may.

Let's type B.

No, you can't really see that too well, but let's make it 100.

That's May.

Yeah, let's just do that.

Just just show you guys the offset.

See?

See now it looks a little bit more neutral, more centered.

If this was more prominent, more dominant, more so it would look even more centered.

Now.

It's still little bottom heavy, but that's what we're gonna go with.

So let's go on over to the content feed.

Like I said before, this is just a wire frame, then was named this content feet.

So explanatory, Right?

And then let's change this also to the same colors.

This one over here, they're on the grid.

15.

Let's let's throw in a nap bar to begin with.

So navigation bar top one, not a bottom one.

One problem I've found with the DX dy so far is that you're not able to have, like, stick yelling elements.

So, for example, at least I haven't played with it.

I haven't found anywhere where you can do it.

So, for example, let's create the nab our first.

Then I'll get into what I was just talking about.

Let's make it 60.

I noticed I like 60 tall.

Let's take off that stupid border and then, uh, let's all shift this down.

So it was quick here, here, Ault not all shift all to Dragon or duplicate.

See something like this.

So let me just give you an example.

Probably be easier.

So right here you would have our title.

We'd have our navigation things going down here.

We have home.

We'd have Explorer.

We have posed with that profile.

We have notifications just like Instagram.

That's an instagram example.

And then what you'd be able to is this would be locked in here like stuck to it.

And then you'd be ableto scroll down your feet without this moving around.

What would happen in Adobe X T prototype is that if you came up here and you want to scroll down, it scrolls with it.

You see that?

So it's not able to lock down at the bottom here.

Just kind of scrolls with it.

Unfortunately, I saw, like, last May.

So almost a year ago to this day, they said we're working on sticky alien elements, Still haven't seen it, So that's kind of upsetting, but we'll play with the idea a little bit more and just we won't add in this bar down here, but I'll include it in that like, full package.

So if you need that, you could go ahead and get there.

Let's make this just regular regular size for now.

And let's get back to our regularly scheduled program displayed.

All right, So what I'm gonna do is the Phil.

I want to make this the same color here.

What you can do is use this dropper or what you can do is make a swatch.

I guess that's assuming that colors I had before and now we're gonna have our title here.

So let's just take this off to drag over here.

Of course, we're gonna make this fault smaller.

Let's make it 30.

I like that.

I don't like it too big when it's up in the naff bar, but I do like it centered.

So let's center this center vertically and horizontally.

Within this box.

Let's, for example, let's make let's say we click up here and we want to post something so scroll and make sure we get it.

Get the pin to allow Let's throw it right there.

So you just click and click and then click.

If you wantto kind of rounded off.

What you can do is hold down, click and just messing with it like that Right now, I'm holding down my left click and just dragging it around.

But let's command Z to undo that.

I don't like that.

We don't need it for this.

And then some around here click that again and connected all what's that, did not connect it and then escaped to get out of that and let's take off the border, implement the Phil and then duplicated So command D.

As long as this is selected, command D will duplicate it.

Since this is 15 wide height is all good.

So it's nice and symmetrical.

You don't have, like 28.26 You have 30 15.

This is just location on on this.

So let's drag this over and then shift.