Macaw: a code-savvy web design tool

Macaw, a "code-savvy web design tool”, has been unveiled by co-creators Tom Giannattasio and Adam Christ, enabling you to stop writing code and start drawing it instead.

It isn’t the first tool of this type, but Macaw has lofty goals and is aiming to be truly relevant regarding modern web design workflow. The sneak-peek video shows it outputting tidy, well-defined code rather than 'soup'. Macaw is also said to work with fluid canvases, responsive breakpoints and rich typography, along with offering reusable components and ‘morphing’ between wireframes and full-blown mock-ups.

.net spoke to Macaw’s co-creators Giannattasio and Christ (G&C) to find out more about what’s wrong with existing tools, how Macaw can help, and if it really can output code as good as you’d write yourself.

.net: What was the impetus behind you creating Macaw? In what ways do existing tools fail to satisfy the needs of the modern web designer?
G&C: Macaw was started due to insufficient tooling. For years, Photoshop was the centre of our workflow. It's an amazing tool, but we all understand the limitations Photoshop brings. Designing with code solves some of those problems, but creates new ones. We wanted a tool that enabled a creative and fluid design process (like Photoshop) but also allowed us to embrace the capabilities of the web like writing code does. Essentially, we wanted a tool that spoke the language of two very different species: designer and developer.

.net: How do you think Macaw succeeds where others fail, in terms of design and development?
G&C: It excels in understanding what both designers and developers need. A lot of other tools look to add another stage to the design and development process and, in most cases, create deliverables that become useless. Macaw looks to streamline both a designer's and a developer's workflow. It does this by allowing a single project to include everything from wireframes to the final website design.

.net: How does this differ from existing WYSIWYG tools?
G&C: We know designers need freedom and they don't want to be burdened with the specifics of CSS while designing. This is where the typical WYSIWYG falls short. We believe if a designer wants an element in the top-left corner, they should simply have to place it there and not have to worry about floats and margins, and breaking other pieces of the design, in the process.

We also think designers can benefit from core development concepts, such as Don't Repeat Yourself (DRY). If elements share the same properties, we shouldn't have to hunt through a document and make changes to each individually, which is why we added global classes and components. Edit something in one spot and update every instance, not just on the current page, but in the entire project.

The other half of the solution is to help developers of all skill levels. Someone just starting out can simply hit 'publish' and Macaw will spit out some of the best machine-generated code around. However, we also want to help advanced developers. We have some tricks up our sleeves, which we'll demo soon, that allow developers to do their job faster and more efficiently.

.net: What is Macaw’s best feature?
G&C: Speed. You can speed up the design process by wireframing, prototyping and producing mock-ups all in the same application. You can even speed up simple tasks like alignment, using 'nudge' and 'pudge'. You can speed up development by having an intelligent engine, helping you get exactly the code you need. The list goes on and on.

.net: In your sneak-peek video, you show flexible grids, but how does the app work when it comes to responsive web design? How easy is it to set breakpoints and then adjust the design?
G&C: Responsive design with Macaw is extremely intuitive. You can add a breakpoint wherever you'd like and simply move elements around on the canvas. When you publish, Macaw will do all of the static layout calculations for you and write the necessary media queries in the same succinct fashion.

.net: How important is code output for you? How does Macaw manage to create clean output?
G&C: Code output is one of the most important parts of Macaw. It was our goal from day one to output useable code. It's also one of the trickiest. It's easy to spit out random ids and write every CSS property to describe each individual element, but that's not what people need.

We wrote Alchemy (Macaw's design-to-code engine) to mimic the same logic a developer would use. The algorithms take into account specificity, applicability and inheritance to determine the most succinct way to describe your document without losing flexibility. We also have mode operations to calculate the most common settings, and we make use of advanced selectors such as :first and :last-child.

.net: If you edit some code elsewhere and open it back in Macaw, does it pick up any changes?
G&C: Macaw is pretty much a one-way street right now, but we're thinking hard about integration with other text editors.

.net: So do you see Macaw as a tool for building final websites, for initial design, or both?
G&C: We hope to make Macaw relevant throughout the entire lifespan of a website and we believe it will play different roles for different people. Those just getting started with web design and development could hit publish and deploy directly to their site. We hope to help them do so quickly and they’ll perhaps learn some code along the way. Professionals may want to use it to speed up their process and to provide a useful deliverable for developers.

.net: How does it aid with things like wireframing?
G&C: Macaw is built on component-based architecture, which allows us to do some cool things. We have a wireframing UI kit, which can be used to drag-and-drop components onto the canvas. You can set up breakpoints and add interactions to these components just like anything else. Any of those components can then be morphed into other components. So, if you were to draw a wireframe image, you could later morph that into an actual photo from your library. It's pretty handy!

.net: When will the app launch and on what platforms?
G&C: We don't have a date set in stone, but we'll let everyone know as soon as we do. We'll launch on OS X ,but we already have a game plan for Windows.