Interview: Macaw’s Tom Giannattasio talks Scarlet, workflow, & live design environments

Macaw is one of a new breed of web design tools. It’s one of the first design applications capable of generating clean code, and is endorsed by numerous industry figures.

Now, building on the success of their first product, the team behind Macaw is preparing to launch a second tool named Scarlet, with a radical new workflow and a host of new features.

Scarlet promises to deliver more than Macaw: according to the team, it’s a “live design environment”, and it could be a revolutionary step in the history of design applications.

We caught up with Macaw’s Tom Giannattasio, to ask him what we can expect from their latest project…

Webdesigner Depot: When you first decided to build Macaw, what was it that convinced you that existing tools weren’t good enough?

Tom Giannattasio: I don’t think our tools have ever really hit the mark. I learned web design back in the days of the Geocities text area. It was a miserable feedback loop—type some HTML, hit refresh, wait for the page to reload, realize you missed a closing bracket, try again. Eventually Photoshop rose as a superior way to design for the web and the industry split into those who did design and those who did development.

[pullquote]Responsive design helped us realize that we can’t treat the web as if it were a fixed, two-dimensional plane[/pullquote]

I believe we’re now experiencing a reconnecting of those two disciplines. Responsive design helped us realize that we can’t treat the web as if it were a fixed, two-dimensional plane and designers are now looking for new ways to work. Many of them have reverted back to a text editor so they can work directly with the medium. That’s awesome, but I feel like we’re back in the Geocities days again. I want to push things forward. I want a tool that lets me work directly with the web in a way that is visual and intuitive. That’s why I started Macaw.

WD: Why Scarlet, and not Macaw 2.0?

TG: Honestly, we didn’t think it would be fair to users to call Scarlet a version 2. Scarlet is not a repackaged version 1 with a few additional features sprinkled on top. It’s a completely different application with a reimagined workflow. It was built from the ground up with a new architecture and a ton of new features. We see a future where the two applications work together to accommodate the varying needs of designers and developers.

[pullquote]We have to design things as agnostic as possible to allow people’s preferences to shine through[/pullquote]

WD: Workflow is one of the most contentious issues in web design, because it has such a huge impact on the end product; how did you arrive at the workflow in Scarlet?

TG: Defining workflow for an app that’s made to be used for hours on end is a tricky endeavor. You have to provide enough affordance to help people up the learning curve, but not so much that it gets in the way of a super user. Preference is another hurdle. We have to design things as agnostic as possible to allow people’s preferences to shine through without sacrificing the intentions of the application.

These among a million other considerations leads to a trial-and-error loop that drives the design process at Macaw. Luckily, we’re designers and developers ourselves, so we can prototype and test ideas ourselves and know if they’re effective.

WD: How long have you been working on Scarlet?

TG: It’s been about a year now, and I’m really quite proud of what our small team has been able to do in that short amount of time.

WD: How big is your team? And is Scarlet built by web designers, for web designers?

TG: There are three of us on the team and we all grew up designing for the web. We worked together at different agencies—doing work for Apple, Oracle, MIT and other major organizations—before joining up for Macaw.

WD: Scarlet is billed as a “Live Design Environment,” what is a live design environment, and how does it differ from other tools on the market?

[pullquote]We coined the name Live Design Environment internally to help us discuss this new breed of tool[/pullquote]

TG: A lot of tools fit nicely into a category: SublimeText is a text editor; Sketch is a drawing tool; Photoshop is an image editor. Some of the new tools hitting the market don’t. The only category that’s even close is WYSIWYG and I can’t believe that’s still a term we use. It should have died along with FrontPage.

We coined the name Live Design Environment (LDE) internally to help us discuss this new breed of tool, which is not at all exclusive to Macaw. We thought it might help others in differentiating, so we decided to share it.

To us, a Live Design Environment basically embodies two key aspects:

1. A live design surface. This is what really separates these tools from something like Photoshop. They allow you to work with an actual browser viewport, but they let you design without having to write code. This is similar in spirit to the traditional WYSIWYG except for key aspect number two…
2. An intelligent code engine. Strong web design requires more than choices of shape, color and type. It needs well constructed, well written code to make that design work. We believe those decisions should be made by designers, but they don’t need to be hand-written. Traditional WYSIWYG editors output absolute positioning, random IDs and just plain garbage, but this new breed of tools has found ways to improve the workflow to give you strong, usable code. That’s a big deal.

WD: You’re talking about standards-compliant, semantic code? That’s easy to imagine for a basic blog site—where you have an established structure, and a simple hierarchy—but can Scarlet handle more than that, a corporate brochure, or even an e-commerce site, for example?

TG: Right now, Scarlet is focused completely on the client-side of things (HTML, CSS and JS). It is not an out-of-the-box solution for e-commerce and it doesn’t handle anything on the server side. Scarlet is also not a magic box that allows you to throw ideas into one side and get usable code out the other. It’s a finely-tuned instrument to help you get exactly the code you want in a way that’s faster, more consistent and more intuitive than hand-coding.

WD: Scarlet provides full access to the code it outputs, and we can even edit its outputted files in our preferred code editor. Does this mean we need to be HTML/CSS/JavaScript experts to make use of Scarlet?

TG: The workflow is honed to help pros do their work faster and more intuitively. You can certainly use Scarlet without strong knowledge of HTML and CSS but you won’t be able to fully reap its benefits. Your output will be equal to your input.

WD: Full CSS3 support is built into Scarlet, how about CSS4? Will the visual design aspect of Scarlet keep pace with future developments in HTML and CSS?

TG: Keeping up with rapid advancements is certainly tricky. When we decided to build Scarlet, future-proofing was one of the main considerations. The core of the app is built abstractly enough that all we really need to do to add new features is connect a UI to it. So long as the basic principles of HTML and CSS stay intact, we should be fine rolling with the advancements.

WD: How does Scarlet handle pre-processors like Sass, or Less? How about post-processors?

TG: Right now it doesn’t. We know it’s a much sought feature. The architecture is in place, but we’re a small team and haven’t had time to build it yet!

WD: Does Scarlet work with frameworks like Bootstrap or Foundation?

TG: Yes. However, we’ve done our best to remain agnostic when it comes to the core UI. You won’t find any Bootstrap or Foundation specific features right off the bat, though we have some plans in those areas.

WD: Scarlet is a desktop app, despite being built with HTML, CSS, and JavaScript. Why did you choose that route over the web app option?

[pullquote]This is a superior workflow for responsive design and simply wouldn’t be possible without the hybrid approach[/pullquote]

TG: We started as a web app, but quickly realized there were more benefits to going hybrid. The most important reason was UX. Having control of the environment layer allows us to really optimize the experience. Consumer browsers are designed for casual use. Scarlet is an app we want people to use all day long and it’s ideal if we remove all the cruft that comes along with the consumer browser experience.

In addition to giving us full integration with the file system, going hybrid also lets us offer features like parallel browsers, which allows you to open multiple pages and multiple breakpoints at once and Scarlet will propagate DOM and style changes instantly to all views. This is a superior workflow for responsive design and simply wouldn’t be possible without the hybrid approach.

WD: Scarlet features a remote preview, does it rely on apps (like Adobe’s Edge Inspect)?

TG: No. We’re not huge fans of unnecessary apps. We broadcast your actual files on your network so you can navigate any browser on any device to the remote preview URL and there it is.

WD: Is Scarlet aimed at individual designers, or teams? Does it have a workflow that facilitates collaboration?

TG: We’ve approached Scarlet as a platform. The core of the application is about providing a solid design workflow. However, the architecture is designed to be extensible, so teams can bend it to meet their individual needs. We have some pretty exciting features on the roadmap that exercise that extensibility.

WD: You’re launching on Mac first, followed by Windows. Is that a business decision or a technical decision?

TG: It’s a startup decision. We have limited resources and we know the largest portion of our audience is on Mac, so that’s what we’re building first.

Windows won’t be far behind, though. Because 95% of the application is built with JS, converting platforms is fairly painless.

WD: Finally, how long do we have to wait to try it out for ourselves?

TG: We’re aiming to have it in everyone’s hands by the end of the year!

WD: Thanks for taking the time to answer our questions Tom.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.