Our Top 10 Wireframe Tools

With more and more wireframe tools to choose from than ever (free & premium), we’ve selected our favourite few. Wireframe tools make the process of knowing how to create 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. Wireframe tools can be extremely helpful in squaring that circle and getting both client and designer on the same page. 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.

 

Click any of the titles to see more…

01. Balsamiq Mockups

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.

  • Platform: Mac, Linux, Windows & web-based.
  • Price: €70.

02. Visio

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, Viseo does offer add-on tools such as Swipr, which allows you to create and export a usable HTML prototype.

  • Platform: Windows.
  • Price: €500-800.

 

Wireframe tools - InDesign

03. InDesign CC

InDesign lets you use animations and videos in your wireframes
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. The software also includes the ability to create libraries of page elements, so you can create collections of various reusable interface graphics.

  • Platform: Mac, Windows
  • Price: €20/month as part of Adobe Creative Cloud.

Wireframe tools - Photoshop04. Photoshop CC

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

Photoshop doesn’t offer libraries of interface elements, but for straight-forward, fast wireframing, it is a very easy choice for designers. Even for those not familiar with Adobe products, sketching out quick ideas, grouping various elements and layers affords a very quick process.

  • Platform: Mac, Windows.
  • Price: €20/month as part of Adobe Creative Cloud.

Wireframe tools - Fireworks05. Fireworks CS6

Here at Insight, we swear by Fireworks. If you are reading this as one of our clients, there’s no doubt that Fireworks played a huge part of the designing of your site!

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.

  • Platform: Mac, Windows.
  • Price: €250 (free trial available).

Wireframing Wireframe tools - Penultimate6. Penultimate

Wireframing for an iPad app? Then use an iPad tool! 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.

  • Platform: iPad.
  • Price: Only €1.

Wireframe tools - Pencil Project7. Pencil Project

Pencil is free, open source and comes with a variety of templates. 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, Openoffice.org document, Word document, and PDF.

  • Platform: Windows & Mac.
  • Price: Free!

Wireframe tools - Framebox8. Framebox

Framebox is a good free solution for building simple wireframes. 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.

  • Platform: Online.
  • Price: Free!

Screen shot 2016-02-16 at 11.01.329. Flinto

Flinto for Mac is a comprehensive app prototyping tool that allows you to create anything from simple tap-through prototypes, to comprehensive prototypes with impressive interactions. We’ve carefully designed Flinto for Mac to minimize complexity. There’s no programming or timelines. It’s the prototyping tool designers have been waiting for.

  • Platform: Mac & web-based.
  • Price: €75.

Wireframing tools10. Pen and Paper

There are many apps and software out there to help you show your ideas to your clients but who can forget about basic pen and paper! It’s quick, easy and cheap.

  • Platform: Yourself.
  • Price: Cheap.

Thanks to CreativeBloq for some of the ideas.