Hey, everyone, and welcome back.
So I just want to kind of start to finish off filling up this page, I'm going to start thinking about
a couple of different, like UI elements that maybe we, you know, maybe we didn't think about too
much.
So maybe let's start with thinking about so the profile, we kind of removed it from the nav.
And I think, you know, maybe we should have like a static, persistent, like Avatar in the top.
So let's see where we are on our grid so we can start thinking about, you know, if we do have avatars,
like, what do they look like?
I'm going to use the plug in over here called Content Real.
And I have this selected.
I'm just going to select an avatar.
And then we go, we have our avatar.
I just plops right in.
That's pretty cool.
I mean, let's think about do we need something like that?
Maybe.
Maybe not.
I don't know.
Maybe we need to rework Arnav a bit.
What about this?
I mean, what happens if people want to see more?
Do we have a title here and do we have another link?
Is that too much to kind of have that over and over again on a page?
Maybe?
I don't know.
What we can do is we can start thinking about some alternatives.
So I'm going to use I'm actually going to create a large Budden and within that button I'm going to
place it within that frame, I'm going to place some text and I'm just going to just say cover more.
Like, maybe I'm here, I'm also exploring different things, like just our language, what type of
language do we want to use?
Do we want to entice users like that?
We want to stay more standard, like just saying stuff like seemore.
These are the types of questions you should be asking yourself.
So what I'm going to do here is I'm just going to make that right.
I'm going to actually make this an auto layout.
So I switched the vertical so I can adjust the width and
that's fine.
The top.
We want to make this like a forty eight pixel.
So we're just going to have to do a little bit of testing to get it there.
So we have forty eight armed.
Let's roll with 48.
I think that's why this needs to go in the middle, so it's going to just add to the middle.
Let's make this reach the end of our.
Our grid, so it's centered, that looks good, looks good.
We don't need any space in between and we need to fill 100 percent.
We need to fill so we can start thinking about like buttons.
We have this kind of this yellow from our app.
Let's actually just grab that logo.
So we have this this yellow that we're using and we're we're sticking very much with the branding,
the color palette that we've kind of expanded upon.
I don't know if I like this teal that much.
It's making things look really kind of dull.
But let's just keep going and we will figure it out 100 percent.
We will figure it out.
So you'll notice how I've broken up my color styles and I'll get into that later.
But it just makes it easier when you kind of break it up.
I use Kaso like background checks.
Even if you're repeating the colors, you'll notice, like, I repeat, quite a bunch.
So that way if I'm in a very complex component like this, I can easily just pick off like, what's
a UI color, what's a text color.
And if there's multiples, I just want to change the text color.
I can easily just find anything that says like UI or text and just change the base off of that.
I haven't been using that here.
It makes it really easy to go back and make some of those changes.
OK, so for color, I think white will be fine in terms of accessibility.
I think that's pretty good.
We'll need to test that for sure.
And I'm sure this is not accessible.
So like I said, we'll just test.
But I'm kind of liking this nice orange button, like what happens if we kind of add an effect to it?
So I like to do is I'll just create a copy over here usually like this is well done.
I'll just create a bunch of different copies of things.
And I'm starting to see, like, OK, this is where we're kind of going in terms of our exploration,
just general hierarchy, like when you see things separated away from the pages, just remove this image
and you start to kind of like, oh, this is looking very interesting.
And I can see if these little pieces can kind of survive on their own.
I may go back to this image here.
This needs to be refined a bit.
I can start seeing like just the general visual direction of my designs, much more easier than just
kind of viewing in a page one after the other as they're kind of secluded to where you're viewing them
on the screen.
So I'm trying to make one like cohesive language.
We have a button here.
I really like the button a lot.
And what I'm going to do is I'm going to add an effect and maybe this will work.
So I have a default shadow.
So that's really nice.
So I'm starting to think like, OK, what happens when it's active?
What happens in somebody taps on it on desktop?
What happens if somebody hovers over it?
So I'm trying to think about all these little micro interactions as well at this point.
Like to somebody just click and the shadow kind of disappears, kind of like the buttons being pressed
to the bottom.
Or maybe nothing happens.
I don't know.
So just something to think about how to incorporate that early.
I kind of like the shadow.
We'll leave it for now.
We'll place it up there.
Let's also think about some secondary cards that we have here.
So right now we have a bunch of different elements.
We're starting to think about our typography structure.
We're starting to think about just cards, buttons, links, all these different things, avatars.
We have navigation and icons and just the general style of icons.
And we've done this all just from the home page.
Not every home page is going to be like this, but I like to pick a page.
It has a bunch of or just a variety of elements that I can start to build.
And actually it'll help me dictate what that visual style will be going forward.
So the last thing I really want to do here is I want to create some cards.
Maybe they're category cards.
I was thinking, actually, what am I going to do is I just want to name that button.
OK, so I'm going to do is I'm actually going to create another frame.
Surprise, surprise.
She's going to call it card.
And what we can do here is we can start thinking about what this card could be.
So we have a kid like Ray.
I mean, we can use like secondary colors here.
I'm not entirely sure just yet, but what I'm gonna do is I'm just going to.
Stealing from there and I'm going to, you know, start thinking about what these cards can be, shopping
habits and interests, like maybe another way for users to get into, like, that kind of funnel.
OK, maybe that's just not large enough.
Like 20 pixels.
Looks good.
That's fine, what I'm going to do is I need an icon, so I'm going to actually first I'm going to create
a circle within here and that's going to be the background I want to have like a Chevron, a right.
Chevron making it look like you can click on this and it's making that look really apparent.
So let's just set the background to that to white and let's go and find a Chevron to go further icons.
Do we have it under Arrow?
I don't think so.
It's actually under Chevron, sometimes it's under Arrow.
So we're going to click that.
There it is.
Thank you.
And you can take this this frame here.
Perfect.
And I'm going to plop it right there.
And we're actually going to make this another frame and we're just going to call this Chevron, and
that will link to another page.
Let's just change the color of that.
We could do something like a yellow like that looks pretty interesting.
And we can also just kind of keep it like a dark, like a dark block.
And this can also be like just like a dark gray.
I don't necessarily know what's going to work, but I'm just trying a bunch of different options here.
Let's let's see what our grid looks like.
So we want to make this one to make this just a little smaller.
This needs to get onto our grid.
So we got four for this also needs to think about this, so if I actually.
I'm going to shift one to that's eight pixels 16.
And shift control option and using the euro, I'm going back the other way and I'm actually shrinking
it.
So we have 16 pixels and from here a hundred and.
Trying to keep this very similar in height as well, kind of like a square.
So we're just going to eat 16, so we got square here and there you go, like, let's call this title.
Actually, it's already title perfect.
So we have our little card that is really nice.
And if we just copy that, we can start like making other cards based off of that.
So.
Another tip.
Today's trending items perfect, we can also make this a different color, like it could be like that
Barones, I don't know what's going to work just yet, but I'm starting to create some interesting reusable
cards that I'm really liking.
Incoming.
Kind of like that, it can be flash deals and this can be white text.
Oops.
And that will be like a blue maybe.
Oh, no, I'm kind of I'm kind of eating a bunch of colors here, but it's all about just exploring
what may work.
So we got browse our categories, like maybe this just throws them into the category screen instead
of just having a bunch of different categories out there.
But it also gives us a bunch of different options in terms of like like, you know, they can view flash
deals.
It doesn't need to muddy up that home screen.
They can feel like the trending items they can get into like habits and shopping interests.
So, like, there you go, like we're already creating a bunch of different UI elements and, you know,
I'm not sure if I really like going to settle with something like this because I don't know if it suits
the style and just the general tone of the brand.
So I may just do a little bit of a pivot.
I need to think about that a bit more.
And you should definitely you should, too, because this is your design as well, and you're going
to have to figure out what you think is best for you.
So just from the homepage, we have a lot of different typographic elements.
We have a large card.
We have some smaller cards.
I think we need to find something in the middle, like maybe like a middle card that we may use in terms
of size.
We have just typographic hierarchy in terms of like the cards themselves.
And this is just only using one typeface.
And you can see the variation that we've created already.
It hasn't taken us a bunch of time.
We have an avatar over here.
We have buttons, links, and we have navigation as well.
You know, pick a screen that you feel will give you a lot of different elements to work with.
That could be different for you.
It could be different from the home screen in the way you set it up and use that to kind of create those
reusable elements.
And we can even create them into components.
If you really settled on something and use that throughout your product over here, because you can
actually use like those elements to create other elements with some variation.
Like I have buttons here that I've used, have different types of elements in terms of typography that
can be reused, like in terms of the product name and like just the size that I've used here can just
be reused here.
So it's all about like figuring out what style you're kind of you're liking, what's going to work for
the user, what's going to resonate from them.
But also, once you've settled, you need to actually think about reusability.
You don't want to create a hundred different types of cards.
That's fine.
Like I mean, if you have different slight variations, like a button in there or maybe like a link
or like some sort of, I don't know, some sort of price or PILT like we have in ours, like just for
an example, we have like just price changes.
That's going to happen regardless.
But think about reusability just so you can make your life and developers lives much more easier.
And plus, when a user is looking through an application and they see something or a style that is just
incredibly consistent, it makes that user experience so much more better if they're going to a new
page and every time they get to a new page, everything is entirely different, whether that be just
hierarchy in typography, even just use of color.
Something as simple as that could really just make a horrible experience for the user.
And it's just incredibly jarring.
So think about that as well.
Yeah, that's it for visual design and just visual style and exploration.
So go out there and have some fun, experiment with typography, experiment with color, experiment
with all the different UI elements that you want to build.
And I'm sure there are many more pages to build from here.
Just take a look at our wireframe so you can have just so much fun doing that and figuring out which
ways you can kind of build just reusability and consistency within our product.
And that's it.