WireframeSketcher: Mockups, Designs, and Prototypes

Everybody has soft spots for certain things. For some it’s chocolate. For others they like flowers. Or then some people like tools, cars, or water. Ah, the water. Oceans, lakes, pools- they’re just so nice to jump in. These things bring up fond memories, happy feelings, and nice thoughts. It’s always funny when people have a soft spot for something that’s odd or unique. Perhaps they like a certain type of dessert or collect oddities from knick knack stores. You can tell a lot about someone based upon the things they’re fond of. There’s one thing I’m quietly keen on, which is not altogether common. I like wireframe tools.

Many people might not even know what these things are. They’re design tools that allow you to sketch out the design before you put the final finish on it. They’re where the thinking happens. Where the pieces are still free, waiting to find their places. They exist before the crazy marketing lady insists that the whole thing needs to be pink. Products are still pure when they’re in the wireframe stage. They still have hope.

As with all things it’s important to use the right tools for the job. Many people might be tempted to use Adobe Photoshop to create wireframes. This is often a mistake. Photoshop gives you too much power and too much ability to slip into the trap of creating final designs too soon. The key is to design the functional aspects of the site or application first and then add the aesthetic decoration to it later. Once the final finish starts finding its way into the project it gets harder and harder to think through and fix the essence of what the product does. Many a site and software product has launched with a beautiful design that just doesn’t work the way you’d like it to.

One such wireframe tool is WireframeSketcher. It’s a downloadable application that can handle all your wireframe needs. It provides a nice balance between fully functional design suites and barebones wireframe tools.

WireframeSketcher comes as both a standalone application and a plugin for any Eclipse IDE. It works on Windows, Mac, and Linux. As many people know mockups have their origins in good old fashion pencil and paper. As such many mockup tools retain this un-glossed look to carry over the unfinished look. The fonts and objects have that hand drawn look and feel to ensure nobody could misinterpret it as a final design. (But then some sites launch with this since they think it’s cute, but that’s a different story.)

It comes with all the basic tools to document the screens, interaction, storyboards for use cases, and every other aspect of the functional design. The sketches themselves consist of the usual suspect building blocks such as boxes, submit buttons, forms, drop downs, and the rest of the components in the toolbox of application design. The designs can be for all types of devices including web sites, desktop applications, and mobile apps. One interesting component of WireframeSketcher is that it comes with what’s known as wiki formatting. This allows designers to quickly and easily fill in and modify sample text for their mockup designs. It also comes with a vast array of icons, and a library of UI controls. The final product is an interactive prototype which can be viewed in full screen mode or exported as a clickable PDF.

Sample Mockup of and iPhone App

So, let’s imagine a scenario. The design team and product manager pour hours and weeks into creating a working interactive prototype of their product. After many a long meeting, and working and reworking various work flows, they walk the final version down to the marketing department. Right on cue she says she wants it to be pink. Great, just great. Well, that’s why I love wireframe tools and mockup builders. They’re used while the product is still real, still alive. At least some products make it through the tangly echelons of management and the high powered mindsets that comprise them. Regardless, WireframeSketcher is a full featured tool to create professional level mockups.