Rapid Prototyping with Balsamiq: Low fidelity wireframes in a flash | Evan Kimbrell | Skillshare

Rapid Prototyping with Balsamiq: Low fidelity wireframes in a flash

Evan Kimbrell, Director at Sprintkick

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

      1:48
    • 2. Intro to Balsamiq

      13:47
    • 3. First thing to do

      1:05
    • 4. Creating Youtube with Balsamiq

      9:21
    • 5. An example project created in Balsamiq

      3:14
    • 6. Keep the learning going

      1:33

About This Class

Have you ever had an app idea (come on, I know you have), tried to explain it to someone, but couldn't get your point across? Yeah. We all know that blank stare. Encouraging. 

This class will teach you how to use one of my favorite UX tools, Balsamiq, to quickly set up wireframing for rapid prototyping...meaning that you'll be able to show - not tell - your latest and greatest web or mobile application project. 

Balsamiq is extremely easy-to-use and it's well-received by the creative community because it's seamless, easy to understand, and creates low fidelity wireframing in a snap. It's like sketching on a whiteboard, but via computer. Other wireframing tools are expensive, really hard to learn, and have at least 14 features that you'll probably never use. 

What you'll learn:

  • Get acquainted with the system
  • Learn how to navigate it
  • Discover what each button is for 
  • Use the tools and apply them to the canvas
  • Create a mock-up of an application


At the end of the class, you'll be able to create your own mock-up or follow along with the example we did.

If you're an entrepreneur, product manager, project manager, or creative freelancer then I highly recommend you start using this tool, you really don’t want to miss the opportunity to learn rapid prototyping with Balsamiq.

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. So in this course, I'm gonna teach you rapid prototyping, and we're gonna do it with one of my favorite UX tools. Balsamic. You might have heard of balsamic before. It's because it's a very, very popular tool for creating low fidelity wire frames. The reason people like it is because the ease of use and the speed at which it allows you to create wire frames is pretty much unparalleled now. The reason why I picked Balsamic to teach you this is because it's so fast. And that's why we're talking about rapid prototyping. So in this class, I'm gonna show you how you needed to wire frame a Web or mobile application project, how you could just jump right in and get started. Balsam. It's easy to understand. I'm gonna show you how to get acquainted with their system, how to navigate it, what buttons do what Then I'm gonna show you how you can take those tools and apply it to your canvas and quickly create a mock up of your application idea. Now, if you're an entrepreneur, product manager, project manager, or even just a creative freelancer, this is a tool. I highly suggest you learn how to use Balsamic is very well received by the creative community, and it allows you to get through the kind of an arduous step of wire framing much quicker. At the end of the class, we're gonna have a fun little project where we're actually going to start using balsamic the Web version and creating our own ideas if you have your own or using a generic that I provide you All right. I hope you're excited to learn rapid prototyping with balsamic. Go click and roll it will see in there. 2. Intro to Balsamiq: I am gonna intro you to BALSAMIC, which is a wire friending tool that we it spread kick use all the time. Balsamic is buying far my favorite tool for wire framing. Um, and it's my favorite for two reasons. One is that it's very simple to use. You can pick it up very quickly. I really don't think you need to spend hours and hours with it. You can really learn it over the course of 15 20 minutes. Um, there are a lot of tools out there that help you wire for him, but they try to make their systems way too advanced. My experience. You don't end up using 90% of the features that they try to give you. Um, and again, you really don't wanna have to spend a large amount of time trying to figure out just how the wire frame. The second reason why, like balsamic is that day. Have a sketch kind of design to their system, and you'll see this in just a second. So when you're designing wire frames, it looks kind of like you sketched it out on a piece of paper. I really like that and our clients really like that. It just kind of looks quirky and cool. And it kind of does look like you made it on a scratch pad. I also like how the sketch kind of look to it makes it kind of feel like, you know, this is a wire frame. We don't need to take it too seriously. And it kind of conveys that the developer, your designer should really kind of give you the benefit. The doubt this is not an exact design of what you want. Um, and I kind of like that. One downside of balsamic admit is that they do cost money on I believe one user licence is $79 which is kind of expensive for a wire frame tool. Um, there are other services out there that are cheaper, but unfortunately, I am not aware of any that are free right now. It used to be the case that Mockingbird was a free wire framing tool that was available, and I originally planned on making a lecture on that. Um, if you guys really do want me to do a lecture on another wire framing tool, um, that I'm not on unaware of just make sure the message me and let me know. And I'll put it out there cause I I'd prefer if you guys have a free version. But currently I just simply don't know of free version. Let's just dive right into it, all right? This is what balsamic looks like. Um, pretty simple. You have essentially designs up at the top, and these represent kind of all of the common elements that you'd be using in a website or a mobile application wire frame. You want to mobile, have a section for iPhone you want to do? See, if you wanna make a form good of forms and have everything right here that you need and what you simply dio is you would drag and drop it into the canvas down here. And this is the canvas. Um, so here we go, Here's a button. You can scale it just like any other type of design application to make the button look like whatever you want. Um, so one of the things about ball stomach that I told Mitt is negative is that they put everything into sections on sometimes it's actually kind of difficult to find things. That's something that I've kind of experience. So what? The remedy for this is I get better at learning the names of everything so you can search for it. Um, like, for instance, if you wanted to make, say, Ah, Facebook share button. Okay, how would you do that? So you have a button? But there's no way that Theis really could represent a Facebook share button that you actually have to do. It is you have to look for an icon. So just look for icon, but icon and text label, or you just go with Icahn. We got the text label. So here you go. It gives you a blank space and a name. Um, And now, if you want to bring an icon, this little user interface shit pops up and you can search for it. Or you can click this button to open their icon library now slowed. This is what they're icon Library. Looks like they have tons and tons of things in here. Um, let's see. There's the Reddit icon. Is the YouTube, um, pretty much anything you could think of. And they're all kind of in this quirky kind of sketch style, which is very popular. So if I wanted to Facebook and you couldn't find it, you could either just go to social or you could search it down here. Ah, here it is. Facebook. All right. And then you can change the name by just double tapping, and we'll just say, now, I could just a share. Whatever. Doesn't look exactly like what it would look like on an actual application. But that's not the point. You just want to convey to your designer conveyed your developer what exactly you want in the area. They'll deal with the rest of it. All right. Now, if you wanted to add text is another tricky part. And this is why I'm kind of tackling this up front. I wanted to add tax. There is a section called Text Can also search for text reserved for text. Though you notice this is a little confusing. I just want to make a line. I just want to type something notice over here. Section called Text. You just need to know this. It's actually string label or string of text drag. Drop that. And now you have some tax Aiken type. Whatever. I want some text. Um, now with some text. This is how you would modify it. And this goes for pretty much any element you put on your canvas. Your button Pop up. You're gonna be ableto edit it over here. Same with our icon. Um, same of virtual. The same features will pop up over here if you want a copy. Whatever you made, here's a duplicate. Here's a cut. Um, and here's your copy in your paste and you can trash it. Um, we'll get to grouping here in a second. Um, now I've created some text and what I want to do with it. I can change the orientation here. I can use the state and state just means that if I normal disabled, if I disable it, What that basically means is that when I go and save my balsamic is a pdf for P and G or J peg or whatever. It's not going to show up, and so this could be helpful. Sometimes if you're copying large bits of wire frame over um, and using them over and over again, sometimes you just want to disable it, or sometimes you want to disable something just so it helps you see something else that it might be covering. Um, but if you want it to happen, you wanted to be there. Make sure that it's checked is normal link You can link to another you can link to a Web page. You could turn this into a link so that when you save it as a pdf, the person that hasn't can click it and I can take them somewhere here. Regular text editing features. You could make it bold, italic underline, etcetera, etcetera. Here's what you change the size. You can also change your size over here. I prefer not to play with this, but this is much more exact. Um, this will resize it in a way that you kind of can't ah really get when you're picking just these increments. Eso I typically stick to this. Um, what will happen often times is see how it went from some text you some because I went to large after you can open the container, make the container large enough to show what the actual content in the element is. Um, if you want to duplicate items you will do is you can hit duplicate to create a copy of it . When you move things around, it will show you grid lines relative relative to whatever else is on your canvas. Um, now, if I wanted to say, copy two things, I could hit the left king and select both. Sorry. Um, now, if I duplicate, it's going to do both interesting. Um, one thing What will happen also is if I am duplicating an item and it's noticed it's a pattern. They're all online. Duplicate this. It should show it below it. No. All right, well, sometimes it works. Sometimes. It doesn't seat there. Ok, there you go. On. You keep doing that all day. Um, system isn't totally foolproof. You'll notice that it has some quirks to it. So, um, but the point is, it's still very simple and easy to use. Do you want to include links? We just got a text show. A link makes something look like a link type in your link. Um, I could show you some of these other things. Look, this is called breadcrumbs. Breadcrumbs of those things you expect to see at the top of website. Um, that shows you you know where in the sub page. The website. You are. I don't usually included dozens. I'm trying to be really specific with my wire frame. Um, if you want to make a, um, you want to make a wire frame for a mobile application, you just start right here. Good iPhone and on iPhone you have right here an actual iPhone. Again, it has that kind of goofy sketch style to it. So on the iPhone, um, you'll notice that you can expand it, make it larger, but it has a minimum I should have, so I can't make a skinny iPhone. It'll always be proportional, but regardless, and there's also a maximum size that you'll hit. Um, and then what you can do is you can kind of make screens of your mobile application if you want. There's some easy to use things poppies in here, like there's an iPhone keyboard, and I can put together a quick alert screen. And then whenever you're trying to edit something with balsamic, it might look like it's not particularly polished. That's kind of the design they're going for. But you'll notice that, like, for instance, how do I change? Alert alert text goes here. No. One. Yes, you'll notice that There's three lines on, and so anything I do in the second line is going to modify the subtitle of the alert. Anything I modify in the top line, it's going to modify the top line and you get the point that there the 3rd 1 will change the buttons. Now, if I wanted Teoh, um, go ahead and make multiple screens of this. There's two ways of doing it. I could go to the bottom and create a new mock up. So you do is you click. So that will create a new screen and Aiken go ago and create a new screen you can also do is go up to file and then do new clone of current mock up and short create. Okay, so now you see that we've moved to a new page with the exact same thing. So that's one way of doing showing incremental changes. Sometimes that you can do is you can show one screen, write some text over here explaining it, and maybe you want to have multiple screens of the same kind of design with tax next to it . There's a lot of ways you can use this, um, you can also just so I will not to say that because I don't want it. Um, but you can also do is if I want to copy this. And typically, when I make wire frames, I'll be honest. I actually make a lot of them all within the same canvas. And the way that you would just do it is you just build out toe one side or build down because it's an infinite canvas. Um, So what I could do is if I wanted to copy everything here, I'm gonna select everything with shift key, okay? And then I can copy it. Just a duplicate. Now have everything. Now I have another one. Um, one thing that I think is quite useful is this thing called the group. You can use your group ungroomed. So say I want all three of these things. I made the iPhone, the alert message and the keyboard to be associated together. Um, what I might do is just lock them together so that I don't have to constantly it shift and could click every single thing. I could just group them together and see how the color change happened. So now I can exit out. I don't need to select it. Sorry, Um can exit out with clicking outside the campus. Click it and look. Now I can move the whole thing, as was here. I can only move one thing. Anyway, One thing that you could do and guys keep in mind. You really don't need Teoh. Make this look to the t perfect when you make a balsamic, um, wire frame. What I like to do is I will make arrows on and big with arrow. You call it a shape that use a geometric shape. So it starts out as a circle. But ah, here again is one way of doing it. Um, I could do like that. And I think that looks kind of cool, because what you do is you can look at it and go. Oh, first screen, second screen, right? Um, or obviously you can just do it with an icon. So they're a Nikon over, and let's make a narrow out of search for arrow shows me direction. What direction do we want? There we go. Gonna make that larger. No. Excel on it. There you go. Now you can't miss it. Okay, um that I mean balsamic is like I was saying, very simple. So there's not a ton of explanation that needs to go with this. And you might be looking at this and saying, Wow, it is really basic. How am I supposed to make a website? And, uh, you know, at first it is a little bit complicated, but you'll notice the more and more you play with it. It really does have everything you want covered. Um so to prove my point, I can let's go ahead and make a website. 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. Creating Youtube with Balsamiq: um I'm gonna make a copy of YouTube and YouTube when I speak off for you to have not talking on the home page and talking about what the screen looks like when you're actually viewing a sub page. So I would go to all go to the browser window here in the browser window. I can type in YouTube, and there we go, see? Shows it up in YouTube. Expand the size. Okay, Now, let's make something like where you'd watch the videos. Where is the media player? In the media? No media is where you're gonna insert pretty much anything you want, like could be associate with images is a progress bar has a street map. Pull this out so you can see it. That's like a Google map Street map. Um, is a video player. Yeah. So let's say that this is, you know, where you watch videos. So let's say we want to put a search bar at the top. You can use the search bar. It's got to call. The search box is at the top where you would be searching for videos. Um, let's see. I love this about balsamic. You can just use icons, and they have a lot of the logos that you would commonly use. Like they have the Twitter logo in the instagram logo and finish everything you'd want for the most common social platforms. You that Look, now we have our logo YouTube. Um, let's make that little section over here where you shows you suggested videos. Know what I would do for that Since the thumbnails that he's an image, images just come out like boxes were just perfect for what we want. Just called it video so that our developer, a graphic designer, knows what that is. Um Now, with with the image place holders, what you can do is you can add borders. Um, and you can actually upload images and insert them in double Islamic. So you do. Is you just double tap it. We'll browse for a file. Everybody loves cats. So we use cats. This is a cool feature. I like you just it's sketch it. So if I don't have sketch, it's gonna insert this image with the full color. It's gonna look kind of weird, the whole black and white thing going on, so I'll just say Sketch it So I say load? No, there goes. Now let's try to put it back into the size that you'd expect. Yeah, yes, that looks weird. And we're gonna put let's put a border on it. That looked better there. You now looks kind of like one of those videos you have suggested to you. Now it's at the text that you would go with next to it. So this is how I do it. Number, string, string of tax. Put it as the title. So Oh, cat, video prayer. Super original. Um, since it's the title, I want to make it bold. It's increased the size. Just leave it. Okay, it Now you can use your keyboard to to move things around. So if I just go left to move it, one pixel left right up, down get the point. Um, and then right below that now, if I want to put text right below it I want to do is it duplicate? Put it right below it. And let's change it called by just call it the cat person person. Because everybody knows a cat person. But nobody knows a cat person person that's see man will make it smaller. It's remove the bolding you go. And let's put a view counter. That's usually just a number. 1,000,000 people watch this video, and usually that is a little bit small where I think it's pretty believable. So what I'm gonna do is I want to create this a little grouping and I want to make it go all the way down the screen, which is typically what you see in YouTube. So what we dio click it when a group these together remember how we do group? We had a group. Now they're together. Now my copy, my group and even exit out. Does it really matter? Coffee? My group a lot. Here we go. It's matched the grids up on. Here we go. Is there a suggested videos now? Maybe I wanted to put a container around that Something light. Just go to shape again. No shape. I am just gonna pick a rectangle right here. Put it right here, and I won't expand it over. You notice how it covered it. Now the balsamic has a layering. Um, kind of like Photoshopped. You used photo shop before has layers. Um, the way that you would want this to fade to the back is you would use this little subgroup . Um, this will send it back one missile, send it, Ellison, That all the way to the back. So this will be the bottom of your Imagine this kind of paper laying on top of each other. This would be the bottom piece of paper. You cook this If you cook this, it's gonna bring it all the way of the top, so it's gonna cover anything behind it. I just want to send it back until it's behind the cat videos. But it's in front of the actual, um, background that we established previously. All right, so the rest of it really is just kind of tiny little details. It's up to you. How much detail you honestly wanna put in here? Um, we can, you know, it's just pretend like this is Ah, here's the placeholder for the image. Whoever made the video, um, can add in text again. Right here. So the name of the video safer secret webcam video, because they wanted to be a secret. But they also want the entire world to see it. And look at this, realistically, much. Live here. Okay. Where this down at some space. Um, you can add those thumbs up and thumbs down. I'm just picking icon. But it over here you can even just search for Earth films. Films is one. There you go. Running a small makes more sense, right, And you can get even, copy it right next to it and then just find another icon thumbs again, some thumbs down, like the video. Yeah, Then just stick someone's face on it because it's a webcam, right? You get the drift now, so make it widescreen. Whatever. You can put an enormous amount of detail into balsamic if you want Teoh. But as you've noticed, that really did not take me a lot of time. And I have a wire frame of a video. You obviously know what Watmore time and effort into whatever you actually build yourself. But once you actually get acquainted with it, hopefully by now you are acquainted. You can really move at lightning speed, and you can really produce these very, very quickly. Um, now, if I, you know, wanted to make the next screen at YouTube, I'll you know, I could just go up to file clone current mock up. And look, I have the same exact thing and I could just move from here and start deleting things wherever I want and changing things around. Um, there is more functionality to balsamic. I just don't think it's something that you need to be. You don't need an in depth guide to it. You see what I did? I learned, You know, you could learn this very quickly. You could slap it together. And that's kind of the beauty of Balsamic. I don't want you to spend an enormous amount of time doing this. This is why we're kind of shying away from some of the super professional, hard core wire framing services and just moving towards this one, which is just kind of fun. And everybody kind of looks that it likes the design of it once it's all done. Now, when you're done and you're happy with what you got, all you gotta do is just go up to file and you can save it as whatever you want it to be. Make sure to back it up. Um, if you guys here on an older computer and make sure that you don't have tons and tons and tons of tabs open. It can really kind of slow down your computer, but otherwise just exported to whatever you want. I like pdf. That's one of the easiest of you or you just do it as an image. That's what you end up sending your graphic designer, your developer, and they will thank you 1000 times over. 5. An example project created in Balsamiq: right Now that you've finished the lecture on how to use Balsamic, I can show you, Ah, re a life example of a balsamic wire frame. We used to launch a separate sub page for our, um our main sprint kicked up com home page. Um, so I built this in balsamic, and you can see that has a lot of the same features that just kind of went over. And I can show you this is kind of, you know, the level of difficulty in the level of detail that I would expect someone to build. It was building something on balsamic. Would would kind of go for, um, you can see this is not particularly detailed. We wanted to make a long landing page, something that you could scroll down one of those long called long pages. And we wanted Teoh make sure that we could have one separate logo. So we kind of threw something together in Balsamic. This is the idea behind it. We wanted to do Sprint kick developer on demand. Um, and this service was service. We started about a year ago helping people staff their companies with contract of labor and so basically what I just did is I took a picture of the are Header Bharat Sprint kick. I copied that incident it as an image into balsamic so that you could see our top bar and I changed out just with a little X marks, um, and little shapes that I would use this a scratch out. And then I changed to what I wanted it to say at the top on then, pretty much everything down here. It's all just kind of chicken scratch together. This is roughly the tax that I wanted to put. This is roughly kind of the idea of, ah, icon design that I wanted to put together. Um, I would say we designed pretty much each section out. And so, as you can see, it was super quick and easy. I put in pretty much every section. I thought I'd want you notice that I kind of scratched it together. It's very much a loose mock up. Um and then I just kind of gave an idea, like, you know, put a picture of a human for a startup and three humans for a mid sized company and in multiple ones for enterprise, and I left it up to the graphic designer, then kind of come up with an image that would match all of that. Um and then even like one of U. N F A. Q. I don't need to write out every single piece of text I can just put loosely what the format should look like. And I'll show you what it end up looking like. The end. This is the end of the page. Ended up looking like you see, that's that custom logo that we got done. This is the new header. Um, this is that icon set. But I previously talked about, and everything kind of worked out pretty well. Um, this entire thing cost us about $500. That includes the programming that includes the design. It includes even little incident, like a little JavaScript plug ins that make it such that I can deal things like this and so not too shabby. You don't really have to break the bank to get things done. 6. 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 in this class, we learned how to use balsamic, which is a very popular prototyping tool to make primarily low fidelity wire frames. Now, if you want to learn Maura about wire framing and you want to keep this learning going, I have some other classes I definitely think you should check out. So specifically, I would suggest checking out wire framing in paedo CO. Now, Peter, because another tool that can do a lot of what balsamic can but actually goes a lot farther in Tokyo, you could do a lot of things that balsamic can't. So you could do things like sharing. You could do collaboration do online reviews You all sort of things, like deploying it directly to your tablets, your phones and your computer there when I'd suggest checking out is intro to Web and Mobile App sketching now App. Sketching is when you just take a pencil and paper and you draft out your your idea of your application. This is something that's becoming more more popular with start ups and agencies, so I definitely think it's something you should be familiar worth. It's worth checking out. Okay, If you want to go further with your skills, check those out. Otherwise, again, Thank you for taking the course.