Welcome back.
So in our last video, we talked about hierarchy and just style exploration for our cards.
We did some very interesting stuff in terms of our image over here, even though we kind of admitted
to ourselves that this may not be a scalable feature.
We also talked a lot about just typography in the hierarchy that we have within our card.
So we started working with what we wanted to be like in terms what we wanted to be the main source of
a user's attention.
So when I first come to this card, the first thing that pops to me is the actual price I made stand
out much more in comparison to the product, the product name.
We also added just some description content over here.
But as you can tell, there is a bunch of great hierarchy here in terms of color between something like
this, but also in terms of just size within elements.
So I have larger cards here.
The next thing I want to do is I want to think about like just user interest.
So that's a big part of this current application that we're building for habitual.
So we haven't really touched upon that a lot.
And that's what I want to do next.
So I'm just going to make sure that's affixed to the bottom.
OK, let's just bring this just a little bit more so I'm kind of like I'm digging this this style a
bit, we may not go with this color in the background, even though it's pretty interesting, but let's
think about some other elements that we could build.
I'm going to steal one of these elements, bring it out, and I'm going to have a section maybe called
Like Your Interests.
And over here, I'm going to change that.
To become more bolded.
Did copy, and I may have another that says like.
See more and I don't know if I have an underlying style, so when I'm creating these textiles, I may
have underlying styles, I may have all that kind of stuff.
I do have a link.
I think I do.
Yes.
Perfect.
I try to create like for different use cases.
I'm not to like strict, but I want to set some stuff up early just so it makes my life so easy.
OK, and for the I mean we can maybe make that yellow.
I don't want to have our page, you know, exploding with color.
I want to keep things really simple because just the nature of our product.
Let's take a step back.
If we think about our product, there's a lot of images in terms of product images that could introduce
a bunch of color that we can't necessarily control.
And if we start splashing color everywhere, it'll muddy down the experience.
It'll make it really, really amateurish in a way, make it seem kind of childish.
So, you know, think about that when you're incorporating color.
I'm just kind of using like a dark yellow.
I know that's accessible.
So this shouldn't expand beyond here.
And this is fine where it currently is.
It's going to set the constraints on that.
And we're going to use I'm just going to grip this in a frame.
I like to keep things really neat while I'm designing.
So that way, like I can reuse all these types of things.
I've title and
link.
So this link is going to push them to like a new page, possibly more beautiful.
Next one we're going to do is I'm going to think about like your interest.
So I want a little kind of feature that maybe has little cards in there where users can just like maybe
swipe through.
So we're going to do is I'm going to create like a larger frame.
OK, and I'm just going to give it a radius of like 10 pixels.
I want to give it a feel of like white.
And in effect, oh, see, I have like I have shadows here built as well, which is a great so we have
large shadow.
Look at that.
Perfect.
So you can even make your effect's shadows and we're going to get into all that much later.
This is just so it speeds up my workflow.
It'll speed up your workflow.
Don't get married to anything too early, but we'll have something we can work with.
So that's a really subtle, really beautiful.
The way that car just kind of pops up just a little bit.
We can start thinking about, you know, do we want our elements to be really flat like this or do we
want to actually start building cars that have actual shadow?
So I know I'm mixing and matching a bit here, and that's totally fine.
I mean, this is totally about exploring what our options are.
But I want to start thinking about what cars can look like as well, like these types of cards.
It could translate to me building out this card differently in the future.
OK, so what I'm going to do here is I'm going to give this an actual layout grid.
I don't think I have a little grid for this, so I'm just going to create one from scratch and I'm going
to go to columns and just give it like three.
Three simple columns will have a margin of 16 pixels and GUTTA 16.
OK.
Perfect, and I'm just going to steal this, bring it into my frame.
So this can be like a little navigation that we can build.
So we have gaming.
I know we're kind of just defaulting to stuff like that, but it really helps just to think about the
different types of options we can have.
So if I think about this as a container, you could have multiple things like that.
Maybe tech is one of them.
Travel?
I don't know.
I'm just kind of a spitball in here.
And when I'm going to do is I'm going to actually make this a frame and call this like my nav and we
can do all the layout on it and we can space it by like forty eight pixels so we can have like a carousel
thing going on here.
Like I can have another one that bleeds off, as you can tell, like I have a clipping content.
So anything that bleeds off it will not show up.
So I have education.
So this is fine for just like a dynamic nav that we can swipe through.
We're going to make a line just to let the user know that, hey, you were on this line sorry, this
section.
OK, and what we're going to do next is we're actually going to have some, like, product images in
here, possibly, woops, that was too large.
So, you know, I'm probably just going to take this and make a copy of that.
Bring it in to hear.
Just to show you what it could look like, so we're starting to think about like just like style from
the perspective, just different types of styles like we have like this full image instead of this.
And I'm going to start to see, like, you know, what do I like more?
What's something that I should probably take into account?
OK, so we've been going with a price as the larger.
The larger element, and we can stick with that, I guess the more prominent element.
So we have product name when I'm going to do is I am going to Jerse.
So.
Perfect, and I'm just going to make sure that's there and this is not going to bleed on that.
So this is going to be a frame.
I know there's a lot of frames, right, and that's just so we keep things really clean and it helps
us as we build fidelity, we can easily edit all these different types of things.
Like once we start building our design system, we can start thinking more about where the different
elements we need, where the sizes.
Oh, I have this already built within a frame so I can just pull this from that and just reuse and make
a much more consistent design.
So we've got product details.
Beautiful.
Let's make that auto layout.
I mean, I like using our layout.
You don't need to use all layout.
Like in this case we can probably get away with just like zero.
Um, OK.
What else we have here so we can even make this a frame.
We don't have to make it out a little because it is adhering to our larger frames layout grid and we
can just call this
small card.
So we're starting to see like the details.
And I'm not having a description over here because it's way too small.
If there is a sale, then I have to think about what that looks like as well on this card.
So making sure this is Sinton.
This will be only affected by the left and this should only be affected by the right.
So if I start to move this.
Interesting, that's just because of the Autolib, so that's another thing, although isn't necessarily
responsive, so keep that in mind.
I'm not worried because I'm using mobile only.
So 16 pixels, perfect spacing.
And now we can actually start spacing the whole thing, we can use the for this whole thing if we wanted
to.
So I'm actually going to.
That.
I'm I can actually use Autolib, but.
If I go up here and I hold a shift and down, I'm going to move in increments of four
and I can just.
He's the position this so we have enough space.
OK, so I'm going to turn off my grid because I can't really see what I've been doing.
So we're going to create hierarchy within this this level of YNAB.
And as you can tell, like we started to create something really interesting here, like maybe this
is like a year interest card and what happens here is that for each of your interests, they'll provide
like the top three products so you can just swipe through.
So very interesting feature that we built.
And I'm starting to like this kind of exploration in terms of very nice, subtle shadow of the card.
I may actually go back to this card and update that this probably needs like a maybe a light stroke
or what we can do here is just add that.
Perfect, and maybe we can even think about what the background could look like.
I mean, right now it's standard white.
What happens if I just add like a light gray like that?
Things look a little differently?
What happens if I add a gradient?
So different things to think about?
I think it's perfectly fine right now.
And that's how you create just a little feature from scratch, but also just kind of building upon your
style exploration that we have here, we can start seeing, OK, this may work.
I actually may like these images.
This is the right amount of hierarchy and I'll probably go back and test with users on this to see if
this interaction makes sense.
Like are they swiping on the whole card?
Are they swiping on these little little things?
And now what does this interaction look like?
Is it confusing for them?
But that's how you kind of start to build that level of fidelity.
We're going to keep on doing that.
Our next video.