Original subtitles

‫Hey and welcome back.

‫We're going to be talking about sketching screen states now.

‫I love sketching screen states.

‫This focus is on drawing the entire screen or different interactions.

‫An example is a user comes to a search page, clicks on a search bar, an 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 spend 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 what 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, 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 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, 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,

‫that type of content.

‫That's really important.

‫So if we zoom in, I start thinking about the product name.

‫Start thinking about maybe there is the price.

‫Maybe there's some.

‫Product information, if that's useful?

‫I'm not sure.

‫Is there a button?

‫Can users 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 a user because like

‫on mobile, you know, you want to tap larger surface areas, you got to make your buttons much larger

‫to.

‫In this case, I probably will use 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 swipes left.

‫What will happen is this will go there and we'll kind of start getting images that go left to right,

‫which is pretty cool.

‫So those will go left to right.

‫But let's think a little bit more about this homescreen I mentioned, like thinking about interest,

‫we can start thinking about like ways that fits into the app.

‫Maybe there's like an interest title and like a C 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 state.

‫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.

‫Number one, we'll just name it overlay.

‫Maybe an overlay pops from top to bottom.

‫There's a 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 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 result here.

‫Let's zoom in so we can write a little bit more neatly.

‫So if I start typing in something like book.

‫We're going to change your pen, wait just a little bit more, and we can bold 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 will 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, Well, what happens then?

‫Maybe it's like a 1.1, 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 button.

‫Maybe we got our search at the top, whatever we wrote.

‫Maybe we have some information about the amount of results.

‫Now, maybe there's a filter up here.

‫This draw little filter icon, not the best, but, you know, it works and they get the results here.

‫Now here we start thinking about, well, 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 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 out here.

‫Maybe we have that heart.

‫And users can go straight.

‫To.

‫Our saved page, whatever that may look like.

‫I started off with understanding that I'm going to be creating an interaction for this certain flow,

‫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 flows.

‫Users can go see a product.

‫Users can save their products to a saved page.

‫Users 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 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 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, they're not going to

‫look good.

‫They're going to look amateur.

‫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 just going to call it Phil.

‫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 UI elements, different types of content.

‫So if I think about filtering for a product like this, if there's a title, maybe you're going to want

‫to filter for something like price.

‫So that may be an option.

‫You know, 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 sketch and 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 learned 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

‫wireframes 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.