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:
- 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…
- 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.
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.