Hey and welcome back.
We are going to be talking about sketching screen states now, I love sketching screen states.
This focuses on drawing the entire screen or different interactions.
An example is a user comes to a search page, clicks on a search bar and overlay pops up.
They type get suggested searches.
You get the point.
We start thinking about those little micro interactions as well.
That's the fun part, too.
I spent a lot of my time actually drawing these.
So let's go back to our client.
Let's think about something that we can work on.
I kind of gave a little example about searching for a product, and I think that's a good way to kind
of start.
Let's think about our home screen just a little bit more.
So let's just title that.
And when I'm going to do is, well, you'll notice that I'm not really writing any annotations because
they're kind of illegible.
But since we're doing this together, you know, get out your sketchpad, keep on going.
You know what I'm drawing and we don't really need them in this case.
So if I start to think about this in a little bit more detail, I start to think about what are the
kind of like the different types of features and different types of elements that this page should have.
You know, we talked about a profile image.
We have a search here as well.
And we could start thinking about, well, you know, we created a saved page.
How does a user save an item?
So we have our item here.
Maybe it's a little heart on each image.
Oh, no, I kind of like that.
You know, I start to think about different things like the user can see in relation to that image of
that type of content, that's really important.
So if we do men, I start think about the product name, start thinking about like maybe there is the
price, maybe there's some.
Product information, if that's useful, I'm not sure.
Is there a button can you just click this whole section?
Is it like a card that's really going to be up to you and what you think is best for users?
Typically, I don't like placing like little buttons over here and just limiting the user because like
on mobile, you know, you want to tap larger surface areas.
You've got to make your buttons much larger to.
In this case, I probably will use like a card, I'm not sure just yet, but something to start thinking
about.
So this probably like this interaction when I'm thinking about it, maybe it's a carousel.
So when the user kind of swipe left.
What will happen is this will go there and we'll kind of start getting images that go left or right,
which is pretty cool.
So those will go left to right.
But let's think a little bit more about this on screen.
I mentioned like thinking about interest.
We can start thinking about, like, ways that fits into the app.
Maybe there's like interest title and Lacasse all.
Thing where they can go find more interest or maybe edit their current interest, maybe they'll see
items in relation to certain categories and.
They can click on them and put them into a different funnel.
So I'm starting to think a little bit more detail in terms of like what's on the page, what I need
to account for when I'm building a product.
And that's really helpful, especially with screen states.
So we did talk about search.
So what happens if you actually click this search over here?
Let's draw a statement when somebody clicks a search, I'm thinking like an overlay will pop up.
What does that interaction look like?
So let's just start ground zero.
No one will just name it overlay.
Maybe an overlay pops from top to bottom.
There's little X with the search.
We're on mobile.
So we have to remember that there's a keyboard here.
It's a lot of rectangles.
We also need to remember that these keyboards have some sort of large button that can be used as like
an enter.
So it's an alternate way for them to select something.
So if they're writing something in there, if they're typing something in there, we need to start thinking
about what happens.
So once they start typing.
We'll stay in the same screen.
Everything up here will stay the same, but now we'll start getting some type of head Brazil here,
let's zoom in so we can write a little bit more neatly.
So if I start typing in something like a book.
We're watching Japan, which is a little bit more, and we can build it and say something like books
for.
Eight plus.
And that's a great way just to kind of like make the user's life a little bit easier.
Maybe they're looking for a bookshelf so we can do the same there where we just bring that down and
it'll be like shelf, it'll just finish off the rest.
So it's just kind of auto suggesting, auto completing for them.
So we start thinking about those types of elements that we're going to need, obviously this kind of
stays persistent and we'll start thinking about what happens then.
Musical one point one, but the next step.
Is that they would go straight to search results.
Now, what do search results look like?
Maybe there's like a back, but in maybe we got search at the top, whatever rewrote.
Maybe we got some information about the amount of results.
And or maybe just filter out up here, let's try a little filter icon, not the best, but, you know,
it works and they get the results here.
Now, here we start thinking about what do they see, what can they interact with?
I know that they could be if we split these up, maybe they seem more like cards like before so they
can tap the whole thing and go straight into like a product page that we've been sketching a bunch lately.
But, you know, there's probably a couple of other things that we can pull up here, maybe we have
that heart.
And users can go straight.
To.
Our saved beach, whatever that may look like.
I started off with understanding that I'm going to be creating an interaction for this info, searching
for some sort of product, and I asked myself the question, well, what comes next?
And now I'm asking the question of, well, what alternate scenarios are there?
So there's a couple of different scenarios here.
Users can from here, we have different float's users can go see a product.
You just can save their products to a saved page.
You just also can enter a new search, it can go all the way back.
And users could even filter.
You just could also kind of like just abandon the search if they want to.
Maybe we have a persistent, like, navigation at the bottom.
So there's so many different scenarios like what happens with filters.
Maybe it's like another overlay, it comes down from the top, nice little animation and, you know,
I'm starting to think about these animations a little bit more, these micro interactions, because
if I leave them all the way to the end of the project, you know, they're not going to look good.
They're going to look immature.
And you should really incorporate motion early on.
They really help a lot with different types of things like feedback and understanding the state of a
screen.
And we're going to do a whole lesson on motion later.
But it's great to just start thinking about it right now.
So this is like our filters we're going to call a fill.
And now I could start thinking about the content here.
I mean, now we're branching out, and that's totally fine.
Sometimes I don't branch out.
Sometimes I just kind of stop here and I start refining this kind of flow.
But it's pretty cool to start thinking about all the different types of things that you're going to
need to account for, like the different types of elements, different types of content.
So if I think about filtering for a product like this, there's a title maybe the people will want to
filter for something like price.
So that may be an option.
And maybe it's by customer review or maybe it's by like newest items.
Maybe there's another section where it's by review, solely by review, so we can start thinking about
what we're going to need to actually implement.
Moving forward, it's going to really help us in the future, and this is why we actually just kind
of sketching, you know, just do it quickly.
So take some time to really go through that, like I said, don't get bogged down by the details like
you could tell that we just went through it really quickly and we learn a lot about what possibly could
be in our application.
We created a bunch of screens and we have a really good jumping off point.
But now we can take these use them for like user flows, use them for site maps and even start building
wire frames like ASAP.
The whole point of sketching is to just be lean, be agile and don't get bogged down by the details.
Ignore things like dribble or where you see, like, really high definition like sketches.
Just go for it, jump right in.
And that's it for sketching screen states.