Show HN: Macaw - The code-savvy web design tool

by thomasxiii • 13 years ago

3 4 13 years ago

thomasxiii2• 13 years ago

I really wanted a design tool that was fluid like Photoshop but thought like a developer. I left my job at MIT, partnered with a good friend and started building it. It's been seven months and we're proud to finally demo it publicly. We'd love to hear your thoughts!

jentulman• 13 years ago

This looks really nice as a sketch tool for getting those initial layout ideas in browser quickly.

Off the top of my head....

How much more complex do you envisage it becoming? Not that I think it actually needs much more, if anything, to be a useful tool.

Any thoughts on it becoming aware of existing frameworks like bootstrap or foundation?

Does it save each 'page' as an individual file or save multiple 'pages' as a 'project'? I see a tab bar in the demo video so I'm guessing multi page projects.

What sort of price are you thinking? Seeing the demo video I think I'd pay $10-$15 without blinking, but this is just a first reaction rough feeling estimate, it might change with more info / a bit of a play.

thomasxiii2• 13 years ago

We have a lot of features already built that the video doesn't highlight:

1. Setting arbitrary breakpoints for responsive design, which will export all the necessary media queries. 2. Reusable components – save them to your library, pull them out on any page, edit them in one spot and update all instances. 3. Reusable styles - save a style, apply it anywhere, edit it in one spot… you get the idea. 4. UI Kits - load in the wireframing kit to easily drag and drop flexible components to design with. Those components can then be morphed into other elements so you don't have to throw away your wireframes. 5. Multiple pages - comes in really handy with components. save a header, apply it to multiple pages and manage it in one spot. 6. Interactivity - add an interaction class to an element and Macaw will auto-generate variables needed for interactivity. 7. Style guides - Macaw will abstract all the useful bits of your document (grids, swatches, components, etc) and generate a style guide for quick access to the styles.

…and more :)

We're not sure what we'll charge just yet, but it will be a fixed price.

wizzzzzy• 13 years ago

This looks great - especially as a tool to get some initial page styling down before moving on to integrating more advanced functionality. I see from the video that there is a degree of user control over the css / class names etc which is nice although I'm just wondering how much using Macaw will sacrifice in terms of personal preferences towards CSS structure or methodologies such as BEM or OOCSS?

Show HN: Macaw - The code-savvy web design tool

Related Stories