15 Quality Web-Based Applications to Create Mock-Ups and Wireframes

To effectively manage a project with very little mistakes, you must make it a priority to plan. Diving into the development process with not a single clue as to what elements go where or how certain aspects of a websites interface differ from one another is dooming yourself to hard-earned headaches.

For as long as humans have been able to hold a pen and a paper in hand, we have been prototyping and although different from now, “wireframing“. This dates back to thousands of years ago when architects and artists began converting their artwork into an actual physical presence.

This is to outline that we are no strangers to the planning, prototyping, and executing process. Essentially wireframing is the number one step you need to perform once you decide to make a website.

What are Wireframes, Really?

A wireframe in essence, is a visual representation, guide, and basic element structure of a websites interface design. Wireframes are usually the product of an idea that’s later reproduced on paper (or screen) so that they can preserve and maintain the consistency of visual similarities throughout a websites design. Not only that, but wireframing allows us to save valuable time and money. Deciding to create a website without planning, many times results in a very poorly functional interface. This will ultimately drive users away from your website, and tarnish the quality of your brand.

Below we’ve compiled great web-based applications to create mock-ups and wireframes. And even though these applications allow us to streamline our development process, it can sometimes be a much more effective technique to begin with a pencil and paper. Before computers, softwares, and websites, we were already developing designs by prototyping on paper. When I began designing mechanical and electrical parts for one of my previous employers, I was introduced early to planning and later designing them through a computer. Meanwhile some of my colleagues that had been doing the same job process before computers existed kept sketching out their projects on paper, and rarely referenced their computers. This didn’t mean that they couldn’t design on a computer better than I could, it just meant they preferenced the pencil and paper.

A large portion of designers prefer and begin their wireframing process on paper, for the most part, you can see the benefit in this because it is quick, straightforward, and best of all, free. While web-based applications can be relatively hard to interact with, may lead to a lot of wasted time, and may also reduce efficiency. There are pros and cons to either of the above, and many times a decision to utilize one or the other, is based on preference.

Tools and More Tools

Hot Gloo


Hot Gloo is an easy to interact with Flash web-based wireframing application. You can fully develop a websites prototype with ease, and functions such as drag and drop, preset elements, grids, layers, snap to grids and much more contributes to how easy it is to use. Once you sign-up you will also receive a custom Hot Gloo URL so that you’re able to share your mockups with anyone such as clients and colleagues. Apart from the URL the free account comes with the capability of sustaining one worker and a co-worker, anything over that is $14/month.

Mockingbird


Mockingbird is a popular tool for creating mockups and wireframes. It allows you to easily create, preview, link to one another, and share all of your mockups with whomever you choose. Mockingbird comes with beautiful features that include snap to grid, drag and drop functionality, unlimited page linking and much more tools that’ll make your development process run smoothly.

Pencil Project


This next tool is actually a very useful Firefox add-on that lets us make detailed diagrams and amazing user interfaces. The Pencil Project add-on comes with a variety of features such as multi-page documents, on-screen text editing, rich text support, background pages, the export of HTML, PNG and Openoffice formats.

ProtoShare


PhotoShare provides an easy to use and collaborative tool that allows the creation of dynamic projects requiring prototypes and wireframes. Doesn’t matter the size of your project, seems like PhotoShare is able to accommodate most of your needs. The user interface is subtle, doesn’t seem to be way too over crowded, and it gives you ample space to work.

Balsamiq


Balsamiq is an interactive wireframing tool that feels just like if you were drawing with a pen and paper, only a the web. Difference is with this tool you’ll have full control of elements allowing you to easily move or rearrange them. Avoiding massive pencil erasing marks on your paper that can cause confusion, this nifty tool will get the job done.

Flair Builder


FlairBuilder allows for rapid deployment of wireframes through the use of a cross-platform that houses various functions and useful features within a palette. This tool has what they call “built-in” comfort as you navigate through palettes and components swiftly. Their interface is drag and drop driven, has quick and easy preview options, and gives you a large space to design.

Cacoo


Cacoo is a great to work with online drawing tool that lets you develop various diagrams such as network charts, wireframes, and site maps. You can allow multiple users to access your prototypes and make changes or just simply view your progress, thus it ultimately makes a well collaborative tool as well. You can share your wireframes by email or by copy and pasting a code snippet and embedding them in webpages for everyone to see.

Serena: Prototype Composer


Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

MockFlow


MockFlow comes with an extensive online library of templates and presets that allow you to freely use them and improve the visual quality of your wireframes. MockFlow is free to use, however it’s premium version costs $59 per year (roughly $4.91/month) for an unlimited package that offers unlimited mock ups, collaborations, 500MB of storage, 30 revisions, export to PDF/PPT, real-time editing, team chat and more.

fluidIA


fluidIA is an emerging agile design tool for prototyping rich user interfaces. The big idea behind this experiment is whether we as interaction designers, IA’s, UX professionals and developers can create our own prototyping tool in an open way. fluidIA also provides speed, agility, amazing collaboration, and a rich interaction between the designer and the user interface.

Lumzy


Lumzy lets you create various prototypes of a website or an application that will function by adding events through your Lumzy control panel. This is a great tool that allows you to add interaction to a mockup, you will also get a hand drawn feel sketch as well. Create your mockups, share them with clients, edit with dynamic tools, and take advantage of the file versioning features as well.

GUI Studio Design


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.

iPlotz


iPlotz lets you create wireframes that are clickable and you can navigate through. You essentially create/re-create the experience of a real-live website or application. Once you’re wireframe is complete, you have the option of sending out invitations so that others can come and critique your design.

OmniGraffle


OmniGraffle can help you make eye-popping graphic documents quickly by keeping lines connected to shapes even when they’re moved, providing powerful styling tools, importing and exporting Microsoft Visio files, and magically organizing diagrams with just one click. Whether you need a quick sketch or an epic technical figure, OmniGraffle keeps it gorgeously understandable.

MockupScreens


MockupScreens is an interactive tool that lets you sketch screen mockups, showcase them, create a feedback system, and get the best results possible. Quickly visualize functions, embed them into your prototypes, and get a generalized or detailed idea of what your website or application will look like and how it will interact all before you even begin to code.

Your Turn To Talk

How do you create mock-ups and wireframes? I’m sure many of you start with a pen and paper, sketching ideas, but what tool(s) do you use? Please take a minute to let us know in the comments section below!

Our SY0-201 resources can provide guaranteed success in real exam. Download 70-680 dumps and 642-902 practice questions to kill the exam stress and complete your certification in days.

Comments

  1. says

    Hi there,

    Thanks so much for mentioning FlairBuilder. Your one paragraph review is really striking in its simplicity and depth. Thank you!

    And I see the inclusion of my desktop tool as being a little kind kick towards a better online presence. Although FlairBuilder already has an online viewer, I intend to move more of the workflow online and make it simpler for users to share their work with others.

    Cheers,
    Cristian

  2. Ben Tremblay says

    You know, I’ve ignored this stuff for almost a decade. Maybe a bit more, actually … bad experiences in the 90s.
    But the package that got me into it … and I got great success right off the bat … was http://foreui.com
    Maybe it’s because I was looking with fresh eyes, and it’s certainly because I didn’t have anything to compare it to (Thanks for this list, BTW.) but they got me to grab for my wallet.

  3. Howard Smith says

    Thanks for the collection. I think you missed Axure and ForeUI, both are very good tools for wireframing.

  4. says

    WireframeSketcher is another wireframe/mockup tool that should be present in this list. It’s main strength is that it integrates directly with an IDE like Aptana, Zend Studio, RadRails, MyEclipse or Flex Builder. The advantage of this approach is that you get for free other essentials like projects, version control and multi-platform support. Some other features that make WireframeSketcher stand apart are storyboards, master components and a very flexible wiki syntax. Find out more here: http://wireframesketcher.com

  5. says

    Very Nice list!!
    You could make a separation between free and premium onces and it would be eadier if the sites opened in a new screen!

    Cheers!!

  6. says

    Also take a look at WireframeSketcher wireframe/mockup tool. WireframeSketcher integrates seamlessly with Aptana, Eclipse, Flex Builder, MyEclipse, RadRails and Zend Studio.

  7. says

    It’s a nice list, and thanks for putting together. But what I would really have liked to have seen is a bit more comparison between the options.

    Difficult, I know, since most of these are subscription based services – perhaps if they were to offer you free access… ;-) ;-)

  8. says

    Flair Builder and MockFlow are both very good for web design, some other apps are more oriented to software development. I’m usin MockFlow right now, it’s updated on a regular basis and now it also has an offline mode (an air app).

  9. Lindsey says

    I cannot take seriously any wireframing tool that uses Comic Sans in its interface. I can’t stomach looking at it for longer than 3 seconds.

  10. says

    Hi Joel,

    Thank you kindly for including ProtoShare in your list! I agree with you that in starting any type of wireframing process you should sketch on paper. Sketching with the hand allows your brain to think and flow freely prior to sitting down at a computer.

    As you know, and many people are learning, there are a lot of tools out there to wireframe and prototype. The key is determining what your needs or the project’s needs are, finding the apps that fit those needs, and trying each one of them out. ProtoShare, as well as many others on this list, offers a free trial to do just that. Working in the app and finding what best suits your needs will help you determine the right fit.

    As a guide, ProtoShare is great for building, sharing, and commenting on clean-lined wireframes, from interactive grey-boxes to full-blown prototypes with the use of states. You can create templates/masters to reuse work, pull in live views, export to HTML, and even use code to create your own custom widgets.

    If you have additional feedback you would like to share, feel free to contact me directly.

    Nice post!

    Cheers,
    Andrea @ProtoShare

  11. says

    Hello Joel,

    please take a look at JustProto.com. It’s an online prototyping tool – very fast and easy to use. Maybe you’d like to include us in your future articles… :)

    Best wishes!

  12. says

    Thanks. This was a very useful list for me and I’m slogging my way through comparing them all, but this gave me a great headstart to finding my way.

  13. says

    Great article. I also start out with paper and pencil- thought it was just because I was old school! There is new stuff here I need to chech out. Thanks!

  14. says

    Nice post. I’m not familiar though with some of these tools listed but I am going to configure it out later tonight. Will this be useful for beginners just like me?

  15. says

    Great list here – though I am surprised not to find http://creately.com here on this list. Its a great web app for creating mockups and wireframes. The best part about it is the smart shapes like Tabs, Tables, etc that can be dynamically customised to include additional row by simply typing in a new row of text. Love it.

  16. says

    Well, while it is true that Justinmind Prototyper is not Web-based, we are about to launch an online service, Justinmind UserNote, that lets you publish your interactive prototypes in order to share and comment them with other people, either your clients or your team. Another great point is that it lets you integrate your prototypes with remote usability testing tools in order to perform your tests.Nice, huh?
    Curious? Check it here: http://bit.ly/bao3WC

    Cheers,
    Dan
    @Justinmind

  17. says

    Nice collection. To bad I don’t recognized most of them but its a good opportunity to try them. I think I ‘ll start with Protoype Composer. Thanks for sharing

  18. says

    One more addition to this very nice list: App Sketcher (http://www.appsketcher.com) creates interactive web prototypes with real web controls such as HTML elements, jQuery components, Google Maps etc. It brings wireframing one step further to let users experience your design.

  19. brinda says

    MockupTiger is a good html5 wireframe, you can host it on your domain, desktop, switch between hand drawn look, change fonts and prototype dashboard mockups with data

  20. brinda says

    “Hi all,
    Can I request you to consider MockupTiger in your review process. It is a great new web application designed using HTML5. You can use it on desktop or host it on your domain/intranet. It is the only tool allows to prototype dashboard charts with actual data (not just static images) and contains a library of charts. Choose between hand drawn look or normal, choose your own font and skin color or draw color.”

    Brinda

Trackbacks

  1. 15 Quality Web-Based Applications to Create Mock-Ups and Wireframes…

    For as long as humans have been able to hold a pen and a paper in hand, we have been prototyping and although different from now, “wireframing“….

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *