Hello friends! Another little release. As usual, we have a mix of bug fixes and feature enhancements.
Let's get right to it!
All versions: Added dashed and dotted stroke options for Rulers and Arrow controls! Thank you derrickjon and others for the request!
All versions: Added Indeterminate and Disabled Indeterminate checkboxes and radio buttons! They are available in the Checkbox, Checkbox Group, Radio Button, Radio Button Group, DataGrid and Tree controls. Thank you Besi, Baptiste Mathus, Jeroen Helijmans, GooeyGrl, Jenni Merrifield, Eric Hunzeker and Stephen Flynn for the feature requests!
All versions: fixed issue with toolbar buttons holding on to the focus. Thank you Eric Chan reporting it!
All versions: fixed the behaviour of CMD+left and right arrows when editing text on a mac. Thank you Ярослав Патрикеев and Breon Nagy for reporting it!
All versions: fixed an issue with the image control showing a border when switching skin. Thank you B for reporting it!
All versions: fixed an issue with descendents getting clipped when using System fonts. Thank you Arnaud Jaegers for reporting it!
All versions: fixed alignment of checkboxes in Datagrid when using the Wireframe skin. Thank you Marshal Datkowitz for reporting it!
All versions: fixed an issue with being unable to scroll to the bottom of the text editing area if the content was very long. Thank you Carol P. for reporting it!
All versions: fixed the Video Camera icon in wireframe skin. Thank you Sam for reporting it!
All versions: fixed an issue with some images not displaying properly in mockups with lots and lots of web images. Thank you Benjamin B. for reporting it!
All versions: fixed a bug when changing the text alignment resulted in two undo actions.
Mockups for Desktop: fixed an issue with images not being found if they have a comma or dot in their names. Thank you hassen.shehzad and Martin Christensen for reporting it!
Mockups for Desktop: fixed an issue with links appearing as broken if they contain an accent in the file name. Thank you Chantal for reporting it!
Mockups for Desktop: added a digital certificate to our Windows installer. Thank you Hugh Robinson for reporting it!
Mockups for Desktop: we now print out more info in the logs about the cfg file when one is present.
Mockups for Desktop: made some improvements handling drag and drop of file tabs.
myBalsamiq: Site asset download menu item fixed
myBalsamiq: Mockup notes can be updated by anonymous user in wiki project
myBalsamiq: New "no margins" pdf export option
myBalsamiq: Clean download bmml url for mockups in history
myBalsamiq: Resend confirmation email link now works again for suspended sites
myBalsamiq: fixed an issue with "endless spinners" reported by Eric G.
myBalsamiq: fixed an issue with email notifications not being sent on save, reported by Laurent U.
Mockups for JIRA: we now require a new UPM, which fixes a....
Mockups for Confluence: fixed an error when saving mockups on new pages when Confluence was running in a Windows environment. Thank you sap and michjosi for reporting it!
How do I update?
If you're using myBalsamiq, you're already updated. Just log back in and enjoy.
For other versions, simply install from our download page on top of your current installation. You won't have to re-register.
As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)
For posterity, these are the version numbers of today's release:
We were featured in this cool The Anatomy of a Perfect Web Page article. We don't usually link to articles like these (you can find lots and lots at our balsamiq_sightings pinboard page), but this one was too cool to ignore. :)
The following is a guest blog post by Darrell Benatar of UserTesting.com. Enjoy!
Part of the reason we’re such big fans of the Balsamiq Mockups interface is how simple it is. Users can literally have a mockup of a new site or app ready to share with stakeholders and other team members in just minutes. In fact, we’ve recently finalized the design of one of our upcoming campaigns after creating our wireframes through Balsamiq’s desktop app.
For the purposes of this article, we’ll focus on mockups created through myBalsamiq, which makes it easier than ever to get the feedback you need to optimize your prototype. Like all things related to design, it’s always a good idea to receive feedback from those outside your creative process.
While it’s great to pass along ideas to your teammates and collaborate on your latest mockup, there’s always a chance that you’ll miss out on important features that your end users are looking for.
At UserTesting.com, our panel of users are at your disposal, and can provide you with detailed usability testing results in as little time as an hour...and it's affordable! Here’s how it works in a nutshell:
Create Your Test: Choose one of our task templates and customize it for your site.
We Notify Users: Users who fit your chosen demographic are notified and immediately record themselves using your site.
Get Feedback: In 1 hour, you'll get a usability test video and written answers to your questions.
Share Results: Combine your favorite clips into a highlight reel to email to your team.
Once you’re ready to share your wireframe with your team, take a moment to drop by UserTesting.com and share it with our testers to gain valuable feedback from potential end users.
Here’s how you can get started in a few easy steps:
1. Create Your Prototype URL in myBalsamiq
When your mockup is ready to test, switch to prototype view and prepare your URL before heading over to UserTesting.com. With the click of a button you can generate a shareable URL for your prototype through myBalsamiq.
2. Select the Number of Participants for Your Test
Once you’re on our homepage, click on the “Pricing & Sign Up” link, then select the number of participants for your test. You can have as many as 100 participants reviewing your prototype.
3. Pick a Device & Test Type
Select Personal Computer or Mobile Device as your preferred device for the test, then choose whether or not you would like to use one of our templates that are prepopulated with tasks and questions based on your needs. We even have a tab prepared just for users looking to test their latest prototypes.
4. Copy & Paste Your Prototype URL
After you click “Start with this template,” copy your prototype URL and paste it into the first field.
5. Customize Your Test
Once you click “Continue,” you’ll have the option to customize the template with your own instructions, tasks, and questions for our testers.
6. Choose Your Demographic
When you’re ready, you’ll have the option of revising the number of participants you’d like to test your prototype, the source of your participants, and your target demographic.
7. Come Back In an Hour
Participants typically complete tests within an hour after you’ve submitted your test. As your tests are completed, you’ll receive an email notifying you that they’re ready to view. You’ll now be able to view a video of your prototype being tested, as well as answers to the questions you’ve provided. Through your UserTesting.com dashboard, you’ll also be able to export your studies, create highlight reels of your video reviews, and share them with your team.
So that's it! Get the most out of your myBalsamiq prototypes and receive unbiased feedback on your mockups today. We're also more than happy to chat with you about your usability testing questions, so feel free to let us know how we can help at support@usertesting.com.
New in Mockups for Desktop: File Browser Position!
Working on large projects in Mockups for Desktop? Tired of those tiny file tabs at the bottom? We have good news, you can now place the File Browser on the left or right of your screen.
Here's what it looks like on the left
and on the right
The bottom looks the same as always. It's the option that takes up the least amount of space on your screen, but it's not very convenient for when you have lots of mockups open at the same time.
What else is new?
All versions: new XXL size (128x128 pixel) for icons, and reworked the icons so that they scale MUCH, MUCH better at large sizes.
All versions: fixed an issue with extra white lines being inserted in text when two sets of bullets are used in the same control. Thanks Andi for reporting it!
All versions: fixed an issue with selecting controls in symbol instances with overridden coordinates. Thanks Julianna Cs for reporting it!
All versions: made the text in the UI library black for better readability.
All versions: Added "HR" and "VR" as names for the Horizontal Rule and Vertical Rule controls, for easier Quick Add.
All versions: Changed the name of the Jewel icon to Jewel, Diamond. Another great Jenni Merrifield idea.
Mockups for Desktop: fixed issues with Copy/Paste on Windows when Office Clipboard is running. We used to put both the bmml and the PNG in the clipboard when copying the current selection, which would confuse Office Clipboard and sometimes result in Office applications crashing or in pasting being broken inside Mockups. After much trial and error, we resorted to splitting the copy operation in two on Windows. When you do a regular copy (with CTRL+C), we just copy the bmml into the clipboard. If you want to copy the image instead, we added a new "Copy as Image" command in the edit menu.
Mockups for Desktop: we FINALLY fixed all the issues we could find about printing! Thanks for everyone on this thread, plus Dina Ray, John Alton and Pedro Alonso for this report and Colin for this one.
Mockups for Desktop: We added a "no margins" option to PDF export, which is useful if you want to test your PDF prototypes on a mobile device. Thanks bas and roland for requesting it!
Mockups for Desktop: Property inspector no longer shows over the Mockup Tabs at the bottom when you drag it down.
Mockups for Desktop: fixed an issue with updating links when renaming files. Thanks Adrian Wyssen for reporting it!
Mockups for Desktop: fixed an issue with images not being exported when using Mockups for Desktop from the command line. Thanks pablo.leon100 and Frank for reporting it!
myBalsamiq: focussed on getting rid of "stuck on saving" issues when the system is under load. We think we have cracked it, but given that this bug has come up again and again we're a little hesitant to call it fully squished.
myBalsamiq: sped up image generation considerably, and fixed all the bugs we could find in that area. Die, spinners, die! :)
myBalsamiq: fixed an issue with system font text not having kerning in rendered images.
myBalsamiq: we now show both relative and actual dates in site, project and mockup history pages. Thanks joshl for reporting it!
myBalsamiq: fixed an issue with clicking on links when viewing prototype view on Safari on iOS.
myBalsamiq: fixed an issue with uploading projects that have 0Kb-sized files in them.
myBalsamiq: anonymous users can now export public projects to PDF.
myBalsamiq: the project browser is now properly hidden while in "propose alternate" view.
myBalsamiq: we no longer send "your trial is about to expire" emails if you already cancelled your trial. Duh!
myBalsamiq: added auto-save recovery for mockups that were never saved.
myBalsamiq: fixed link hints toggle and position in IE8.
Mockups for Confluence: added a max-width: 100% CSS to our macro, so that large mockups don't go over the browser width. Thanks John from Atlassian for the request!
Mockups for JIRA: fixed issues with escaping of our velocity templates (the plugin's configuration screen). Thanks Geoffrey Wong from Atlassian for reporting it!
Mockups for FogBugz: fixed adding mockups to wiki pages in Chrome for mac. Thanks Paula Kregel and others for reporting it!
How do I update?
If you're using myBalsamiq, you're already updated. Just log back in and enjoy.
For other versions, simply install from our download page on top of your current installation. You won't have to re-register.
As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)
For posterity, these are the version numbers of today's release:
We have heard complaints about the property inspector getting in the way almost since the very first version of Mockups. Over the years, we have refined the algorithm for where and when it shows up, with the goal of having it "near you when you need it, out of the way when you don't".
We're pretty happy with where we are right now, but we agree that the property inspector still gets in the way too much sometimes, especially when working on smaller screens.
This is why today we're introducing the ability to collapse the inspector into a small bar:
You can collapse or expand the inspector using the little icon on its top-left corner, and Mockups will remember that state until you change it again.
Give it a try, we think it's a great step forward!
Well, with today's release, we didn't quite get all the way to big boy arrows, but I think we made a big step forward, eliminating the most frustrating parts of the previous implementation.
First of all, the selection. Starting today, in order to select an arrow, you have to click ON the arrow itself, NOT anywhere in the rectangle that contains the arrow. If you've ever had big arrows in your mockups, you know what I'm talking about.
The next improvement is about resizing an arrow once it's selected:
As you can see, you only get the two resizing points that matter to you, for a much more intuitive experience.
There's still a bunch of work we could do to the arrow controls, and we'll get there eventually, but in the meantime, we thought we'd release this part as a step in the right direction.
We rewrote how the UI Library generates thumbnails for controls and symbols, so that it's done gradually and only when necessary (the thumbnails get cached in memory now).
This should result in a noticeable performance improvement, especially if you keep the UI Library open and work with Symbol libraries a lot.
Let us know how you like it, we think you'll be pleased.
As usual, there's always more we can do to improve performance, so we'll keep digging! :)
Squished the annoying "mouse out of bounds" bugs!
We finally fixed two issues related to selecting or dragging controls in a way that required the mockups canvas to automatically scroll. What would happen is that once you released the mouse, controls would jump or your selection lasso would behave unpredictably.
These two very annoying bugs turned out to be very tricky to fix, but I'm happy to report that Florian and Marco managed to squish them!
"Remember tab order" feature in Mockups for Desktop!
This is one of those features that is nearly invisible but really really useful, especially if you're one of power users.
Here's the scenario: say you work on multiple projects at the same time, each in its own folder just like our best practices suggest.
In order to export your mockups in a consistent order, up until today you were forced to use a clunky naming convention.
With today's release your life should get a lot simpler. Mockups for Desktop will now remember the relative order of your mockups within each project, and always sort mockups in that order in the file tab bar when you open them, regardless of their file name. This means that you just need to order your mockups once as you're working on them, and then you no longer have to worry about it. You can close all files or just some of them. Next time you want to open those files, they'll be sorted in the same way you left them.
This is not "projects on the desktop", but it should take away some of the pain of managing files from multiple projects.
The next feature we're going to do in this area (already in development), is the ability to move the file tabs bar to the left or right hand side instead of it being squished at the bottom of the screen.
Completely redesigned Mockups for Confluence!
This is really exciting. In order to be compatible with Confluence 5, which released a couple of days ago, we finally decided to revamp the user experience of the Mockups for Confluence plugin.
While still compatible all the way back to Confluence 3.5, if you use the plugin in Confluence 4.0 and above (including 5.0), you will see that mockups integrates with the Confluence editor in a much more native way. Gone is the "Add UI Mockup" menu, replaced instead by a more intuitive "Insert UI Mockup" menu in the Confluence editor. The plugin's mockup editor will pop up on top of the editor, and when you close it you'll see your mockup right there were your cursor was.
You can then select the mockup and edit it, or change its alignment or size, in a much more intuitive way:
While we were at it, we also implemented two of the most highly requested features for the plugin: if you use Confluence 4.3 or above, you will now be able to add mockups to unsaved wiki pages, as well as add mockups to page comments!
I'm so happy with this new UX, it's exactly how I imagined the plugin to behave back when I started almost 5 years ago, but couldn't because the editor didn't have APIs back then. Both Atlassian and Balsamiq have come a long way since then... :)
All versions: if you choose a paper size when exporting to PDF, we will align the mockups to the top of the page instead of centering it vertically. Thank you Hai Shubin, Nigel Taylor, Maria Söderberg for requesting it!
All versions: text in the Geometric Shape control now properly wraps again.
All versions: we no longer trim trailing spaces in your text. Sorry for this regression, thank you Fabienne for reporting it.
All versions: fixed an issue with a control icon looking enabled even if the control was disabled. Thank you Terry for reporting it.
All versions: fixed an issue with the bullet taking the styling of the first character. Thank you Andi for reporting it!
All versions: fixed sizing of the Button Bar control. Thank you Adam and Kartik for your email reports.
All versions: we now automatically autosize Label controls vertically.
All versions: the Property Inspector now tells you the name of the symbol library a particular symbol is coming from.
All versions: fixed an issue with the scrollbars not being usable in full-screen mode when the big arrow pointer is enabled.
All versions: fixed an issue with PNG transparency when only a selection of the mockup was exported to PNG. Thank you Jenni for reporting it!
All versions: symbols that are loading now properly say "Loading..." instead of a confusing "Symbol not found" message.
All versions: shortened the timeout when trying to load images from web servers that hang.
All versions: fixed an issue with custom properties not showing up properly when opening the dialog a second time. Thank you asavage and Simon for reporting it.
All versions: fixed a bug when undoing the deletion of the top-left control in a group.
All versions: fixed padding of selected row in datagrid control
All versions: fixed position of vertical curly brace text
All versions: fixed some padding issues with the Menu control
All versions: fixed a strange bug when resizing a symbol instance
All versions: fixed the width of the "partial export to XML" dialog when used inside a group.
All versions: fixed a cosmetic issue with the UI library tile border, overlapping other tiles.
All versions: we now add the release date to the file name in the build archives.
All plugin versions and web demo: the about box now shows both the version number of the plugin and the one of the mockup editor the plugin is using. This will help us support you better.
All plugin versions: we now show the plugin version in all the plugins' configurations or billing pages. Again, this is so that we can support you better.
Mockups for Desktop: fixed an issue with the file tab bar not stretching out all the way to the right when the UI library is on the right hand side. Thank you Andrew for reporting it.
Mockups for Desktop: fixed an issue with right-clicking on the background of the file tab bar
Mockups for Desktop: fixed a few issues around renaming files.
Mockups for Desktop: "open recent" was missing some files. It should work well again.
myBalsamiq: fixed an issue with some conversions not finishing. Thank you Amir and Danielle for reporting the issue.
myBalsamiq: we now verify a user's email address when they change it.
myBalsamiq: link highlights in PDFs created via myBalsamiq now look like the ones in the web UI.
myBalsamiq: fixed some URLs in email notifications.
myBalsamiq: fixed an issue with deleting comments. Thank you David and Chris and Roger for reporting it!
myBalsamiq: fixed an issue with uploading some types of PNGs. Thank you Laurian for reporting it!
myBalsamiq: fixed the "forgot my username" flow when done from www.mybalsamiq.com
myBalsamiq: fixed an issue when promoting a project member to staff
myBalsamiq: fixed an issue with non-staffers being able to remove other project members from a project
myBalsamiq: improved real-time notifications in different ways.
myBalsamiq: as usual, we did a lot of behind the scenes work for stability and performance
How do I update?
If you're using myBalsamiq, you're already updated. Just log back in and enjoy.
For other versions, simply install from our download page on top of your current installation. You won't have to re-register.
As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)
For posterity, these are the version numbers of today's release:
myBalsamiq: build #3913
Mockups for Desktop: version 2.2.7 2.2.8 (we just fixed a bug with Arrow selection).
Mockups for Google Drive: version 2.2.7 2.2.8 (we just fixed a bug with keyboard shortcuts).
We launched a new blog! The Balsamiq Champions Blog is a blog dedicated to you, the users and fans that use Balsamiq to do awesome work. Read all about it in this intro post, we hope you'll want to contribute your stories!
Today's release is both great and little. The great part is that we moved to a more modern version of the Flex framework, which allows us to support features we couldn't have supported before (see below).
The little part is that while we did fix a number of bugs and released a few highly requested features, we don't have anything earth-shattering to announce - we have some cool stuff cooking for the next release, stay tuned.
Alright, let's see what's new and improved!
Changes that apply to all versions of Mockups
We changed the code that draws our custom mouse cursor to a more modern flash API. The result was not only a MUCH more responsive mouse (it no longer lags behind), but also a big performance improvement of the application overall. Try it out, it should feel noticeably snappier, especially in the in-browser versions.
You can now link to URLs! As pre-announced in December, you can now specify Web Addresses (URLs) - http://, https:// and even mailto: - as link targets in all controls that support linking. Here's how it works. There's a new "Web Address..." menu item in the Link property inspector:
Click it to show this little dialog:
Type or paste your URL and click OK. Now when you click on the link while in full-screen, Mockups will open a browser page to that URL.
Notice that we gave web URLs a different icon so that you can spot them easily. Thank you again robin, merle.corey.87, Besi and others for asking for this feature.
We switched to a more modern text rendering engine (Adobe TLF), which finally allows us to support font kerning in our Balsamiq Sans font. If you're someone who knows and cares about kerning, the difference is staggering. If you don't, just know that your eyes will thank you after a while. :)
We now have automatic fallback for glyphs that are not included in the font. You'll no longer need to turn on "Use System Fonts", yay!
We added EXTREMELY LIMITED RTL (Right-To-Left) text support. As we said in the pre-release announcement last month, we're pretty ignorant when it comes to right-to-left support in software. We have received a long list of TODO items from some of you (thank you!), and we'll attack them slowly but surely. In the meantime, this release goes from "RTL characters don't even show up" to "I can type RTL characters and see them". Not exactly "full support" by a long shot, but a step in the right direction, right? :)
Editing text (adding or removing lines of text or even reshuffling them) will now maintain the correct selection and links! Thank you László, Jeron, Andy, John E. (via Email), RomanFlorian for reporting this annoying bug which we've wanted to fix for a long time.
Added support for ~this notation~ for strikethrough text, in all controls.
Added support for {size:40}this notation{size} for setting the absolute size of part of your text, in all controls. {size:+2}relative size{size} will come in the future (it's a lot harder than you'd think!). Thank you Jenni and Win7Guru for the requests.
Added multi-line support via \r to the following control types: Alert box, Arrow, Breadcrumbs, Button Bar, Callout, Checkbox, Checkboxgroup, Field Set, Geometric Shape, Icon and label, Image, Link, Linkbar, Multiline Button, Pointy Button, Radio Button, Radio Button Group, Search Box, Subtitle and Title.
Made some performance improvements when UI Library is visible - and we have further improvements planned for the next release.
Fixed a bug with the "treat as markup" right-click menu not working for small controls. Thank you Anders for reporting it!
Fixed the "property inspector becomes huge if controls have long text lines" bug. Thank you Joe for reporting it!
Fixed the "couldn't drag controls in the top 20 pixels of the canvas" bug.
We fixed literally hundreds of little visual bugs in how the controls draw themselves at different sizes: the skins have never looked so good.
The menu control now supports using the checkbox or radio button, the label and the keyboard shortcut, all in the same line. Thank you Stu (via email).
We fixed the graph paper background when zoomed in or out. Thank you Shannon (via email).
We now deal with corrupted bmmls more gracefully.
The image inspector pulldown now correctly shows which image is selected.
Removed a bug which looked like an easter egg. Thank you Andrew Rowe and Patrik Boström for reporting it.
All versions that support Symbols: you now can see which symbol library a control comes from when hovering over it in the UI library and when selecting it (in the property inspector title).
All versions that support linking: we now show a "broken link" icon for files that are no longer found. Thanks Erik, robin and Matty Sallin for requesting it. :)
Changes to Mockups for Desktop
Bumped app requirement from Adobe Air 2.5 to 2.6 (which still runs on linux don't worry).
Added links to Local Store and Documents folders in the About box. Handy for debugging!
Fixed support for AltGr+S and other keys in some keyboard layouts. Thank you gk.klimek , sergeySafonov, Tomasz and Andi for reporting it.
Fixed several file name encoding issues on Windows.
Changes to myBalsamiq
Updated the text of most of our email notifications to make them more clear and less marketingy.
Fixed custom icons when converting mockups to images. Thank you Graham for reporting it!
Moved from Beaconpush to PubNub - that's the service that provides us with real-time notifications for mockup updates etc.
Fixed a load-balancer configuration that resulted in occasional "you're not logged in" errors.
We made it possible for us to recover your deleted assets if needed.
Fixed an issue with user photo upload button not displaying when changing staff member photo on staff page.
The site owner no longer needs to know a user's password in order to change it. Thank you Dr. Cris Bloomfield for reporting it!
Finished implementing the owner@subdomain.mybalsamiq.com email alias feature.
Fixed thumbnailing for gray scale images with alpha channel.
Changes to our Plugin versions
Mockups for Confluence and JIRA: made it easier to switch from a marketplace trial license to a balsamiq-issued license.
Mockups for Confluence: fixed mime type for attachments.
Mockups for Confluence: fixed an issue with attachments containing spaces in their names.
Mockups for Confluence: resolved a serious issue causing images to not display. Thank you Andreas, Wilm, Marco, Jack Lindsay, Oliver, Paul B, davet, Eriks Nukis for reporting it.
Mockups for JIRA: you can now edit mockups even if their snapshot was deleted manually from the issue.
Mockups for Google Drive: upped the trial period from 7 to 30 days!
Mockups for Google Drive: we now show the email you're logged in with in the help menu.
Mockups for Google Drive: we now show server-side errors (like going over quota) properly.
Mockups for Google Drive: we now correctly update the browser page title after a "Save As...".
Mockups for Google Drive: fixed an issue for people who have multiple google accounts. We have more work planned in this area.
Mockups for Google Drive: fixed an issue stopping the delete and arrow keys from working after using Save As New Mockup… Thank you Brendon McLean for reporting it.
Web Demo: removed empty item at the end of the Mockup menu.
How do I update?
If you're using myBalsamiq, you're already updated. Just log back in and enjoy.
For other versions, simply install from our download page on top of your current installation. You won't have to re-register.
As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)
For posterity, these are the version numbers of today's release:
UPDATE 2: we just did another little release of Mockups for Desktop this morning (Jan 28th) to fix this bug. Mockups for Desktop is now at version 2.2.6.
What else is going on?
The next release is going to be focussed on performance (especially when using Symbol libraries) and improving the lives of our power-users who have lots and lots of mockups in their projects. We have two little features in the works which I'm sure you'll like.
Today we are also releasing a new estimate creation and invoicing system which provides you with a better user experience while helping us be more productive. It's awesome, and getting better every day.
We are also busy updating our documentation and interviewing for our open positions, stay tuned for some exciting announcements on these fronts soon.
The following is a guest blog post by Raymond Ha of Isomorphic Software. Enjoy!
Hi, Everyone, I’m Ray from Isomorphic Software, the creators of SmartClient and Smart GWT. If you haven't heard of our technology before, SmartClient and Smart GWT are HTML5/AJAX platforms that are used to build complex web applications, especially those that involve lots of screens, lots of data and power user features.
We’re big fans of Balsamiq, so we’re excited to announce a new tool that generates SmartClient and Smart GWT code from Balsamiq mockups in one easy step. It’s called Reify – an actual English word meaning "to make something abstract more real or concrete".
There are already several tools available that can turn Balsamiq mockups into simple interactive web pages, PDFs, and other formats so they can be more easily shared. That's not what Reify does.
Instead, Reify deeply analyzes your Balsamiq mockups, and produces source code similar to what a developer might write by hand. This allows your team to skip over the phase of painstakingly recreating the UI shown in the mockup, and move directly to adding business logic and data binding.
Watch the Video
Don’t re-create. Re-use.
Reify allows you to get much more out of your Balsamiq mockups. Normally, when a mockup is handed off for implementation, your developers needed to laboriously duplicate the mockup in actual code - one screen at a time. This is an enormous waste of time and effort, and typically causes extra iterations as developers inevitably miss subtle but important details. With Reify, you can go straight from a mockup to working code that reproduces your intended design.
How does it work?
In Balsamiq, placing a widget on top of a window or tab is enough for the mockup to look right. However, working applications need to know that a widget is contained by a tab or window, or the wrong thing will happen when the screen is resized or the window dragged.
Reify deeply analyzes your mockup to discover the relationships that are implied by the way you arranged widgets. Containment relationships are automatically discovered, labels are automatically associated with input controls, input controls are automatically grouped into logical forms, and aligned components are grouped into flexible layouts that respond as expected to browser resizes.
Reify even compensates for imprecision in mockups by recognizing that a set of controls is meant to be perfectly aligned even if the mockup is a few pixels off, and recognizing that the intended size of a control is its visible size, not the size of its (invisible) bounding box.
Clean, Extensible Code
Tools that generate code often produce awful results that cannot be meaningfully extended. Reify is different.
Reify outputs screens in Isomorphic’s Component XML format, a concise, declarative format similar to Flash’s MXML or Microsoft’s XAML. Reify makes great efforts to produce clean, minimal code. For example, if a component gets its size from its container, Reify won’t output the redundant size information on the component. More generally, Reify will avoid outputting code that would set a property to its default value.
Screens created by Reify can be connected to real data sources in one step, and event handlers and business logic can be added while keeping the screen definition in XML. This enables a clean separation between layout and logic, and allows non-developers to understand and modify screen layout without breaking business logic.
No Limits
You can easily mix and match between screens imported via Reify and classic hand-coded screens and layouts. For example, if you have created a highly dynamic, portal-style layout manager that couldn’t be built just with XML, you can still use Reify to create portlets, wizards, and other screens controlled by your advanced layout manager.
Or, you can create a screen that has a placeholder for a dynamically generated component, and insert that component programmatically after the Reify-created screen is loaded.
Reify lets you maintain any part of your application in easy-to-read, easy-to-modify XML, while still allowing advanced, data driven techniques to be used wherever appropriate - the best of both worlds.
Thanks to the Balsamiq team for creating one of the best tools in the business. We hope that Reify will become another invaluable tool in your arsenal. If you have any questions, please Contact Us or visit our Forums.
The result was not only a MUCH more responsive mouse (it no longer lags behind), but also a big performance improvement of the application overall. Try it out, it should feel noticeably snappier.
A new text rendering engine!
We switched to a more modern text rendering engine (Adobe TLF), which finally allows us to support font kerning in our Balsamiq Sans font.
If you're someone who knows and cares about kerning, the difference is staggering. If you don't, just know that your eyes will thank you after a while. :)
The other nice feature this new text rendering engine gives us is automatic fallback for glyphs that are not included in the font. Here's what I mean:
You'll no longer need to turn on "Use System Fonts", yay!
Links to URLs support!
You've asked for it for years (robin, merle.corey.87), and we finally added it!
You can now specify Web Addresses (URLs) - http://, https:// and even mailto: - as link targets in all controls that support linking.
Here's how it works. There's a new "Web Address..." menu item in the Link property inspector:
Click it to show this little dialog:
Type your URL and click OK. Now when you click on the link while in full-screen, Mockups will open a browser page to that URL.
Notice that we gave web URLs a different icon so that you can spot them easily, and in Mockups for Desktop we also show a "broken link" icon for files that are no longer found. Another nice little feature (thanks Erik, robin and Matty Sallin for requesting it). :)
(Tentative) Right-To-Left Language Support!
This last feature is a bit embarrassing for us, as we're totally ignorant on how right-to-left software is even supposed to work.
The thing is, I tried switching my computer's keyboard layout to Hebrew and Arabic, and it sort-of worked!
We are working with a bunch of smart people from our community to bring this feature to a good quality. It will take time, so please be patient.
Ready to get your hands on all this new goodness?
Head over to our newly revamped Pre-Release Download Page and install the build from there. As usual, although we think it's pretty solid right now, pre-release software might be buggy, so back up your data before you try it.
Hello Balsamiq friends! Today we asked Eileen and Max of Link Viewer to write up a blog post introducing their app for testing iOS Mockups. Enjoy!
Presenting your UX concept to your client is a crucial moment in product development. In this post I want to talk about how Balsamiq Mockups and our own Link Viewer App can help you make a great impression.
A lot hasbeenwritten on why wireframes and sketched interfaces are a good idea when communicating with your client. We use myBalsamiq on a day-to-day basis for user interface design @ Mondon Design for that matter. When Peldi asked us to talk about how we present them we were thrilled – to say the least.
First let me remind you of a common problem:
Users Break Prototypes
Giving a flawless mockup presentation on the real device is tricky, especially when we want to hand over our iPad to a client or to a test user. They tend to break the prototype. Viewer menus pop up, accidential swipes will switch pages, things don't work... you get the point.
Instead you need an app that will present the prototype and not stand between it and the user. The app should be as invisible ("chromeless") as possible and let users navigate via links inside the mockup.
Less Is More
To give a smooth mockup presentation, you want:
✘ no loading screens
✘ no menus or status bars
✘ no third party branding inside the app
✘ no funky transitions between slides
✘ no tap zones
✘ no zoom or rotation
✘ no scrolling or swiping
✘ no distractions
✘ no prototype editing
✔ navigation with linked elements only
We did not find an app that could fulfill these expectations so we made our own, Link Viewer.
It works with any hyperlinked PDFs, like the ones that Balsamiq exports.
The Mockups feel solid like a real app, nothing can go wrong while navigating them.
Presenting Without Distractions
One great thing about Balsamiq Mockups is that they just work. With Link Viewer this was our top priority, too. We made a short video to show how quickly you can get your bullet-proof presentation:
Step by Step from myBalsamiq to Link Viewer
If you use myBalsamiq, your can do everything right on your iOS device.
In iOS Safari, open your myBalsamiq 'All Projects' page.
Tap the project dropdown (cog icon), select 'Export to PDF...'
In the export dialog, select 'Optimize for viewing' and tap 'Export PDF'
Tap 'Open In…' and select 'Link Viewer'
Enjoy!
Now your mockup is launched every time you tap on the Link Viewer app icon.
1. On iOS device find your project in myBalsamiq
2. Tap the project action menu and Export to PDF
3. Set PDF Export options
4. Open in Link Viewer
5. View your Mockups in Link Viewer
Offline Use with Balsamiq Mockups
There are several ways to get your mockup into Link Viewer. The important step is to create a PDF that has link functionality. Then connect your iOS device via USB and it will show up in iTunes (PC/Mac). In iTunes (PC/Mac), navigate to the Apps section of your device and scroll down until you see the Link Viewer icon. Click it and drag your PDF into the list area on the right.
Remote Use
It might be that you have no access to the target iPhone/iPad. A tester may be on the road or a client far away. Let them download Link Viewer. Create your mockup PDF and email it to them. Once they open the email on their device and click the PDF, they will be able to select "open in… Link Viewer". With the factory settings, Link Viewer will always display the last PDF that was imported.
Rapid Prototyping
If you keep the myBalsamiq tab open on your iPad you can generate new mockup PDFs for Link Viewer real quick. The same goes for offline use via USB cable: new PDFs can be uploaded very fast. With myBalsamiq and Link Viewer you have new presentations at hand in no time.
Advanced Features
The factory settings make sure that Link Viewer will work right out of the box. However, if you need a file-list to select and delete files or use the resume-from-last-page feature, check out the Link Viewer settings in the iOS settings app.
Thanks
Thanks to Balsamiq for their mockup tools. We couldn't work without them. Now Link Viewer is our little contribution to the happy UX landscape. If you have any questions or feature requests please email hello@link-viewer.com
We just updated myBalsamiq with a new release, focussed on smoothing over one of the roughest edges of the application, the managing of staff and project members.
We also fixed some bugs and made some improvements in Mockups itself.
An easier way to manage staff members in myBalsamiq
We made it a lot easier to manage your staff members. Look at the new menu for a staffer:
As a site owner, clicking on "Edit User Info" now shows a pop-up which lets you complete or edit your staffer's info:
You'll get similar pop-ups if you click on "Change Password" or "Change Photo".
If instead you click on "Manage Project Membership", you'll get a pop-up like this one:
Just select the projects a certain staffer should belong to, "Save Changes" and voila'! This should save you a bunch of time.
But we didn't stop there! We expanded the "Create new Project" dialog to allow you to specify who should be in that project, right then and there.
Also notice the "Automatically add new staff members to this project" checkbox. Super-handy! You can set it a project creation time, but you can also change it later.
An easier way to manage project members in myBalsamiq
In the settings, we added a "Non-Staff" tab which shows all the different project members invited to your site, regardless of which project they're on. This overview was sorely missing for site owners.
We also made it easier to spot staffers and non-staffers inside a project, by adding a little "staff" label to the appropriate avatars in the project members pop-up menu:
Note how we removed the "quick invite" text input from that pop-up menu. It's now inside the "Add and Manage Members" dialog:
This is a one-stop shop to add or remove staffers and non-staffers to your project, as well as inviting others.
Note that for staff members, we only ever show non-staffers that belong to other projects the staffer is already a member of. In other words, if you want to keep a project and its external members secret, it will work: only the staffers on that project will be able to see the non-staffers from that project. It's complicated, but it works, trust us. :)
Other changes to myBalsamiq
Greatly optimized the display of the home page and of the project grid page.
We now disable the Project Assets UI Library tab in the editor when editing a site symbol library.
Alternate mockups in comments now properly show up in the history.
We fixed an issue with people logging out when logged in from www.mybalsamiq.com.
We fixed some concurrency issues when creating several projects at the same time.
We fixed the overly aggressive caching on mockup image permalinks.
Improved error messages in editor when there are save / load issues.
Improved user photo dialog.
Support for images in Mockups for Google Drive!
You can now use your drive images or upload new images from within the Mockups editor in Mockups for Google Drive.
Support for linking between mockups in Mockups for JIRA!
That's right, you can now link your mockups together in Mockups for JIRA. The feature works just like on the desktop: you select other mockups from the same JIRA issue, then go full screen to navigate between your linked mockups.
Changes to Mockups
All versions: fixed the "label control text editor deletes text if you have text selected and press Enter to confirm the text" bug.
All versions: fixed some issues with Undo/Redo while editing text.
All versions: fixed the occasional "character gets repeated out of control when editing" bug.
All versions: roughened up some of the shapes of the Sketch skin, since the 2.2 clean-up had been a little too aggressive.
All versions: the Tabs Bar control is now also called Ribbon.
All versions: the Text Area control is now also called Memo Field.
All versions: the Horizontal Lines icon is now also called Reordering Control and Drag and Drop.
All web-based versions: we now hide the inspector while you pan the canvas with SPACE+Drag.
All versions: in the Icon and Label control, the text is now properly aligned vertically even when using System Fonts.
All versions: dragging the property inspector stops the editing of the position and size text inputs.
All versions: we no longer hide the Quick Add behind a + button. This was a change we introduced in 2.2 which didn't work out, so we're rolling back to the 2.1 look and feel (Quick Add is just on the right instead of on the left now).
All versions: we now hide the property inspector while you're dragging a new control from the UI library.
All versions: If you add a new control via drag and drop while not at 1:1 zoom, you no longer get decimal numbers for the x and y coordinates.
Mockups for Desktop: Save as did not give a warning if you didn't add the suffix .bmml in the native Save As dialog.
Mockups for Desktop: At startup time, unnamed mockups recovered from a previous autosave are now promptly put back into the autosave database.
Mockups for Desktop: when adding a custom icon, the source file name was not properly decoded, thus resulting in wrong filename being used for the new asset file.
Mockups for Desktop: custom icons now work properly on newly cloned mockups.
Mockups for Desktop: we now properly show assets that contain slashes in their names.
Mockups for Desktop: fixed a "hanging on startup sometimes" bug (fixed in 2.2.2 on Sep. 13th).
All plugin versions: we now notify you with an error whenever there's a problem uploading an image, we no longer fail silently.
Mockups for Confluence: fixed a bug with PNGs not showing up in IE8/IE9 (we had the wrong mime type).
Mockups for XWiki: as a side-effect of a big refactoring effort, it now uses the same "Save" and "Close" buttons UI as the other plugins.
How do I update?
If you're using myBalsamiq, you're already updated. Just log back in and enjoy.
For other versions, simply install from our download page on top of your current installation. You won't have to re-register.
As always, if you hit any snags with the new build let us know immediately and we'll fix it right up! :)
For posterity, these are the version numbers of today's release:
Finally fixing the "links break when I insert or remove a line of text" bug. You can try it now on the pre-release version already.
Improving mouse performance.
Making it so that Mockups for Desktop remembers the order of your mockups for each folder. This should alleviate the pain of working on multiple projects at once. See this GetSatisfaction thread for more info.
Adding support for linking to Web Addresses (URLs).
