Create interface mockups in minutes with Pencil

It’s no secret that interface design is difficult. Very, very difficult. Even the biggest and best companies regularly make big mistakes.

There are ways to improve your chance of success, though -- and you could start by creating a prototype of your app, program or website in the open source Pencil.

The core of the program works much like many other diagram tools. Drag and drop shapes onto the page, add text, set colors and more, then join them up with connectors.

Pencil doesn’t just come with the usual flowchart symbols, though. It also has web elements (headers, text, hyperlinks, panes and tables); desktop widgets (labels, buttons, checkboxes, radio buttons, combo boxes); and a host of other components for Windows, Android and iOS interfaces.

Putting these together is straightforward. You might start with a frame, then add a few buttons. Click any of these and you can set their properties (size, text, font and more). Drag in whatever other elements you need, then rearrange and reorganize them as required.

As you drag elements around, they "snap" into place at key alignment points, so it’s easy to (for example) make a row of buttons line up. There are other options to control shape height, width, spacing and alignment. Once you’re happy with a part of your interface -- a title and set of radio buttons, perhaps -- you’re able to "group" these elements, and drag them all around together.

Creating one screen is easy enough -- but it’s just the start. Pencil allows you to build further designs on new pages, then link them all together. Export the document as an HTML file and you’ll be able to click on a button, say, and be taken to a separate page showing what happens next, a useful simulation of your program flow.

If you don’t need this kind of interactivity, then your document can be exported in several other formats: PDF, ODT, multi-page SVG, and individual PNG files.

Pencil has a few problems. Some of its interface elements are a little dated, there’s very little documentation, and it has a few minor bugs.

The wide range of shapes and excellent alignment tools are major pluses, though, and on balance Pencil gets a thumbs up from us.