Lessons

Lesson Info

Sketching and Refining the Idea

So we are going to start on our white board, and we're going to draw some of our initial wireframes. So I should have, okay. So what we're gonna do is I have this fake client that I've made up, Barley's Restaurant. And their goal is to show the open hours for users, the ability to make reservations, and the menus that they have for their site. That's what we think is important for our users, and for our stakeholders we want to show off the atmosphere of the restaurant, and we want to stop those distracting calls to the staff, because of the information that they can get on the website. And their brand voice is hip, modern, and relaxed. So this is a really sort of shallow brief, this is not very in-depth, it's just something that's gonna help us get started to work on this. Alright. So when you start sketching, if you have access to a white board, it's awesome to use. I think the more space that you have to think, the bigger your ideas are gonna be. Or the easier it is to get them out. ...

And what you wanna do is anything that pops into your head that might seem like a good idea, get it onto paper. If it's a half thought through wireframe, if it just seems absolutely ridiculous or insane, get it on paper, because you can do the editing process later. And a good way to start is, let's see. So we know our client is Barley's. And we know some stuff from our list here of what needs to be on this website. So for one, we're gonna wanna show the logo. We probably are gonna need a navigation, even though this is gonna be a pretty small and basic site. For users, we know they need to see the open hours. They need a way to make reservations. And they need to be able to see all the menus. Let's see. And for our stakeholders, we wanna show off the atmosphere. And we wanna stop those distracting calls to staff. So we know that the way that we're gonna sort of solve for those distracting calls is by serving up this information, so I'm not gonna write that piece down. And then we'll keep in mind the brand voice about what kind of stuff they wanna see. So with this short list it might be a lot longer, depending on your project, it might be shorter or about the same, this is just a good gut check to say, okay, what do I need to get on the page every time? I do wanna clarify that drawing is not an important skill here, we're mostly going with like sort of straight lines, maybe circular circles, it is not an important skill to be able to draw well to do this. You just wanna get a basic thumbnail sized sketch of what a website is gonna look like. It's generally the proportion of your laptop or computer screen. And then just start filling in these things. So there's some typical conventions about what a website looks like. We might have a header bar here. And this is our logo. And we have our navigation links up there. Let's see, we wanna show our hours, reservations, menus, and atmosphere. I'm gonna say that menus is one of these links, and that's not gonna be on the home page. Maybe with our atmosphere, we wanna show some really cool imagery. And this is a great time to mention my laziness again. So there's a lot of shorthand you can do with this wireframing. I've sort of developed my own, it is not groundbreaking. And I will try and explain it as I go, but you guys I'm sure as you practice this will find that for yourselves as well, that you've got, like this is a really great way to indicate that there's a photo in the background there. And then typically if I do something that's just lines like that, I know for myself that indicates a bunch of text. So we'll say here that that's the hours. So let's see, so we've got our logo, our navigation, our hours, we're gonna show off the atmosphere by using these pictures. Maybe we want multiple, so we're gonna put in carats to make it like a gallery, or maybe this moves through the pictures as time goes on. That's definitely stuff that you can indicate with shorthand if you want, or you can just write notes. So, maybe rotate through pics. Let's see what else. So we need to get our reservations in there. And I think, let's try having just a block here, and this'll say reservations, shorthand. Don't need to actually spell anything, you can just squiggle it. And then we'll say, this is maybe where they input their date, this is how many people might need to be there, and maybe we need one other form. Since it's early in the process and I'm just figuring out what needs to get on the page, this can stand in for what a form is, and I don't need to know all the specifics about how exactly it's gonna work, I'm just getting ideas out onto the page. So let's see, here now we have our menus, and our reservations. Maybe we wanna put a footer in, to make this page feel a little more filled out. Maybe here we'll have a map, and here we'll have the address to our restaurant. Maybe if you click this it's Google maps and you can get directions. So, great. We have made our first wireframe. Not that difficult. And what you can do and should do is keep iterating on this. So we'll just immediately try again. Maybe we want our logo in the middle here, maybe we only have two navigation links and they'll sit like that. Let's see, maybe we want our photos to be dispersed throughout the page. And here we'll have the hours of the restaurant, here maybe this is gonna be our form for making a reservation. And maybe on this one we want to show the menu. Maybe there's only one. So we have a nice big atmospheric image here. Then we have a big headline for a menu, and then we just list it all out. And now that looks like we've gotten everything onto one page, so maybe these links here in our navigation can be anchor links. And what that means is when you click this here, it's not gonna take you to a new page, it's just gonna take you to a specific place on this page. So we know that this one is gonna be menu, and this one's gonna be reservations. So that's the basic idea of getting this content blocked out onto a page, trying to understand how you're gonna see all the stuff that needs to be on this website, just getting ideas down on paper. Do you guys have any questions about that? No? All making sense? Absolutely excellent. Let's see, what else could we try, do you guys have any ideas on what other ways we could lay this information out? What you wanna do when you're at this phase, is one, just be yourself, try and think of as many ideas as possible. Two, you can go to inspiration, you can say, alright, this is a restaurant, what does my favorite restaurant's website look like? What does a really popular restaurant's website look like? All of that stuff is going to help you come up with new ideas, and it's a tricky area for me, when I first started designing I felt like that was plagiarism, and I felt like that was a very very dangerous and bad thing to do. But typically, even if you start with what someone else's site looks like and you're pulling that information for yourself, it's not gonna stay exactly the same. And there are definitely things that you can pull from, they're sort of referred to as patterns, so the way something works, like a dropdown menu, is an established pattern. Users typically know that if they see a bar with a dropdown arrow, or with a down arrow, they can click that and a menu comes out. So when you're looking at another website or another designer's work, you obviously do not wanna plagiarize, and you do not wanna just take everything and apply it. But try and look to see what are they doing that I could do, what are some of the patterns they're using that I could try to use? So I think what we're gonna do now is we're gonna move to sketching this idea. So we're gonna take maybe one of these and we'll refine it so that we're taking the form or we're taking the elements and instead of just a loose sketch, we're understanding them more and we're getting more specific. I just have a couple questions before we move on. Yeah, sure. That sounds great. Grace Solomon would like to know, how many personas might be suggested in any initial wireframing attempt? That's a great question, and unfortunately for Grace, I have a very unsatisfying answer, which is, it's different every time. One should be the bare minimum. I think we're always gonna want to have at least one person that you're thinking about, and one person that you know is there. But the real answer is that it depends on the project. Any research you can do or any way you can figure out how many user types there are, that's how many personas you should have. So, let's see if I can get more specific. For a store like Target, there's gonna be a lot of different user personas. There's moms, there's college kids, there's, I don't know, whole families, there's children, there's elderly people, like everyone shops at Target. But let's see, maybe, more specific store, like a sporting goods store. Still pretty broad, but maybe more specific, or boutique local retailer that sells custom made handbags. Gonna have a much more narrow user base, and so you are not gonna have as many user personas. Cool, and then Grace would also like to know, how specific should proportion truly be? Pretty loose, question mark, many of the business owners that she works with take coaxing to go beyond the fold. That, Grace, I hear you. It's a struggle. So first I'll just stop and explain beyond the fold, just in case anyone isn't familiar with that. It's actually a term that comes from newspapers. So when you are reading a newspaper, they're a long sheet and it's folded in half. And if your headline is below that fold, it means that someone that's just looking at that pile of newspapers isn't gonna see your story. That has translated over into the web, so if it's below your screen, you know like if it's beyond where you can see, you're not necessarily gonna see that information or that story right away. The problem with that transferring is that there are so many different devices now, and so many different browser sizes, and monitor sizes, and laptop sizes, that beyond the fold or where the fold even is, is not a consistent thing. So you should be thinking about what's the most important thing or what's the key information to draw people beyond and into the page. But typically, for web design, maybe three to four ratio. Or four to three ratio. But just really think about how important, like get the most important information at the top, but then focus on how you're gonna get people into the rest of the site, and try and use that as a tool when you're talking to your clients, and get them to understand that although this is a buzzword that they may have learned and been told is super important, there is definitely a lot that design can do that is more important than getting everything above the fold. Alright. So we have our basic idea for our wireframe. And typically when I'm sketching it, when I move any closer to paper or I get any smaller, it kind of looks the same on the first pass. So, and I'm gonna re-draw it so that we can all see what we're gonna work with. So we said we have our logo here. We've got maybe some navigation links. We've got a big image, maybe we have our hours here. Then we wanted our reservations. And then we were gonna cap it off with our map and our address. Okay. So now, what we didn't do here is we didn't draw out our menu screen. So we have these links, sort of placeholder up here, but we need to figure out where they're actually going to go. So we know definitely one of them is going to menu. We could have anchor links as well, this is gonna be a pretty short page. So maybe we'll have this one be just two links. And this can be a contact. And it'll bring us down to our address section. And then we can look at what our menu page might look like, so we're gonna keep a consistent navigation up here, our header's gonna be the same. And then maybe we do also wanna pull in some of that atmosphere again, because we only have these, actually we had this in the slider, we only have one place. So let's say, maybe a little bit shorter. And our title maybe can go over it but we'll have that image in the background. And then we could have just the content of whatever our menu is like this. We could also think about if this restaurant has more than one meal service. Are they gonna need a way to look at, so is a user gonna need a way to look at all of the different menus? And there's a couple different ways you can solve that. Maybe we have a dropdown here, like a big one, and this says, this says brunch, and then it has it underneath it. Typically a good rule of thumb is that if you have just a handful of options in a dropdown menu it's better to surface all of them than to hide them in the dropdown. So we might say that there's three and this one's brunch, and this is lunch, and this is dinner. And then you wanna make sure it's clear which one you're looking at and which one's selected, so maybe, here, I'll use another color here. We'll say that this is our active toggle, and that we can see the menu underneath it. And now, trying to think like my user. If this is a really long menu, and I've scrolled all the way down to the bottom of this, and then I wanna see what's for dinner, maybe I wanna add in a back to top link. Or something like that. So even as this process, you're always just trying to think of what is your user gonna try and do on this site, and how can I make it easier for them to do it? So we've gotten a little bit more specific here. I guess really what we've done is we've added another page, so let's sketch again. And we'll try and get much more detailed. So let's say this is our Barley's logo. I have contact and menu as our navigation links. We have our image here. And we have these arrows, and something you can think about is, with these photos, what are we showing? So in our case, we're just showing atmosphere, it's not important necessarily for a user to know how many photos we're going through, or what those photos are about, but that's something you can think about. Does it need a caption, do we need to indicate what you're clicking through? Sort of anytime you have an interaction, try and slow down and think about, why are you having it, if you were coming to the site with fresh eyes, you sort of try and remove yourself from all of the knowledge that you have about the site and take on that user persona and look at it that way. And I think that probably in this instance it's okay if we don't have that extra stuff and we just have these arrows. Maybe it's not even important to have the arrows at all, and we're just gonna have them show up if you hover, maybe like in this range of the photo. And then we wanna add in our open hours. So we'll just say, open and our shorthand there I think is fine. Okay, so now we're moving into the reservations. We're gonna assume that in this example we've talked to our developer, and it's really easy for her to set us up with a connection or to use essentially Open Table's reservation system. So this piece that we're going to build for is just the front of it. And then once the user clicks through, they're gonna see the whole Open Table flow. So we know we wanna tell them to make a reservation. And what we might do here since we're using Open Table is to check out their site and see what they do first, what we have to do to connect. But we're gonna assume, right now for this experiment that we can kind of define that, and we wanna think about the most important pieces to add or like the first things that you would add when you're making a reservation. So typically that's going to be the date that you want to make the reservation for. The number of people. And the time that you wanna eat at. So for date we could have them write in the exact date. Another typical convention or pattern that you see is a little calendar icon. And if they click this, they get a popup that's gonna show them a calendar. And then they can choose that date. And so, I feel like this is a great example of why wireframing and practicing all of this is great to think about. Because just in this little piece there are a lot of things to think through for your user. How are you gonna design your calendar icon so that it's clear, that it's a clickable thing, so that they know what's going to happen next? What does your calendar look like? How are you doing to indicate available days or the selected date? And that's a lot of stuff that happens in visual design, and that's where the line often gets blurred in between what is UX design and what is visual design, but the important part in wireframing is just to identify that you need to indicate those dates, or think about that later on when you're doing the visual design. So let's say that we'll do this, and we wanna label our forms, so we'll say up here, date. And then we will go maybe time next, that makes more sense logically than number of people. And same thing here. We wanna think about, is it best to just have an open form and they're gonna fill in the time? Do we want this to be a drop down of available times? Maybe it makes more sense to have something more standard where this you're filling in the hours, since there's a finite amount of options there, and this we'll break it down into every 15 minutes, or every 30 minutes, depending on how the system works. And then number of people, again, do we want them to be able to just fill in any number 'cause then they could put in 100, and your restaurant has the capacity of 50. Or do you only want people to make reservations under parties of four or less and you want them to call if they have a greater number. So maybe let's do that. We'll need to talk to our developer. We'll pretend we called her up and she said, absolutely, I can do anything that you can design. So we'll say, okay, if I put in ten here, that's gonna return an error. And it's gonna say, you can only make reservations online for up to, let's say six people. Please call our office. So what we need to do there is think about what all of those states look like, and how a user's gonna react to them. No one likes delivering bad news in real life, and you don't usually like doing it as a designer either, so what we wanna make sure we're doing is just being clear and being up front, and communicating what's important and not necessarily worrying about oh, it's a bad state, or it's an error, we need to put it in all red, or we need to overtake the whole page. Just think about the appropriate scale of your response. So here let's say we'll put in ten people. And I think we'll have, I'll use red for right now just 'cause it's the other marker I have, but not necessarily what we need. So our error state might be, can only max up to six people, call our website. But you're just making sure that you're thinking through all of the possible scenarios that something that could happen with every UI element you're designing. And then we can either say once all three fields are filled out and don't return any errors, that's just gonna go through to the next step, or we can add in a button. This is my shorthand for a button. That means that, okay, submit, go to the next piece. And I think here it makes sense because we're not returning any results on the same page, we're going to a different website. So having them be able to adjust this before moving on is definitely a good thing to do. Okay and then so for our last piece we have the map and address, so again, let's see. We have, in our last iteration our map is basically an X and the word map. And what we wanna do is just think about what does the map consist of, what do we wanna communicate? So maybe we wanna drop a pin. Maybe we want that pin to have our little B logo in it for our restaurant. I'll just play off of this mistake that I made and say wherever this restaurant is, maybe it's in Oakland or something. And this is the end of Lake Merritt. And people know where that is, so we wanna show our pin in relation to the lake because it's gonna make it really easy for people to understand where this restaurant is. And that's the kind of stuff, I feel like I can't reiterate that enough that you just wanna keep thinking about, what's any way I can make this easier for someone to understand, easier for someone to use. Okay, so we have our map here. We're gonna have the address here. Maybe we even wanna reiterate the hours again. And perhaps the contact information, maybe we'll have the phone number. Okay. So that's still pretty sketchy, a little more detailed. I feel like we have most of the things that we're gonna need to figure out if this site is good to go. And then let's say, let's go back to our menu and see if we can get that to be a little bit more detailed. I'm just gonna kind of trace the size of this to stay consistent, but it does not really matter. Alright. So previously for our menu, we had the navigation up here. And we have our two links. And this brings up a great point. So we're on a new page, and we have these two pieces of navigation. We'll probably wanna indicate where we are in the site. So, this again is another place where UX design blurs into visual design, you could do an underline, you could make menu a lot bolder, you could have a color behind it, there's lots of different ways to indicate where you are as an identifier. But the important thing is that you are identifying where you are. So for now, I will do a red underline so I know I'm on menu. And then I'll pick back up where we were. So last time we just have brunch, lunch, and dinner. And we decided we would surface all those since there's just three of them, it makes it easier for people to understand what their choices are without having it hidden underneath the dropdown menu. And since the brand voice of Barley's is sort of hip and modem, maybe we can make this really graphic. So, maybe we bring back the photography behind it, and we have something really big here. Maybe these are cool different fonts or something, this again is getting a little into visual design. But we're just trying to think how we can achieve those goals we had before at any stage. So we'll pretend this says lunch, brunch, and dinner. And we're gonna again indicate now that we are on the lunch piece. And then let's say, last time I just had all of this text here in a same size lines, but you wanna think about hierarchy as you're designing this. So maybe this is soups, and we list our three soups. Salads, here we have two salads. And so now I'm just getting a little bit more specific that we wanna have headers so people can scan through the page easily, I mean menu design is a very common convention so we're not exactly doing any riveting thinking here. But even stuff that's as basic as that can get missed, and it's important to pay attention to that stuff that's a convention, and ask yourself, does it make sense for this design, is there a way I can improve it even though it always looks like this other places, is there a way that I can do it better here? And then let's say there's just some desserts. And then we said also that we wanted to have our back to top link. I keep drawing an A instead of an arrow. And then again, let's think about brand voice, maybe instead of having a small text link here, it's a colorful footer at the bottom, and it's a little bit more graphic. I feel like this sets us up here with a pretty decent layout for what we wanna bring into Sketch. Do we have any questions on anything else as I'm going through this? I think this really does cover the first step of getting your idea onto paper. It's starting to look like a website, I think, to you guys, it definitely does to me. And yeah, that's it, that's the first big chunk of wireframing. Question from over here, please, Alex. How long do you like to spend per page, given an average amount of content, for sketching out? That is a great question. So I feel like every question you've asked I have answered with, it depends, it depends, it depends. Sure. But design is a fickle thing. So, I don't think I can answer it in terms of a specific amount of time, but a good technique is if you're looking at something. Like let's go back to our reservation form for a minute. And we're thinking about that again, and yes, I thought about each piece, but could I have broken it down in a different way, could we have done a different layout? Basically a good rule of thumb is, spend as much time as you feel like you are coming up with new ideas. If new ideas are harder to get through and really far apart, you've probably done enough thinking. But if you can keep coming up with ideas and you can keep pushing it, keep working on it. It really depends on the scope of your whole project too. You know, if you've got a contract gig and it's a week, you don't wanna spend four days wireframing, you definitely wanna make sure you have enough time to do the rest of your project. But I would encourage you to spend maybe if you're a beginner, a little bit more time than you think you need to here, because doing this thinking and getting this stuff figured out now is what's gonna make the rest of the project go a lot easier. When we get into prototyping we'll see that that next step too is just going to help make the whole process smoother. So, as much time as feels right, and then just a little bit more.