SpyreStudios

Web-Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

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

March 3, 2010 by Joel Reyes 38 Comments

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.

Author: Joel Reyes

Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.

Filed Under: Resources, Tools, Usability

Comments

  1. Thomas Craig Consulting says

    March 3, 2010 at 3:48 pm

    Nice collection, only recognized a couple of these. Will have to check out some of the others.

  2. Cristian Pascu says

    March 3, 2010 at 5:21 pm

    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

  3. Ben Tremblay says

    March 3, 2010 at 8:26 pm

    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.

  4. Howard Smith says

    March 3, 2010 at 8:46 pm

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

  5. David McDonald says

    March 3, 2010 at 8:57 pm

    Surely Axure should be included in this list?

  6. Peter Severin says

    March 4, 2010 at 2:09 am

    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

  7. David says

    March 4, 2010 at 4:05 am

    Justinmind Prototyper is also missing! probably the most powerful wireframing tool I´ve try (efficient for dynamic & complex interactions websites & apps without coding)

  8. PelFusion says

    March 4, 2010 at 4:25 am

    thanks…i am trying Mockingbird and Pencil Project

  9. sule says

    March 4, 2010 at 5:29 am

    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!!

  10. Peter Severin says

    March 4, 2010 at 5:30 am

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

  11. Dave Jones says

    March 4, 2010 at 5:44 am

    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… ;-) ;-)

  12. Walker Studios says

    March 4, 2010 at 5:50 am

    Very interesting post. I must have a look into some of these to organise my work better!

  13. Natalia Ventre says

    March 4, 2010 at 11:55 am

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

  14. Lindsey says

    March 4, 2010 at 1:01 pm

    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.

  15. Mars says

    March 4, 2010 at 3:52 pm

    another great list, this will keep me busy again for the whole night

  16. Andrea says

    March 4, 2010 at 4:44 pm

    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

  17. Megan Holbrook says

    March 4, 2010 at 4:53 pm

    Another vote for Axure – the ability to construct online prototypes and develop the outlines for tech spec docs at the same time is useful.

  18. Gunter Brown says

    March 5, 2010 at 8:31 pm

    Our company use ForeUI (really amazing) to do all wireframing / prototyping works.

  19. Tony says

    March 10, 2010 at 12:48 pm

    After you’ve done some sketching or wireframing, turn it into a clickable prototype with http://connectasketch.com/

  20. Marcin says

    March 12, 2010 at 11:08 am

    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!

  21. Michael Locke says

    March 18, 2010 at 5:41 pm

    Great collection, thanks!

  22. Paul M says

    March 19, 2010 at 5:37 am

    Nice post… I’m not one for self promotion, but I’ve recently done some research into online wireframing tools and have post a matrix of features as well as my thoughts on what’s missing in these tools here:
    http://www.paulmiddlege.com/2010/03/online-wireframing-tools-comparison-and-whats-missing/

    Might be handy for those that found this post valuable!

  23. Doug says

    April 11, 2010 at 4:27 pm

    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.

  24. Brady Curbow says

    May 13, 2010 at 8:11 am

    Very nice list, Thanks!

  25. Tammy says

    June 21, 2010 at 12:57 pm

    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!

  26. Alex Cooper says

    July 3, 2010 at 2:06 pm

    Thanks for the info. Its a good list. I use Balsamiq almost every day and it has revolutionized I do mockups.

  27. Frank says

    July 7, 2010 at 6:15 am

    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?

  28. Chaz says

    August 24, 2010 at 4:52 pm

    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.

  29. Dan Moser says

    October 5, 2010 at 10:00 am

    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

  30. Chris says

    October 20, 2010 at 6:24 am

    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

  31. Stephan says

    March 8, 2011 at 2:08 pm

    This is a nice collection. Thanks!

  32. John says

    March 21, 2011 at 11:24 pm

    Nice list. Of course with millions of developers out there, everyone’s got their favorite. Mine? http://www.lucidchart.com . The real-time collaboration puts it over the top for me.

  33. Feng says

    May 23, 2011 at 8:12 am

    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.

  34. sandeep kumar says

    June 19, 2011 at 2:53 pm

    Thanks nice collections.I recently came to http://web-based-softwares.com, They have also nice collection of useful web based sofwates. you might like to check. There are hundereds such.

  35. brinda says

    July 7, 2011 at 3:50 pm

    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

  36. brinda says

    July 7, 2011 at 3:51 pm

    “Not sure if this link will get through but in case if you want to here is the link to mockuptiger
    mockups“

  37. brinda says

    July 12, 2011 at 11:26 pm

    “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

  38. john xie says

    April 30, 2020 at 8:45 am

    Hi there 🤠

    I’m John, co-founder/ceo of Taskade, a Y Combinator backed startup building a real-time organization and collaboration tool for remote teams.

    Give it a try instantly at https://taskade.com/new

    ⚡ Tasks Lists
    ⚡ Mind Mapping
    ⚡ Video Conferencing

    …all in one unified workspace.

    Hope to connect, stay safe! 

    John Xie
    Co-Founder, CEO — TASKADE 

Leave a Reply Cancel reply

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

Please prove you're human *

Search SpyreStudios

Web Design Jobs

Development & Programming Jobs

Graphic Design Jobs

Computer & IT Jobs

UX Design Jobs

LiquidWeb

Level up professionally!

Coursera - Hundreds of Specializations and courses in business, computer science, data science, and more

Envato

SpyreStudios © 2021