Seven website mockup tools

I am working on a number of website projects right now. My mission is to banish ‘lorem ipsum’ by working text into page designs before development starts. (To find out why, read my article: Want a good website, on time? Prioritise content)

I wanted to find a tool that would let me create website mockups quickly and try out different combinations of copy and layout.

Eventually, I settled on Balsamiq Mockups, which is an awesome tool. The rest of this article describes the different alternatives I considered and concludes with a detailed review of Balsamiq.

Denim

Denim - sketch-based UI design

Denim takes sketch-based approach which seemed a bit too low-fidelity for my purposes.

Protoshare

Protoshare online site prototyping

Protoshare is an online ‘Software-as-a-Service’ tool that lets you build high-fidelity, interactive site mockups in collaboration with other people, such as clients or graphic designers. At first, I thought this was the system for me. I really liked the ability to export designs to Word documents and the way that collaborators could work together on a single design. However, because it can create mockups that appear almost exactly like real sites, I felt the temptation to over-polish my mockups. Also, one of my designers refused to work with it. Being web-based it lacks that immediate responsiveness that is necessary for brainstorming. And, finally, the cost (£29/month) which I paid for several months, seemed a bit excessive for something I was using for a day a month. So, Protoshare is not for me but it is an excellent tool

Pencil

Pencil Project mockup

The Pencil Project is a free open tool that builds on the Firefox web browser. Amazingly, it turns it into a fully-featured GUI prototyping tool. It goes beyond website prototypes and lets you build all kinds of UI mockups. It includes common widgets for Windows and other OSs. It can produce pretty slick mockups and you can’t beat the price. However, I felt that it was a little too skewed towards UI prototyping than web page mockups for my purposes.

Serena Prototype Composer

Serena Prototype Composer

Whoah! Serena Prototype Composer looks awesome and it’s free but it probably best for business analysts in Accenture who are designing complex business workflows and trying to implement them in software. Not for me.

Caretta GUI Design Studio v3

Caretta GUI Design Studio v3

GUI Design Studio has lots of features for prototyping complex user interface stuff. The big draw back? Price. It costs $499 for a single-user licence.

Templatr

image

Templatr is a simple online tool that lets you build WordPress blog mockups quickly online. This could be a very useful tool for some of the projects I am working on but it requires the user to know a lot of CSS. This means it is a useful resource for WordPress designers but not really a tool for rapid mockups.

Balsamiq

Balsamiq Mockups website prototyping

At just $79, Balsamiq Mockups is the cheapest of the commercial products I looked at. There is also a free trial version which you can use to evaluate it. It plugs into Confluence, JIRA and XWiki but I use it as a standalone desktop application. There are several features that make it effective for my work:

  • When you load the program, it starts with the thing you were last working on. This is a neat time-saving feature.
  • Everything looks hand-sketched, which I didn’t like at first. However, it’s grown on me. Part of the value is that nobody is focused on making the mockup ‘look great’. It focuses attention on the copy (which is my schtick) and the layout.
  • It’s very easy to drag and drop common design elements onto the page, such as tabbed menus, calendars etc. In fact, most of the stuff you need is built in. This goes way beyond the usual buttons and boxes that most mockup tools provide.
  • There are tools to create an iPhone mockup which will come in useful later
  • You can link different page mockups together using buttons and so on
  • You can work on multiple pages at once and flip between them using Excel-like tabs
  • The Mockups To Go website has lots of downloadable mockups that you can use as a starting point for your own designs. For example, it has a Twitter and a Google mockup.You can see more examples at Balsamiq’s website.
    Twitter mockup in Balsamiq Google mockup in Balsamiq

It would be nice to have a text tool that let you enter styled text without using markup. Balsamiq uses things like *asterisks* to indicate bold text. I’d prefer a little editor. But this is pretty much my only niggle.

I use Balsamiq almost daily now and I highly recommend it. It lets me concentrate on copy and layout not on technical details and yet I can share the results with designers and programmers and they can see exactly what I am trying to achieve. I can mockup a page in minutes and then tinker with it for hours. It’s painless, intuitive and responsive. It’s a bit like going back to the first Mac I had and using MacDraw and MacPaint – just straightforward and easy to use.

, , , ,

52 Responses to Seven website mockup tools

  1. Peter May 25, 2009 at 7:12 am #

    Hi Matthew

    Nice sum up balsamiq is a really nice tool.

    We are web development company and use prototyping on all projects we do. We created our own tool that we use with our clients and released it to the world in January (http://justprproto.com).

    I would appreciate it if you checked our tool.
    You can try it for FREE (without credit card) at http://justproto.com

    Your feedback will be greatly appreciated! (you can contact me for extended 60 days trial if needed)

  2. Cristian Pascu May 26, 2009 at 8:21 am #

    Although is perfectly fine in the early stages of user interface design to only sketch ideas, at a certain point it becomes necessary to prototype more details, at a finer grained level and with a little bit more precision.

    I hope you don’t mind if I point you to this prototyping/wireframing tool called FlairBuilder that does that, namely, wireframes with interactivity built in. You have a set of fully functional components that actually work: buttons, links, tabs, drop-down menus etc. You could then capture lots more requirements when the right time comes.

    Cheers,
    Cristian

    • Paulik November 19, 2011 at 10:54 am #

      Is there a reason why you did not mention that FlairBuilder is made by YOU, Cristian?
      It is not a nice thing to do…

  3. Richard June 3, 2009 at 3:04 am #

    Matthew,
    Thanks you for another terrific post. Timely too. This is the bane of my existence. A company will spend 10,000.00 on a significant copy project and nothing on design/layout of their poorly designed, utterly confusing websites. Here’s a question for anyone who might want to take a crack at an answer: How do you convince someone that their design work is awful?

  4. Peter Severin June 4, 2009 at 10:02 am #

    Also take a look at WireframeSketcher. It’s not unlike Balsamiq but with a twist that it’s an Eclipse plugin. If you are an Eclipse/MyEclipse/Aptana than this plugin should be an obvious choice.

  5. Andrea June 15, 2009 at 8:22 pm #

    Hi Matthew,
    Thanks again for the feedback regarding ProtoShare – and including us in your list! We are always working on advancing the product, so feedback is helpful.

    Richard, good question! I used to be an agency project manager and we ran into the design issue quite often – this is why prototyping to come to certain realizations is so important. A couple things I always asked the client was, “Does this design reflect how you want your company to be portrayed?” and “Share this with someone (like a family member) outside the office. Can they can easily navigate through the site?” If the answer is “no” to either question, then you can show them 2 examples of great websites and why their designs are better. If it’s a designer you’re dealing with, ask them if they would add that design to their portfolio. I find these questions help people work through what they are actually looking for in a website.

    Thanks!
    Andrea

  6. Lorraine January 21, 2010 at 1:57 pm #

    I will definitely check out Balsamiq. It certainly beats the heck out of my current high-tech wire-framing tools: a 20′ roll of butcher paper and pack of multi-colored pencils. And at $79, it’s only slightly more expensive…

    Bookmarking this post–thanks!

  7. Cron February 9, 2010 at 7:17 am #

    Thanks. I need to do some quick mockups for tomorrow’s class, and you just saved me hours of finding the right tool.

  8. Chris Chatt May 7, 2010 at 9:24 pm #

    Awesome post.. I had a friend recommend balsamiq but I am deffinately going to give some of these other apps a try before I purchase.

  9. Vladimir Friedman June 21, 2010 at 7:00 pm #

    I’ve recently discovered WireframeSketcher. The idea to integrate a mockups tool into Aptana is genius. You can find it here: http://wireframesketcher.com

    • Matthew Stibbe June 22, 2010 at 8:08 am #

      I’ll check it out. Thanks.

    • Nav October 20, 2010 at 4:00 pm #

      Thats why I am here. :P

  10. Jason Stevens July 20, 2010 at 11:46 pm #

    We’ve been using Balsamiq for a while now, and honestly it lets you create a mockup of a site in minutes. Its fantastic for what we do, when we want to sit down with a client and flesh out the aspects of a website. I am a little slow on the uptake in describing to the designers what I want a site to look like.. I just export my mockup to a PNG.. and bam! done.

  11. Andrew Carter September 17, 2010 at 4:49 pm #

    Whenever I’m coding a wireframe after the initial mock up this thing comes in handy like crazy http://andrewroycarter.com/web-development/great-tool-for-placeholder-or-mock-up-images-when-designing-developing-a-website/

  12. Jasmit Singh September 25, 2010 at 5:13 am #

    Try out http://www.lumzy.com.

    It has a lot of features that you have mentioned for Balsamiq and many more.

    Great post – thanks for the comparison.

  13. Max October 1, 2010 at 4:44 pm #

    Good list!

    Try out Tiggr: http://tiggr.exadel.com. You get real application prototyping with Web Preview (HTML/JS/CSS generation), collaboration and sharing.

  14. Alice November 3, 2010 at 1:07 pm #

    HI Matthew,

    Just wanted you to know how helpful this post was for me. I am trying to evaluate mock-up tools for designs. You really cut to the chase and helped me make a good decision. Thanks for your time and expertise.

    Alice

  15. John November 11, 2010 at 10:12 pm #

    Great list of tools – may have to check a couple of these out. I’m using LucidChart – http://www.lucidchart.com – right now and am pretty pleased there.

  16. Vanina November 19, 2010 at 7:38 am #

    Hello Matthew,
    It is a great list, maybe you could be interested to participate to this collaborative comparison of mockup and wireframing design tools (you can rate or vote for the best ones):

    http://socialcompare.com/en/comparison/mockup-and-wireframing-design-tools-cq7awx5

    This new platform is like a “wikipedia of comparisons”, you can compare everything and embed the table on your blog.
    It can be also useful for other subjects..

    Vanina

  17. Daniel McQuillen January 6, 2011 at 5:36 pm #

    When you want something really, really simple and quick (as in “give me two minutes to show you what I mean”), you might try http://www.simplediagrams.com

    Thanks Matthew for putting this list together.

    • Matthew Stibbe January 7, 2011 at 12:10 am #

      Thanks. It looks great and I’ll give it a try. Matthew

  18. Me March 2, 2011 at 2:53 pm #

    You all should try using JustProto. It’s sooooo easy to use! and we can colaborate with partners in USA, Japan and Russia. Try it yourself.

  19. Mike May 24, 2011 at 2:57 am #

    Nice resource site. Thanks for going to all the trouble of putting the info together. I’m going to try some of these sketch programs.

  20. Dale June 28, 2011 at 4:13 pm #

    Picodo is also an awesome option. Too many features for me but at a great price…31days free then $9/mnth for a single user.

    http://www.picodo.com

  21. Julie Z July 17, 2011 at 2:55 pm #

    AppSketcher is fairly new. It is fast and easy to use – all drag and drop, without coding. It provides rich interaction instead of static images. Best of all, it generates HTML and Jscript so you can run instantly in any browser. Please check out and tell us what do you think.

  22. Daniel M. September 15, 2011 at 11:40 pm #

    I’ve tried all these applications (okay, I exaggerate) and I chose WireframeSketcher. After trying this software for a few days, I did not hesitate to pay the $ 75 requested.

    Balsamiq: cute, but lacks features; ProtoShare: ridiculously expensive…

    • Jacco Friedman December 17, 2011 at 3:11 pm #

      Just wasted an hour downloading, installing oopening and trying to figure out how to design a mockup with wireframesketcher. Still no results except frustration. With Balsamiq I was creating within minutes.

      Bottom Line:
      wireframesketcher = Uninstall
      Balsamiq = Using free version most likely will purchase.

  23. Bis September 21, 2011 at 12:24 pm #

    Nice article Matthew.

    Wanted to mention few more – really good ones for sharing and collaboration – MockingBird https://gomockingbird.com/ and MockFlow http://www.mockflow.com/

  24. mateo June 11, 2012 at 10:23 am #

    Hi Bis.. I have not tried MockFlow yet.. what do you love the most about MockFlow ?

  25. Marcin Treder June 29, 2012 at 7:58 am #

    Awesome article! Wireframes, mockups and prototypes are important part of the UX design process. I worked for several years as UX Designer and UX Manager and honestly nothing makes me more happy than watching grow of our industry.

    I currently run UXPin (http://uxpin.com) – first dedicated UX Design tool on the market. Let say with you UXPin you stop wasting time on inefficient communication in the design process. You’ll be able not only to create wireframes, prototypes, mockups and even convert paper prototypes into digital wireframes, you’ll be able to put all of that into the context of your design story.

    Have a look on the video: http://youtu.be/A6aGep7eFDs

    Hope you’ll like it :).

  26. Puwer July 12, 2012 at 2:59 pm #

    Great list, I’ve always tended to just jump in to design without a mockup, but you can guess that I often have to rework the designs/layouts.

    Thanks for the post, I’ll check your other pages now.

  27. Sarah July 16, 2012 at 6:53 am #

    Thanks a lot! It’s nice having Pencil standalone.

  28. The ProtoShare Team June 10, 2013 at 4:47 pm #

    Just wanted to let everyone know about the release of ProtoShare 9 (http://www.ProtoShare.com). In our latest release, we’ve made it easier for new users to quickly get up to speed in ProtoShare and we’ve expanded the stencils library even more, with great web and mobile components (including iOS, Android and Windows phone). With ProtoShare 9, you can create either low-fidelity or high-fidelity prototypes, and get comments and feedback from your stakeholders with our collaboration system, which is by far the best available in the market.

  29. Shalin January 13, 2014 at 8:52 am #

    Since balsmiq is there i thought of putting a good diagramming software called http://creately.com to your list. Its a cloud based online diagramming software.

  30. laobuyike May 1, 2014 at 11:22 am #

    Nice list. Mockup Plus is also very useful prototyping tool. http://mockupplus.com

Trackbacks/Pingbacks

  1. FridayNet » Blog Archive » Bookmarks for May 11th through May 25th - May 25, 2009

    […] Seven website mockup tools — Bad Language – […]

  2. Introducción a los wireframes en diseño web « Blog de Luis Mondragón - May 31, 2009

    […] Stibbe de Bad Language reseña aquí 7 programas de este […]

  3. Church IT - Supporting ministry with IT » Blog Archive » links for 2009-06-25 - June 25, 2009

    […] Seven website mockup tools — Bad Language (tags: tools design web webdesign software template webdevelopment ui mockup) […]

  4. Tuesday’s Highly Useful Links for Web People « Momentary Lapse of Reasoning - October 27, 2009

    […] 7 website mockup tools Thanks to Matthew for collecting these. I’m currently trying out the Balsamiq which I was introduced by a friend of mine, and I got to tell you that it’s so sweet that I’m even considering getting the full version. Try it out at http://www.balsamiq.com. Available as web and desktop versions. […]

  5. Seven website mockup tools — Bad Language « fnerd.com - January 21, 2010

    […] January 21, 2010 in Uncategorized via badlanguage.net […]

  6. 40 essential online applications for freelancers and startups - Bad Language - March 23, 2010

    […] people obsessing about pixel perfect art and focuses them on words and layout. See my review of seven website mockup tools for some other online wireframing […]

  7. Editing, rewriting and increasing readability: 10 ways to slim obese copy - Bad Language - April 15, 2010

    […] Don’t lock down the word count before you start. A fixed word count is a guarantee of maximum verbosity (as the old Infocom games used to say). If you commission 500 words from a writer, that’s what you’ll get. Better to say ‘up to 500 words’ or ‘between 350-500’ and make sure that the writer focuses on the message and the quality of the writing. Similarly, ‘lorem ipsum’ copy on websites gives designers way too much influence over the copy length. Better to get a writer involved from day one, perhaps by using wireframes. […]

  8. MockUp? | Syahkira's diary - August 10, 2010

    […] Seven website mockup tools […]

  9. links for 2010-08-24 « Where Is All This Leading To? - August 25, 2010

    […] Seven website mockup tools – Bad Language (tags: app prototype template webdevelopment website mockups mock creation wireframes wireframe startup mockup list webdev webdesign software interface gui sketch download sandbox web ux prototyping dev design blog tool tools ui) […]

  10. HP Business Answers: Ten ways to use technology to enhance marketing | MarketingProfs Daily Fix Blog - September 22, 2010

    […] make a perfect geek birthday present.) You can use technology to prototype other things, such as websites more […]

  11. Seven website mockup tools - Bad Language : Tenglar, án ábyrgðar - November 9, 2010

    […] Seven website mockup tools – Bad Language […]

  12. Ten ways to use technology to enhance marketing - Small Business Blog from Microsoft - Site Home - TechNet Blogs - January 11, 2011

    […] make a perfect geek birthday present.) You can use technology to prototype other things, such as websites more […]

  13. Business Show » Blog Archive » Ten ways to use technology to enhance marketing - January 11, 2011

    […] make a perfect geek birthday present.) You can use technology to prototype other things, such as websites more […]

  14. Ten ways to use technology to enhance marketingThe Snow Vending Company | The Snow Vending Company - January 13, 2011

    […] make a perfect geek birthday present.) You can use technology to prototype other things, such as websites more […]

  15. Lo-Fi Mockups Rock | Summa Blog - January 17, 2011

    […] Matthew Stibbe compares seven different UI prototyping tools in this excellent article: http://www.badlanguage.net/seven-website-mockup-tools […]

  16. Seven website mockup tools – Bad Language | Luvas Blog (test) - August 23, 2011

    […] Seven website mockup tools – Bad Language. This entry was posted in Tools and tagged graphics, tools, web by daniel. Bookmark the permalink. […]

Leave a Reply