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.
We feel very lucky to have joined up with Theresa, who wrote the content and helped us design this site. She is a design consultant, and author of two O'Reilly books on interface design—Mobile Design Pattern Gallery: UI Patterns for Mobile Applications, and co-author of Designing Web Interfaces: Principles and Patterns for Rich Interaction. We called on her depth of teaching experience as an author and as a consultant who educates companies about UX Design to bring this knowledge to our awesome customers in the Balsamiq community.
We hope UX Apprentice helps many people who are getting started with interface design to both broaden and deepen their knowledge about UX Design.
Ready to dive in? Let's go!
We've updated the Mockups Keyboard Shortcuts cheat sheet to reflect new shortcuts in 2.2.
You can view the HTML table or download the printable PDF here.
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.
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.
We wrote up a short tutorial with some techniques that may be useful if you're exploring how you will approach wireframing with responsive design in mind. I used the Bootstrap Symbols Library I blogged about previously as a grid system. Check it out and if you have other ideas, let us know!
You can find out more about responsive design, check out the post by Ethan Marcotte in A List Apart, or more generally in the Wikipedia entry.
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:
https://mockupstogo.mybalsamiq.com/projects/layout/Bootstrap+Grid+Layout.bmml
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.
Here's another Breakline Symbol library on Mockups to Go that might help:
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.
Hi, everyone. This year we're working on some projects to polish Mockups, and we want to give you a preview of one of them—the redesign of the application interface or app chrome.
Application chrome refers to the user interface elements of the application window outside of the canvas. This includes such things as the menu bars, toolbars, progress bars, ui library browser, dialogs, and inspectors. Essentially what we're doing is polishing the design of Mockups itself.
With the release of myBalsamiq, we've started introducing some new interface elements in the app, especially the app bar. The chrome design hasn't changed much since Mockups was released, but with myBalsamiq, the accretion of elements has become noticable, and the changes more drastic. We wanted to refine this area, see what could be cleaned up or removed, and prepare for the future.
Goals
Now is the right time to focus on these:
- Fix usability issues related to visual design (contrast of scrollbars, for example).
- Making the myBalsamiq editor chrome match the design of the html views.
- Create a coherent design language and style that works across the Desktop, myBalsamiq, and plugin versions.
- Create an aesthetically pleasing experience that we want to look at every day.
- Prepare for desktop/myBalsamiq integration, and Mockups for Desktop Pro(jects).
On the surface you might say it's just a re-skinning of the chrome, and you'd be right. We're starting by cleaning up the current functionality.
If you look closely at the design for mybalsamiq you'll also see that the interface includes a project (and symbol library) browser sidebar. As we move towards our goal of bridging Desktop and myBalsamiq, some of the design elements of the myBalsamiq editor will make it to the Desktop app.
Preview
Here are some design comps of what we've started implementing. Click to view larger.
Desktop App Preview
myBalsamiq App
That's a quick preview at where we're headed. We hope you'll agree that the direction we're taking is a sensible one at this time. As always, we welcome your feedback with open eyes and ears. Leave a comment or email me at mike@balsamiq.com.
We know we have a long way to go. Every day we take another step.
You can try the pre-release here on the web or download the latest 2.2 candidate here. Bookmark that page and check it daily! ;)
Who says Mockups is only made for interface design? Tennis player and Balsamiq friend, Gabriel Coch posted some great images of a cool chair made from recycled tennis balls.
Here's the concept he illustrated in Mockups.
And the finished product.
Looks pretty darned comfortable too! Love it, Gabe!
We took some time out to talk to Jan Jursa on the IATV podcast. Peldi, Jan, and I discussed Mockups and myBalsamiq, wireframes and prototyping, and what's happening right now with our little company.
You can listen to the podcast at IATV Radio. It's Show 6 recorded on Feb 19, 2012. Our interview starts at 16:05.
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?
Next Page »
