Using Balsamiq Mockups with Pattern Libraries and Frameworks

People often wonder how much visual detail to put into their wireframes. There's an attractive elegance to a simple black and white sketch, but it can sometimes lead to gaps in the shared understanding of what the final product will really look like.

Wireframes shine during the early phases of product development when ideation and rapid iteration are most valued. But what makes them ideal for this phase also hinders them in the next phase, when pixel precision and visual details are called upon for implementation. Despite this, many people (I'm guilty of this as well) try to incorporate these fine-grained and aesthetic details into the wireframe itself by tuning fonts and adding colors and other visual effects.

This can often lead to confusion when these high-fidelity wireframes are used as implementation specifications and sent "over the wall" to the development team. Most wireframing tools are not optimized for creating artifacts that look and feel like a finished product. Yet creating polished renditions of every screen using a tool like Photoshop is time consuming and may not translate well to the final product anyway.

There is another way. The only requirement is good communication within the team.

Separation of Concerns

An alternative to pushing wireframes beyond their limits is to keep them low fidelity and let another tool do the work of specifying the look and feel. Tools for this purpose are already well established, in fact, especially for web applications and sites. Sketchy, (mostly) black and white wireframes pair very nicely with pattern libraries (and, to a lesser extent, style guides). Before diving in, let's define what they are.

Sketchy, black and white wireframes pair nicely with pattern libraries.

Like their younger sibling, style guides, pattern libraries contain definitions for a particular look and feel. They go one step farther though, in that they often define behavior and are backed by working code. Large companies have been using pattern libraries for a long time but until recently they were too labor intensive for smaller companies, often requiring dedicated designers and developers working outside of the primary product teams.

This changed when the Twitter Bootstrap (now just called Bootstrap) framework was released a few years ago. It was (and is) a free starter kit for web development that provides compliant, robust HTML templates and generally good-looking CSS styles (which can be customized to suit your brand). It comes with its own grid and typography definitions as well as styles for buttons and forms. In short, it takes a lot of the hard work out of starting a web project and making sure that it will work across browsers. A framework like Bootstrap can be used as a good foundation for a pattern library.

Pattern Libraries + Mockups in Practice

The main advantage of pairing a pattern library with Balsamiq Mockups is that it can free you from worrying about look, feel, and behavior when designing yet provide pixel-perfect renditions of the final product components.

If you already know what a button (or tab, menu, etc.) is going to look like and what its state transitions will be when you click it, you don't have to style it in your wireframe. Black and white and Balsamiq Sans is just fine. Having a pattern library can allow you to jump straight from wireframes to code without leaving the final vision undefined.

Having a pattern library can allow you to jump straight from wireframes to code without leaving the final vision undefined.

Here's how you can introduce them to Balsamiq Mockups. You'll find that they get along quite well together!

If you have the resources you can create your own pattern library or you can start with a customized download of Bootstrap or Foundation (more examples at the end of this post). The next step is to create a mapping between it and the controls in Balsamiq Mockups. This essentially amounts to developing a shared agreement of "(this) means (this)." You can do this by creating a document showing these mappings or by having a meeting with the design and development teams around a screen to work it out.

Here's an example of how you might map some Balsamiq Mockups controls to Bootstrap components (you could also start with our Bootstrap Mockups To Go library).

Mockups and Bootstrap

(Note: It's ok to use some color, but it should only be used as much as necessary to indicate states and selections, for example.)

Having this kind of mapping means that developers no longer have to wonder whether the colors in the wireframe are supposed to be used in their code. They can just translate in their head that a blue button in the wireframe actually means a green button in the UI (if that's the color you use) and that breadcrumbs separated by the '>' character should actually be separated by the '/' character in the app, for example.

Having this kind of mapping means that developers no longer have to wonder whether the colors in the wireframe are supposed to be used in their code.

You can also extend your pattern library by creating your own Balsamiq Mockups controls as Symbols to map to other components in your library.

Mockups and Bootstrap

This mapping can evolve and grow over time as needs and design language change in your organization.

Here's a simple example showing what a completed wireframe could end up looking like when built using a pattern library (note that blue in the wireframe doesn't have to mean blue in the finished product).

Mockups Email

Bootstrap Email

Wireframe to working code with no additional design artifacts in between!

Having a pattern library also means that you're reusing the same code across all parts of your application so that different developers produce the same UIs, which leads to better standards and consistency. And designers can rely more on the stock controls rather than spending hours trying to replicate the look of their own, so both the design and development cycles are shortened.

Summary / YMMV

This approach won't work for all projects or organizations.

It is better suited to in-house teams, for example. Clients outside your organization are more likely to want to see a high-fidelity mockup or comp. Also, many of the existing pattern libraries are for web-based products. Desktop and mobile application pattern library templates and examples are less abundant. Additionally, you should have good communication between design and development teams for this approach to work. Waterfall and remote teams might struggle with this.

That said, it does offer many advantages in certain setups, such as:

  • Saves time when wireframing
  • No mismatch between mockup and reality
  • Good for Lean/Agile methodologies where deliverables don't need to be so formal
  • Good for small teams and startups without many resources (especially when using frameworks)
  • Different skillsets can be applied to different design areas (e.g., visual designers and developers for the pattern library, interaction designers for the wireframes)
  • Design processes (wireframes vs. pattern library creation) can be done independently resulting in fewer bottlenecks
  • More UI consistency across the product

Pattern Library Examples and Variants

Some resources to help you develop your own pattern library:


What do you think? Have you had luck using wireframes in conjunction with pattern libraries? Feel free to leave a comment below!

Creating Project Templates and Examples for Polished UX and Bootstrap Projects

· Posted by mike in Products and tagged , · 3 Comments

We created a tutorial to give you some ideas for how to create project templates that contain elements you commonly use in your projects.

Along with this tutorial, we created two example templates.

The UX Template is designed for people working on UX Design projects who typically need to present a polished deck to clients. Here's a preview of what you'll find in this template.

The Bootstrap Template is designed for people who know they're going to be using Bootstrap, and want to use the text elements, and components common to the Bootstrap framework. Here's a preview of what you'll find in this template:

You'll find more information, including videos for how to get started in the tutorial.

div.gallery a.thumb {
display: block;
position: relative;
float: left;
height: 200px;
width: 200px;
margin: 0 12px 12px 0;
border: 3px solid #eee;
}
div.gallery img.thumb {
display: block;
position:absolute;
clip:rect(0px,200px,200px,0px);
width: 400px;
}

Bootstrap Grid Layout Symbol Library

· Posted by mike in Products and tagged , , · 2 Comments

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.