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. 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. Now the other thing about this is you can not only just draw these things, but you can input images as well. 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. 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. If you want to create an iPhone app for example you’ve got a lot of tools there to do that. 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. 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? Essentially you have like a workspace here at the bottom. Okay, this is just the Balsamiq desktop tool. 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.Īnyway, without going into that in a great deal let’s talk about what a wireframe process looks like using Balsamiq. 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. These are often in a traditional design your app will go through these three phases. 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. That is normally done by a graphic designer. Just so you know there’s also a mockup, which is like then a more graphical view. Just briefly a wireframe is essentially a sketch, okay? It’s like the visual drawing of what you want your app to look like. 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. There are lots of wireframing tools out there. It’s Paul Clifford and today I want to talk about wireframing with Balsamiq.īalsamiq is an online and a desktop-based wireframing tool.

Balsamiq wireframes to go