Sometimes you want or need to create minimalistic, polished wireframes. Here's how to balance aesthetics with the rapid iterative nature of wireframing.

You land on one of those "12 examples of beautiful interface design" articles and admire the screens of polished wireframes. In some photos you see monitors shot at an angle with screens askew, receding into the distance, and a slight vignette burning away the edges. Perhaps you think to yourself, "Maybe I should make my UI design look like that?"

It's easy to get seduced by these creatively presented shots of user interface deliverables. If making clean wireframes does cross your mind, we think you can do so successfully provided that you don't put aesthetics before the goals and purpose of wireframing. There are valid reasons for not using sketchy wireframes. Sometimes low-fi aesthetics get in the way, whether it's due to the baggage of hand-drawn fonts or confusion over sketchy lines. That's why we made the clean style, and its minimalist aesthetic is right for these occasions.

We advise caution. I know, I may be preaching to the choir, but humor me. It bears repeating because people new to wireframes may not know this.

Wireframing is not meant to be doing visual design, and this is why people make their wireframes as devoid of designed elements as possible.

Overly "designed" wireframes may ultimately lead to having to provide disclaimers as you deliver them. So get comfortable with this phrase: "Disclaimer: This is a wireframe and is not meant to convey visual design." You may even put that in your wireframes. We've seen that done plenty of times.

Stepping off the soapbox. Let's get started. We'll be working with Balsamiq Wireframes.

Aesthetics

Just because you're working on wireframes and not visual design, doesn't mean you have to throw your design sensibilities out the window. If you're already steeped in design principles, it'd be hard to make a wireframe without that knowledge influencing where and how you place elements on the canvas.

Let's start with a few examples of what you might do with wireframes and basic diagrams.

Desktop app wireframe

Mobile app storyboard

Journey map diagram

You can download all of these examples in this Project file.

These examples eschew sketchiness and the hand-drawn look. They're mostly grayscale with an accent color. There's obviously a little bit of alignment, arrangement, hierarchy, and repetition there.

The features in Balsamiq for non-sketchy aesthetics are easily accessible once you know what to look for. Let's dig into how to create wireframes like this.

Basic tips

The clean style and font

We start by switching to the Clean style. To do this, select the dedicated option from the Project menu, "Project > Style > Clean".

Let's also select a different font from that menu, "Project > Font and Colors...".

Think minimalist

Flat design is a nice trend for people who do wireframes because our work has traditionally been devoid of surface decoration. If we look closer at how that first wireframe is created above, we see how the Shape control and some subtle use of color can go a long way in organizing elements and suggesting hierarchy.

Here are some design principles and techniques that help when doing minimalist wireframes.

Favor minimalism

Keep colors at a minimum. Consider using flat areas of color rather than boxing everything and putting noisy borders adjacent to each other. Stick to a monochromatic palette of mostly white, black and grays with an accent color.

Use contrast wisely

Use contrasting font sizes to denote hierarchy. When elements are distracting, consider reducing contrast in visual elements to reduce their importance. Elements like separators, HRs and border boxes are good examples that sometimes draw attention away from more important parts.

Use proximity and alignment for visual organization

You may not need to box every element and add a strong HR between everything. As above, use contrasting font sizes or color. Put like things close together and add white space to separate groups. As a general rule, look to align almost everything with something else in the canvas.

Employ functional white space

Again this goes with the previous technique. White space helps to separate, to help direct the eye, to suggest the order of scanning and reading the page, and to help make text legible. The eyes like to have space to rest as they move between blobs of objects.

To get a little meta, I made a wireframe of our wireframing tool in order to show you these tips. (Hopefully that recursion doesn't make your head explode.)

The Shape control

The most common control you'll use for simply blocking out areas with solid grays will be the Rectangle. But also consider the Shape control as one of your tools for polished wireframes.

The Shape control is a Swiss Army knife of an object. It was originally meant for quick and dirty flow diagramming, but in reality it's more often put to use for general purposes. We'll look at some examples, but first let's discuss how shapes can be useful.

Consider how drawings are made to understand how to use the Shape Control. This fun video shows how manga illustrator Mark Crilley uses the basic shapes of circles, triangles, arcs and straight lines to build up the anatomy of a face.

The good news is that in Balsamiq you don't have to know how to draw a circle. You can, however, layer shapes in a similar way to make other objects. Making design elements with the Shape control is something that many experienced Balsamiq users do when they want to create an object that doesn't exist, or make a control that looks different from what we provide in the UI Library.

Let's look at an example created by Balsamiq user Georges Raad. Georges created a great symbol library using the Shape control extensively to make some interesting elements like ribbons. Let's break down his controls to see how he made them.

The basic idea is to look at the overall form of a thing, then try to break it down into simpler geometric shapes. This is what Mark Crilley demonstrates above when he draws a face. You can do lots of interesting things with just the Shape control. Here are just a few examples of the kind of thing we see people doing using the simple technique of layering shapes that we show above.

[Common Controls by Georges Raad; Doughnut Chart by Henning; Apple Watch by Ben Norris, Map Controls by Michael Gaigg; Margarita Recipe by Jim; Bootstrap, TR808, TV Remote, and Moockups Cow by me]

You can see more useful examples of what people have built by getting creative with shapes in Balsamiq's Templates library.

Must you?

Most people who use Balsamiq don't have to create polished wireframes. Low fidelity keeps the conversation centered on figuring out the problem and communicating the functional solution.

A wireframes vs. high-fidelity prototype vs. visual design debate is not what we're after here. We're interested in giving suggestions for making clean, minimalist wireframes if you must, whether it be for client presentation or other reasons. I admit that we occasionally do this at Balsamiq when we're working on an existing feature, or if I'm going to be doing visual design work using the design language we're already using in our products.

As you make polished wireframes, the slope becomes slippery as visual design decisions creep in. Be sure to stick to the same rules you've always known for wireframing with Balsamiq.

• Focus on function over form. Focus on communicating functionality; wireframes are not for visual design.
• Illustrate flow. A minimalist approach does not mean that you should drop elements that communicate your ideas. Arrows and annotations are great ways to indicate flow, and you should still use them.
• Don't neglect content. Lorem ipsum only gets you so far. In Sketchy or Wireframe style, you may want to make it reflect real content when you can. It will help to know how your rules will work with real content.
• Use graphic design principles. This is a broad suggestion, but it's more important when you're not doing the lowest fidelity work. The Sketch style, by design, is meant to be forgiving when it comes to details like alignment and precision. When you start using the finer shapes and lines of the Clean style, hastiness in laying things out may come across as being sloppy and can be a distraction in your wireframe. Even though you aren't doing visual design, design principles always help communicate ideas. Contrast, alignment, repetition, etc. are tools for creating hierarchy, organization, and flow in your interface. If you're new to design principles, a book like Robin Williams' very short Non-Designers Design Book is a great primer.

A last reminder is not to let aesthetics get in the way of rapid idea generation. If it does, maybe you should be sticking to the Sketch style. For the majority of our customers and for us, it is still a tried and true way of focusing on what's important.

There's no single "right way" to wireframe. What you should deliver depends on your circumstances. In the end, ask yourself, "Does this help or hurt me in trying to explore, find, and communicate the problem and solution I'm presented with?" If it helps, use it, but do it carefully. Hopefully this gives you another way to go out and make something awesome.