When I first heard about Macaw, it was advertised as a mockup builder that would spit out semantic HTML and concise CSS. At hearing this I was two things; excited and sceptical. Most software, in my experience, that claims to output clean, workable web code falls greatly short. The idea seemed to be that you could make a mockup in Macaw, publish it to HTML and have a finished or near-finished project compared to making a mockup in Photoshop and having to code everything from scratch – this hinted at Macaw being a valuable time saver.
My background has been more focused on the development site of the web world vs. the design side, so the idea of a drag-and-drop web tool didn’t offer me many benefits compared to a designer with limited programming knowledge. Regardless, Macaw seemed like an interesting tool that could potentially speed up the time between creating a design and writing the code which inspired me to give it a try.
I found Macaw very easy to get used to and anyone with experience in the standard mockup building tools (Photoshop, Illustrator, Gimp etc) should find themselves getting comfortable with Macaw’s set of tools relatively quickly. An added bonus is that Macaw keeps things very simple, there are very few hidden options and in most cases you can access anything you need by clicking on the element you’re manipulating.
On top of keeping things simple, Macaw already has some decent documentation to help explain any features you don’t quite understand right out-of-the-box.
As a Mockup Tool:
I found that Macaw could compare to Photoshop in capabilities when creating mockups.
However, as Macaw is purely focused on creating mockups, editing images (with gradients, filters etc) and creating logos is a job left for Photoshop and Illustrator. Meaning a designer couldn’t get away with not having the usual design tools if they had Macaw.
Often, I found that Macaw limited what you could do to web elements, providing a preset collection of CSS rules to adjust per each element type (background, divs, text etc.) rather than letting users add custom CSS rules. A good example would be when creating a responsive layout Macaw does not seem to have a way to apply the “display: none;” CSS rule to hide content or images.
In general, I didn’t find an easy way to apply custom CSS styles to elements – I didn’t spend much time with Macaw so this could simply be something I didn’t figure out rather than something Macaw doesn’t provide.
Macaw promised clean output and they delivered. The HTML and CSS was very clean especially in comparison to other generated code. My first attempt at publishing a project had messier code, however, after adjusting some settings in the publish menu I managed to output code that most developers would be happy to work with. The outputted code is only as good as the work you put into Macaw. You must name elements intelligently as well as use the correct elements to get a product with proper, semantic HTML 5 markup. This means that a user must have a decent knowledge of CSS and HTML.
Macaw has created a weird niche for itself in the world of web development. As a developer with some experience, I found what Macaw could do to be underwhelming and in some cases limiting.
From a designer’s perspective, I found that Macaw was very usable to create a mockup but requires some knowledge of HTML and CSS in order for the outputted code to be as useful as proclaimed.
Currently my workflow is to use Bootstrap 3 for responsive layouts – therefore if I received a project created by Macaw I would have to do a lot of rewriting to finish the project. Meaning I don’t think I would gain a great deal of time in using Macaw unless I adjusted my workflow or they built some sort of tie in with popular grid frameworks.
I think Macaw’s best use would be for making quick, live mockups for clients, simple brochure websites, or for beginners who have started learning how to program for the web. As my time with Macaw was quite short, I bet there are some awesome features I missed out on. Please let everyone know about them in the comment section.