Intro to web & mobile app sketching: Visualize your idea with just pencil & paper | Evan Kimbrell | Skillshare

Intro to web & mobile app sketching: Visualize your idea with just pencil & paper

Evan Kimbrell, Director at Sprintkick

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (31m)
    • 1. Welcome to the class!

      1:34
    • 2. Intro to sketching

      0:57
    • 3. First thing to do

      1:05
    • 4. Materials for sketching

      3:40
    • 5. Sketch it out part 1

      8:07
    • 6. Sketch it out part 2

      14:18
    • 7. Keep the learning going

      1:27

About This Class

In this course we're going to take the first step in creating low fidelity wireframes - with a pen(cil) and paper. I know, I know, it sounds too simple, but you'd be surprised at how many people get stuck when it comes to figuring out what the website or app should look like or where the content should go. I've designed hundreds of mobile and web applications and this is the first step in my tried-and-true method.

We'll walk-through taking an idea, conceptualizing the requirements, and putting it to paper. The result might be rough, vague, and ugly - but here that's how we like it. Once you have your sketch, moving on to creating your prototype / mock-up will be a cinch. 

Now I'll bet a solid $10 that you have access to a pen, pencil, and paper (actually in this day and age who knows, lowering the bet to $5) so go grab them and let's get going.

What you'll learn: 

  • Understand the benefits and correct usages of prototypes
  • Create professional looking initial sketches of your product with just a pen(cil) and paper
  • Create a sitemap for outlining your product

What you'll do:

You will sketch out your own app idea (or use an existing one) on paper. Surprised?

Transcripts

1. Welcome to the class!: Hey, guys, I'm Evan Kimbrell, and I'm the director at Sprint Kick, which is a web and mobile development studio based out of San Francisco, California. Now, in this class, I'm gonna introduce you to app, sketching app. Sketching is one of the most basic, simple ways of taking idea in your head for a feature or project and putting it onto paper and visualizing it. Af sketching is really popular with design and development studios because it's really easy . All you need is a pencil and a paper. So in this class, I'm gonna introduce you to that. I'm gonna show you how you would start doing that. And I'm gonna focus a lot on helping you get through the hang ups that a lot of people have when they first start sketching out. Perhaps the idea for this course is that anybody could take it. If you're entrepreneur who has prototype before, but just once a quick crash course on how to do it on a different medium, you could use this class. If you're a product manager, project manager and you wanna learn what the newest techniques for doing you axe and user flows. This is for you attached to the class are a lot of resource is have attached templates that you can use for pretty much any type of project that you're trying to sketch out at the end of the class. We have a project where you could go and sketch out your own application or you can use a generic idea and post that and everyone can talk about it. All right, guys, I hope you're excited. Toe learn the introduction to APP sketching. I'm excited to teach it. I'll see you guys inside. 2. Intro to sketching: Hey, guys, welcome back to the course, So in this lecture, I'm gonna show you how you can take the first step in creating low fidelity wire frames. Now, I'm designed this to be as simple as possible. I'm showing you this based off of a table and paper, and I'm gonna show you how I would go about doing it. But I make it really simple. Everybody has a pen. Everybody has access to paper. And honestly, that's really all you need to first get the juices flowing and to get introduced to the wire framing process, where to put things on a page roughly how we want it to feel what we think it should look like. Compared to other websites. Where should the content kind of roughly be located? This is really the first attempt at putting something on paper. It's gonna be raw. It's gonna be vague, but that's exactly what we want 3. First thing to do: Hey, guys, welcome back to the class. So I have an assignment for you really quickly. I want this to be the first thing you dio eso at the bottom of the skill share page. It says discussions, the clip discussions, and then you can click new post. I want you right now to go and do that and introduce yourself. You don't have to tell me a lot of information. You can just say your name or your from. But what I'd like to actually hear from you is one. What do you struggling with? And to what are you looking to get out of the class? I think this is something that helped immensely with the class. I really like to make my classes as engaging as possible. I respond to everyone, and I want to make sure that as I'm teaching, I'm meeting your goals and I know exactly what I'm trying to fix. Okay, so this is the first thing. Just go down to the bottom of the page. Do that now. Don't skip it. You can skip it if you want, but I think you'll miss out. All right. Seeing the next lecture 4. Materials for sketching: All right. So the best way of starting this process, when you do go and get to the point where you doing structure, This is after we finish scope. This is after we finish strategy. Now, we kind of a rough idea of what we want in our application. We just don't really know how it's gonna look. This is what I like to do. Honestly, I like to just pull out different pieces of paper and to start scrambling. Um, honestly, when you start doing this process, do not worry about how it comes out. Don't worry about how many mistakes you make. You make a lot of mistakes, and a lot of times you want to be able to recognize what a mistake is. Um, but this is what I like to do. I like Teoh grab whatever I have around me. You can do it on a napkin that you could do it on a legal pad. But my preference personally is to use these basic kind of lab grid lines. And you can see this is just kind of like a lab notebook. It has automatic grids on it, and the reason why I like that is because I personally cannot draw to save my life on Guy can't really stay in the lines. And this really helps me be able to When I read draw rectangle or a box or I'm drawing a browser really helps me to stay in the lines. It also helps me was sizing. A lot of times will make a button, and I can just say Okay, well, the recreate this button it needs to be to buy three on, and then I can create buttons that look roughly the same. Size doesn't really matter. I just think it helps in general, making something that I hear a little bit more proud of. It helps that you can visualize kind of roughly what space looks like Now. If you don't have access to this, the absolute minimum requirement to sketches, really anything. I mean, like I said, you could use a napkin. Here's another very easy option. Just computer paper computer papers. Great as well. It's big. It's wide open. Try to what I do if I use computer paper is, I will take to put them side by side on one. I'll turn it sketch out roughly. My thoughts hope notes as I go along and then over here is where I try to make the final version the version where I'm actually gonna create something that looks somewhat correct. Now, if you look at the resource section in this course, I actually included some templates that you can use. And right here, what it does is it's This is especially helpful for using mobile applications. Because if you're saying sketching over here over here and I want to make it for an iPhone six or a Samsung Galaxy three year whatever Rs three, I'm not entirely sure how big that should be. And I might just end up kind of doing it all over the place. This can actually help you. Um, And so if you go there and download it, you can see that there are multiple versions like right here is an iPhone six on DSO. It's already has all of the sizes for you. Uh, here's a six plus, um, and here is the iPad. And remember, you can design this both wise designing like this. Design it like this. Ok, so, um, just kind of like the set up I like to do personally you're not gonna have it like this because you don't do this professionally every day. But I like to do is just have multiple types of paper out. And I like that my computer here, too, because constantly I will need inspiration for how to format my sites. Or, you know, sometimes it's nice to take a little break in space out, but it's really nice to be able to pull up something over there and then look and then try toe, emulate it down here. 5. Sketch it out part 1: All right. Welcome back to the course, so I know. Have the lab notebook out, and I want to kind of walking through really? What? The first steps are to put in your idea onto their paper. Now, ideally, what you should have is you should have your scope document open, Andi next to you. And I usually would pull that up on the computer over here just so I can look up and see if I'm missing anything. Well, keep in mind it's a scope document. So you're not gonna be putting in every single feature because we're doing the structure. The structure is mawr, just roughly like where Landing page text should go. Where is the welcome headline? Roughly where the contact us. What columns should we be using things like that? This is really the least sophisticated version of it possible. Now I'm using a pen. That's because I, you know, like to live on the edge, and I like to use things that are permanent. But it also means that I am not throwing paper away all the time. I suggest using a pencil personally and then going over it with the pen because of the pencil. If you make a funky edge, you could just go over it. But then again, guys, it just really doesn't matter as long as you could understand it and it likes to show it to someone, they can understand it. So let's say that we're making a Web project and I typically would like Teoh label off of the top, whatever it is and then say something like, Whatever page it is, So we can just say But jumps number one will just say home page. Okay? And that's just to remind me of what it is that I'm doodling on again. Typically, what I do is I would put a copy over here, and I would just draw over here. Teoh mark out my thoughts Now The easiest thing to start with by far is you'll again this page, and you're like, I don't know any what to do or don't even start. The first thing to do would be to decide what you're making. Weber Mobile of its Web or mobile draw the bounding boxes. If you doing mobile, I suggest using the templates. But if you're drawing Web, just draw a browser around and try to make it look as roughly what you remember about her looking like that will help. You kind of get in the mood to understand, right? This is what it's gonna look like inside a browser. So I would just draw a rectangle. Um, give yourself a little more space. Don't worry about portion ality the resolution. You'll deal with that later. Okay? As you tell the boundaries don't even really help me that much. But you can only imagine how bad that would be if I was doing it on ungrounded page on. Then I'll just pretend that it's like a browser. We'll pretend this is chrome. I'm someone that has tons and tons of tabs open all the time. I'm going to search for it here. So far, they have icons. Haven't they Usually have a bottom more? So there we go. Now we have a very, very basic, um, image of a Web browser. Now it's helpful because now I know whatever I'm drawing is occurring in this space. One thing that could help you quite a bit is if you draw this outside border like your browser or your mobile app phone. If you draw it with a different color just so you can focus on those layers. Don't go crazy with it. Otherwise, it looks like a Popsicle on, and it's hard to focus your eyes. But that's one technique. If you use something that's a little bit different than this, say, like blue, blue and black or usually usually easy to look at wouldn't suggest using purple, red and green. Keep it. Keep in a way that people can actually look at it and not go crazy. Okay, so, uh, this is the way that I always starts another. Have a browser up, and you'll see this later. When we create our first wire frames, I always start with the same thing. So the first thing I always do is I almost always put my logo up at the top. Left on. Did I draw a navigation bar? Now, not every single website does that the same way anymore. There's a lot of our ways you can look at navigation bars, and later we'll view some navigation bars and what they look like a whole different ways of doing it here. It doesn't really matter. I mean again, we're just looking at structure, so I would first you decide within. I won't have a traditional website where I have the logo right here and then every single sub page here and then footer. Chances are you're always gonna have a footer, and it's always a good idea to have a foot or not just for s CEO purposes. But for navigational purposes in you X, you don't always have tohave navigation bar at the top. A lot of people have, like, long form pages now, and they just kind of like, scroll all the way down. And again, if you're building an application page, then you wouldn't have that right? You build out the application, for instance, I would put on the left hand bar a bunch of buttons or I can move around. Um, you know, or maybe I put it up. Multiple navigation bars have one up here, one over here and one down here. But so if you're making a normal website, what I always again this is how I always like to start it. So I just put a box up here, call it a little girl, okay? And then navigation bar would go here up to you whether you want it, but I like to use it. Don't be redundant. Don't put home is a navigation bar. Remember, you always click on the logo, so I would say, Oh, how prices about us now remember, doesn't matter. We're just trying to get the format done. The rest of it is just junk. Um, so I would say that. And then well, then I'd make a decision. Kind of like what kind of style that I want here. The next thing I do really quickly, I was dropped footer. So I'll put a really thin here when the foot are always just has, like, contact us, and then maybe the logo over here excited rec center, and then you could literally just put her Remind yourself, Rivers looking at it. Um, then, you know, it's just kind of toe the way you want to do it. So, like, let's say in this one, I'm just gonna make, uh, a basic kind of cover page design. A lot of people do that now. So what you would do is say you have a box like this, okay? And then it's up to you whether you want, especially the image in this box But what I can say is I could do it like this. I can say image. Um, I can also just put image, image, image, image over here. Typically, what you do is you put some kind of image and then have a call the action button. If you don't want that, and you just want an informational, you can leave the But now maybe you're creating a page for promoting your software application or something like that. So what you would do is you know, you probably have, like, screenshots, so I would just make a very, very rough estimation of what this is gonna look like. Okay, so that's like a Web browser in the back. And then mobile, um, here and then a fan Mobile? Yeah. Um, and then maybe put a little border around it. Um, Now, again, we're in structure. So, um, what's gonna put right here? It's if you were in the skeleton section, I would suggest you put the actual copyrighting and actual slogan or tagline here. It just does not matter. So what I'm just gonna put is this is my headline. And then right here, I'm gonna put it, you know, subtitle 6. Sketch it out part 2: And so that's roughly the way that you do it. Remember, this is just googly GAC. Hopefully you have a better hand running than ideo, so people can read it later. One thing I do like to do that was label what? So many things are not really draw, so I just say, like their ears, browsers, cells. All right, then, after this point, it's literally kind of up to you. You know, if I was just doing a landing page, then maybe what I would just do is I would probably go look at some other landing pages, see what I like about them, see roughly kind of the format that I want to remember. You're just looking for content layout. So really like maybe what I put here is another line guys don't worry about proportionality . Doesn't really matter. It's just a sketch that I put something like, you know, testimonials. And then roughly, you know, again, I'm just trying to think of the formatting here. So maybe it's like a face in a bubble. We have a call out box face, bow call out off, and then maybe we'll bottle it says Seymour not expands. So I put a person's face or here we always label this stuff and then, you know, scribble, scribble, scribble. Okay, Now, keep in mind if you do a long, scrolling landing page. Obviously, don't draw this insane exact format. You'll need another beforehand. You don't extend this all the way down, but that's really the basics of it. Anything you want, put it on the page. Don't worry about what follows some design convention. If you can't figure out how, should look how it should lay out with the order, even just looking on the website. So if I wanted to use this, I honestly could. Just like any old software company, I could even look at the template from theme forests and see how they do it since this long landing pages so popular right now. Okay, so now do another example for a second example I'm gonna show you may be what, like a Web application page would look like. This is obviously different because it's not. Not every single customer comes to the page and they're not looking to buy this point, so we might want to make it slightly different, so we'll start up the browser again I label it at the top? Um, when half, um one. I'll call us an interior page on. Then we can just do the browser. It's not perfect, but again, it's not supposed to be a say another brother. So with physical Web application page Web application pages like, Say, you're inside Google analytics say you're in side your ECM rock stress CEO Mo's Whatever. We're just getting displaying a lot of rich information, a lot of facts, data, etcetera. You're gonna focus more on navigation and let some being pretty. So it's really up to you the way that you see your page being laid out now, typically would like to do in this kind of cases, I had to pull up in my scope document, list out all the functions and then kind of take a gas. Allow me pages. I think there are. Now remember, this is a sketch face. It doesn't really matter how close you are. What I put is, you know, I would say like that. We have a main page, and I think we have a page for pot, you know, say analytics analytics, set up account payment preferences. Onda. It just depends what your thing does, remember? So you just come up with whatever you need on this on this scenario, And then I kind of like to check them off as I go, because I need to make sure that I have leeks to every single page that I'm anticipating. So here, what I would just do is, you know, maybe, really don't start with the logo up here. Never have too much brandy, so immediately. Have, um, like, the top navigation bar would be these four things so we could say, like, analytics. No x a cat. That's even what they call it. Make these links on, then say that you have secondary changes. So, like maybe an analytics. Let's say we're making analytics. Eso we have analytics page. Maybe when this box right here you're looking at analytics and typically doesn't graphs and what not? You don't really need to even label out what the graphs are at this point. Just you know that glass? They're gonna be here when you get to the skeleton. Now, you you're gonna take this and know Okay, This is roughly the analytics page graphs in this area other different ways and modifying over here on, then. Then you make a decision as to what the actual details are, But I put it and here's a bar graph the bar graph, Harry. And then, you know, I might put some drop down boxes here. That's a triangle if he couldn't notice. Sorry, not just a filter. It doesn't really matter. It's just keep roughly in your head what you think you're really displaying and here, maybe they want to change it based on different information. Over here, maybe you will have a box. It's called Box. Maybe like this snapshot. The snapshot that gives them, um you know, it gives them a bunch of numbers and based on what they're doing over here, because maybe that's helpful. Maybe is there modifying things that gives them some more information? And maybe over here we have mawr filters. So maybe on radio buttons and a combo box, and, you know, maybe we have some check boxes and whatever. Okay, um, doesn't really matter. You just again we're dealing with way out. It's just a decision. Then you have to make whether or not you think this is 2/4. How big is the information that you're trying to display, you know, is this something that's useful to you? What are cool things you think you could put in here? That would be helpful. If you are looking at the screen and your explain its information, how would you like to look at it over here? It's always nice to put filters, especially when you're building a Web page. I do that if you look at, like eBay, for instance, they'll have say the page, and then you'll have individual listings of items over here. You have a filter box, and it just goes all the way down. Tons of tons of things you can filter by. That's perfectly normal to see it like that. Then on the left side, they have more filters, so I don't really worry about that. If you can think of it, put it in. And if it just doesn't look right, get rid of it, scratch it, do a new page, you know, and then maybe we'll put off like some pie charts and then text right here. Okay, etcetera, etcetera, etcetera. So there you go. That's how we did this sketch face. That's how I would draw Web application again. The thing is you might be doing is thinking like, Oh, I know you know what I'm doing. The point is to get something on the page. Once you have something on the page, then it's so much easier to figure out what did. It's a then it's It's so much easier to understand what doesn't look right. What looks right. And then you can start moving it around. See, I just threw this together. Now, first building a web application that I would say I maybe I don't want that. Maybe. Do you want this mean decision Digger makes over here much easier to move pieces around once they're already on a piece of paper versus using a blank canvas to create whatever you want. Okay, so then I'm gonna show you really quickly roughly how I would sketch out the mobile application happy hour act that we've been talking about. And I'm gonna use the actual music, actual templates that we have just to show you how useful these are. So we'll use it like this on. I'll just stick it on top of here. Okay, So So we're gonna use the template. Right? So we're gonna use the templates that are available. I'm just gonna take this, move it over, and they're gonna start working with it. Okay, so I think that the iPhone six plus remember, this is a mobile application solution. Typically don't like suggesting starting with the iPhone six because it's so abnormally large, especially when we're talking about plus, but in this case, I think it's perfectly fine what I would do. You know, roughly again, I pulled a scope documents, see what we have. But for the most part of building this idea in my head for the last 20 minutes, so I roughly know what I think. It should look like the first screen I wanted to be a landing page with the headline in the logo, and I want them to pick between today or Tomorrow. So that's actually quite easy. Already have this entire thing made for May. So now it's just a question putting, like welcome text. So I would just say, Welcome text on, then maybe subtitle text right here. Going to do what's called a cold action Well, actually just means click this button, do something. It gets the user to do something. Say something box around tonight on then well, over two buttons. So today you hear he's that grammar on Ben. Help here mingled with logo but a circle Call it logo. Never try to, like, sketch out the logo here. It's not really worth your time again. Remember, guys, we're just putting rough things. This structure. If you read this, you have no idea what it is. But to me, it makes sense, and it's a very good starting point to move on to the next section. Get Mawr defined. I'm getting more accurate with it. So then let's just say I hope drawn line from here said it. Connect. They click today on Let's say it brings you to a page that shows you know your location. Make it a grid. Now label these street well, three. Teoh, etcetera, etcetera suggested. They know roughly what that looks like. Don't even try to make this look like and he's thinking, recognize? I just throw it out a pen somewhere so, like this might be the location, and then I'd say your location and then maybe olders put happy hour locations were here, over here and over here. So bar one O. R. to the O. R. Three Hard to read, write sexual back handwriting. Hopefully, you do it. You spend a little bit more time on your handwriting, but you always go through this on. And then the next dream let's say we'll draw near from here and you want to do that's too so, like upon click. So you know to yourself Hey, so I was like like this here on legal business page. So you will have that cover photo I just put image or name. You are hours prices and then you can just call these images. I am G for short xx xxx text dollar sign. Uh, now this is a sketch face. So I know that, for instance, we forgot to put in the contact information. I know that we forgot to put in whether or not the hours of for today or tomorrow you go. I just have this in I would like to look at these for a while and think about head and see if I could remember if I did something wrong. Onside put today just as a reminder. But the rest it doesn't really matter. So that is roughly what are iPhone happy hour that looks like Remember the label? Hopefully, you guys can read that. If you don't just ask any questions, guys, if you need any clarification with this, just post in the group discussion or send me a private message, go over this again. I scribbled this really quickly used to show you that should not take a ton of time. This is just to get the juices flowing is to get you to a point where you feel comfortable putting things on paper. Eventually transfer this to your computer on and then start building something that's a little bit more substantial. If you skip this step, I have found that it gets considerably harder because then you're starting from scratch or the tool that's more complicated especially. You don't have experience putting down layouts. Now again, if you ever hit a point where you're confused, don't know to dio pull open your phone. If you're making a mobile app and just start browsing APS, try to find ones they're similar. You can't find ones there somewhere. Browse anything. It will give you ideas eventually for how you might want to lay this out, how you might want to make this look how icon might look something like that. It's easy to find inspiration if you just look at other APS. Typically, I like to look at maps that are popular because those usually have better design. So try to stick to say, if you have the Apple iPhone store, look for the top grossing or the top selling look at the way that they actually do it and follow their lead. Other than that, your website making a Web version go on your laptop, just started bringing a page and see how they do it. 7. Keep the learning going: Hey, guys, I just wanted to say thank you for taking this class, and I hope you learned something. I hope what I said made sense and I was clear, if you have any questions, any concerns, just posting the group discussion, all respond to you. You could even send me a direct message if you want to. I want to give you a quick word of how you could take the skills that we learned in this class and how to bring it to the next level. Learn some other related skills. So this class we covered how to do basic app sketching, Really? We just covered how to jump right in how to ignore kind of the mental blocks you get with making wire frames and how to structure the process by which you draw them out. Now, if you want to keep this learning going of a lot of the classes on wire framing and prototyping, you should gently check out when I suggest checking out is rapid prototyping with balsamic . In that class, we're gonna take balsamic, which is a very, very popular wire frame tool. I want to show you how you could make quick and easy wire frames that look really good. Another one worth checking out is wire frame with Paedo Co. That's another tool that encompasses a lot of the feature set of balsamic, but it goes a lot farther in Patoka weaken. Take wire frames and put them on to our tablets. Put them onto our phones. We can also put them online and add collaborators and reviewers. Okay, If you want to go further with your skills, check those out. Otherwise, again, Thank you for taking the course.