Preview the Mockups application chrome redesign

· Posted by mike in Products and tagged · 8 Comments

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
screenshot-desktop

myBalsamiq App
screenshot-myb

Interface elements
For the documentation fans out there, here's a closer look at some of the design elements.
App-BarLibraryProject-BrowserDialog

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! 😉