See full list on balsamiq.com. Collapsed Expanded 4.0.33 Confluence Server 6.0.1 - 6.4.3 2017-09-06 New Balsamiq Wireframes editor, new project format, comments, chat and much more Download Version 4.0.33. Released 2017-09-06. Supported By Balsamiq. Paid via Atlassian. Commercial.
By Michael Heraghty on November 10th, 2014
Update May 2015
I wrote this article when I was using the old version of Balsamiq Mockups, now known as “Balsamiq 2”. In March 2015, Balsamiq released a new version of their software, Balsamiq Mockups 3, which has a load of great new features and is even easier to use. Check it out: http://balsamiq.com
From a personal perspective, the release of Balsamiq 3 was exciting. When I wrote this article, I was just a Balsamiq fan / power-user. Last year, I was invited to be one of the very early beta-testers. I gave a lot of feedback and I subsequently carried out usability testing for the company. Many of the improvement suggestions that I fed back to Peldi, Mike and the Balsamiq team rapidly ended up in the product — it was great to see how they put customers at the centre of everything they do.
What follows is an article on how I used to use Balsamiq. A lot has changed with the version 3 release and, looking back, I use it WAY more efficiently. Quick examples:
- Projects and Font Awesome icons are now integrated as part of the app
- Presentation mode “jumpiness” is no longer an issue
- Icons, symbols and symbols libraries are much more tightly integrated with the app
Anyway, here is the original article…
I first chose to use the wonderful Balsamiq Mockups, the desktop version*, for a client project in January 2011 and it has become my main UX design tool ever since.
Anyone can dive in and figure out how to use Mockups — there’s a rapid beginner-to-intermediate curve. Over the years, I’ve developed some extra tips and tricks that maybe puts me on the intermediate-to-advanced curve.
Here’s how I use Balsamiq Mockups:
1. Setting up a New Balsamiq Mockups Project
I have a system of folders and sub-folders relating to my clients and projects etc, which I synch in Dropbox. When I want to create a new set of wireframes, I create a new sub-folder in the appropriate place e.g. Client X > Project Y > Project Y Wireframes 1.0
I create one project per folder, and add all the .bmml files into that folder, as recommended by Balsamiq.
A Project folder, with all .bmml files in one folder and an assets sub-folder
Before I start the project, I also copy in a ready-made “assets” sub-folder. I say ready-made because you can simply create a blank sub-folder and name it “assets”. However, my pre-made “assets” folder is stuffed with all sorts of templates and other “goodies” which make my prototyping process easier. Below are some of Balsamiq Mockups UX artefacts contained in my ready made assets folder.
Note: Rather than copying and pasting your assets folder each time, you can simply create a single account assets folder on your computer. This is a great solution — except if you are physically sharing your *.bmml files with someone else in a company, in which case you will need to give them the assets folder or items will be missing from the wireframes.
Twitter Bootstrap Background Grid
Lay out the page using a grid – Use CTRL+K to hide the grid
Bootstrap has various background grids that you will find on Balsamiq’s Mockups to Go. Download the one you prefer and you save it directly to your assets sub-folder, then drag it on to the wireframe. That’s what I do before I start any project — I drop it onto the background of every wireframe at position 0,0 and lock it there, then hide it using CTRL+K (Windows).
Even if you’re not creating a wireframe for the near-ubiquitous Twitter Bootstrap web framework, this template helps make your wireframe neat and symmetrical. The “rough and ready” look-and-feel of wireframes helps people realise they are concepts, not finished products. I stick mainly to Mockup’s sketch skin for this reason. (You can change to a neater look-and-feel using View > Skin > Wireframe Skin). But a neater hand drawing is more appealing than a misaligned scrawl.
Twitter Bootstrap Components
Just some of the components available in the Bootstrap symbols library
What I love about this Twitter Bootstrap components add-on for Balsamiq Mockups is that it’s a full symbols library. So, by simply adding this single bmml file to your assets sub-folder, all of these Bootstrap components become available in the Mockups UI library. Start typing “bs-” in the Quick Add box, and you’ll see a list of all available components. For example, type “bs-badge” and you’ll get a Bootstrap badge.
Drag a component from the UI library or type or type “bs-” into the Quick Add box to get a list of components
Even if you don’t use Bootstrap, this add-on beefs up Mockups by adding more UI elements to the library.
Font Awesome Icons
When you search for an icon by name, e.g. “arrow”, the font awesome icons also appear
Unlike the other add-ons, which are a single file, this custom icon pack is a full set of individual PNG files. However, it’s worth adding, because it is the full set of Font Awesome icons, an open source icon set used in Bootstrap. What I love about these icons is how which they become available in Balsamiq Mockups’ native icon library when added. It just works!
Actually, there’s something I love even more about using these icons. In the past, icons have always been a pain for me. I’ve always had a lot of back-and-forth, sometimes with visual designers, other times with developers, because they are trying to choose an icon based on the crummy low-fi one I’ve put in the wireframe. Now I can specify the exact icon I think will work, right from the outset — and if it’s not right, I can find out during early-stage testing.
2. Adding Files
Now I’m ready to start adding my wireframes. I use a naming scheme. I based this naming convention on a best practice I saw on the Balsamiq website a couple of years ago, which I can no longer find. Anyway, I evolved it a bit and it works for me:
New Balsamiq Project In Qatar
I prepend all the file names with numbers and underscores, starting with 10_
This is the key to the scheme. The words that follow should be meaningful to the wireframe, but aren’t as important as the numbers. I use spaces between the words.
When I’m doing the first wireframe for a new user scenario, I will give it a new round number, for example the wireframe names might look something like this
- 10_log in
- 20_open a file
- 30_save a file
These are my “key” wireframes.
I will then add in wireframes as I build out scenarios. I slot them in where they logically fit in the sequence, e.g.
- 10_log in
- 11_forgot password
- 12_what the hell, come on in anyway!
- 20_open a file
- 30_save a file
If I need more than 10 files in a user scenario, or if I create variations of one wireframe, or if I slot in wireframes at a point that I had not expected to, I use this convention: 10a_ , 10b_ , etc.
This keeps my files nice and orderly and in sequence.
I like to organise my Balsamiq so that the files are lined up on the left, rather than along the bottom. You can do this via the menu: View > File Browser Position > Left
I also like to put the UI library on the right. View > UI Library Position Right
I often hide the UI library a lot using CTRL + L (Windows). Sometimes I drag the window across to a second monitor, so that the UI library is displaying on the second monitor. These are personal preferences I guess, but they work for me.
3. Linking the Wireframes Together
I also link the wireframes extensively, effectively creating light, low-fidelity prototypes.
Balsamiq says it’s product deliberately offers limited interactivity and it is not intended as a rich prototyping tool. I understand this philosophy — complex prototypes become difficult to maintain, and lose their value. Nevertheless, I push Mockups’ linking feature to the max, so that I can utilise it for user testing. I also prefer to physically click a link and then experience how the interaction feels, to me. It helps me do better interaction design.
The link property has also improved greatly over the last few releases. You can link pretty much anything in one wireframe to anything else in another wireframe.
Adding links in Mockups using groups
If there is no obvious way of linking, make the control a group (CTRL + G in Windows). Groups always have the link property. In the example shown in the image, I’m converting one of the Bootstrap symbols into a group, so that I can make it link to another wireframe.
I usually run the prototypes in “Presentation” mode and conduct user testing in this mode.
Preventing Jumpiness in Presentation Mode
Tip: To force all the wireframes to all be the same size in presentation mode, and not “jumpy”, there is a weird hack. Again, this was previously on the Balsamiq website, though I can’t find it now. The solution is to add a large rectangle/panel to the background of each wireframe. It has to be largest than your largest wireframe — making it 1000w x 2000h usually works for me. You need to remove the border from this panel, and lock it to the background, as you don’t want it to interfere with your drawing. It’s a bit like a physical panel — think of it as the white wooden frame that’s holding your sketches up.
I have some other minor tips. I may add more in if I do an update. Off the top of my head, here are some:
- I find the Position and Size fields in the property inspector quite useful. Sometimes I find myself copying and pasting values between controls in one wireframe and another, when I want to get an interaction just right. I am aware that too much of this can lead to unnecessary perfectionism though!
- For a long time, I didn’t realise that when you insert an image placeholder. That’s how I got the logo placeholder, above, to say “logo”.
- There are a few shortcuts that I use all the time. Once again, these are Windows shortcuts, sorry Mac users!
- Ctrl + L = Show/hide the UI library
- Ctrl + K = Show/hide the markup (arrows, sticky notes, grids, etc.)
- Ctrl + F = Run presentation mode (a.k.a. demo or testing mode)
- Once in demo mode, these addition shortcuts are really useful
- L = toggle between a big blue arrow (I personally don’t like this one) and a regular arrow, and also show/hide the linking hints (can be useful)
- E = edit the page you’re looking at right now (very useful — often you will want to make a small, rapid change based on a comment in a meeting, or feedback from a user)
*Personally, I prefer the desktop version. I have tried the hosted version, myBalsamiq, but have not found it as useful for my purposes. The wireframes get published as flat images, which took away some of the interactions that I could achieve using the desktop version
Comments are closed.
Best Balsamiq Features For Wireframing Your New Ecommerce Website
We’ve been reporting on the development and evolution of Balsamiq Cloud throughout 2019 and so we’ve rounded up all the features released in one place.
If you’re not familiar with it, Balsamiq is one of our favourite wireframing tools boasting a powerful drag and drop interface and its trademark ‘sketched-out’ design style.
Track every change your web project team makes
The Cloud app was released earlier this year to much fanfare and has rapidly become popular among teams and client/agency relations to allow multiple members to work on the same project, suggest feedback and have discussions. When it launched, there was a notification system built in that sent out emails to all members of your project team, but they said that the ability to see who had changed what was coming soon. Well, it’s finally here.
The new-look Balsamiq Cloud notification
Balsamiq Merge Projects
The second new feature released this month was the most requested update made by the Balsamiq users: the ability to create a direct link to full screen presentation mode, which can then be sent by email, added to the daily notifications or whatever you like. This makes it easily shareable with your team, your clients or stakeholders at any time, which is very useful, if not exactly earth-shattering.
Direct linking is now just a couple of quick clicks
So, two welcome new features, but the exciting bit is that the all-new Balsamiq desktop app is due to be released in the next few months. So, watch this space for updates as I for one am excited to see what they have come up with next.
Source: AWA, June 2019
Big improvements to presentation and user review modes
Everyone’s favourite wireframing tool, Balsamiq, have been busy improving the way in which we can all use their tool, rather than the tool itself.
This is important, successful use of wireframes requires both internal collaboration and feedback from external user tests… it doesn’t matter how pretty the proposed designs are if no one else sees them or is able to feedback on them.
So the team have made big improvements to both the Full-Screen Presentation feature which incorporates several different ‘modes’:
The Review preset basically enables all the extra bells and whistles that Full-Screen Presentation Mode offers. In addition to existing features like Link Hints, Markup, and the Big Arrow Cursor, they have added the Wireframe Navigator, Notes, and Comments. This makes the Full-Screen Presentation mode the most powerful version of the Review and Comment permission level.
Users won’t be able to edit, but they will be able to make comments and add callouts to your designs. It’s a nice way to review a project without distraction.
The User Test Mode is the complete opposite of the Review Mode – it has everything turned off by default. This streamlines the view so that all someone is interacting with is the content you have created. If you have linked your wireframes together, your users can click through your project as if it were a real website or app.
This is a much better situation, making it much easier to user test projects without distractions and get more honest (brutal?) feedback.
This is a nice addition to an already great tool, and will make it easier to get good quality feedback. There are more announcements in the pipeline, including a V1.5 of this where you will be able to send links direct to users and it automatically loads in full screen mode.
Source:AWA, April 2019
Cloud collaboration gets notifications
I’ll be honest, we use Balsamiq for nearly all of our wireframing. It’s quick and easy to use and you can fire out wireframes in next to no time.
However, the cloud collaboration has, to date, been a little underwhelming as you could share docs, but not really collaborate on them in any useful way.
That’s now changed. Balsamiq have launched notifications so you and your colleagues will get email notifications for changes and updates in the Balsamiq Cloud spaces that you are a part of. You can also change the frequency of the emails in your user settings so you don’t get bombarded with messages on those bigger projects.
From the screen grab above, you can also see that they have also added the ability to @-mention other people on your projects (in case you need to notify someone directly – or quickly).
New Balsamiq Project In Egypt
The guys stress that this is just the first step in a set of new features, so watch this space for more ways to use this great tool as part of a team.
Source: AWA, February 2019
To learn more about wireframing for conversion success, read our guide on How to Ensure Your New E-Commerce Website is a Conversion Success.
People from Facebook, FarFetch and RS Components receive our newsletter. You can too. Subscribe now.
Interested in turning experimentation and testing into an advantage for your entire business?