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.
Image via Flickr by baldiri
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.
- 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
- Moqups is free for up to 2 projects
- Premium plans start at $9/month
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.
- 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
- Single-User License = $99
- Multi-User License = Start at $89 per license
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.
- 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
- Basic – Free forever
- Premium – $14 per month
- Team Pack – $29 per month
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.
- Simple drag-and-drop functionality
- Extensive component library
- Easy sharing capabilities for client-team collaboration
- 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.
- Draw a prototype of a site
- Create prototypes for mobile appendices for smart phones
- Breadboard models for desktop programs
- 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
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.
- 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
- 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.
- 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
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.
- Illustration or Pencil mockup option
- Simple drag-and-drop interface
- Pre-loaded style components
9. 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.
- 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
- Free Forever
- Pay Monthly – Starting at $12 per month
Pay Yearly – Starting at $120 per year
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.
- Easy GUI prototyping
- Built-in shapes and components
- Diagram=drawing support
- Easy exporting to various formats
- Inter-page linking
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.
- 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
- Personal – Free
- Pro – $15 per month
- ProPlus – $25 per month
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.
- Supports sketching input
- Allows design at different refinement levels
- Unifies levels through zooming
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.
- 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
- Free -2 navigations
- Gold – 30 navigations for $119 per month
- Silver – 20 navigations for $ 89 per month
- Bronze – 5 navigations for $39 per month
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.
- 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
- Single User – $15 per month
- Multi User – $295 per year for five users
- Desktop – $75 perpetual
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.
- Share collaborate with team members
- Pre-built teamplates
- Flowcharts, diagrams, technical drawings and more
- Free 30-day trial
- Standard – $4.95 per month
- Business – $9.95 per month
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.
- Powerful project-based collaboration
- Full featured, intuitive interface
- Smart diagrams suggest connections
- One-click styling and built-in shape and component library
- Public – free up to five diagrams
- Personal – $5 per month
- Annual pricing: 5 Users-$249, 10 Users-$449, and 25 Users- $749
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.
- 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
- Plus – Starting at $4 per month
- Business -Sstarting at $15 per month
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.
- 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
- Lite Version – Free
- Full Version – $6.99
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.
- Low-fidelity and high-fidelity in one tool
- Create a quick prototype in minutes
- Multiple iterations; easily switch gears midway through a project
- 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.
- 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
- Community Edition – Free – ONE sample project and ONE user-define project
- Professional Edition – $299 per year
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.
- Create new mockups directly from the “Create New” menu
- Simply click to edit wireframes
- Sketch-based wireframes allow stakeholders to focus on functionality
- 7-day Free Trial
- Monthly Plan – $12 per month
- Purchase a single user license for $89
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.”
- 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
- 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
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.
- 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
- 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
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.
- 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
- 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.
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.
- 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
- Up to a 30-day free trial
- Basic = $19 per month
- Pro = $29 per month
- Pro+ = $49 per month
- Enterprise – contact for more details
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.
- 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
- 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.
- 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
- 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.
- Drag and layer created elements
- New version number for each iteration for comparison
- Easily access and edit from any connection
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.
- 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
- 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.