Welcome back.
So we're going to create a couple a little quick prototypes here, and this is what I usually do when
I'm like just getting out of wireframe, in of wireframe the new interaction or new flow.
I essentially just kind of jump right into Fidelma with my wire frames and I just link some quick things
together.
I sometimes I don't necessarily link together a massive prototype unless I'm trying to test end to end
usability.
But what I usually do is like linked together some flows that make sense.
So what we're going to do is we're going to link together a search experience and then we'll link together
just some navigation pieces.
So we have some places to go and we'll kind of use some of the things we learned, like with scrolling
and stuff like that.
So let's jump right in.
What we're going to start with is our little search.
So what we're going to do is we're just going to click prototype and we are going to do on tap.
So when the user types that we were going to navigate.
To so no scrolling behavior yet, we're going to navigate to search.
Let's call this one search TypePad.
OK, and we're actually going to take this out of here, that's going to be its own frame.
And you know, what we're going to do here is we're just going to go on top.
We're going to go navigate to home.
I was home, boom, perfect and on delay.
So I just want to kind of link together what this search experience could look like.
And this is what I would do if I were working on this client project.
I urge you to kind of get your wire frames.
You can use these wire frames and your resources and you can actually design with me and prototype with
me.
OK, so I have to delay a hundred milliseconds, I think that's fine, we're going to open the overlay
and that overlay is going to be this.
And that's going to come from the it's going to be locked to the bottom center.
You can click outside and close it and the animation, you can have it as move and we can get into animations
in a later lesson when we cover micro interactions and motion and stuff like that, that is going to
be some really cool stuff.
And I'll show you what you can do with Sigma right now.
I don't think it's necessarily needed, but it can help stimulate certain things like quick move ins
and outs and all that kind of stuff in terms of like how things behave on the screen.
You can start thinking about that and you should definitely start thinking about that kind of stuff.
So we're going to have the come up and the behavior on here is OK.
So if I search, I want this to come up again.
So it's going to actually behave like an overlay.
You'll notice that Sigma already does the work for you, which is amazing.
So move in.
OK, perfect.
And what we'll do here is if I do tap on here, I want to actually.
Have this come in?
Yeah, that's fine.
No, actually, I want this to be instant.
Yeah, I think that's cool.
This will link back.
On top, navigate to and it's going to navigate to our home screen perfect.
And if I click on this, actually, you know what?
Let's make a frame.
So I have those of frames will be one large topical area.
We're going to actually go to our search results and they'll be instant as well.
This is going to go back.
To our home.
As well, remember, this is not changing at all.
The only thing that's changing is the content within.
So we kind of have to simulate that behavior a bit.
OK, so this is navigating back to home.
Perfect if we do want to search.
I do want to go back to here.
That looks good.
OK, I think that's good.
Let's take a look at what it looks like.
So as you can see, like once you're done linking together some things, oops, this should go to home.
Perfect.
And yeah, OK.
So you'll notice that once we kind of link together some things, it gets really messy really quickly.
And you can imagine on a larger prototype, it'll just be like complete chaos.
It really depends what your goal is.
I feel like the main use for prototyping is to validate your assumptions, you know, use them with
users, get good feedback from clients.
You don't necessarily need to make like an end to end prototype from beginning to end of all your designs,
especially if you have a large product that it's kind of crazy.
So what I would do is I would kind of break it into pieces, maybe different flows that you want to
highlight things that aren't maybe as clear, like certain interactions, like maybe how this could
play out, especially when you get to the high fidelity stage.
You may want to consider, like, actually.
You know, creating more like in-depth animations and motion, so it's totally up to you and what your
workflow may be, but I would try to avoid creating like a crazy, huge prototype.
I mean, there's not many use cases for it.
The big one would be to show your developers.
But if you're working really closely with them throughout your entire product, like every day in terms
of like your sprints or if you're just working from like the beginning of kick off with the development
team all the way to the end of handoff, you're essentially they know what's going on and you should
be really communicating all these little things.
They shouldn't need to wait all the way till the end of the design process to get like a fully animated
prototype, even though that is pretty cool.
Not going to lie.
So let's take a look at what this looks like.
We're going to play.
Oops, I am still in combat mode over here.
OK, so we're just going to remove that so we can see search.
So I click on Search and there's my keyboard.
I'm actually in click search again.
So I moved in from the right so we can go back and fix that.
So let's just.
I want that to come in from the bottom.
OK, so if we just test that.
Cool.
I love it, OK?
And if we do that, we have our results perfect.
I love it and then we can go back.
If we want or we can actually I think we're missing something really cool here.
Yep, so you should be able to if we think through the flow of this, if I want to search again, I
should be able to search again.
So let's actually do that.
We're going to on tap.
We are going to actually if we link right there, will open the overlay for us again, Perfect's.
And OK, so if I do want to search, actually, I feel like this one should actually go here.
OK, so let's get going.
Let's see what it looks like.
Search.
Love it.
OK, and I'm going to click that.
So that animation is a little wonky, so if I go back and I click that, it should just be instantaneous.
OK, so if I click search, actually, I would probably want to come here maybe.
OK, so, I mean, it's not going to be perfect.
You know, you may want certain things to happen all the time or certain overlays to happen all the
time.
And that's where you kind of just have to have a really good discussion with your developers.
And there we go.
We kind of have like a little product flow.
Where we can do is we can clean this up like we if we do want to have a navigation, stick it to the
bottom.
So remember to fix that positioning.
We can also fix this positioning if we want.
We're going to actually create a frame.
Let's do this.
Perfect, and we're going to fill that with whites.
OK, we're just going to call this heter.
OK.
Boom, boom, boom.
This.
Line 18, Ekso.
OK, perfect.
So that's in there as well, and we can actually fix this to the top so we can yeah, perfect.
We can fix that to the top and I'll show you what that looks like.
So let's go through that search for.
If I were to scroll, I would see that the content goes behind both the header and the footer.
So there we go.
We have our little own search prototype.
If we want to go back, we can go back to the home page.
I mean, this is not perfect by any means, but OK, so we can see that we have our keyboard here,
keyboards, a little weird and wonky, but that's totally cool.
And we can just click a result and it'll bring us to results.
Page Perfect.
So that's an easy way to create like a very quick flow.
In terms of different types of like search interactions that we have.
Actually, we can extend this some more.
So if we do cut that, I would love this to come in.
This could be like navigate to.
It could be interesting.
Doesn't matter.
We could just on topic and go back.
I want this to be stickied.
Perfect, we can even make this sticky, but it's all right for now.
Let's take a look at that one more time.
There we go.
We got two filters.
Boom.
And I would have this be dynamic based off of the different types of filters, so you can even go in
and make a smaller prototype.
This can update based off of that prototype, which is really cool.
OK.
And that's it.
That's how you create a quick prototype within Sigma, just using a quick flow.
And in the next video, we're just going to kind of get a little bit more in depth in terms of like
different types of interactions.