Volary – Free Wire Framing Components for Macaw

Volary - Free Components for Macaw

At the agency I am working at we are constantly examining new ways of improving the work flow and productivity of our user interface and web design process. Several applications have been thrown into the mix for testing, one of them is the new Macaw web design application. I will be writing a future article reviewing Macaw far more in depth.

For my own purposes and the purpose of testing the application I decided to create a tool kit of components for Macaw that might be useful for wire framing and prototyping. I also felt that such a template may be helpful to other designers.

Included in the template are numerous components for Macaw, like buttons, navigation, video players, forms, and more. I would be very curious to know if others find this of use, or if there are issues or constructive suggestions to make it better. It is an early version, and though I have tried to design the components as cleanly as possible – ultimately these are for wire framing and not final production.

If the template is well received or has some potential I will attempt to improve it and add more components as time permits. Your suggestions and comments are always welcome.

So for now I hope you enjoy this free download.

Download Volary



  1. Hi Chris,

    I think that is very good start, good job, I would like to know in your experience if the code generated for macaw is dirty for production, it is acceptable? or need a lot modification?, I have doubt to about how I can create table, fieldset in macaw, it is possible?, could you comment some limitations that you see in the current macaw version?

    best Regards

    • Hi Frank,
      Thanks for the comments! The code is quite clean, however this application is more for the “designer” than the front-end developer. The code is a good base, but I feel that if this application was included in a design to web workflow that involved more than just the designer, the developer would be more likely to use snippets of the code or CSS rather than all of it. Our developers for example all use Zurb Foundation as a responsive framework (similar to the likes of Bootstrap or Omega for example) and would more than likely be coding everything from this standpoint and only using CSS styles for designed elements within Macaw… I have written a more in depth review here on Graphic Junkies, and if you haven’t read it yet you can follow up here: http://www.graphicjunkies.com/macaw-a-review/

      I haven’t tried tables in Macaw, I can try to take a look into it if I find something helpful I will post it up here.


  2. Hi Chris,
    thank you for this job ! it will be helpful to me 🙂
    would you have some templates you created and you would agree to share please? that would help me to handle the interaction between elements and pages,…

    Thank you very much


    • Hi Saleh,
      What is the particular issue you are having with the light-box or contact form? Is it mocking them up for wireframe purpose or actually creating a functioning light-box and form?


This site uses Akismet to reduce spam. Learn how your comment data is processed.