Macaw is a code-savvy web design tool that offers “the same flexibility as your favorite image editor, but also writes semantic HTML and remarkably succinct CSS.” I spoke with co-founder Adam Christ to learn more about how Macaw allows designers to create beautiful web experiences without writing code.
In a sentence, how would you describe Macaw?
Macaw is a web design tool that let’s you draw remarkably clean HTML and CSS.
Can you share some about your individual backgrounds and what inspired the initial idea of Macaw?
Both Tom (Giannattasio) and I have multiple years of web design and development experience.
Tom has done design work for a well known DC based design agency called NCLUD, Twitter and MIT. Over the course of his career he has been able to work with clients like Oracle, Apple and National Geographic.
I have been primarily a developer focused on everything from front end development using HTML, CSS and Javascript to backend development SQL and PHP. I have spent a part of my career doing web development in the hospitality industry but most of it was spent working for a Noblis a non-profit organization. I worked on multiple projects for the General Services Administration.
Tom and I met a few years ago while working at Sabre Hospitality Solutions. Tom was on the design team and I was on the backend team, writing PHP and managing databases. After Sabre, Tom and I went our separate ways. Tom spent time working for NCLUD, a great DC-based design agency and he was later acqui-hired by Twitter, and then went on to work at MIT. I stayed in the DC area and went on to do web design and development work for Noblis. All while this was happening Tom and I stayed friends and worked a side project or two along the way. It wasn’t until Tom was working at MIT up in Boston that he came up with the idea for Macaw from his own needs as a web designer/developer. Shortly after Tom started experimenting with his idea I went up to Boston and visited him. He showed me what he was working on and asked me if I wanted to help out with what was at the time the very early stages of what would become Macaw. From there Tom and I moonlighted on the project for a couple months. In January 2013 Tom decided to quit his job at MIT and devote 100% of his time to Macaw. I continued to work nights and weekends for some time but then joined him full-time in May. In October 2013 we ran a successful Kickstarter campaign which substantially exceeded our goals and ultimately allowed us to hire Brandon Jones who specializes in native Mac application development. Shortly after that we were able to hire Danny Kleinman to work on the Windows application.
How do you think people will use Macaw?
People will use Macaw for everything: basic wireframes, prototyping, full on website designs. The nice thing about Macaw is that it is flexible and it allows users to create what they need incredibly fast.
What was the design process like for creating the product?
Macaw is influenced by both our personal experiences and the web design community. We have designed Macaw using a mixture of both our inherent knowledge of the headaches that come along with designing for the web along with feedback from the community.
How does Macaw differ from other tools in this space?
Macaw differs mostly in two ways. The first is it’s layout engine, Stream. Typically with other web design tools, creating and manipulating the position of elements in your design is a very frustrating process. They usually allow you to drag elements from a toolbox and place them on a canvas and once placed they get “snapped” into place based on how they best fit into the document structure. Again this can be very tedious and annoying since the user doesn’t always feel like they have final say or input as to where the element is placed.Macaw improves this experience by allowing you to draw elements wherever you want and move them freely on the page. Once you have placed an element, Macaw’s layout engine Stream will analyze where that element is and how it relates to other elements in your document and then writes the necessary CSS to position that element exactly where it was placed. We feel like this flow is much more in line with how designers are used to working in other more traditional design tools such as Photoshop.
The second way Macaw differs is the quality of the code it exports from your designs. Many other tools produce garbage code that most developers would rather throw out than use. This is typically because they don’t write the code in a way that takes into account the best practices and techniques that have been developed over the years. The generated code from these other tools typically adds unneeded markup to the HTML, creates oddly named CSS classes, and none of the CSS is consolidated. Macaw addresses this issue with our design to code engine, Alchemy. The engine uses a sophisticated algorithm to analyze your design to write the most efficient and succinct code possible. The outputted HTML markup is clean with only the elements you created, the CSS consolidated where it can be and all CSS classes make sense.
How have you tested Macaw with users? How have you iterated on feedback?
To test Macaw we ran a four month beta, which was made up of our Kickstarter backers. During the beta we received a huge amount of feedback and we stuck to pushing out updates on a weekly basis. The feedback we received helped us to greatly improve the tool. It also led us completely to rewrite our layout engine to improve the experience within the tool.
What additional features do you think might be incorporated into a future version?
We are still heavily focused on version one of Macaw. We still have some important features that we want to get into the tool including states (hover, active, etc.), rich text editing and a few other features I can’t quite talk about yet.
How has Macaw been received so far?
We have received an overall great response from the community thus far. A lot of users are really liking the tool and seeing the benefits of using it.