Working with Skins (Sketch vs. Wireframe)

We know that some people need to shift from idea generation with internal teams to presentation with clients or stakeholders, and in those situations the default “sketch” skin may present challenges with certain audiences. To address this need, we created a “wireframe” skin that allows you to switch from a sketchy, hand-drawn style to a crisper, cleaner wireframe elements.

Switching from Sketch to Wireframe Skin

To switch skins go to the View menu, select the Skin from the dropdown, and set the Skin setting to “Wireframe”.

The feature allows you to work on early ideas in the sketchy skin, and then later select a menu to swap out all of your controls in the clean skin. All of your elements, including icons will be switched.

The screenshots below show a comparison of a sample design in the default “sketch” and “wireframe” skins, respectively. Click to view larger images.

Sketch Skin Wireframe Skin

Which Skin Should I Use?

We’re glad you asked ;-) The short answer is that we still feel that the sketch skin is more appropriate most of the time while using Mockups.

Our intention with adding the wireframe skin was to help add legitimacy to your Mockups when presenting them to clients or stakeholders, people who may consciously or unconsciously discount the thought and effort of your design work simply because it looks like it was sketched on the back of a napkin. We’d hate for all your hard work to go unappreciated just because it doesn’t look “professional” enough!

However, while designing, the original sketch skin still offers all the advantages it always has. It deliberately looks rough and tentative, which encourages you, the designer, to try out lots of different ideas, to experiment and revise in order to come up with the best design. Designing in the wireframe skin could cause you to get attached to a specific design idea too soon because it looks “done”, or it may prompt you to fine-tune the alignment, colors, or fonts when you should be thinking about the workflow.

Just as the wireframe skin makes the design feel finished, the sketch skin makes the design feel un-finished, which guides you to continue to ask questions and explore. The following description of the differences between sketches and prototypes can also be applied to the sketch and wireframe skins, respectively.

Sketch vs. Prototype Credit: Bill Buxton, Sketching User Experiences

So, while you can use the wireframe skin at any phase of the design process, we don’t really recommend it as an alternative to the sketch skin. But, rather, more as a follow-up to it. It extends the functionality of Mockups by making it more amenable to the presentation or pitching phase of product development, beyond just the ideation and design phase.

Since the beginning, Balsamiq Mockups has been optimized for that sweet spot of the ideation phase of a project and will continue to be for the foreseeable future. We still don’t have any plans to add fancy interaction behavior to our family of products, for example, and we’re just fine with that.

Edit this page