A wireframe is essentially a web designer’s plan for a web page. This frame can be hand-drawn with simple pen and paper, but wireframing tools are much more effective as they enable you to use drag-and-drop tools, collaborate with other designers and show clients your ideas before you even build them. The designer uses plain black elements against a white background to map out where they want specific elements to go, such as the logo, the navigation menu, the content and more.
Prototyping is the next step after wireframing. Prototyping takes the design stage a few steps further by completing the designer’s vision. In this stage, the designer selects which colors and styles he wants on his site. He dives right into UI and finalizes planning with the site’s or app’s overall user experience in mind.
Oli published a 7-step plan on how to streamline your workflow when it comes to developing WordPress sites for clients, but let’s take things a few steps back and focus on the design stage. This list features 11 of some of the best wireframing and prototyping tools to use to design new sites, themes and applications.
Let’s get started.
1. InVision
InVision is one of the most widely used prototyping tools on the market. It’s used by such brands as Twitter, Nike and Sony. The software is composed of simple drag-and-drop tools that make planning UX designs as easy as can be. You can test your design in the browser, on mobile and even in real time. It’s also built for collaboration with support for such cloud storage solutions as Dropbox, Google Drive and Slack.
Pricing Starts at $0 for 1 Prototype
Platform(s) Supported: Browser-Based; All Browsers
2. UXPin
UXPin is a multi-tool that allows you to build wireframes and mockups before prototyping various UX designs. It’s another great tool for teams as it features a live-sharing feature that lets you present your design to other team members and clients where the changes and customizations you make will be presented in real time. It’s used by such companies as Microsoft, NBC and USA Today.
Pricing Starts at $19/Month
Platform(s) Supported: Browser-Based; All Browsers
3. Marvel App
Marvel App is a tool that allows you to design structures for website before layering UX designs over them to completely design browser and mobile-optimized sites and apps. You can create your own screens or use images you’ve made yourself in Photoshop or Sketch. This tool also has real-time collaboration features that allow team members and clients to leave comments on the screen or create annotations.
Pricing Starts at $0 for Basic Features
Platform(s) Supported: Safari and Chrome; Firefox support in the works
4. Gliffy
Gliffy is a multi-purpose tool that allows you to build wireframes and sitemaps for new sites. It has other flow-chart type tools available companies may find useful, but web designers will appreciate being able to build simple designs for the web pages they have in mind.
Pricing Starts at $0 for 5 Diagrams
Platform(s) Supported: Browser-Based; All Browsers
5. OmniGraffle
OmniGraffle is a multi-purpose tool by OmniGroup that can be used to build wireframes for websites, among other things. It enables you to build a basic wireframe for your site in various ways, including the iPad using an Apple Pencil. The tool has shape recognition features if you prefer to draw your designs rather than use drag-and-drop tools.
Pricing Starts at $49.99
Platform(s) Supported: Mac and iOS
6. Moqups
Moqups is a wireframe and prototyping tool that allows you to design simple layouts for sites before diving right into the UX stage. You can connect pages with links, add your own images, export to PDF/PNG files and more. It’s a great tool to use if you need a simple way to show your ideas to your clients and team members. The tool is used by such companies as Mozilla, Intel and BBC.
Pricing Starts at $0 for 1 Project
Platform(s) Supported: Browser-Based; All Browsers, Chrome App Available
7. Axure
Axure is another multi-tool that allows you to build website wireframes and prototypes for desktop browsers and mobile devices. The tool allows you to start in a black-and-white “sketch” phase before adding in logos, images, colors and fonts. You’ll then be able to move into the advanced prototyping phase where you’ll be able to test various UX designs.
Pricing Starts at $289 for One License
Platform(s) Supported: Windows and Mac
8. Justinmind
Justinmind is a popular wireframing and prototyping tool used by Google, Adobe and Oracle. It allows you to completely plan out the way your site will look, feel and function, and it even allows you to design web and mobile apps. Designers can take advantage of the tool’s multiple integration possibilities to maximize their experiences with this tool. This includes Adobe Illustrator to migrate SVG files from Illustrator to Justinmind seamlessly.
Pricing Starts at $19/Month
Platform(s) Supported: Windows and Mac
9. Mockingbird
Mockingbird is a wireframe application with simple UX prototyping features. It features drag-and-drop tools you can use to build wireframes fast, and its UI elements allow you to link between pages, giving you the chance to design your site’s frame, style and sitemap all within one tool.
Pricing Starts at $12/Month for 3 Projects
Platform(s) Supported: Browser-Based; All Browsers
10. HotGloo
HotGloo is a wireframe and prototyping tool used by such companies as NBCUniversal, Disney and Sky. The tool features responsive wireframing, a full list of UI elements and pre-built UI stencils. It’s also built for team collaborations, and your clients can create annotations to write comments if you need to present layouts to them before moving forward with projects.
Pricing Starts at $14/Month for 2 Projects
Platform(s) Supported: Browser-Based; All Browsers
11. Mockplus
Mockplus is a simple wireframe tools that lets you go from simple black-and-white, sketch-style wireframes to well-designed site layouts with full colors and icons. It comes with over 200 pre-designed components that make wireframing as easy as can be. Designs can be shared through the cloud, so you’ll never need to worry about carrying around an extra flash drive to share your designs with colleagues and clients.
Pricing Starts at $10/Month
Platform(s) Supported: Windows and Mac