Monday, January 17, 2011

Eclipse-Based Wireframe and Mockup Designer: WireframeSketcher

If you are in need of a capable wireframe and mockup designer for Eclipse, this post will interest you. I was contacted by Peter Severin from WireframeSketcher last month. Peter asked if I was interested in trying out his Eclipse-based wireframe and mockup designer. He also provided a free license key. Thanks Peter!

In truth, I had been looking around for an easier solution to wireframes and mockups. I had been trying to use Adobe Fireworks CS5 in combination with a course from Lynda.com for this purpose but I found the solution and workflow overkill for a web application designer working on his own projects. I need something simpler.

And then there is the issue of platform support. As I have mentioned in previous posts,  I develop on Ubuntu and Mac OSX. My Windows license for CS5 would not help me on those platforms, and running additional virtual machines for the purpose simply complicated my workflow and source control.

Balsamiq looks like a great tool, and I have heard many good things about it, but it suffers from the same lack of platform support on Ubuntu and is otherwise just another tool to manage and integrate into workflow and source control.

WireframeSketcher, on the other hand, is built on Eclipse. It is available in a standalone application, but really comes into its own as a plugin into your existing Eclipse environment. WireframeSketcher, like Eclipse, is cross-platform, and works just as well on Ubuntu or Mac OSX as it does on Windows.


Working with wireframes and mockups in your IDE saves time and simplifies workflow. Without the need to switch applications I found I was using wireframes much more effectively. WireframeSketcher saves designs and mockups as individual .screen files, making them easy to manage within the same project as your source code and using the same source control.

WireframeSketcher is like other full-featured plugins for Eclipse. It provides an editor, several views and a perspective for easy switching to wireframe or mockup design.

Within those Eclipse conventions, WireframeSketcher is like many other wireframing solutions: you drag widgets from a palette onto your canvas. A properties panel allows fine-grained control and configuration. Clickable links can be defined between screens, and boilerplate or common layout can be defined in master screens that is reused across other mockups. These features make WireframeSketcher both easy to use and the equal of other wireframe tools in all the ways that matter to me.

Apart from the benefits from these features and that the integration with Eclipse provides, I will mention three features that surprised and impressed me: Firstly, not only can wireframes be exported to PDF, PNG and to the clipboard, this export can be done as a batch operation. Secondly, Wireframe styles and controls text and data tables using a powerful text markup language that provides a lot of flexibility. Thirdly, the plugin has been remarkably solid and well behaved, unlike many other Eclipses plugins I have tried. It feels polished and refined.

Which is not to say that WireframeSketcher could not be improved. The widget palette could be categorized and easier to navigate. Using the tool is quick, but I think the time spent trying to find a particular widget in the palette could be reduced. WireframeSketcher does not have as many out-of-the-box widgets in the palette as some other tools, although this has not caused me an issue yet. Lastly, the assets functionality, which complements the standard palette with images and master screens of your own, could be improved. Assets require a specifically named and located folder in your project structure. Personally I would prefer a customizable location  for these assets to suit the variety of ways Eclipse may be used. Reuse of assets between projects is not addressed.

I should be clear, however, that these criticisms are relatively minor and have not prevented me from using WireframeSketcher effectively.

WireframeSketcher is an excellent mockup and wireframe tool, and I definitely recommend giving it a try, especially if you live inside the Eclipse IDE. For those of us that need to both design and develop applications the integrated nature of the plugin both enhances your productivity and simplifies workflow. In case I have not been clear, I really like WireframeSketcher!

I would like to thank Peter again for introducing me to WireframeSketcher and providing a free license key, and I hope this blog post plays a part in providing more exposure to his excellent tool.

39 comments:

  1. Ben, thank you for you review!

    The palette does have categories but they are hidden away at the right of the search field. It's not obvious so if anyone can propose a better solution I am all ears! I've tried an accordion control before but that was not ideal.

    I agree that the assets functionality needs improvement and this is what I am working on right now. Making the folder location customizable and adding global assets is on my list. I also plan to make the integration of stencils (like iPhone and Android) much easier.

    ReplyDelete
  2. Very nice article and msg we likes so much
    https://games.lol/

    ReplyDelete
  3. I have read this article and I guess I could add this up to my tech skills. This would definitely add spice to my profile! Thanks!

    https://cincinnati-seo.org/

    ReplyDelete
  4. Keep up the good work , I read few posts on this web site and I conceive that your blog is very interesting and has sets of fantastic information.
    Best hgh supplement

    ReplyDelete
  5. Cool I love this article. it's standardized, clear and concise ,that I never heard about it before. best carpet cleaner

    ReplyDelete
  6. Your article was really excellent well prepare and standardized. remodeling

    ReplyDelete
  7. Wonderful write-up, I share the same views. I wonder why this excellent entire world does indeed not feel just like myself and also the blog possessor. towing

    ReplyDelete
  8. So lucky to find this kind of useful blog post thanks a lot. bathroom remodel cost

    ReplyDelete
  9. I am using Wireframe now and I am impressed with its features!
    Neal | www.carpetcleanercolumbia.com

    ReplyDelete
  10. I really appreciate this wonderful post that you have provided for us. Thank you for sharing, this is help me so much in my learning
    startup business loans

    ReplyDelete
  11. Sasnapps is a group of eCommerce developer who can upgrade your magento 1 website to magento or help you to create a new eCommerce website.For more visit. https://www.sasnapps.com/

    ReplyDelete
  12. I really appreciate this wonderful post that you have provided for us. Thank you for sharing, this is help me so much in my learning
    startup business loans no collateral

    ReplyDelete
  13. Our team at visit website have been using Adobe Fireworks CS5 but with this post, I would suggest to our team to try to use WireframeSketcher.

    ReplyDelete
  14. Hello I am so delighted I located your blog  Please do keep up the great work.
    Buy adipex online
    Buy real adipex online

    ReplyDelete
  15. Hello I am so delighted I located your blog  Please do keep up the great work.
    Buy real adipex online

    ReplyDelete
  16. WireframeSketcher is a more personable product than some of the other wireframing tools out there. Creates fast and easy wireframe
    online-application.org

    ReplyDelete
  17. now and could just like to say thank for a tremendous post and a all round entertaining website. Please do keep up the great work.
    Buy amphetamine online

    ReplyDelete
  18. Still has th best and upfront information about mockups.
    http://rdmedicalproducts.com

    ReplyDelete
  19. Seems like I really need to get one! Thanks for the tip.
    Lauren | https://www.charlottejunkremovalservice.com/

    ReplyDelete
  20. Seems like I really need to get one! Thanks for the tip.
    Lauren | https://www.charlottejunkremovalservice.com/

    ReplyDelete
  21. Hello I am so delighted I located your blog Please do keep up the great work. carpet cleaner

    ReplyDelete
  22. Nice article. Thanks for sharing a new stuff to learn. https://woodbridgemoldremoval.com/

    ReplyDelete
  23. Excellent plugin tools! I've tried using them and it really saves time on my sidingspringfieldva.com & roofingspringfieldva.com projects.

    ReplyDelete
  24. I dont know if our teacher copy this, but this was our lesson last week.
    check this out!

    ReplyDelete
  25. Interesting post! Can I have the free license key? Thanks then! Mike - columbiatowingservice.com | www.towinghaymarketva.com

    ReplyDelete
  26. We use the wireframstretcher all the time at www.nampamasonry.com

    ReplyDelete
  27. Here is the link to "Website":https://www.nampamasonry.com

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. Definitely a good read! I've learned new ideas about plugin tools. Thank you! www.southernrfg.com

    ReplyDelete
  30. Thank you for sharing this great article!! click now

    ReplyDelete
  31. I feel that may be a captivating point, it made me suppose a bit. Thanks for sparking my pondering cap. Now and again I am getting such a lot in a rut that I just really feel like a record. carpet cleaners

    ReplyDelete
  32. Commendable post. Started using wire frame after reading this article and really appreciate all the features.
    https://e-records.us/social-security-card/

    ReplyDelete
  33. This is a must read blog, i learned a lot and the contents are interesting. https://www.yycsepticservices.ca/

    ReplyDelete