Everyone, and welcome back, so I know I kind of went on a little bit of a rant earlier about design
fidelity, but I just really wanted to stress that, you know, don't jump into visual design exploration
too early.
This is an iterative process.
I mean, we are not going to create something perfect right off the bat and we're going to gradually
build our way up.
You shouldn't necessarily just jump right into it.
So what we did in the last video, we talked about navigation and we were exploring that a bit.
And you could see we started to create some hierarchy within here just with colors and kind of already
like the way we're starting to use color.
You know, this yellow was more of an accent and, you know, keeping things a little monochromatic.
Let's see how that may change.
I also need to start thinking about things like just typographic hierarchy.
So let's jump right in and do that.
So I have a grid on here.
I've just kind of created my own.
Let's go back and I'll just show you that so that I have a mobile style here of a grid, which is really
helpful.
This is just a standard Eikon grid and I'll show you what it looks like.
So it's just really standard 16 pixel gutta and a margin of twenty four pixels.
Just something to think about.
This is what I'm using.
You don't have to use that, but let's jump right in.
So I'm going to start typing some stuff that we can actually use.
So, you know, maybe we don't use this halo like line in terms of like the person's name.
Maybe it's something else.
Like I said, it's all about visual exploration.
At this point, we are building that fidelity.
So I have some headings here that that are styles that are really, really helpful.
I want to stress the idea of reusability.
Just because, you know, reinventing the wheel over and over again is so pedantic, we want to reduce
the amount of time we have to do that.
So, you know, create styles, even if they are finalized, these typographic styles aren't finalized
by any means.
I think I still need to tweak them a bit and you will need to as well, even with colors.
I'm not settled on this palette and I'm pretty sure by the time we are at the end of this course, it's
going to probably look entirely different or I mean, there will be some slight variations and that's
just the way design is.
So don't get too held up on those little details because things will change.
It's just the nature of our craft.
I mean, we learn, we build, we keep on learning and we keep on rebuilding.
So don't get married to anything too early.
What do I have here?
So I have some nice colors.
We can start actually applying colors to our typographic elements.
I'm going to just switch off this.
Grid, which using controlled G to do that.
OK, so next thing I want to just think about is this let's just drag this in here, OK?
So I want to create something.
I want to work on a card, and it's going to give us an idea of just general, like typographic hierarchy
over here, how to display imagery, also maybe some use of iconography.
First thing I want to do is let me just set some sort of baseline for how large I want this to be.
So what I'm going to do is control G.
And I want these cards to kind of just.
I want the next car to kind of fall off the edge, kind of like our little wireframe here, but I'm
making this car much more longer because I want the first image they see to be something that is really,
really relevant to what they want.
So it could be like if they're into gaming, it could be like a new controller or something like that.
Let's actually just jump in and grab an image.
So I'm just going to grab an image just to get started.
So let's just type in controller.
Perfect.
So we have a bunch of different things here.
Let's look for something that looks more like a product shot.
That's a little too dark.
What do we have here?
So I'm just looking for just product shots.
I think I selected two images accidentally, but we'll see what they are.
So, OK, let's delete that one.
Let's resize this one.
Bring it closer.
So there we go.
We have one.
And we're going to actually remove the background on one of these.
So remember what I said about that?
Just like visual exploration a while back, when you're using images, you don't need to just necessarily,
like, plop them in there.
You know, you can you can do different things like removing backgrounds, adding different types of
light gradients to the background.
So we have something interesting to play with.
I'm just going to keep this here for now.
I mean, I'm not going to touch it.
I'm actually just going to jump right into typography.
So I'm going to take this.
Resize, I don't want it to pass the width of this card, and I'm going to do is I'm just going to put
a price tag.
So sixty five, ninety nine is the price tag, and actually we can make sure that that's just the width
and we can start thinking about just higher key here.
So I have 16 pixels that's just like that, 16 pixels and fold.
Or we can even jump all the way up to 20 pixels and bold.
So if we have just like the item amount, and I think that's pretty crucial, I'm not sure exactly.
It's like right here I have the product name and the amount below, but maybe we can just explore with
having that up there.
What about if there's like a sale?
So I think I actually have a style for that.
Let's see.
Yeah, I do.
Perfect.
So I have a style for that.
And if there's a sale, what we're going to do is we are going to have something right beside it.
Maybe it's like seventy nine, ninety nine and we are just going to make that a little less obvious.
So we're building hierarchy not only through color.
We are also doing it just through size and typography as well.
So that's much more prominent.
And there you go.
These are spaced.
We can space them about eight pixels boops.
Perfect.
OK, so that looks pretty good when I'm going to do is I'm just going to duplicate that and let's think
about the product name.
So this is an Xbox One controller.
And I want to create some hierarchy between the image.
I mean, sorry, the the product name and the actual product price.
So remember, we talked about typography and creating that hierarchy.
We can just bring it down a bit if we wanted to.
We can also just just bring it down.
Let's see what options we have.
Like, we can do something like that.
And, you know, I mean, larger typographic element is the price.
So that shouldn't detract from that.
This is just our assumption.
It could be wrong, and that's that's just totally fine.
Like I said, it's all about exploration.
So we have something here which we have, I think what do I have below?
I have some lorem ipsum.
Let's actually just copy paste that.
So that is there.
And we are just going to go like body small over here and there we go.
I mean, I think we can probably afford to have two lines.
So what I like to do is I'll just go like this.
OK, just so we can start thinking about the content there, that's a little to see, like right now
I'm realizing that maybe I don't have too much variation between these two colors, so I may need to
think about that.
And this may be really too thin, but I'm going to do is I'm actually going to create I'm going to create
a frame.
I'm starting to think right now even about just general structure so I can just create a frame called
this price and just start thinking about, like, auto layout as well.
So I have a horizontal Allio.
And so the great thing about this is, you know, if I start to adjust this, things are going to just
adjust with it.
As you can see, the price moving back and forth.
So that's just going to help us speed up our workflow.
I think we're missing something else here, like maybe we can have like a 20 percent off tech.
So actually, I don't think we need this anymore right now.
So let's actually create another frame and I'll show you what we can do here.
So we're going to create a frame.
We're going to put text in this frame and we're going to just say something like 20 percent off.
Oops.
Let's go back.
Whoops.
There we go.
So we are 20 percent off.
Perfect, I think I even have one for a pill or yeah, there we go, perfect.
This is great because, you know, using maybe 16 pixels is too big, but using styles can really,
really help your workflow a lot.
So I'd like to start thinking about all these different types of things earlier on.
And it helps me just influence what I plan to do with the just general things like typographic elements
in color, if I get those kind of nailed down a little bit earlier before I jump into this, then it
makes it easier to kind of iterate based off of just plain styles, quickly editing those styles and
just generally just keeping you going.
So we got one hundred pixels.
We're going to be a little pale here.
When I'm going to do is 16 pixels on the side of the top, I'm going to just two zero zero.
OK, so we're going to need like an eight pixel top maybe.
OK, so the Phil, let's think about the Phil, we can do like a nice background like that and that
can be the darker.
So there we go, we have something nice coming along over here, and I'm just actually going to throw
this here.
Let's just make sure that like that, that's a little too small.
OK, so what I'm going to do is I'm going to come and see and I'm going to select inside.
And there you go.
There's our little pill.
Just letting us know, hey, you got 20 percent off.
This is an amazing deal.
And that's OK.
We can keep that Senate.
And I'm actually going to create the exact same thing over here.
I'm going to select everything and make a frame and call it card details.
So I'm really liking where this is going in terms of my exploration.
I'm going to.
I'm going to just create an auto layout again, so you'll see that just moved over and that's fine.
I'll show you how we're going to fix that.
We're going to adjust this just to get it right.
So this is going to if we just move it, we can move it wherever we want.
I'm moving it all the way to the left and you'll see it change at the top as well.
So there's our kind of layout.
And like we do have a lot of contrast now with our typography, which is really great.
Maybe this price is a little too large and we'll fix that.
Maybe we just maybe that's too small.
We'll leave it for now.
OK, so let's think about the image.
I really like where we're going here.
You can see like this whole thing is starting to come together in comparison.
And I wouldn't have really known that if I hadn't gone through different types of explorations earlier.
So I want to do something interesting with the image like here.
I'll show you what it will look like if I just kind of plop it in here.
So we're going to plop this in here.
And we're just going to make it the size of that rectangle.
I mean, that looks pretty good with let's make a copy of that.
What about if we do something a little bit more interesting?
How about we do something like this?
OK, so we have something and now we can use the background any which way we want, so I'm going to
rename this image and I'm going to lock this layer for now.
So just you can just shift command L to lock it.
So I have the image in the background and what we can do is we can do a bunch of different things,
like we can set that like that.
We can set the radius, so, I mean, we have options like if we want to use like a secondary color
or something like that, we can.
So, I mean, I'm kind of liking the way this kind of looks.
It's very like unorthodox in the sense that we used to see product images.
So this may not work.
And that's totally fine.
If I'm thinking about development and scalability, this is probably not the way to go just because
you'd have to do it for every single product image.
So this makes sense.
You know, just in terms of like we want to release something, we don't want to go through all of our
product images and do that.
Maybe this is like a video or version two to a version one.
I'm already thinking about maybe scalability issues here, but I really like the way these cards are
turning out.
I'm just going to delete this one for now.
Actually, I don't want to delete it.
I just want that image there.
But I'm going to delete this card.
I'm liking the way this image is turning out.
I'm going to actually make this I'm going to rename this to image background and I'm going to unlock
this image and I'm going to group them in a frame and I'm going to call this product image.
So as you can tell, like, I'm already starting to create different types of cards here.
I have one card built out that I really like.
I'm not sure if I'm going to go in this direction.
Maybe for the other ones I'm going to start just inputting like like regular images.
But this is kind of what I'm thinking right now.
I'm going to actually create another frame and I'm going to group this all together and call this large
card.
So we're starting to already think about things like.
Layout and just hierarchy and color and how we plan to use that, so as you can tell, that's how it
will look on the screen, you'll be able to swipe through that.
That's it for the larger cards in the next video, I'm going to start working on maybe more interesting
piece that can fit here, maybe not deals, because that could be redundant.
Maybe we can work on like category cards or something like in relation to the user's interest.
So that's it for this.
And let's jump into our next video.