Hello friends of Balsamiq, we have a very exciting new resource to announce today!
Balsamiq Mockups has helped democratize interface design in the communities who use it. A broad range of people coming from different roles and fields have adopted sketch-style wireframing. Making ideas come to life quickly with wireframes is a revelation. Your newfound power to create user interfaces is exhilarating!
Soon enough though, all beginning UX designers realize that creating products that are easy to use is actually quite hard! You have to know about information architecture, interaction design, copywriting, and lots more.
Meet UX Apprentice, a new site we created for people learning about User Experience Design.
We worked with Theresa Neil on developing a learning resource that covers some of the basics of the practice, and provides links for digging deeper and perfecting the craft.
Responsive layouts using media queries and CSS on the web are exciting. Many Mockups users are doing responsive layouts on their projects or are planning to. We've been talking with the Balsamiq community about how Mockups can work with responsive web design concepts, and we thought we'd explore some techniques that might help.
This is a Symbol library with a set of grid layouts using the Bootstrap framework. The different layouts correspond to min-width and max-width media queries for different viewport dimensions, to help people doing responsive layout wireframes.
Toggling Markup visibility (CTRL+K/CMD+K) hides columns, notes, and top bar to reveal only the square rectangle of the viewport.
To use as a symbol, click the Download BMML link under the Mockup on the page above and save to one of your assets folders to use as a Symbols library, or you can download the BMML file directly from here:
In case you're unfamiliar with Symbols, they are re-usable components that you can customize. You can find documentation and tutorial for using Symbols here. A tutorial for using this symbol library is forthcoming.
Sometimes you want to mock up a box, but show it at a fixed size, or the content of the box gets too long to fit in your wireframe. But you may still want to show what the overflowed content is outside of the visible area or viewport. The typical case that we get asked about is how to show a fixed browser container or iPhone, but show that there's content that's not visible, that must be scrolled into view.
I typically use a breakline if I want to indicate continuation on a fixed box. The technique is to show one end of the box with a jagged edge, as in the Breakline symbol below.
If you want to do this using another container, for instance a web browser or mobile device you can also crop the container like I've done in this Custom iPhone symbol library:
To change the screen area, you'd then edit the group and resize the geometric shapes used there.
Hope this helps someone. Click the images above to go to the Mockups to Go pages and download the symbols libraries for these examples.
We've gotten a few requests to provide masking in Mockups for those times when you want to partially obscure an object. Mockups doesn't currently provide a masking feature, but some people demonstrate the effect by flanking a center area with solid rectangles, so I thought it might be helpful to illustrate how they do this.
The idea is to:
- layout out your background (window and gray canvas) and middle levels (images)
- create the mask by flanking an empty space in the middle and grouping the mask elements
- bring the mask group to the front.
If you lock the mask group, then it also becomes possible to select the elements behind easily.
You can download the Mockups file for this demo from this page in our public Tips and Tricks project on myBalsamiq: Creating a Mask Effect. Download to play with it and see how it's made.
It's a bit of work to lay out a wireframe like that. It's kind of a brute-force method, but it might do the trick until we provide a masking feature natively. Oskar Austegard's iPad with open viewport is another good example of this technique.
The first version of the Mockups font is now out in 2.1, and I think we have a good start at eliminating the clipping issues we had using Comic Sans on Windows and Chalkboard on the Mac. In case you missed it, you may want to check out the Font FAQ before you decide to update to 2.1.x.
We still have a long way to go, and have a good to do list for things that need improvement. Some characters are rendering poorly below 12pt, our kerning pair metrics are not quite functional in the app, and the baselines are still a little off. We're also missing a few unicode characters that I'm going to add. We'll continue to improve it with incremental releases.
For people looking for a way to get special characters into the app, I created a Mockups Glyph Viewer showing all the glyphs the Mockups font supports in Mockups 2.1 and later. The Mockups glyph viewer is only viewable on Webkit/Safari 3.1 or greater, Google Chrome 4 or greater, Firefox 3.5 or greater, IE4 or greater, and Opera 10 or greater. You can copy / paste characters from that page and insert into a text control in the app.
We've aded a new tutorial in the support section to suggest some best practices for specifying interaction using Mockups.
Software designers and developers designing for the screen have an arsenal of well-known practices for communicating interaction in static documents. Many of the techniques have been borrowed and adapted from motion designers, filmmakers, and animators.
Mockups can seem like an iceberg. There's so much beneath the surface in terms of advanced features. The features that seem to be hidden are learnable, but we don't surface them until you are ready to use them.
The app is designed this way on purpose to make only the properties available that are necessary for quick ideation. This tool is made for low-fidelity, and we're trying to protect designers, ourselves included, from getting precious. We believe that giving you fewer choices when you're ideating lets you focus on the ideas rather than the presentation, so the necessary attributes are properties, and sometimes the optional ones are available if you know how to use them.
One typical component that we hide text color properties on is the Arrow / Line component. Labeling is an option and most likely rarely used by the majority of our users. But if you wanted to color the text, all you would need to do is add the color macro to the input. So for red, use the hexadecimal color value #f0000 like so:
{color:#ff0000}text{color}
Let's look at that a little more closely:
There are other text formatting rules you can learn by checking out the Basic Text Formatting section of our documentation.
Text components are interesting in Mockups. We have a lot of wiki-style syntax for formatting, and a lot of people have been asking to extend this to do things like insert icons into them. It's tricky because while a lot of us want icon insertion, this is one of those things that'll take some time to support with the current text engine.
Knowing how to exploit the characters available to you with the font you're using in Mockups can help you with some simple use cases. An example that came up today was that a user wanted to insert icons into the combo box, but didn't want to have to overlay icons on the component. I added a feature request to our queue to support selection in Combo Box, but in the meantime, you want to get work done, and you may not like overlaying components.
Here's a possible way to do it. This technique might only work for Desktop, and your mileage will vary if you're sharing your Mockups files and using config files for specifying an alternate font.
On my Mac, I used a dingbat pasted from character viewer, with tabs (Alt+Tab on Windows, Option+Tab on Mac) to create the leading spaces. The output looks like this:
That should work for the default font, or for system fonts.
To view the character map in Windows, go to Run and type in charmap.exe.
The UX Blog is where Mike and Leon talk about the user experience of our products, showing you what we're thinking and how we're evolving. We share tips and tricks to help you use Mockups better and faster and talks with you about addresses your UX needs.
