Macaw: Bridging the Gap Between Designer and Developer

Posted by Molly

Recently I have been playing around with a program called Macaw. As our processes evolve, I am always looking for ways to smooth pain points and increase efficiency within our web design team. One thing in particular that could run smoother is the process of handing off the website from the visual design phase into the development phase.

One of the things we pride ourselves on at BKI is a strong sense of teamwork and collaboration. In our case between designer and developer, that collaboration can sometimes become difficult because of the lack of overlap in technical knowledge. Enter Macaw.

How Does It Work?

The beauty of Macaw lies in its ability to build well-written code around a design, and vice versa. When you are designing in Macaw you are limited to the abilities of the web (as compared to Photoshop where possibilities are endless).

When using Macaw you have to approach the design as if you are designing it directly in code; the order of elements and grouping makes a real difference. You are also editing images, backgrounds, and text as if you are editing it as code. Below is an example of the text editing panel.


On the right, you will see the options you have for styling your text. The options directly mimic what you would find if you were live coding the design. The same concept applies to every element of the website. Macaws interface simplifies the process for those of us who are used to writing code, but structures it so that the program can use it to directly output code.

Designing with Breakpoints

By far the best feature of Macaw for a designer is being able to design a completely fluid, responsive site all in one place. In our current processes, we create a design file for each page at each significant breakpoint (desktop, mobile, tablet). With Macaw, you simply set breakpoints as the content on your site starts to break. You can interact with the design to see exactly where it runs into trouble and needs to adjust.


Above you can see the blue bar where I set the initial page size (1200). If you follow the blue bar to the left you will see small white arrows where I have placed additional breakpoints. Below is the site at some of the smaller breakpoints.


The Pitfalls of Macaw

Like any design-to-code type of program, there are still a lot of bugs to be worked out. CSS and alignment issues are pretty common, and for the most part you will still need to go into the code and clean it up when you finish.

Also, the program can be difficult to manipulate of you have little or no experience with HTML and CSS. The burden is on the user to assign classes and other functionalities that may be foreign to someone who only does design.

If anything, my biggest takeaway from Macaw was experiencing the limitations of the developer first hand. This knowledge has helped me design in a way that makes it easier for the developer and soothe certain pain points.

Leave a Comment

want to read more? here are some Similar posts