Hey, everyone.
Welcome back.
So what I want to do is I want to start creating some screens for our product, which is habitual.
So we went through the process of, like sketching some ideas out.
We also started sketching like user flows.
We started like way back when we were sketching.
We were thinking already about, let's find it some navigation trees and how certain things are connected.
And I really want to start thinking about our home page in much more detail.
So this is our home page.
We're definitely going to have a search.
We're going to have something around like shopping interests and habits.
We're probably going to have a place for them to get to categories, maybe deals we have like navigation,
which is like wishlists, orders, profile.
We have the car as well, and we have a way to log in or sign up.
So let's jump right in and start thinking about what this could look like.
So I'm going to just create a frame.
I'm going to press F and I'm going to just like that and I'm going to call this home page perfect's.
So the easiest way to start is like, let's take a look at our sketches and where we kind of left off.
So for our homepage, we could tell what we were thinking about, like having some text at the top,
maybe be like a profile.
We can see like we could start thinking about the navigation as well.
We have some images there.
Those are some rough sketches.
So we do know that we were thinking about a search there.
I know at some point we were thinking also.
About search and the navigation.
I don't know where that is, I think it's here somewhere.
Anyways, we started thinking much more in terms of screen states.
So we have like a save icon.
We have a name, we have price, maybe some categories, possibly looks like Ultranet funnels.
They can get into these maybe categories, maybe interests, other things.
OK, so this definitely gives us a lot to work with.
And I'm going to start building based off of my sketches, like we don't need to match them directly,
but I think they'll allow us to have a good starting off point.
So.
Let's get started.
So the first thing I'd like to do with my sketches and my wire frames is start building out some of
the most basic things like navigations and stuff like that.
So I'm actually just gonna go to my ascites tab.
I'm going to go up to UI elements and let's see where is navigation and containers.
And just like that, we have like a navigation bar.
So I think we should kind of start thinking a little differently.
Maybe let's go to our assets and I consulship.
That's OK.
Let's just replace that nicely.
So we've got icons.
We have a social HIRSHFIELD.
Perfect there.
Go easy.
Let's think about profile.
I know we said, like, we could have orders down here and that's very possible.
I was thinking about that.
But we should probably test some different options as well.
We shouldn't necessarily just like stick.
To just one, there's a count that was a good guess and icons.
What else do we have here?
Shopping, maybe, yeah, cart.
There we go.
OK, cool.
So there we go.
We have our very own navigation and we can just like.
Just to show that we are on the home page, OK?
And what I want to start doing is actually.
The CIA got search go.
So we have a search up here.
That is good.
OK.
And I think we should probably have some text so we could just start typing some text in here.
So we have like maybe like a big hello.
You know, some apps are really, really inviting like that.
And I kind of like that.
I mean, I think we should kind of test our messaging as well so we can go into here our phone styles
or see how big some of these are.
Oh, that's way too big.
So let's just go down here.
I think that's fine.
Perfect.
Let's zoom in.
OK, so I'm going to grab some more and I'm just going to write.
We have some recommendations.
Oops.
For you, OK, so that's just going to trail off and we're just going to have to bring that in and let's
set that to like 16 regular.
OK, that's going to work for now.
OK, so we're starting to build out a bit here.
Like I said, it's kind of like sketching, too.
I mean, we're being a little bit more thoughtful about the type of content we have.
We're also thinking much more about like the hierarchy of the information.
So I know that I really want search to be prominent in some way.
So for now, I'm going to bring it up here and see how it performs.
When I test with users, I'm also going to, you know, just hierarchy in terms of our copy as well.
It's just like a big hello, like a welcome and then some recommendations.
Maybe this could lead into some images or like some interspace stuff just for you.
I can bring that in just a little bit, so just auto with brings it right to the width of the content.
I like using not OK so we got a size 16.
We can do regular list.
You say 16 Bould.
And right now, look, I'm not thinking too much about style, I just want to kind of get everything
on the page, then we'll refine.
Design has a very iterative process and you're not going to get everything right in the first go 100
percent.
I will bet on that, and that's OK.
I mean, it's all about just like learning, building, learning, building and learning over and over
until you get it right and you're definitely not going to get it right on the first try.
And that's OK.
So what we got here content.
No, we don't need that.
Menus, option menu chips.
We can maybe we'll switch up image perfect like that.
So we have an image placeholder.
You know, we actually may want to bring in a grid here.
So I'm going to bring in a grid because it's going to help me lay things out a bit more.
So what do we got here?
We got six.
Bring it to eight, margin can be 24, gutter can be 24.
And don't worry, we are going to learn all about grids and how awesome they are.
But they're going to really help us.
To determine how we kind of lay things out.
Perfect's.
OK.
OK, there we go.
So we may have a larger image, I was thinking.
Something like that, I like just hitting them with something really nice right away.
To toggle your grids, if you're using them right away, we will get into it at a later lesson, but
Control G is really your friend here, so control G just to hide and show.
OK, so we're just going to duplicate that, and so when I'm thinking about the type of content I'm
going to need for each product image, I'm thinking about like the product name.
We don't need that to be bold.
It could just be like regular 16 pixels.
I'm also thinking about price so we could just write like twenty five dollars and maybe this is bold.
I know people like to read the name first, but price is like one of the bigger motivators.
So we can do like a size 16 bold and like you can tell, like I'm whipping through this pretty quickly
and maybe we have.
Some information, I like that.
OK, so we got a size 14 regular plug ins, I like to use lorem ipsum, it's just a plug in.
It's really great.
One sentence is probably more than enough, so one sentence, maybe we'll bring that down to 12 pixels
versus taking up a lot of screen real estate.
Let's bring that down.
OK, so.
That's just spaced things out just a little better.
OK, so we got we got something here and I'm just going to call this large product launch product cart.
OK, so now we definitely have.
We have to you'll notice that that just kind of sticks on that grid, which is great, and it's using
a base unit of eight pixels, so it's just going to move in increments of eight.
We'll get into the reasoning for that.
But nice.
That looks really clean.
What else should we have here?
We should definitely have categories as well.
Let's think about those deals and categories, deals are pretty big.
Oops, I actually forgot something.
Let's think about we also wanted like a heart.
So let's just bring that.
I'm going to search for her icon.
Perfect's and.
Let's just make that wait.
And like I said, I mean, use something to make your work flow much more quicker, much more easier.
I mean, we're not worried about being perfect right now.
We're just worried about making sure we can get these designs kind of done, get them into a place where
we can start testing with them, because you will most likely throw these designs out.
It's just the nature.
Of designing wire frames.
OK, that's good enough cool.
So we have the product image and you can tell we have like the name, we have the amounts.
We can just duplicate this here.
We're going to fix this to the bottom.
And we're going to bring this over and yeah, so we can start thinking more about just the type of content
we'll have for maybe smaller images as well.
Make sure that's inside, okay, cool.
I want to start thinking about smaller images to.
So if I turn on my grade again, it's going to help me figure out what is the perfect size.
So, yes, it's difficult to have a product name, we're in a group this and you can actually start
creating like your own little components here, your reusable patterns.
So I'll make this a small product card.
And just to speed up your workflow, if you plan to use these throughout your entire app.
So we got that or you can even bring that in just a bit.
Cool, there we go.
So, like, we already have a deals laid out and what else is next?
And next?
I do want to have something different.
I want to have categories.
OK, so what we're going to do is we're just going to grab assets over here.
Grab a card, cool, and I like the idea of letting them kind of fall a bit off of the page and like
letting the user scroll horizontally so we can definitely do that.
We can definitely prototype with that.
Came in, which is called this like tech or something.
Kirsti, like a size 14, pulled perfect.
When you're creating these wire frames, remember, just constantly reference your notes, reference
your sketches, user flows.
I mean, you shouldn't be going into, like, something like this blind, OK?
And I think that's like that's a good starting point.
One hundred percent.
I mean, that's definitely enough to kind of get us testing.
We have our categories here.
We have our eye navigation that we can use.
We definitely have like deals and we do have something around like our interests and stuff like that.
But I do think we're going to need to improve on this.
Like maybe this can stay, but maybe down here, you know, maybe deals is prioritized or it's not.
Who high in terms of like the order of hierarchy, so, you know, there's different things we're definitely
going to figure out while we test and you shouldn't necessarily just design once and be OK with it,
validate your assumptions, go out.
Just ask people questions.
Talk to your client.
Is this necessarily like fulfill the goals?
Will users actually.
Be enticed to start clicking on certain things.
Does this make you seem like a more personalized shopping experience?
I don't know.
I don't honestly know just yet.
And that's fine.
I mean, we are going to create many variations, and you should be doing that, too.
You don't just settle on one.
So this is the home page that I've just wireframe really quickly using all those components.
And you should definitely give it a try yourself.
You don't need to copy exactly what I did, but go ahead and try to think about other ways that you
can, like, incorporate special interests or make recommendations.
Think about ways that you can get users, like, into our funnel in terms of like purchasing.
I know we kind of have like shopping interests and habits over there.
We kind of knocked everything off in one way or another.
And you should really think about I know the goal of this project is really to kind of drive the point
home of a more personalized shopping experience.
So come up with your own feature.
Think about different ways you can kind of, you know, achieve that goal.
And that's it for our home page in our next video, we're going to figure out what else to build with
our wireframe.