Video Transcript:
Paul: Hi. It’s Paul Clifford and today I want to talk about wireframing with Balsamiq.
Balsamiq is an online and a desktop-based wireframing tool. There are lots of wireframing tools out there. I want to just take you through the process really of just getting a wireframe done really quickly and just give you a feeling and overview of what Balsamiq and a wireframing tool is all about.
Just briefly a wireframe is essentially a sketch, okay? It’s like the visual drawing of what you want your app to look like. Just so you know there’s also a mockup, which is like then a more graphical view. That is normally done by a graphic designer. Then you have a prototype, which is like the final app but with no guts or engine underneath, and a prototype is obviously very clickable. These are often in a traditional design your app will go through these three phases.
When you’re trying to get an MVP or a minimum viable product out the door as quickly as possible generally you’d skip some of this work. What you really want to end up with very, very quickly is a working wireframe, which is somewhere between a wireframe and a prototype, so that you can actually talk to your market about what your product might do and get some feedback and validation before you go into hard coding.
Anyway, without going into that in a great deal let’s talk about what a wireframe process looks like using Balsamiq. Okay, this is just the Balsamiq desktop tool. Essentially you have like a workspace here at the bottom. At the top here you’ve got different elements that you can literally drag on to your workspace very quickly and just type in text what the words you want to be, and when you click away it just inserts it like that, okay?
You’ve got all your basic elements like lists, you’ve got menus, menu bars, you’ve got number steppers and at the top here they’re grouped. If you want to create an iPhone app for example you’ve got a lot of tools there to do that. What’s also nice is apart from drawing what the screen should look like you should also get used to putting these post-it notes around. These post-it notes are kind of diagrams to the developer or designer explaining your thinking or explaining what’s behind a certain feature or drop list or button or whatever. Okay.
Now the other thing about this is you can not only just draw these things, but you can input images as well. If you’ve seen an image say on the web or something that you want to represent or you want your design to represent then there’s no harm in just copying that image and just pasting it in. I just took an image of a chart here, because this is what the kind of thing that I want to be showing on my dashboard for my app.
This is kind of a very first early mockup really to clarify my own thinking about what I wanted my dashboard for an app I’m designing, what I want it to look like, okay? So what I’m going do now is I’m going to go into the online version of Balsamiq, which is called myBalsamiq which looks almost exactly the same but it’s got some new features around versioning and also sharing your design with your developer. Let me just flip over to that to show you what the process looks like.
Okay, I created a clean trial account just to show you this and what I’m doing is I’m just creating the dashboard of what you just saw earlier. I’ve created basically a widget area and the first thing to do is create a container to put my buttons in. Okay. First one, I’m going to drag a label across and just type some text into that and of course the widget title. There we go. Just position that and that’s it. That will do. Let’s grab … I need a field. There we go. Let’s just stick that in there. Okay, so there’s the label, there’s the field and where the content’s going to be typed. That’s where the widget title will go. Let’s start putting some buttons on the screen.
Okay, so this widget what I’m doing is I’m just going to create a widget that’s going to add content to my dashboard and there’s going to be different types of content. What I’m doing is I’m just creating three buttons to show what three different types, the three different widgets are basically. I’m going to put in an analytics one, a general one, a recent activity one and once finished you’ll see what it looks like.
The other thing you can do is with any button you can show within Balsamiq what state it’s in. In other words, whether it’s the selected button or not and it shows up in blue. Let’s put in the text for the next row of buttons. I’m assuming this is going to be when someone clicks on analytics then I want this second row of buttons to appear. Let’s put these in now. For analytics I want to get Google Analytics in, I want to get Facebook analytics; I want to put some Twitter and LinkedIn as well. Okay, these buttons look a bit odd so I’m just going to space them out a bit more. There we go.
Now again, what I think I’ll do is I’ll just make one of those buttons the selected one so in other words Twitter. Once Twitter is highlighted then I want the user then to be able to select the options for Twitter. The user will come in, they’ll type their title, they’ll say right, I want to create an analytics widget and within analytics widget I want to look at Twitter analytics. Now I’m creating the options for the Twitter analytics settings. I’m going to have two drop lists or combo boxes as they’re called and one will be to select an account. In fact, one will be selected channel and one which is basically a customizable account.
Don’t worry too much about the content or the meaning behind all these things. What I really just want you to understand is how quickly it is just to start mocking stuff up and it’s very much drag and drop. I’m not a graphic designer, but I know kind of what I want in my mind. All I’m trying to do now is just put that online so that I can communicate that to the developer, or even if you’ve got a bigger project then you might have a graphic designer who will take over in the next phase.
So then every sort of pop-up or button needs some sort of save and cancel or okay cancel. Let’s just put those in. I’m just going to copy and paste the same buttons and just be quicker. There we go. Cancel. Okay. There we go. That’s like my add widget pop-up and what’s really cool now is obviously I can preselect that, but what I can do is link all these buttons to other screens and I’ll show you that in a second. Let me just save that as we’re going through and watch this.
I’ve highlighted the save button and now I’m going to link it to my dashboard overview screen. Okay and I’m going to do the same thing with the cancel button as well. There we go. Okay. What will happen is when the screen is live you’ll be able to actually click on it and this is one of the things I really like about this tool. Okay, let’s save that down. You can see I’ve got two other mockups in there. This is my main dashboard screen. Okay.
Now within the dashboard, the main dashboard screen I’m going to link that to my pop-up I’ve just created. There’s the add widget. Link it up. I’m just linking it literally to another screen in Balsamiq. Okay, nothing fancy at all. I’m just going to link the settings, so got a little settings sort of cogwheel type thing on every widget, which will also if you click on the settings I want that to pop-up to the add widget screen. Okay. Let’s save that down and then let’s give it a little run through and you’ll see what I mean.
So here we are, click on add widget, you can see how the cursor changes to a hand. I click on that now and up pops the add widget screen, okay? I’ll click on the save so it changes to a hand and it goes back to the dashboard screen. Click on add widget again, there's my pop-up. Click on cancel. Okay, so that’s all well and good. Now let’s see what it looks like in real life. So this is how its comeback now and you know this is obviously a working code. There’s my analytics widget, there’s my Twitter and click on save or cancel then it’s going to take me back to my main dashboard.
Okay, so I think you can see that’s really powerful and with the online version there’s lots of features for collaboration. So basically you can have your developers in here as well. You can discuss or chat over the design as you’re going through. The project asset screen is for adding images and outside elements into your wireframe. The other thing that’s really cool here is you can actually look at the versions. As a design evolves then obviously the versions are going to change. Each change you make is all stored and logged progressively and you can scroll through and see everything that’s changed throughout your whole design.
I think it’s a really cool tool. It’s called myBalsamiq. You can get the desktop version or you can get the online version. I think the online version is the way to go if you want to share things with your developer. Obviously, there’s a monthly recurring fee as it’s a SaaS product. Okay and that’s Balsamiq.
Recommended Resources:
1. Balsamiq - http://balsamiq.com/
2. myBalsamiq - https://www.mybalsamiq.com/