Friday, August 01, 2014

The 20 best wireframing tools

There are more wireframing tools to choose from than ever. We find you the pick of the bunch.

Wireframing tools make the process of creating an app or website fundamentally easier, by visually stripping the product down and allowing all involved to focus purely on functions and user interactivity.
Clients need to understand how your proposed app or website will work. But simply explaining to them verbally or textually leaves the vast majority of functions down to their imagination. Wireframing tools can be extremely helpful in squaring that circle.

Choose wisely

There are more wireframing tools on the market than ever, each offering varying levels of functionality. Some software can be used purely for simple wireframes, while others will allow you to create a working prototype.
Being creative should come first over any part of the process. So taking advantage of trial downloads or free software and finding the one that fits in with the way you work is the only way of finding out which one is right for you. We've selected 20 of the best wireframing tools to get you started. Enjoy!

01. Balsamiq Mockups

Wireframing tool Balsamiq Mockups is a firm favourite among the web design community

  • Platform: Mac, Linux, Windows & web-based
  • Price: $79
Balsamiq Mockups includes several drag-and-drop elements, from buttons to lists, each styled as a hand-drawing. The basic premise behind this wireframing tool is to keep the mock-ups "intentionally rough and low fidelity", to encourage as much feedback as possible.

02. Axure

Axure lets you create interactive HTML mock-ups for both websites and apps

  • Platform: Mac & Windows
  • Price: $289 - $589
As well as creating mock-ups, Axure allows you to add functionality to your layout and create an interactive prototype. Features of this wireframing tool include sitemaps and various 'widgets' in the form of various UI elements. Interactive HTML mock-ups can be created for both websites and apps; you can even view your app design on your phone with a built-in share function.

03. Pidoco

Pidoco includes a handy library of drag-and-drop interface elements

  • Platform: Web-based
  • Price: $9-$59 per month
Pidoco is similar to Axure, in that it includes library of various drag-and-drop interface elements, as well as the ability to add multiple pages and layers. Your prototypes can be shared online with clients, and includes functions for collaborative feedback and discussion. Viewing your prototypes on your phone is as easy as downloading the Pidoco app.

04. Visio


Visio's interface will be familiar if you're used to using Microsoft Word or Excel

  • Platform: Windows
  • Price: $599.95-$999
Visio's real strength lies in technical diagrams rather than wireframing; however, for those already accustomed with other Microsoft apps such as Word or Excel, the interface will be very familiar. It is quite clunky, Visio does offer add-on tools such as Swipr, which allows you to create and export a usable HTML prototype.

05. InDesign

InDesign lets you use animations and videos in your wireframes

  • Platform: Mac, Windows
  • Price: £660.51 or as part of Adobe Creative Cloud
By including animations, video and object states, it’s very easy to create a mock-up of a website or app in the form of an interactive PDF with InDesign - read this review of InDesign CS6 here. The software also includes the ability to create libraries of page elements, so you can create collections of various reusable interface graphics.

06. iPlotz

Create Flash-powered wireframes with iPlotz

  • Platform: Web-based (Flash)
  • Price: Free-$79
Flash-base wireframing tool iPlotz allows you to make clickable wireframes with drag-and-drop components. Its main addition includes the ability to add tasks and notes for project managers and coders.

07. Photoshop

Never thought of Photoshop as a wireframing tool? Think again!

  • Platform: Mac, Windows
  • Price: £660.51 or as part of Adobe Creative Cloud
Photoshop doesn’t offer libraries of interface elements, but for straight-forward, fast wireframing, it is a very easy choice for designers - read our review of Photoshop CS6 here. Even for those not familiar with Adobe products, sketching out quick ideas, grouping various elements and layers affords a very quick process.

08. Fireworks

With Fireworks, it's easy to duplicate styles implemented in the wireframe in the final build

Fireworks allows you to design wireframes and prototypes for web, as well as mobile and tablet apps. CSS including colours, fonts and corner radius can be extracted so styles implemented throughout the process can be duplicated in the final build. Various symbols and templates are also included for quick wireframing.

09. Protoshare

Protoshare puts emphasis on online collaboration

  • Platform: Web-based
  • Price: $290-$590
Protoshare is an online tool, with a focus on collaboration and sharing. It includes a library of drag-and-drop elements, a sitemap, and the ability to use custom css and insert your own elements. Due to the emphasis on online collaboration, unlike some other tools, it can't export as a PDF, however it is worth considering for its prototyping features.

10. Penultimate

Wireframing for an iPad app? Then use an iPad tool!

  • Platform: iPad
  • Price: 69p
If you're working purely for iPad design, sketching out ideas directly within the device itself is the perfect way to ensure you’re working to the right ratio and with well-sized active areas. Sketches and ideas can be easily saved out and sent to clients for approval.

11. Pencil Project

Pencil is free, open source and comes with a variety of templates

  • Platform: Windows & Mac
  • Price: Free
Pencil is a free, open source wireframing tool available for both Windows and Mac. Features include multi-page documents, external object import, as well as aligning, z-ordering, scaling and rotation. Various templates are included as well as the ability to export to HTML, PNG, document, Word document, and PDF.

12. OmniGraffle

OmniGraffle has made a seamless transition from Mac to iPad

  • Platform: Mac and iPad
  • Price: $49.99
OmniGraffle is one of those perennial Mac favourites that makes a seamless and obvious transition to the iPad. It’s effectively an ideas tool that enables you to quickly bash together website wireframes, diagrams, process charts or page layouts. You select a document type, and OmniGraffle makes context-sensitive joins between separate elements, automatically linking lines in diagrams and aligning shapes and elements in wireframes or page layouts.

13. Gliffy

Gliffy: like Visio, but cheaper

  • Platform: Web-based
  • Price: Free-$9.95 p/month
Gliffy pretty much pitches itself as a cheaper online version of Viseo. It includes drag and drop components, online collaboration, image export and version tracking. There's no ability to create prototypes, but if you happen to be looking for a cheaper version of Vimeo, then this is it.

14. Mockflow

  • Platform: Web-based
  • Price: Free-$69 per year
Mockflow allows you to create working prototypes, and like Protoshare has an emphasis on collaboration and sharing. It includes features such as a sitemap creator for pages and folders, version tracking, image and component collections, chat, and HTML5 export.

15. Framebox

Framebox is a good free solution for building simple wireframes

  • Platform: Online
  • Price: Free
Framebox is a great, free online tool for very simple wireframing. It includes a few drag and drop elements and allows you to share the web page as a unique URL. You can also give your elements titles and descriptions to help explain their function.

16. iPhone mockup

iPhone Mockup is purely a wireframing tool for iPhone app UIs

  • Platform: Web-based
  • Price: Free
Like Framebox, this is another free online tool, albeit even simpler and aimed entirely at iPhone interfaces. There are two visual styles to choose from - 'pencil' and 'illustration' - the latter being the cleaner version or the two. Designs can be shared via a unique URL.

17. FlairBuilder

Flairbuilder lets you choose between ‘high-fidelity’ and ‘low-fidelity’ style graphics

  • Platform: Mac, Windows
  • Price: $99
Flairbuilder works on the Adobe Air platform and features multi-page projects, site map and comments. Like the rest, components are placed using a drag-and-drop interface and a clickable prototypes can be exported as HTML or shared online. You can also choose between 'high-fidelity' and 'low-fidelity' style graphics.

18. Justinmind

Justinmind offers a library of UI elements and custom styling for use in your wireframes

  • Platform: Web-based
  • Price: $19-$29 per month
Web-based Justinmind includes a library of UI elements, from buttons and form, to generics shapes and a range of widgets for iOS, Blackberry, SAP, and Android. Custom styling is included, so you can add rounded corners, cropped images or colour gradients, or import graphics by dragging them into the browser. Prototypes can be exported as HTML.

19. HotGloo

Flash-based wireframing tool HotGloo offers a rich level of features

  • Platform: Web-based (Flash)
  • Price: $14-$54 per month
HotGloo's prototyping alone offers a rich level of features, going far beyond simple clickable buttons, such as the ability to change displayed elements depending on whether or not a user is logged in. Prototypes can be exported as PDFs, however given the fact HotGloo is Flash-based, most of the more complex interactivity that makes it great, is lost in the process; equally, viewing on iOS devices isn't an option.

20. JustProto

JustProto offers live collaboration and chat features

  • Platform: Web-based
  • Price: $13-$63 per month
JustProto features include live collaboration and chat, functional prototyping, drag-and-drop component library and URL sharing. It also allows you to make custom elements and add them to a user library.

And don't forget... pen and paper

There's nothing quicker than grabbing a pen and paper

Yes. An actual pen. And some real made-from-wood paper. Okay, so these don’t allow you to make a prototype, and there’s no built-in elements. But, if you feel more comfortable using a more traditional approach, why not get your ideas down on paper first and refine them in software later?

(Source: creativeblog)

1 comment:

Evan said...

Creately is also one of the best diagramming tools I have used for prototyping. Its a good iphone mockup software as well. There are many templates and examples to get started with drawing as well. Real-time collaboration comes handy when designing diagrams with team mates.