15 Best Wireframing Tools for Designers

15 Best Wireframing Tools for Designers Building a website can be a time-consuming and expensive business. To ensure that you minimize the number of hours spent and the amount of money wasted on each project, it’s absolutely essential that you plan properly, flushing out content and functionality early, reducing rework. Most people simply use a pen and paper to plan the early stages of their website designs, but is this enough? Besides a rough, handwritten sketch, you should be creating wireframes for your own benefit and to aid in preliminary discussions with clients and team members. To create a successful wireframe, you’re going to need to use a good wireframing tool. We explore the 15 best online tools below. Online tools, as opposed to desktop applications, tend to be easier to use, cheaper and better for sharing your designs with colleagues and clients. Each tool in the list below performs several unique functions. Some are better for knocking up a mockup in a matter of minutes; others are better for building fully interactive, clickable, high-fidelity prototypes that look and feel like a proper website. Take some time to try out a few of these tools and find out which one’s right for you. Also check out this article with wireframe tools and tutorials.

Advertisement

1. Cacoo (free)

Besides wireframes, you can use Cacoo, the online drawing tool, for creating sitemaps and network charts. It offers all the basic drawing features you’d expect alongside a vast collection of stencils. Cacoo’s major strength in relation to some of the other tools in this list is its ability to let you work on diagrams with other users, wherever they are, simultaneously, communicating with one another using the ‘Chat’ function.

2. Balsamiq Mockups ($79 as a desktop app)

Balsamiq Mockups is one of the most popular wireframing tools out there and it’s easy to see why. With over 75 controls, 150 icons and 50 keyboard shortcuts to choose from, you really can create anything. One of its strongest features is ‘Quick Add’. Kind of like Mac’s Spotlight, users only need to type the first couple of letters of a specific control to select it. Elements added to your designs snap into place making everything look clean and professional.

3. Mockingbird (free)

Safari, Chrome and Firefox users can make the most of Mockingbird’s exceptional prototyping abilities to make really straightforward wireframes without any unnecessary fuss. UI elements can be dragged and dropped into pages, separate pages can be linked together to give you a visual representation of a whole website and you can share your mockups with others simply by sending them a link.

4. HotGloo (from $14 per month)

HotGloo launched the latest version of its impressive online wireframing tool on 14th February 2010. People who have used it in the past should certainly consider giving it another go as much has changed. HotGloo has got to be one of the most attractive wireframing tools, but its performance is striking too. The editor is extremely user-friendly and creating custom elements, collaborating in real time and managing sitemaps is a breeze.

5. MockFlow (free)

MockFlow claims that it’s a faster way of creating wireframes than using a pen and paper. At first I was skeptical of this, but having now given it a go I’d be inclined to agree. One of the best things about MockFlow is that it lets you work on your wireframes online and offline. With no internet connection, using MockFlow desktop, you can work on your projects with all changes stored locally and optionally synced back when connection is regained. In stead of using a wireframing tool to design a website from scratch it is also a good option to see if you can find a minimal wordpress theme for your website or blog. There are a lot of options and minimal wordpress themes to choose from.

6. Pencil Project (free)

Pencil is a free, cross platform, open source wireframing tool with a strong following. It’s available as a standalone tool or a Firefox add-on. The latest release (1.1) offers various new features including inter-page linking and the ability to export your wireframes to HTML, PNG, Openoffice.org, Word or PDF. Its stencils look superb and it’s really user-friendly.

7. Pidoco (from $9 per month)

Pidoco is a 100% browser-based app requiring no downloads whatsoever. With Pidoco, you can create wireframes that are interactive and clickable with stencils that link to other elements and pages. Different aspects of your design are held in layers, like Photoshop, so common elements can be kept for each page. Getting feedback on your wireframes is easy- simply choose which members of your team you want give access to and they can leave comments.

8. Protoshare (from $29 per month)

Protoshare offers a higher level of functionality to most of the other tools explored here. You can make everything from the most basic wireframes to the most high-tech, interactive prototypes. As the tool is completely web based, team members can login from any computer to view and comment on your work. You can rearrange pages by dragging and dropping them in your sitemap, view prototypes as website diagrams and make sitewide changes in a couple of clicks. You can add styles, images, Flash, forms, RSS feeds and more to make your wireframes look and behave just like the real thing.

9. iPlotz (free basic package)

iPlotz is a cross-platform wireframing tool that’s really easy to get to grips with. Its basic package, which lets you edit one project with a maximum of five pages, is completely free, so there’s no excuse not to give it a go. Drag and drop functionality, the ability to quickly upload your own images onto a page, and the facility to export pages as PNG, JPG or PDF, make iPlotz a pleasure to use. You can even invite other colleagues to view, comment on and edit your designs.

10. Gliffy (free)

Gliffy is a great tool for creating wireframes quickly, but that’s not all it’s good for- you can use it to sketch flow diagrams, floor plans, network diagrams and much more. Such versatility means that its shapes and stencils are more diverse than usual. Embedding your designs into wikis, blogs and hosted apps is simple too.

11. Jumpchart (free basic package)

Jumpchart is a collaborative website planning application tool which revolutionizes the way we plan our sites. Rather than focus on design, like most of the other tools explored here, it focuses on content, allowing you to order all the text, files and images you need for each page in a highly structured way. Jumpchart uses Textile, so there’s no need for any coding know-how.

12. JustProto (free basic package)

JustProto is an excellent web-based tool for building prototypes of web and desktop applications. With JustProto, you can visualize your apps properly by creating interactive simulations before any coding begins. JustProto features a text editor and file manager, and every change you make is previewed instantly.

13. Creately (free basic package)

Creately can be used for working securely and collaboratively on pretty much anything visual, although it specializes in the creation of UI interfaces, flow charts, software and web designs. It features all the usual drag and drop, unlimited undo/redo and curved connections you might expect, but it’s particularly strong when it comes to comments. Click on a comment a colleague has made and you’ll be shown exactly which element of your wireframe they’re referring to.

14. Lovely Charts (free)

Wireframing tools don’t come any cuter than Lovely Charts. It doesn’t have the technical abilities of some of other tools, but it’s free and wireframes made on it look really stylish and original. It’s perfect to use when working with a certain type of client- perhaps one that’s more interested in design over functionality. Easy and sexy (its words, not mine), Lovely Charts makes designing wireframes that little bit more fun.

15. Templatr (free)

A lot of people would not consider Templatr to be a wireframing tool, but it’s actually really handy for creating mockups. Simply choose the layout you want, upload any images and customize it to suit your exact needs. It’s simple, but very effective and free! This is a guest post from Tom Walker who blogs for a supplier of ink next day in the UK. He blogs on the CreativeCloud about media design and advertising.

We offer best quality HP0-P14 test papers and 642-481 prep materials. You can get our 100% guaranteed HP0-S27 dumps to help you in passing the real exam.

Tagged as: creating mockups, creating wireframes, design mockup, design wireframe, online wireframing tool, wireframe, wireframe software, wireframe tools