Welcome back.
So I gave everyone a big rant about design, fidelity and the proper way to jump into a higher fidelity
designs and just general visual style exploration and all that fun stuff.
And now we're actually going to do that.
What I want to do is I want to start with the home page.
I know big surprise home page, but the reason why I like to start with something like the home page
is not always the home page.
But the reason why I do start with the home page a lot of times is because it's a great place to find
a lot of different types of, you know, elements we may incorporate just throughout the entire app.
I see like cards here.
I just see general variation in terms of typographic elements.
I see other elements like iconography.
I see our main navigation.
And I think like there's also variation of cards here.
We may not even build it like this.
I think we're going to make some changes along the way as well.
And that's something to note.
In general, designs just never really stayed the same.
We're constantly iterating based off of what our feedback is in terms of user feedback, also based
off of what we think is a better design pattern.
So I'm going to make some changes here.
I'm going to jump right into a couple of portions of the homepage and hopefully you design along with
me.
You don't need to copy me directly, but I'm going to show you just some decisions I'll make in terms
of like cards and stuff like that that should help you when you go and create your own.
So let's jump right in.
I think, like I've been talking about this a bunch, and I think we should redo the navigation a bit.
I think these options are fine for now, but I really don't like to search at the very top.
So I think we'll just incorporate it in a way where the user can easily just click at the navigation
portion and they'll pop into it like an overlay.
So let's go ahead and just create like a simple navigation.
So I'm going to just kind of go in here.
But I like to do is just create like a frame that's going to house Arnav.
Let's just rename that to NAV, so we're going to create a little nap, we're here and we're going to
pick some icons.
So I like feather icons.
They're really nice.
So if I go, there's home.
It should drop right in there.
There it is.
OK, so home, what else do we have?
I think it would be like undersea or maybe if we just search a part and there it is.
They're perfect's, their search.
And when you're picking icons, I know I went over this before when we went through, like iconography
and stuff like that, just make sure you're very consistent.
You can even create your own like we did.
So we have bookmark.
Orders.
I don't know this.
Do you have anything for orders?
I think, like, sometimes you just need to create your own, and that's fine here.
This one this one can work.
And what's next?
We need a cart there.
It is perfect.
So we got all our icons.
And what we're going to do is we're going to create our own.
All right.
There they are.
We're in a critical navigation here.
OK, so that's the shopping cart.
Perfect.
So these are all twenty four pixels and are they scalable?
No, they're not scalable.
That's totally fine.
What we're just going to do here is we're just going to keep everything the way it currently is.
In terms of the constraints, this should actually scale properly there it is to see how this works
if we scale it.
OK, so we have our icons and I'm just going to kind of place them into our frame for now.
What I'm going to do is I'm going to make the search more prominent as a piece in terms of our navigation,
and I'll tell you in a second, I'm going to do that so we could do Ottilia.
I like doing Autolib just because it's a really easy way to lay everything out within your app and within
frames in general.
So let's do twenty four pixels on the side.
Actually, not let's let's not do an auto layout.
I think the best is just a grid.
So we'll do a five five column grid.
I have some grids in here.
But I think we just got to create our own.
So let's go ahead and create our own grid.
So we're going to choose a college grad right now.
We should just be kind of flying through here because we've done this so much, so we're just going
16.
And once again, I'm kind of working off of that baseline that we we talked about before when we talked
about grades and spacing.
OK, perfect.
Just resize this frame.
So that is nice.
Let's go right in.
And I'm just going to center this, what I like to do is like I'll just go like this perfect.
Then just bring it back to twenty four.
And even if it's not perfect, that's fine.
So we are going to just keep it centered and centered.
So it's going to stick to that same thing over here.
I'm just going to make sure that center is at twenty four and that's going to be actually not the easiest
way to do this is just to kind of select them all and fix the constraints all at once.
So when if this somehow this frame gets resized, we won't have to worry about just general resizing
issues.
So we'll just leave that there, because I'm going to come back to that.
So if you notice, like right now, I'm not really worried about color.
I'm thinking about this hierarchy within the navigation.
And what do we have here, 24 by 24?
And I just want to make sure these are all spaced perfectly within this grid.
May not be perfect, perfect, but close enough.
OK, so what I want to do here is I want to.
It's like to my lips to and I'm going to just create a big circle and I'm going to send that to the
back.
And as you can tell, I have a color style set up, so I'm starting to build out a design system slowly
and I have some primary colors, like I mentioned, I have some UI colors.
And don't worry, we're going to get into this later.
But remember what I told you about just our general color palette.
What we can do is we can go into our color and if we want to reuse it, we can just select that select
creative style and just write your style.
And the easiest way to do that is just to, like, write primary slash.
I'm going to call it gold.
And there it is.
So that's a local style that we have now.
And that's just it's just something that's just really easy to use and will speed up your workflow.
OK, so I'm just going to select that.
So I have a forty eight by forty eight pixel circle.
I'm going to actually go back.
And select that that is a white yes.
OK, I'm going to turn my grid off right now just because it's a little.
A little distracting, so I'm going to select all those and I'm going to just select a nice shade that's
very light.
Remember how we went through just creating neutrals and stuff like that in our color palette?
Similar thing that we're doing right now.
And I think that is pretty good.
And let's just turn on our grid one more time.
So if you want, you can kind of just.
Get that nice.
OK, so this is what I was thinking for our navigation, I think I'm going to have to make that a little
smaller.
So I'm just going to go 80 pixels.
You know how all these pieces kind of stick together that needs to be sent to the center.
So remember to always set your constraints.
I mean, it just makes your life so much easier.
OK, so these are all set nicely and I'm going to.
Make sure that everything is centered, so I'm going to scan.
Call this search
background, and I'm just going to.
Group that into a frame and call it a search and what we can do here is we can just like once again,
Sinter Center.
Everything stays together, so I think it is good.
It's also a multiple of our baseline.
I think we are missing one more thing and we're just going to add like maybe like a horizontal rule.
I mean, there's a couple of ways we can do this.
I like using the.
We're using like a rule or you can use like a shadow.
So there's our way too dark, so we're going to come in here and so there you go, like we're starting
to build a NARVO and I'm really I'm really liking it.
I'm just making sure there's enough contrast.
And we start to look like you can start building that fidelity, like we started to use icons that maybe
are much better for our use case just for our general application.
We're starting to also think about like different types of hierarchy within the navigational structure,
whether what is selected.
So we'd be on the home screen right now.
I think another thing that we should be thinking about is like, what is the micro interaction?
For for an active navigation piece, so there's different ways we can do that.
So I'm going to just use like a.
A little line here that will help us just distinguish what is a. what is an active.
Beautiful.
So help me just make sure everything is centered.
Perfect.
OK, so that's how you build a really easy navigation and you can tell based off of what we've been
building over time and some of the decisions that you've seen me make.
I know I made this based off of a gut feeling, not actual user feedback.
And this is just my assumption.
The first thing I would do is I would test this before I make like a big leap to just general design.
And I would test it again once I get here just because I need to make sure that this interaction is
going to work.
So that's it for the navigation.
And the next video, I'm going to get into some other UI elements on this homepage that we have over
here.
This is our just our little wireframe.
So, yeah, meet me back here again and we will jump right into designing some other elements.