If you've been following along with updates to Mockups, with 2.2 out we now have a UI Skin switcher that allows you to use either sketchy controls or straighter wireframe controls.
In preparing the skins to work well with each other, we had to optimize the rectangle shape that’s the basis for many of the controls. This makes it so the transition was smoother when switching between skins—we needed less variability in the positioning of controls, and we needed to remove the artifacts around the edges of shapes that resulted from the bitmap rendering of the hand-drawn graphics. The downside to this is that in doing so, we cleaned up the sketch skin too much, and we've heard a lot of feedback that it should go back.
We agree on that point. The sketch skin is too refined now. I think I was waiting to hear more feedback during the beta and just waited too long rather than roughening up the lines, and we shipped it as it is now. I've been spending some tweaking the rectangular shape to roughen up the controls again and I think it's closer to what we have before.
Here's some screenshots to give you an idea. It's subtle, but the boxy lines have a slight bit more jitter and are thicker. Click the thumbnails to view larger.
If you compare it to the controls from 2.1, I'd say it's pretty close. We'd love to hear your feedback. You can try this now in the Next Release Preview.
UPDATE: We've implemented this change. Thanks to everyone for the feedback!
We're thinking of making a potentially big change to the Geometric Shape controls to make them not markup items. We wanted to discuss the change and get your feedback before we do.
About Markup
As you may know, Markup controls are a special kind of control that can be toggled to be visible or hidden. Things like callouts, sticky notes, and geometric shapes can be used to annotate your Mockups wireframes, and then hidden so that you can focus on your wireframe when your designing or demonstrating.
About Geometric Shapes
Geometric shapes were originally created to offer people controls that can be used for flow charting, and after discussion in the forum, ended up as Markup items when it was implemented. Now, however, we're beginning to think that they shouldn't be.
Why the change?
Many people use geometric shapes to create controls or other design elements, and in these cases, we don't think of them as markup items--the kind used in flow charts.
One type of issue that we see in our support forums every now and then is that people will open Mockups and it will appear that some of their controls have disappeared. This is because they're using geometric shapes as I describe above.
The fix is to toggle Markup items on via the menu View > Show Markup, or using the Show/Hide Markup icon in the upper right corner. Once you learn that they're markup items, you know this, but we feel it's confusing if you have to learn that.
We think now it makes more sense for geometric shapes to be non-markup controls and here's why:
- Flow charts have a right to exist without being invisible if they're created on Mockups, don't they. Why would you want flow charts hidden? We don't really remember the argument that called for it.
- The "my controls disappeared" problem report usually has to do with geometric shapes being hidden when "Show markup" is not checked. Making them non-markup controls fixes this.
- Judging from problem reports mentioned in #2 above, it seems that a significant number of users have become accustomed to using geometric shapes to supplement the UI library controls. My guess is that more people use geometric shapes for design than use Mockups for flow charting.
How are you using Geometric Shapes?
If you have a compelling use case that describes why you would want geom shapes to be markup by default, please tell us now. We think this is the right direction to be going, and will make fewer problems and less confusion. What do you think?
We've had a lot of people request a custom icons feature in the past. People want to add their own icons to the app and have them appear when placing icons on the canvas.
With Mims Wright stepping in for some Mockups development, we've added this feature to the pre-release version of Mockups and are looking for some users to give it a try. We've updated the Icons Documentation to reflect this coming change.
Note: This feature is only available in pre-release version at the moment, and requires you that you use the pre-release to test this out.
Quick Start
Now when you add an icon, you'll see 2 new tabs for Account Assets and Project Assets (if you're working on a saved file).
If you select one of the tabs, you'll see an Add (+) icon. Click it and an image dialog will open so you can add icons individually.
Now when you add an icon, you'll see your custom icons in the tab you've added them to.
Front-Loading Your Icons
There's a method for power-users who want to front-load the app with all of their custom icons, by saving filenames starting with icon_ to either the account assets or project assets folders.
I did this on my Mac by downloading the free 32x32px Doodlekit icons, ran them through the free NameChanger app to prepend files with icon_, and moved them to my Balsamiq Mockups/assets folder. They now appear in my icon dialog like this:
The words you use in your filename after icon_ are used as the searchable keywords in the icon dialog. So the example above shows airplane because the filename is icon_airplane.png. You can string together a few labels to get synonyms in there, e.g. if the file is named icon_bag briefcase portfolio.png, all of those words after icon_ will be searchable.
The Steedicons also look like a perfect complement to the rough, thick style of Mockups. This blog entry at tipsblogger lists some more hand drawn icon sets that might be useful for this feature.
Send Us Your Feedback!
We're looking for your feedback and any bug reports. Play with it and let us know what you think.
If you want to try the pre-release, you can install it here:
http://balsamiq.com/products/mockups/next
After you've played with it, if you want to roll back to the stable release, simply go to the download page and re-install using the Update button here:
http://balsamiq.com/download
Thanks!
