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.
Nice collection, only recognized a couple of these. Will have to check out some of the others.
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
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.
Thanks for the collection. I think you missed Axure and ForeUI, both are very good tools for wireframing.
Surely Axure should be included in this list?
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
Justinmind Prototyper is also missing! probably the most powerful wireframing tool I´ve try (efficient for dynamic & complex interactions websites & apps without coding)
thanks…i am trying Mockingbird and Pencil Project
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!!
Also take a look at WireframeSketcher wireframe/mockup tool. WireframeSketcher integrates seamlessly with Aptana, Eclipse, Flex Builder, MyEclipse, RadRails and Zend Studio.
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… ;-) ;-)
Very interesting post. I must have a look into some of these to organise my work better!
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).
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.
another great list, this will keep me busy again for the whole night
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
Another vote for Axure – the ability to construct online prototypes and develop the outlines for tech spec docs at the same time is useful.
Our company use ForeUI (really amazing) to do all wireframing / prototyping works.
After you’ve done some sketching or wireframing, turn it into a clickable prototype with http://connectasketch.com/
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!
Great collection, thanks!
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!
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.
Very nice list, Thanks!
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!
Thanks for the info. Its a good list. I use Balsamiq almost every day and it has revolutionized I do mockups.
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?
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.
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
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
This is a nice collection. Thanks!
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.
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.
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.
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
“Not sure if this link will get through but in case if you want to here is the link to mockuptiger
mockups“
“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