Top 10 Prototyping, Wireframing and Mockup tools



Prototyping (wireframing, mockup) tools help to design User Experience (UX) interface for websites, software, mobile apps. These tools contain a library of specific UI-elements and graphical editor for their combination.

See also: Diagramming software, Mind Mapping software
1
Mockups really shines during the early stages of designing a new interface. Mockups offers the same speed and rough feel as sketching with pencil, with the advantage of the digital medium: drag & drop to resize and rearrange elements, make changes without starting over, and your work is clear enough that you'll make sense of them later.
2
Create Prototypes of Websites & Apps Without Coding. Axure RP gives you the wireframing, prototyping and specification tools needed to make informed design choices, persuade any skeptics, get your design built to spec... and maybe win a few fans along the way. Choose the Standard edition for prototyping or go Pro to add documentation and collaboration features.
3
OmniGraffle can help you make eye-popping graphic documents—quickly—by providing powerful styling tools, keeping lines connected to shapes even when they’re moved, and magically organizing diagrams with just one click. Create flow charts, diagrams, UI and UX interactions, and more. Whether you need a quick sketch or an epic technical figure, OmniGraffle and OmniGraffle Pro keep it gorgeously understandable.
4
MockFlow WireframePro is a web-based tool to design and collaborate user interface blueprints for websites and apps. Its helps to visualize the website's interface, navigation and structure in short time. With web and desktop clients, you can design seamlessly from anywhere & even with No net-connection. Organize pages with sitemaps and define links to present a clickable prototype.
5
UXPin is the UX Design Platform that gets it right. Inspired UX Design is tough with uninspired User Experience Design Tools. That's why UXPin is handcrafted to be robust & elegant.
6
InVision lets you transform your designs into beautiful, interactive web & mobile mockups and prototypes. Upload your designs and quickly turn them into clickable, interactive prototypes complete with gestures, transitions & animations. Send a link to open designs in a browser or on a mobile device, or present them in real-time using our LiveShare presentation tool that revolutionises the design meeting.
7
HotGloo lets you create and share interactive website and webapp wireframes. Wireframe in real-time with your team to get work done even faster and communicate with your co-workers via the built in chat function to avoid distraction. Good UX is all about interactions. Link elements to pages in your sitemap or set up different user scenarios with states, viewstacks and much more.
8
Create fully-interactive high-fidelity prototypes in minutes that look and work exactly like your app should. Turn your wireframes and mobile mockups into amazing interactive prototypes. Filled with rich media, animations and touch events. Swipe, tap, rotate and examine your app inside out the same way your end user will. Share your prototype with colleagues and friends to collaborate and review.
9
Fluid UI helps you prototype Android, iPhone, iPad or Windows 8 mobile apps with our custom libraries, or upload your own images for pixel perfect mobile apps. Preview your mockup directly in your browser or install the Android or iOS apps to test directly on your device. Share the mockup with clients, stakeholders and users and get invaluable feedback long before writing a single line of code.
10
ProtoShare is an easy-to-use, collaborative prototyping tool that helps teams visualize requirements with website wireframes and interactive prototypes while working together in real-time. Start creating mockups, website wireframes and prototypes today. No credit card required.
11
Moqups is a nifty HTML5 App used to create wireframes, mockups or UI concepts, prototypes depending on how you like to call them.
12
WireframeSketcher is a wireframing tool for creating wireframes, mockups and prototypes for desktop, web and mobile apps.
13
Flinto makes it quick and easy to create prototypes that look just like the real thing. And Flinto doesn’t disrupt your current workflow because it uses the screens you’ve already designed. Read on to learn how Flinto works. Link your screen designs together in a completely visual, intuitive way. You might even say it’s fun. Iterate by dragging new screens on top of old ones. Screen gets replaced, links stay put. Hold option while hovering over a screen and links are drawn automatically.
14
Framer is a new creative tool to build interaction and animation prototypes. Connect pixels to behavior and discover exciting new ways of interaction design.
15
Pixate empowers you to create sophisticated animations and interactions that come to life through 100% real, native iOS and Android prototypes—from design to prototype, without the code. With Pixate, building prototypes is simple and visual. No complex animation frameworks. No clunky simulation tools. Simply an intuitive design tool that empowers you to communicate and iterate ideas seamlessly and visually.
16
Pixelapse - Visual version control for designers. Pixelapse works with the existing tools you use. Every design iteration is automatically backed up as you work. No complicated interface. No commands to learn.
17
LayerVault - Simple version control for designers. Design without fear. Trusted by thousands of designers and trillions of pixels, LayerVault is the best way to organize, store, version, present and collaborate.