Since Monday, the Tweerverse and interwebs at large have been buzzing with posts, tweets and first experiences of Macaw. I too have been following the development of this much anticipated piece of software for the past few months (ever since I saw a demo video posted on Hacker News a couple of months ago, I’ve been waiting to get my hands on a version to try out). Together with everybody else who missed the Kickstarter campaign, I’ve been waiting for version 1 to be released and last Monday, it finally happened!
Firstly, a brief description of Macaw. Macaw is branded as “the code-savvy web design tool” by it’s creators Tom Giannattasio and Adam Christ. It’s meant as a WYSIWYG build tool for websites. Kinda like Dreamweaver or Frontpage for modern days. As it currently stands, Macaw is shipped as either a Mac or Windows version and it’s currently priced at $179. They also have a free trial version available allowing you to test the software free for 14 days.
I was expecting a tool allowing designers to be able to built fully coded web sites (HTML + CSS) without having any coding skills what so ever. Therefor, I was thinking, if this is truly how Macaw is going to pan out, it could be huge! It could theoretically shatter the psd2html industry. After playing around with it for two hours or so, it quickly became obvious that my expectations were off, and someone without any HTML and CSS skills would have a hard time building decent markup and styling using Macaw. When thinking about it, it makes sense though; since software is simply not yet capable of creating semantic markup 100% automatically.
When drawing your designs using Macaw, you’re forced to think about you markup and semantics and specify HTML elements and class names. This is pretty ok though, as it forces the designer to think about his or her designs in a semantic manner early on, which is obviously a good thing!
My plan was to use Macaw to rebuild my recent SentAPI.com website and include a few improvements. I built the original site in a couple of hours (let’s say five hours) using mostly Flat UI Pro/Bootstrap3, so far I’ve been playing with Macaw for about two days and I have rebuilt about 70% of the page. Now, obviously a lot of this time was spent on playing around with the software and getting to know Macaw’s features. If I were to restart again today, I am sure I could redo the page in shorter amount of time. I would even dare to state that, once I’m fully familiar with the Macaw workflow and features, I would be able to spit out the required markup and CSS faster then when I would hand code the page.
What I quickly found out I can’t do is just start drawing the page without thinking about the resulting markup and CSS and hope it will all be fine. Though I’m sure Macaw will still be able to create the desired markup and CSS, it will be littered with automatically generated class names. What I found out works best (for me that is), is to think about how I roughly want the resulting markup to look and draw the page with that in mind.
Now, one thing I feel I have to point out, is the amazing capabilities of Macaw to generate almost flawless CSS. Once you have your design drawn and spent some time working out the semantics of your design, clicking the publish button will have some jaw dropping effects! On more then one occasion I couldn’t help but thinking: “that css looks better then what I would have written myself!”. From all the web design tools I have had my hands on over the years, I have not seen anything which comes close to Macaw’s design-to-code engine (named Alchemy).
All in all, it definitely looks like a promising tool and I am sure that once they polish the application a bit more and fix some of the bugs, a lot of professional web developers and web designers will be eager to add Macaw to their workflow. I myself would love to try the application during a real project and see how it holds up there!