7 easy steps on getting started in Balsamiq
Balsamiq is an amazing quick prototyping tool that can be used to create wireframes and mockups of various applications.
Step 1 — Downloading Balsamiq
Go to balsamiq.com and download the desktop application if you want to use it on a desktop or start a free trial on web.
This tool is free for 30 days and then you have to buy a license. The license is just $89 which is worth like 3–5 meals considering how much you spend on food. So, go ahead and buy it!
Step 2 — Creating a mockup
This is the page you will see when you open Balsamiq. It is a blank new project.
A new mockup is a new screen to the application you are creating. By default, you will have a blank screen open. But, if you want additional screens, click on that + symbol marked with a red box.
The smiley like icon in the top right is a shortcut to open the component panel where you will find all your components that use can in your project.
Step 3 — Features of the tool
There is a project properties icon on the top right where you can set the overall properties of the project. Such as, description, skin, font and colors.
You are given 2 different options for skin — Sketch and wireframe. It is pretty self explanatory. Sketch gives a rough look to the prototype and wireframe looks clean. You can see the difference in the 2 images below.
You can change between skins at any point in the project but the alignment of components might change if you change it later on. So, it is a good thing to choose the skin when you start your project.
When you select any component on the canvas, a set of quick edit tools pop up on top for the component. From left to right, it is: reverse, forward, duplicate, copy, paste, group, ungroup, (bring to front, push to back), (align, space out), lock, delete, zoom and hide.
Now the boxed icon gives you additional properties for the component. Such as setting the height and width, the position, color, links and other properties that are specific to each component. It is pretty easy to understand what they do for the component.
If you want to import an image or photoshopped element from outside, you can do so by going to project -> import -> assets and just importing them. You will then find them in the asset tab available in the component panel.
Step 4— Creating the screen
Go through the images and their captions below to see what I am building and follow the steps accordingly.
Dragged a list box component into the canvas. To add text to the component, double click on it and you can add text. This feature is available in all the components where you have the feature to add text.
‘Links’ are where you can link a component to another mockup, web address or go back if you are in the presentation mode. So, you select a component and then click on the link option in the properties panel to link it to something.
You have the option of exporting one single screen as a png image but if you want to export the project as an interactive clickable wireframe, you have the option of exporting it as a PDF.
There are so many different combinations you can do with Balsamiq. Go ahead and explore the tool now!
This was a simple tutorial to get you started on it. Please leave any comments below if you have questions.
Thank You. Happy prototyping!
If this article helped you, please recommend it by tapping on the green heart which is waiting to be filled. Thanks a ton!
A little about me —
I go by the name Pavi. I am a Designer in Dallas. I was a speaker at OReilly Design Con last year and published a paper in HCI Con this year. I publish an article every week.
Please follow me if you like my articles. I would really appreciate it. Thank you.
