The 20 best wireframe tools

Best wireframe tools for designers

Having the best wireframe tools makes the process of creating an app or website fundamentally easier, by visually stripping the product down and enabling all involved to focus purely on functions and user interactivity.

Clients need to understand how your proposed app or website will work, and they'll want to know about things such as website layout. But simply explaining to them verbally or in writing leaves the vast majority of functions down to their imagination – which isn't helpful for you or your client, and leaves a lot of room of error. Wireframe tools can be extremely helpful in squaring that circle.

There are more wireframe 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.

Taking advantage of trial downloads or free software and finding the one that fits in with the way you work is the best way of finding out which one is right for you. Here we've selected the best wireframe tools to get you started. Enjoy...

Justinmind wireframe tool

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

Web-based Justinmind includes a library of UI elements, from buttons and forms to generics shapes and a range of widgets for iOS, 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.


Wireframe tools: offers a clean, minimal interface offers a simple interface for sketching your wireframes that eschews the toolbars and icons of a typical drawing app and has therefore made it to our best wireframe tools list.

There's a limited colour palette to help you avoid that particular avenue of procrastination, and UI elements are context-sensitive and only appear when you need them. Whether or not you enjoy this is a matter of personal taste.

02. Adobe Xd

Wireframe tools: Adobe Xd

Adobe's Xd is a powerhouse of wireframing and prototyping 

  • Platform: MacOS, Windows
  • Price: From free to $19.99 per month as part of Adobe Creative Cloud

Adobe Xd allows you to wireframe as just part of its suite of prototyping tools, which takes you through the whole process of sketching wireframes; collaboration with your team; creating site maps, flowcharts and storyboards; building functional prototypes; and much more. You can try Adobe Xd out for free but as usual you need a Creative Cloud subscription to take full advantage of Xd's incredible smorgasbord of features.

03. UXPin

Wireframe tools: UXPin editor

Quick tutorials show you how to build advanced animations in the UXPin editor

You can put together wireframes in UXPin at top speed by dragging and dropping custom elements. There are regularly updated libraries for Bootstrap, Foundation, iOS and Android, and your wireframes can be quickly converted to high-fidelity mockups. From there you can create fully interactive and animated prototypes of your final product. 

Alternatively, you can also start your designs in Photoshop CC or Sketch and import into UXPin for prototyping. To support the full UX process, you can then create and pin documentation to your prototypes and auto-generate specs and style guides for developers.

04. Fluid UI

Wireframe tools: Fluid UI

Each project generates a QR code you can scan to get the prototype working on your phone

Fluid UI has 16 built-in libraries for iOS, Android, Windows and more, and pages are created by dragging in elements from these libraries. 

This app provides a great way for you to map out your projects visually by creating links to join screens, forming a diagram of how everything fits together. Hovering over a link gives you the option to change the kind of transition you're using.

05. Balsamiq Mockups

Wireframe tools: Balsamiq Mockups

Balsamiq Mockups aims to replicate the experience of sketching on a whiteboard

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.

06. Axure RP

Wireframe tools: Axure RP

Axure RP lets you create interactive HTML mockups for websites and apps

As well as creating mockups, Axure RP 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 mockups (see more about website mockups here) can be created for both websites and apps, and you can even view your app design on your phone with a built-in share function.

07. Pidoco

Wireframe tools: Pidoco

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

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.

08. Visio

Wireframe tools: Visio

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

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

09. InDesign CC

Wireframe tools: Adobe InDesign

InDesign lets you use animations and videos in your wireframes
  • Platform: MacOS, Windows
  • Price: From $19.99/month as part of Adobe Creative Cloud

By including animations, video and object states, InDesign can be used to create an interactive PDF that acts as a wireframe for your website or app. 

The software also includes the ability to create libraries of page elements, so you can create collections of various reusable interface graphics.

10. Photoshop CC

Wireframe tools: Adobe Photoshop

Never thought of Photoshop as a wireframing tool? Think again!
  • Platform: MacOS, Windows
  • Price: From $19.99 per month as part of Adobe Creative Cloud

Photoshop doesn’t offer libraries of interface elements, but for straightforward, fast wireframing, it is a very easy choice for designers. 

If you're familiar with Adobe products, it's simple to sketch out quick ideas, group various elements and layers, and build an effective wireframe. Check out our article Photoshop for web design: 20 pro tips for more.

Next page: More wireframe tools for designers