Top 29 Mockup and Wireframing Tools for Developers

Wireframing is key to successful and efficient UX development for modern Web and Mobile applications

Mockup and wireframing tools make the process of creating a cloud computing based SaaS app or website easy — allowing you to visually strip a product down to its bare bones and focus solely on function and user interactivity. Mockups and wireframes are important tools for communicating a prototype’s usability and functionality to clients, providing a streamlined, uncluttered visual to supplement verbalized ideas and designs.

With the explosion of mobile applications and cloud computing there are more wireframing tools on the market than ever, each offering differing levels of functionality. Some software can be used to create simple wireframes, while more advanced tools allow you to build a complete working prototype. The following 29 mockup and wireframing tools are listed in no particular order of importance, but represent the most advanced and easy-to-use tools available, with all of the features and functionality you need to get the job done.

Test and Development are moving to the Cloud

Test and development workloads are rapidly moving to the Cloud. If you and your team are not taking advantage of the Cloud for test and development you should consider doing so. You’ll rapidly benefit from increased agility and flexibility as you develop and test applications. ProfitBricks customers benefit from our price/performance leadership in the Infrastructure as a Service market – offering 2x the performance at 1/2 the price of the competition. Check out our 14-day trial or live demo today and discover how your team can benefit.

wireframe

Image via Flickr by baldiri

1. Moqups
Achieve flow with this web app for creating mockups, wireframes and interactive prototypes that look great onscreen and on paper, thanks to the Scalable Vector Graphics (SVG) technology.

Key Features:

  • 60+ handcrafted, crisp SVG stencils
  • Export as PDF (vectors) or PNG (pixels)
  • Connect your Dropbox & Google Drive accounts
  • Share your projects by email, Dropbox and Google Drive
  • Comprehensive icon library
  • Secure SSL communication

Cost:

  • Moqups is free for up to 2 projects
  • Premium plans start at $9/month

2. WireframeSketcher
sketcher

This wireframing tool helps designers, developers and product managers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s a desktop app and a plug-in for any Eclipse IDE.

Key Features:

  • Extensive library of UI controls
  • Interactive Prototypes
  • Flexible wiki formatting
  • Large set of vector icons or use your own images
  • Create reusable bits with Components
  • Storyboard use-cases
  • Full-screen presentation mode
  • Open, XML-based format

Cost:

  • Single-User License = $99
  • Multi-User License = Start at $89 per license

3. MockFlow
MockFlow is a full-featured wireframe software to design, collaborate user interface mockups for software and websites. An extensive set of editor functions, vast library of mockup components, icons and more, publishing capabilities and more, MockFlow is a comprehensive tool for any developer.

Key Features:

  • Work online or off with this hybrid program
  • Easy-to-use and sophisticated interface
  • Presentation mode to test wireframe interactions
  • Multiple master-page capabilities to avoid reworks
  • Built-in version history, check-in, check-out mockup revisions
  • Large library of mockup components
  • MockStore for extra elements & templates
  • Real-time design collaboration with team chat and built-in annotation options

Cost:

  • Basic – Free forever
  • Premium – $14 per month
  • Team Pack – $29 per month

4. Lumzy
lumzy

Lumzy is a quick prototyping and mockup tool for software designers and developers. As a mockup tool, you can use it to create a rough sketch of how the final website or application will look. Create a working simulation of your final product that your clients can actually interact with before moving on to the final development phase.

Key Features: 

  • Simple drag-and-drop functionality
  • Extensive component library
  • Easy sharing capabilities for client-team collaboration

Cost:

  • Sampler (10 tokens for $5)
  • Starter pack (30 tokens for $10)
  • Basic pack (50 tokens for $15)
  • Professional pack (95 tokens for $25)

5. Mockup Builder
Mockup Builder is a prototyping solution that helps design software or websites while reducing the time and cost spent on the negotiation stage.

 Key Features:

  • Draw a prototype of a site
  • Create prototypes for mobile appendices for smart phones
  • Breadboard models for desktop programs

 Cost:

  • Solo Plan – Starting at $ 7 a month
  • Premium Light Plan – Starting at $14 a month
  • Premium Pro Plan – Starting at $27 a month
  • Team Pro Plan – Starting at $99 a month

6. Appery.io
appery

Appery.io is the first mobile platform that offers a cloud-based rapid development environment integrated with back-end services and a rich catalog of API plug-ins that dramatically simplify integration with cloud services and enterprise systems.

Key Features:

  • Visual, drag and drop UI builder (HTML5, JavaScript, CSS, libraries such as jQuery Mobile, PhoneGap etc)
  • 3rd party REST API services, connect to any API
  • Out-of-the-box API Plug-ins to services such as Salesforce.com, Aetna CarePass, ESPN, AT&T and more
  • iOS and Android Binary build

Cost:

  • Basic – $30 a month
  • Standard – Starting at $30 a month
  • Pro – Starting at $57 a month
  • Team – Starting at $135 a month

7. Frame Box
Frame Box is an incredibly simple frame-sharing application. This tool is browser-based and  fantastic for creating resizable, easily adjustable wireframes on the fly.

Key Features:

  • Drag-and-drop layout system
  • Sketch-view, preview and edit modes
  • Built-in components to quickly create rough mockups
  • Generate a link for automatic sharing and collaboration
  • Read-only capability

Cost:

  • Free

8. Iphone Mockup
Lukas Mathis is a software engineer and user interface designer for the Swiss software company Numcom software. Mathis has created a number of online tools for UI design, among them iphonemockup,lkmc.ch, a collaborative UI mockup designer.

Key Features:

  • Illustration or Pencil mockup option
  • Simple drag-and-drop interface
  • Pre-loaded style components

Cost:

  • Free 

9. Fluid UI
Fluid UI

Fluid UI is a simple, user friendly, web-based design tool for prototyping mobile applications and enables you to easily create and test a working prototype within minutes.

Key Features:

  • Create low-fidelity and high-fidelity prototypes
  • Drag and drop interface with built in libraries to add pages, widgets, links and transitions
  • Ability to upload your own images
  • Save design patterns for re-use
  • No coding required
  • Preview and test prototypes on your mobile
  • Shareable online for quick feedback

Cost:

  • Free Forever 
  • Pay Monthly – Starting at $12 per month
  • Pay Yearly –  Starting at $120 per year

10. PencilProject
Pencil is an open-source GUI prototyping tool allowing developers to create mockups in popular desktop platforms. This on-premise tool is easy to download and allows for both online and offline use.

Key Features:

  • Easy GUI prototyping
  • Built-in shapes and components
  • Diagram=drawing support
  • Easy exporting to various formats
  • Inter-page linking

Cost:

  • Free

11. NinjaMock
NinjaMock offers a complete toolbox containing typical controls used in app and web design that you can use to quickly prototype apps for mobile devices, allowing you to create everything from simple wireframes to more advanced screen flows.

Key Features:

  • Wireframe editor with a library of icons and images
  • Real time team collaboration for internal/external members
  • Option to create projects and folders with varying user permissions

Cost:  

  • Personal – Free
  • Pro – $15 per month
  • ProPlus – $25 per month

12. DUB-DENIM
This is a system that helps web designers in the early stages of design. This tool has recently been updated to include PC tablet support and enhanced features. Downloadable and compatible with Windows, Unix, and Mac OSX.

Key Features:

  • Supports sketching input
  • Allows design at different refinement levels
  • Unifies levels through zooming

Cost:

  • Free

13. Naview
naview

Design and build navigation and test navigation usability with users using Naview, a fast prototyping tool created by, provided by Volkside Pty Ltd. This tool offers multiple visualization capabilities, easy taxonomy importing via spreadsheet or text files, and the ability to generate drop-down menus with zero coding.

Key Features:

  • Review and modify your navigation with an interactive interface
  • Test with users locally without distractions
  • Test with remote users using surveys
  • Visual survey results and analysis

Cost:

  • Free -2 navigations
  • Gold – 30 navigations for $119 per month
  • Silver – 20 navigations for $ 89 per month
  • Bronze – 5 navigations for $39 per month

14. iPlotz
Create clickable, navigable mockups and wireframes for prototyping websites and software applications with iPlotz. You can invite others to comment on the designs, and once ready, use built-in project management features to assign tasks and monitor development.

Key Features:

  • Works on Windows, Mac or Linux with flash enabled browsers
  • Drag and drop components onto a resizable page
  • Imbed links to other files or external web pages
  • Easy drag-and-drop functionality
  • Multiple export options
  • Seamless collaboration with interactive commenting and editing rights
  • Built-in project task management

Cost:

  • Free
  • Single User – $15 per month
  • Multi User – $295 per year for five users
  • Desktop – $75 perpetual

15. Gliffy
Gliffy makes creating professional-quality flowcharts and diagrams simple, intuiteively helping you turn complex information into attractive images everyone can understand. It works directly in your browser, so there’s no software to download.

Key Features:

  • Share collaborate with team members
  • Pre-built teamplates
  • Flowcharts, diagrams, technical drawings and more

Cost:

  • Free 30-day trial
  • Standard – $4.95 per month
  • Business – $9.95 per month

16. Creately
Launched in September 2009, Creately is a powerful online diagramming application with real-time collaboration. Create wireframes, flowcharts, UML diagrams, Network Diagrams, mind maps and more diagram types with amazing ease.

Key Features:

  • Powerful project-based collaboration
  • Full featured, intuitive interface
  • Smart diagrams suggest connections
  • One-click styling and built-in shape and component library

Cost:

  • Public – free up to five diagrams
  • Personal – $5 per month
  • Annual pricing: 5 Users-$249, 10 Users-$449, and 25 Users- $749

17. Cacoo
cacoo

Create a variety of diagrams with ease with Cacoo, a product of nulab. Site maps, flowcharts, mind maps, wire frames, UML diagrams and network diagrams are all streamline and simple to produce using Cacoo’s real-time collaboration mockup platform.

Key Features:

  • Wide variety of diagramming tools and types
  • Real-time collaboration
  • Multiple sheets work as backgrounds and layers
  • Full basic-drawing software capabilities
  • Unlimited action storage allows for unlimited undos – never lose your work

Cost:

  • Free
  • Plus – Starting at $4 per month
  • Business -Sstarting at $15 per month

18. Mockabilly
Mockabilly is an iPhone app prototyping tool for creating mockups in a few minutes. Create high-fidelity non-linear mockups with genuine iPhone behavior for the optimal mockup and usability testing experience.

Key Features:

  • Instant play mode to test your mockup – no deployment
  • Easily sync or upload designed screens
  • Create non-linear flows with touchpoints
  • Easily switch between edit and play modes

Cost:

  • Lite Version – Free
  • Full Version – $6.99

19. FlairBuilder
facebook
Creative interactive wireframes for both websites and mobile applications with FlairBuilder. This prototyping tool provides seamless feedback tools for easy collaboration with both team members and stakeholders.

Key Features:

  • Low-fidelity and high-fidelity in one tool
  • Create a quick prototype in minutes
  • Multiple iterations; easily switch gears midway through a project

Cost:

  • 1 User – $99 per year
  • Volume discounts apply for 5 users and up

 20. Serena Prototype Composer
Quickly and accurately simulate an application’s functionality and usability-without writing a single line of code. Prototype Composer is part of the Serena Software group of products, making it simple to collaborate with high-fidelity prototypes.

Key Features:

  • Simple, high-fidelity prototypes
  • Streamlines, straightforward interface
  • Navigation models with varying touch points bases on user type
  • Work straight to the coding process prototype with Serena Software products

Cost:

  • Community Edition – Free – ONE sample project and ONE user-define project
  • Professional Edition – $299 per year

21. Balsamig
Balsamig lets you add and edit UI wireframes directly from Google Drive. Iterate in real-time with your stake holders to move from design to development more quickly. Founded in 2008, Balsamig is a small company aiming to make software simpler.

Key Features:

  • Create new mockups directly from the “Create New” menu
  • Simply click to edit wireframes
  • Sketch-based wireframes allow stakeholders to focus on functionality

Cost:

  • 7-day Free Trial
  • Monthly Plan – $12 per month
  • Purchase a single user license for $89

22. Mockingbird
mockingbird

Mockingbird is a collaborative wireframing tool that lets you share mockups of your site or application quickly and easily. Mockingbird is among the first web-based wireframing tools, and the company strives to make it the “easiest and friendliest wireframing tool out there.”

Key Features:

  • Real-time collaboration
  • Drag and drop linking for clickable multi-page wireframes
  • Exports to PDF or PNG
  • Support for grids and columns (including 960gs and Blueprint)
  • Lots of layout aids, like smart alignment, snap-to-grid, and automatic resizing to take the pain out of wireframing
  • Built with Cappuccino – no Flash

Cost:

  • Personal – 2 active projects – $9 per month
  • Team – 10 active projects – $20 per month
  • Pro – 25 active projects – $40 per month
  • Unlimted – Unlimited active projects – $85 per month

23. HotGloo
With HotGloo, your web projects finally come to life in the most important stage, the wireframe/prototype process. Since HotGloo is an online application , you can even co-work with team members in real-time or send preview links to clients for gathering feedback and apply changes quickly without touching a line of code.

Key Features:

  • Collaborate in real-time with stakeholders
  • 50+ UI elements, including smart navbars and re-usable masters
  • Pre-built UI master library
  • Export to PDF or PNG formats

Cost:

  • 15 -day Free Trial
  • Group – 2 Projects / 10 Collaborators = $12 per month
  • Team – 5 Projects / Unlimited Collaborators = $24 per month
  • Agency – 20 Projects / Unlimited Collaborators = $49 per month

24. InVision
invision

InVision makes quick, yet impressive prototyping possible for a higher level of design. Built by designer, for designers, InVision offers tools for easily sharing single mockup or demo, or complex mobile application, with a variety of tools and sharing options for a seamless communication with key stakeholders.

Key Features:

  • Quicly link UX sketches, designs and wireframes
  • Present projects as a demo, load in a browser or SMS directly to a mobile device
  • Track team activities and monitor design and development progress

Cost:

  • Free – 1 active project
  • Starter – 3 active projects = $15 per month
  • Professional – unlimited projects = $25 per month
  • Team – unlimited projects, 5 users = $100 per month
  • Enterprise – unlimited projects, advanced features come with a free trial.

25. UXPin
UXPin’s experienced designers offer a complete tool kit of useful design elements and patterns for ease of use- even if you are not a skilled UX designer. Necessary templates for uploading UX and project files, such as Project Canvas, Project Kick Off, Business Model Canvas, Personas, and many more are all included in a seamless collaboration application.

Key Features:

  • Built-in library of UI elements
  • Optimized workbench with expansive workspace
  • Version control and iterations
  • Real-time collaborative design, editing and chat
  • Easy online and offline sharing capabilities
  • Intuitive commenting, inline annotations
  • Manage all project files from a single interface
  • Cloud- based app allows access anytime, anywhere

Cost:

  • Up to a 30-day free trial
  • Basic = $19 per month
  • Pro = $29 per month
  • Pro+ = $49 per month
  • Enterprise  – contact for more details

26. Proto.io
proto

Proto.io allows designers to create mobile app screens, apply screen transitions and define touch events for each design element on the screen. The company was built by a team of designers who struggled with the prototype process – and decided to make a tool that streamlines the process.

Key Features:

  • Interactive designs, including gestures, touch events, screen transitions and animations
  • Compatible with any device
  • Realistic UI components
  • Test prototypes directly on your mobile device
  • Share prototypes for immediate feedback
  • Publish and export to HTML

Cost:

  • Basic – 1 active project = Free
  • Freelancer = $24 per month
  • Startup = $40 per month
  • Agency = $80 per month
  • Corporate = $160 per month

27. Savah App
Savah App streamlines the app design process through their wireframing tool used to build high-fidelity prototypes without any coding knowledge and within a matter of minutes. The realtime collaboration features allows multiple team members to provide design feedback at the same time.

Key Features:

  • Design high-fidelity prototypes (including transitions, multi-gestures) for all mobile device types
  • No coding knowledge required
  • Test prototypes on smart phone or browsers
  • Collaborate through live feedback and transformation of comments into threaded discussions
  • Integration with third parties such as Trello or Slack

Cost:

  • Free Forever – one project
  • Starter – $9 per month, five projects
  • Pro – $25 per month, unlimited projects
  • Team – $49 per month, unlimited projects, five team members
  • Agency – $89 per months, unlimited projects, twelve team members

28. Web Site Wireframe Tool
This is a web-based tool for building web site wireframes in minutes. Completed wireframes are easily shared with collaborators via a simple link. A variety of drag-and-drop elements, tools and features make it simple to produce quick mockups for client feedback.

Key Features:

  • Drag and layer created elements
  • New version number for each iteration for comparison
  • Easily access and edit from any connection

Cost:

  • Free

29. Justinmind
justinmind

Justinmind creates products to build high-fidelity wireframes and prototypes for web and mobile apps. It creates, visualizes, and tests an HTML version of any application or dynamic website for optimized usability and functionality.

Key Features:

  • HTML wireframe generation with a single click
  • Widget libraries including predesigned icons, teamplates, and HTML and Flash code
  • Draw your wireframes and create a perfect simulation with a single application
  • Simulate state changes with conditional logic
  • Manipulate data, filter, and search within your prototype
  • Real-time data for forms

Cost:

  • Annual – $19 per user/month
  • Month-to-Month – $29 per user/month

Bottomline, developers love tools that make their jobs simpler. Once you find a tool that makes your life easier, you’re committed for life. Join our growing DevOps community at DevOps Central to participate in discussions and get access to dozens of tutorials like the how tos for modern software frameworks.

If you like this post, check out our Top 25 Collaboration Tools post or our 39 Data Visualization Tools for Big Data post.