Product design is one of the most sought after fields nowadays. In order to design products a design must have a grasp of the whole creative process, from conception, UX, visuals, user studies and of course prototyping. There are several tools and prototyping frameworks, most of them requiring coding skills. Macaw was created to challenge that and provide a design tool that works like an image editor but also generates great code.

Macaw is changing the way the web is created with a revolutionary design tool that works like an image editor but also writes professional-grade HTML and CSS - something long considered impossible. By bridging the gap between design and development, Macaw is lowering the barrier of entry for budding web designers and dramatically accelerating the creation process for pros.

The superhot web design tool of the future - Jeffrey Zeldman

Features

  • Responsive: Set breakpoints and optimize your site for all devices.
  • Interactive: Set variable names and add scripts for fast prototyping
  • Positioning: Utilize static, absolute and fixed positioning for dynamic layouts.
  • Components: Store elements in your library and reuse them on any page.

"I dunno what sorcery they're using to make the code, but it's amazing and beautiful." — Mike Finch

REAL-TIME, FLUID LAYOUT ENGINE

Macaw’s design environment is powered by a real-time layout engine called Stream, which allows elements to be manipulated in a manner similar to image editors like Adobe’s Photoshop. Behind the scenes, Stream calculates all of the properties necessary (floats, clears, margins, etc) to place the elements into a static document flow just as a seasoned developer would. The days of fighting layout logic are over.

The Team

Introduction Video

For more information visit http://macaw.co/

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.