Webdesign tool Macaw raises $275k on Kickstarter, $200k more than original goal | Hacker News Reader

Webdesign tool Macaw raises $275k on Kickstarter, $200k more than original goal

kickstarter.com

104 pointsadamnemecek62 comments

Macaw is much closer to Fireworks than Photoshop. I've never used Fireworks but a colleague of mine did. It's so much better suited for web design. But Adobe failed to market it properly (I actually never heard of Fireworks before 2011, several years after I started). That's probably the reason why it's discontinued.

Macaw tries to capitalize on this void left by Fireworks, a void that actually may have never been filled by any web design software. I think the keyword is "fluid". Unlike Photoshop, almost nothing in Macaw is engraved in pixels. You can easily modify elements without worrying about half-eaten pixels, resizable boxes or weird rounded borders.

Sounds like Fireworks? Yes, but Macaw adds a powerful feature (and probably the most criticized one): code generation. As some others said, it does sound like Dreamweaver. But Macaw's code quality is vastly superior and quite impressive.

Being a front-end developer and a graphic designer, I'm right in Macaw's target market. I think I'll try it out but I probably won't use much of the generated code. I'm comfortable enough with CSS to understand how my own written code will behave in the browser. I've developed best practices that would be hard to merge with any software generated code.

But Macaw is also a design tool with interesting features. And having missed the Fireworks train, I think I'll try to catch this one. My design process have grown simpler and more focused over the years, and although I'm comfortable with Photoshop, it sometimes feels like an overkill.

Macaw doesn't strike me as anything like Fireworks, other than the fact it is a tool for people creating assets for the web. Fireworks's killer feature was that it merged both vector and bitmap creation tools. Fireworks was great but it was primarily focused on creating image assets that will be displayed on a web page. (The best tool for this nowadays imho is Sketch.)

Macaw is basically taking another stab at the Dreamweaver model. The major hurdle I see for it is that it seems to be a one-way street if you go by the demo. You can generate code from a Macaw project, but you can't just pop open your existing html/css and start working with it. The main asset you are working with is a mcw file.

For real-world work on serious projects, people in the trenches are going to manually hack on the CSS. They're also going to be generating HTML on the fly with code and will need templates to plug into their view system. The creators of Macaw seem like they know what they're doing but they need to have a story for how they fit into a real workflow before this makes sense. Their smart code generator looks like it will be great for getting a mockup together, but the killer app will be is if this tool can be used throughout the life of an app to iterate on its design.

Reminds me of the early days of Microsoft FrontPage. Make some hand modifications to the html and accidentally move something.

Then stare in terror as all of your work just disappears.

Full disclosure, my company just released a Photoshop plugin that converts Photoshop images into web sites.

First of all, I think the idea behind Macaw is great. A lot of the people at my company really admire their work and there is a solid target market that would want to use Macaw.

One of the things to keep in mind is that the target market is, likely, primarily designers and not developers. Important to keep in mind so we don't have a skewed developer perspective. Hand coding is a poor medium for prototyping or doing design mock ups, but can be quite fast if you know exactly what you are doing and you already have image assets.

Another under served market are designers that love using Photoshop, especially to do mock ups and prototypes, but cringe when it comes to turning those mock ups into actual web sites. Unfortunately, Photoshop has basically the worst tools, if you can call them that, for turning Photoshop images into a websites.

Our response is a tool we call Webbsy.

Basically, you just name any layer or layer group like a CSS selector like #header or .header. Run Webbsy, and it slices all the images and generates the HTML and CSS using the names you gave it.

Like Macaw, it generates clean HTML using static positioning and floats and divs with clear. It respects layer groupings as well so if your #logo layer is inside your #header layer, the HTML/CSS will do the same. It uses static positioning by default, but allows the use of absolute positioning as well. Actually, until I saw the Macaw video, I thought we were the only ones who had an algorithm for making code that doesn't use absolute positioning.

This is really important because in a real website, the lines of text may render shorter or longer depending on the font rendering engine. This can cause unsightly overlaps or too much white space.

Webbsy also allows slicing, linking, it automatically makes Google fonts work, converts rectangles into divs, text is preserved as text, etc.

We also are just about to release our reference sheet feature. If you are a coder but just don't want to spend all the time doing rote monkey work like copying over fonts, spacings, colors, etc. then use the reference sheet. It generates all the CSS styling (but not positioning/layout) and shows you thumbnails of all the assets. You then write all the layout and HTML by hand but still save hours on transposing code.

Our next feature, coming soon, is auto export so you don't have to do any renaming of layers. This has less control and selectors are generated automatically but is perfect for showing clients a work in progress without having to ship JPEG or PNG images through email. This also means you get real previews so your fonts look like they would in a website. One problem with mockups is that your 9px font looks fine using Photoshop's font rendering engine, but looks really bad in a browser rendering of a font. When a client asks for a few changes, you can make them in minutes and just re-build the site in Webbsy instead of wasting time trying to figure out how to modify the HTML/CSS.

Finally, we will be coming out with more modes and features that help designers that use Photoshop make conversions the way they want to. One of the things we recognize is that designers work in different ways. Some need to write all the code by hand (which is what our reference sheet is for) and others don't mind how the code looks as long as the web page looks right.

You can find us at www.webbsy.com

Sunny

With the increased growth of mobile devices and massive numbers of screen sizes in existence, how do you plan to handle those issues? What I've seen of Macaw looks like it gives you the ability to write clean, maintainable code that works in many devices and handles media-queries etc. From your examples I looked at, they might as well be absolutely positioned because you're not gaining anything by floating every element and giving it a fixed width and height.

Hi Proexploit,

That's a good question. And I'll address it but first I'd like to make a clarification.

You mention that if all the floating elements have fixed width and height, then what benefit is there versus simply using absolute positioning.

So, for clarity, if we did give widths and heights to all elements, then yes, apart from perhaps some code readability, there wouldn't be many other benefits; however, we don't actually give heights to text elements. This allows the browser to flow the text dynamically and because of this, it is possible that text will render shorter or longer than in the original Photoshop file because of where the text breaks at the end of the line. This can be exasperated when certain fonts like Arial may display as Helvetica and visa versa depending on the operating system.

Elements that are under the text will either pull up or push down as the text gets shorter or longer. There is also another benefit in that if you tie the code into something like a CMS where the images or text are editable, then the layout will reflow in the way you would expect.

The question was: How do we handle mobile devices or devices with different screen sizes?

There are actually ways that we can support this in the future and it might even take just a few days to write it. We currently have a full generated internal DOM that we convert to HTML and CSS. We also export to other formats. For example, I forgot to mention this earlier, but we also automatically export in LESS, HAML, Slim, Jade, Less, SASS, SCSS and Stylus.

I haven't thought this all the way through, but I don't think it will be difficult for us to export all of the elements so that they are always stacked for use in mobile devices and resize images to fit better. We can probably share the HTML code and then provide a different version of the CSS for mobile. There are some more details than that I can think of already, but they can probably all be overcome.

I would like to address that this isn't the typical use case if you are designing your website in Photoshop. In such a case where you wish to use identical code to support multiple screen sizes, you would probably hand write code with a grid to achieve this. Even in this scenario, however, our software can help you slice images, generate HTML and CSS styling code and put it in a reference page to make it much easier for you to code the final page. This will still massively accelerate your web page development, of course under the assumption you are using Photoshop. If you don't care to use Photoshop, and if you are more of a developer than a designer than there may not be much benefit in doing your prototyping this way, then our software is not a good choice for you.

Again, we think Macaw is cool, but you aren't, at this point anyways, going to get anything near the depth, maturity, familiarity and available knowledge on the web for an image editor as Photoshop. For designers, it is probably appealing to use a tool that they already know well and is very good at what it does. I don't think Macaw is trying to compete as an image editor though. So you'd probably build your image assets in something like Photoshop and then import and layout in Macaw. For some, they may prefer everything in a single tool.

Fireworks used to be the bomb about 10 years ago when it was Macromedia that sold it. You used to be able to make animated gifs with it when Photoshop couldn't.

IIRC, Fireworks would do code generation. I'm pretty sure that was the big selling point for some colleagues back in ... 1999? They were so awestruck that it would generate code for anything they threw at it. I was dumbstruck by 1) how bad the generated code was (a la FrontPage) and 2) how backwards some of the stuff they were trying to design was (making the code that much worse).

I know in the right hands, 'design first' in visual tools can lead to great web sites. Especially back in those days, however, visual artists were almost exclusively just visual/photoshop/paper oriented, and regardless of what they did, you were just expected to hack it up in to HTML, regardless of whether it was even possible or not. I far prefer working with graphic design folks who can at least do the basics of HTML/CSS, so they understand what's possible (and optimal) vs what Photoshop from 2000 is capable of letting them draw on the screen :)

Fireworks was made by Macromedia back then, and it was pretty popular amongst flash dev

Another of the "oh it's been tried a million times, it'll never work, it'll never happen" ideas that are out there that might ACTUALLY work. I love those kinds of ideas.

A tangent, but that brings me back to this again:

"Kickstarter cannot be used to fund websites or apps focused on e-commerce, business, and social networking."

It's a weird rule. This tool has business applications, no? (Also not, but still...)

More on topic, I'll bet these guys are going to have a wild and successful ride.

I think cross-platform support will be key, too (one of the consistent complaints about Pixelmator, as a semi-related example, is that there isn't a PC version available).

Didn't Google just offer something very similar? https://www.google.com/webdesigner

Seems to be primarily aimed at creating ads. Also, it's been shown to create code that's far from being considered semantic HTML.

Maybe this isn't relevant but I've often wondered if it could be useful for people looking to raise money on Kickstarter to put a cap on the amount they raise. If you really only need 75k is it always a good thing to end up with way, way more than you asked for?

for people making physical products a cap would make sense. Printrbot was a pretty good example- order fulfillment took a lot longer than anticipated because of the high volume.

On the other hand, delivering a desktop application is about equally difficult for 200 customers or 2000 customers, so the Macaw guys should just revel in their extra cash (aside from the stretch goals that they chose to take on as well, and printing a handful of extra t-shirts).

This makes sense. The cases I was thinking of were actually for companies planning on making physical products.

Not entirely convinced. Too much money that you are obliged to spend can sink a project just as well as underfunding.

Due to some "Mythical man month" reasons adding more people and features can put you in quagmire easily unless you have very good project managers. I am not sure even those could bear the influx of order of magnitude more money than needed.

Kickstarters are not preorders.

Stretch goals will extend the schedule (something that Kickstarter doesn't really explain), but you don't have to have stretch goals. If people give you more money than you need you can just keep it.

You don't have to spend the extra money on things that will blow out the schedule.

Anyone aware of the realities of software development enough to think about capping the max should be aware of the mythical man month and cognizant enough to realize they can just bank that extra money as a rainy day fund for when the product almost certainly goes over schedule even with the original plan (Hofstadter's law).

Providing support to the extra 1800 customers, however, can be much more difficult.

You can put a cap on it by limiting the # of backers for any given reward level (this is what we did), but most of the big campaigns screw themselves by letting it overrun

What was your product?

http://www.kickstarter.com/projects/weargustin/gustin-redefi...

These jeans look awesome. Well done.

Thanks! It's been a wild ride this year

Congrats! We are prepping for our KS early next year and been dissecting successful campaigns including Gustin's. Really like your video.

Is it possible to use it on an existing project? Change a couple things and save it back without all the html/css being changed?

It looks very nice, it makes me think of Flux.

The problem with wysiwyg editors from previous generations (Dreamweaver, Frontpage, etc) is that you could never arrange the layout the way you wanted and ended up being developers worse enemies with the poor code being generated.

Now you'll have the power of Photoshop (Positioning, layers, transparency, etc) with a clean code output (grid aware, responsive, css3)

>"Please note: Macaw v1 for Mac OS X should be ready to roll in January 2014. We have already started on a PC version, but it may take a couple extra months to polish up." //

Bah. Pet hate - Mac OS X runs on PCs.

Presumably they mean an MS Windows [8?] version? Wish people would be upfront about this it's silly having to hunt around to find if they're supporting Linux.

Was it just me, or did they write Macaw up to now, based on the demo video, in JavaScript, CSS and HTML5 like Adobe is doing with its own tools? http://topcoat.io anyone?

Not to dismiss the work, as to me this should mean getting it cross-platform that much faster. ;-)

Macaw looks great for generating the CSS and HTML code.

For JavaScript Canvas or SVG code, we make a tool called WebCode (http://www.webcodeapp.com).

WebCode is a vector drawing app that instantly generates code.

Looks interesting. My initial impression was that it reminded me of an Adobe Edge app. I wonder if it will be compatible with existing frameworks, such as Bootstrap, Foundation, etc.

Curious if all the output code is arranged in absolute positioning.

From macaw.co:

ABSOLUTE TO STATIC CONVERSION Macaw offers designers the freedom of absolute positioning within the interface but will convert to a static document flow upon export by calculating the necessary margins, padding, floats and clears. It's the best of both worlds.

Watch the 20 minute demo, it’s pretty darn amazing.

http://vimeo.com/70771444

Designers, what is M∀CAW still missing? (serious answers please)

Importing already created projects and editing that website.

I was wondering if there would be any answers about this. Without that feature, it's a one way tool: all changes must be made here, the compiled product can't be usefully edited.

I imagine it would be pretty challenging to parse an existing website into something usable, but it would definitely make the tool a lot more useful (not to say it won't still be useful to lots of people).

IIRC from the video, at Macaw's core is an embedded webkit engine so they might not have to do any parsing at all but instead interface said engine. That being said, I'm not quite sure how difficult it would be to go from having it parsed to making something that can work with the parsed code since it might have a structure that would have to be further parsed to extract the meaning of the code.

Hard to ask anything specific without using it, but are you also targeting UI designers who create complex web-applications? If so, what are some of the features that will make their lives easier? Sorry for the vague question... I think this will be great for general web page layouts, but maybe a video showing complex form designs and layouts would seal the deal for me.

export to less / sass / stylus; read in existing projects; support for compilation applications like brunch.io; support for scripting: js, cs, etc.

So .. we're all CS guys here. Does anyone have any idea as to how such a system can work? Just curious as to how they're making it work.

Is it open source?

It would be really nice to see this come to Linux eventually too (though, the KS FAQ indicates they're not looking at Linux at the moment).

It always makes me sad when people don't support linux. Especially when they are starting the design for Mac, it shouldn't be that hard to compile for both.

"We have no plans to bring Macaw to Linux at this time. Once the Mac and Windows versions are released we will look into Linux."

Eh.

The only bad thing about Macaw is that early access is not until January 2014.

When Adobe buys them up, will funders get shares of Adobe stock?

Ha, was thinking about Adobe already, too. Users will rue the day.

But for the founders' benefit: hey Adobe, go look at their Kickstarter. Why don't you just acqui-hire these guys right now?

$30 came from me!! ha

It's so much easier and rewarding to just learn the basic code to structure a webpage. What if I don't really know much web dev, but master this tool? Where will that get me?

"So it shows here you've developed 8 websites for clients, wow, what does your stack look like?"

"Oh I kinda just mastered this one specific tool, I don't really know how to code."

Reminds me of Dreamweaver days.

I think the idea is that this is for people who have learned the code to structure a webpage, but are sick of fiddling around with CSS/LESS/SASS to get a certain div in exactly the right place.

Agree, it seems like a complementary tool for people who know how to code. I also would have loved to have this tool a couple of years ago to help explain certain concepts to my boss (an HTML/CSS naysayer), i.e. 'these are the kind of layout things that can be abstracted'.

Is this opinion this generation's version of "Real men only write code in (C|assembly|Fortran)"?

Well it's not quite so transparent in its naivete, since a lot of people have tried and failed to create decent visual editors for HTML & CSS in the past.

This particular editor does seem a significantly better attempt than previous efforts though, namely that it seems to be written with a understanding of the equivalent, idiomatic code.

Not really since you can code just as well in other languages, but with tools like these, we've seen them built and we've seen how bad they were. Just going off experience.

Depends on your end goal I suppose. Not everyone wants to learn development. Some people just prefer getting things done and this tool certainly has potential to help in that regard.

The purpose of web design is to create a document which is appealing to the eye and is laid out in a logically consistent manner. It is a pain in the ass to jump back and forth between an HTML document and a style sheet in order to get various page elements sized correctly and with the right padding/shading/etc. Macaw gives people all of the settings they need side by side with a visual representation of their document. It isn't meant to replace hand-coding. It's instead meant to complement it by taking the pain out of the design work.

I kind of agree. I can't imagine it being popular with professional web developers or designers. Working with modern HTML and CSS is fairly straightforward and quick for development. I see sorting out edge cases and bugs produced by code in Macaw would leave you better off writing the code from scratch. Plus, like you said, this has the benefit of being educational and transferring over to other work.

I also can't see it being accepted by people trying to get a simple site online for their mom and pop shop. Tools like WordPress are much better suited to their needs, and they can click a few buttons, get a theme, website, and CMS working in minutes.

What I would like to see is a tool to mockup changes to existing websites. For example, I enter a URL, and I can quickly drag and drop elements to different locations, adjust margins, widths, colors with a proper color picker, etc. I find I'm always using Firebug to try out style changes, but it's a little sluggish to constantly select elements, and manually modify CSS properties. Using an online app that's a little more interactive would be useful, and it doesn't need to produce proper code, since I'm only using it to visually see if these are changes I want to implement or not.

For example, I enter the URL to HN. I click the orange bar at the top, color pick it to green. Click the link headings, change them to bold red text, and slide up the line-height to add more spacing. I hit save, and it gives me a URL like jsfiddle that I can share with others. I can then post this to HN, and say, 'hey, what do you think of these changes to the HN layout?'. It's a quick way for multiple people to share ideas on improving an existing design, or users to share their suggestions with developers. It would be great for meetings too. Let's drag our left column a little bigger, maybe scale these heading down a bit, and drag our logo over here. Yep, that looks a little better, have the development team code those change up and push it live.

This idea is awesome. I hope someone builds it.

Someone made a tool just like that and posted it on HN a while ago. I can't remember the name of it unfortunately but maybe another commenter can. I think it had CSS in the title and it was essentially a tool to customize a live site with CSS and then share your result.

Could it be tomodo.com?

"These are really great illustrations! What tools did you use?"

"I used Adobe Illustrator and then exported them as SVG files."

"SVG files are just text files. They look kind of like HTML. You should really use Vim to code SVG files. It's so much easier and more rewarding. Illustrator is for babies."

Reply on news.ycombinator.com