Getting Wild With Wireframes (2014 Edition)

In their essence, wireframes are a simple thing.

Essentially, wireframes are just a storyboard of what the graphical user interface (GUI), e.g. what the user sees and interacts with, will look like. In many instances the first wireframe is drawn on a piece of paper or even just a napkin while you're sitting at a local watering hole.

Choosing between all the different wireframe offerings that are available today is a long and exhausting decision. This article will outline two free and two paid wireframe software solutions to consider.

First, understand that there are two different types of wireframes: low-fidelity and high-fidelity.

Low-fidelity wireframes are often first drafts of what a website or mobile application will look like. They are often crude renderings of a websites overall design that contain only the most basic and important elements. Being so basic, these are essentially equivalent to a writer's cursory outline.

On the other hand, high-fidelity wireframes contain an expansive amount of detail often including what the background will be as well as the visual hierarchy of the page and in some cases even print content. The final high-fidelity wireframe should show every single relationship and interaction between all elements of the website creating, in a sense, an extremely detailed map.

FREE

Gliffy

Gliffy is one of the most popular free wireframing tools available today. The software not only allows developers to create wireframes but also UML Diagrams, Network Diagrams and Sitemaps (which are all necessary when creating a successful website). The software works directly in a developer's browser (Chrome, Firefox, Safari and IE 9+) and it does not require the user to sign in when starting a project. However, to save and open a project, the user must create an account (for free of course). For Chrome users, they can download the Gliffy app and work on their projects offline as well. Overall Gliffy is an impressive low-fidelity wireframing tool.

Frame Box

Frame Box is a much more basic wireframing tool than Gliffy, but it still offers developers everything they need to create a low-fidelity wireframe. Unlike Gliffy, Frame Box does not have a special browser template but instead simply has a box selection where developers can drag, drop and resize the box to simulate a browser window. Frame Box, like Gliffy, is an in-browser tool.

Other free wireframing software's are iPhone Mockup, Pencil and Lumzy.

PAID

Axure RP ($289 or $589 per license)

Axure takes wireframing to an entirely different level. Through Axure, developers can create interactive designs of what they want their website to look like and accomplish as well as share their designs with coworkers and clients by generating an HTML file that is able to be viewed in IE, Firefox, Chrome and Safari. This allows all parties involved to view and interact with the design without having to install Axure RP. Axure also lets developers collaborate with one another to work on the same project. A detailed history is saved every time something is changed so in case developers need to go back they have no problem doing so. Axure is certainly a high-fidelity wireframing tool.

Balsamiq Mockups (Price varies)

Balsamiq is not quite as expansive as Axure but still puts up a decent fight. There are five different ways developers can access Balsamiq including through the desktop as well as the cloud and Google Drive. If you are using the desktop version it is important to note that any revisions will be saved to the developers Dropbox folder. Balsamiq is more conservative high-fidelity wireframing tool.