Join Quertime on Facebook!

37 Best Wireframing, Prototyping and Mockup Tools for Web Design and Planning

Filed under Web Design

The process of wireframing plays an important role in any web projects especially in the initial stage of the development. It requires web designers and developers to define a skeletal outline of page elements such as header, navigation bar, content area and footer. Designers should also illustrate how to respond to any interactions from a user. This makes web design more enjoyable.

best_wireframing_prototyping_mockup_tools_for_web_design_planning

Here’s a roundup of 37 useful wireframing, prototyping and mockup tools for all areas of design including web pages, software programs and mobile apps. These tools can definitely be your time saver for any planning, sketching and collaborating jobs.

Balsamiq Mockups
Balsamiq Mockups is another wireframing tool for web designers and developers. It’s Import and Export features allow you to integrate with other versions of Mockups. You can load multiple mockups files, use keyboard shortcuts and more.

Axure RP
Axure RP is the standard in interactive wireframe software and gives you the power to quickly and easily deliver much more than typical mockup tools. It allows you to generate an interactive HTML website wireframe or UI mockup without coding.

Gliffy
Gliffy.com is a web-based diagram editor. It allows users to create and share flowcharts, network diagrams, floor plans, user interface designs and other drawings online.

Omnigraffle
Omnigraffle is a diagramming, charting, and visualization software for Mac OS X. It’s designed to handle everything from diagrams, process charts, and website mockups, to page layouts as well as map graphics.
omnigraffle_best_wireframing_prototyping_mockup_tools_for_web_design_planning

Mockflow
MockFlow is a full featured wireframe software to design, collaborate user interface mockups for software and websites. It lets you instantly share your UI design with your team and strategize with the built-in SiteMap Visualizer.

Cacoo
Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts. Cacoo can be used free of charge.
cacoo_best_wireframing_prototyping_mockup_tools_for_web_design_planning

InVision
InVision’s prototype tool lets you create interactive wireframes and high-fidelity prototypes. It allows you to share your work and get instant feedback right on-screen.
invision_best_wireframing_prototyping_mockup_tools_for_web_design_planning

Mockingbird
Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

Creately
Creately is a powerful online diagramming application built for project teams. It allows you to create wireframes, flowcharts, UML diagrams, Network Diagrams, mind maps and more diagram types with ease.
creately_best_wireframing_prototyping_mockup_tools_for_web_design_planning

Pencil Project
The Pencil Project’s unique mission is to build a free and open-source tool for making diagrams and GUI prototyping that everyone can use.

HotGloo
HotGloo lets you create and share interactive website and webapp wireframes. It helps you visualize planning processes or testdrive interactions very easily.

Justinmind
Justinmind Prototyper is an authoring tool for software prototypes and website wireframes. It offers capabilities typically found in diagramming tools like drag and drop placement, resizing, formatting and export/import of widgets.

ProtoShare
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.

Pidoco
Pidoco is a web-based prototyping software for rapidly creating clickable wireframes and UI prototypes for web, mobile and enterprise applications. It’s easy to use with smart sharing and collaboration features, a convenient usability testing module and much more.

Tiggzi
Tiggzi lets you build apps for the mobile web, as well as native iOS and Android apps without any programming knowledge. However the service is meant for more advanced users who can use it to design complex apps that can hook into any REST API on the net.
tiggzi_best_wireframing_prototyping_mockup_tools_for_web_design_planning

LovelyCharts
Lovely Charts is a diagramming application that allows you to create professional looking diagrams of all kinds, such as flowcharts, sitemaps, business processes, organisation charts, wireframes and many more.

Lumzy
Lumzy is a quick mockup creation and prototyping 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 like. Prototyping extends this by adding event based functionalities.

iPlotz
iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications. Users can create a project, add wireframe pages with design components and discuss their creations with others.

Jumpchart
Jumpchart is a simple online collaborative content wireframe tool for helping you plan websites. The app allows you to create pages and subpages enabling you to quickly sketch out the hierarchy of your site.

Serena Prototype Composer
Serena Prototype Composer helps you quickly and accurately simulate how an application will look and function without writing any code. Instead of endless text entries, complex data hierarchies, or technical UML diagrams, Serena Prototype Composer makes it easy to collaborate on requirements by building simple, high fidelity prototypes that look like the real thing.

FlairBuilder
FlairBuilder is a cross-platform prototyping tool that helps you create interactive wireframes and prototypes easier. It simulates a rich set of interactions with common actions such as popups, show/hide, move and resize components, and much more.
flairbuilder_best_wireframing_prototyping_mockup_tools_for_web_design_planning

Mockup Builder
Mockup is prototyping software that allows you to make a prototype of a site. It has all necessary tools for giving the original look to appearance of websites. Numerous elements in UI promote development of ideas of modernization.

Microsoft Visio
The advanced diagramming tools of Visio help you simplify complexity with dynamic, data-driven visuals and new ways to share on the web in real time. It allows you to build your diagram with professional-looking templates and modern, pre-drawn shapes. Then, easily link your diagram to popular data sources (such as Excel).

Wirify
Wirify bookmarklet lets you turn any web page into a wireframe in one click. It lets you focus on page structure by hiding the content, and analyze page layout to aid learning and teaching.

iPhone Mockup
With iPhone Mockup, you can either choose the Pencil styled editor or the Illustration editor. Both are easy to use apps that allow you to create your own iPhone mockups easily.

WireframeSketcher
WireframeSketcher is a software tool that helps product managers, designers and developers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s standalone software and a plug-in for any Eclipse IDE.
wireframesketcher_best_wireframing_prototyping_mockup_tools_for_web_design_planning

GUI Design Studio
GUI Design Studio is a specialised software design tool for anyone involved in application user interface design, including user experience designers, business analysts, developers, project managers and consultants.

JustProto
Justproto creates prototypes of desktop applications and networks. It helps users manage information flow making the whole process of projecting much simpler. Each application being created is described in detail on one, dedicated page.

fluidIA
fluidIA is an emerging agile design tool for prototyping rich user interfaces. It allows for rapid refinement and exploration of concepts using an object-oriented approach to design.

ForeUI
ForeUI is an easy-to-use UI prototyping tool, designed to create mockup, wireframe, prototypes for any application or website you have in mind. With ForeUI, your prototype project will be skinnable. You can easily change the look and feel of your prototype by simply switching the UI theme.

Frame Box
Frame Box is a lightweight online tool for creating and sharing mockups (wireframes). You can create your mockup or prototype easily by using its drag and drop interface.
frame_box_best_wireframing_prototyping_mockup_tools_for_web_design_planning

Napkee
Napkee lets you export Balsamiq Mockups to HTML/CSS/JS and Adobe Flex 3 at a click of a button.

Naview
Naview helps you to design and build navigation prototypes quickly and test the usability of your navigation with users. It is made specifically for user experience and information architects, business analysts and web designers who design large website structures.

Origramy
My.origramy is online service helping you create complex diagrams, schemes, presentations, charts, graphs fast. It uses flash technology to help reach all pluses of vector technique.
origramy_best_wireframing_prototyping_mockup_tools_for_web_design_planning

Mockabilly
Mockabilly is an iPhone App for creating quick and easy mockups for iPhone, iPod touch and iPad.

Simulify
Simulify is a web and desktop-based application to build interactive prototypes, wireframes and mockups. It offers collaboration features, and lets you share your designs online with your team easily.

CogTool
CogTool is a general purpose UI prototyping tool. It automatically evaluates your design with a predictive human performance model (a “cognitive crash dummy”).

DENIM
DENIM is a system that helps web site designers in the early stages of design. It supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.

(Image Source: Flickr.com)

Author: Jules, Quertime Editorial

Founder of Quertime.com. Connect with him on Facebook, follow him on Twitter or circle him on Google+.

Tags: , , ,

  • Pawel

    Missed UXPin.com on the list above :)

  • Pingback: 37 Best Wireframing, Prototyping and Mockup Tools for Web Design and Planning » Web Design()

  • Pingback: Tweet-Parade (no.18 Apr-May 2012) | gonzoblog.nl()

  • http://blog.dreamcss.com/design-tool/wireframing-and-mockups-tools/ Raj

    These are great, always nice to see how other people do their wireframes. Thanks!

  • Carolyn

    Great tools – a couple more worth looking it: Apple Keynote or PowerPoint (with Keynotopia templates). Same company that has Axutopia templates for the Axure RP tool mentioned above – they’re real time savers for prototyping mobile, desktop, and web apps :) 

    I love Axure but the price point can be restrictive to some. Started out with Keynote (only $20) and came to love the ease of use and you can create high fidelity prototypes really fast with it. Axure has got a more steep learning curve for non designers like me, but it might be worthwhile to learn for people who do more UX projects (or already know the tool).

  • http://www.appmockuptools.com/ App Mockup Tools

    Wow a long and great list. I would love to add App Mockup Tools to it. http://www.appmockuptools.com Clickable interactive and completely customizable iOS GUI elements.