

Sneak peek of Macaw – a code-savvy web design tool [video] - jack7890
http://macaw.co/peek/

======
splatcollision
Looks pretty good - I'm happy to see more web layout tools coming to market,
since I'm responsible for Edit Room [1], my own vision of a flexible and
responsive web design tool. Also curious about the pricing (obviously).

It's a big enough market that the more variety of tools that exist, the
better, as designers can find the tool that they like the best, instead of the
bad old days where it was Photoshop or Fireworks, and they both were crap for
web design.

What's interesting is to compare and contrast the difference between a tool
like this on the desktop, and tools like mine that are web-based (see easel,
divshot, webflow, probably 1 or 2 more that I'm forgetting, etc...)

Being on the desktop gives them a bit more power and control over the user
interface, as well as super-easy importing of external assets.

Being web-based allows me to do neat things like have live-updating preview
links, so you can immediately see how the design works or breaks on a bunch of
screens at once. Also importing HTML content from any URL, for doing quick
responsive redesigns. I still have some work to do on the output CSS being
more optimized, but for prototyping and being wildly creative in a flexible
web canvas, you can't beat it.

[1] [http://edit-room.com](http://edit-room.com)

~~~
toyg
It look absolutely gorgeous, but when I get to the designer it simply won't
let me create any layer, dragging doesn't seem to do anything.

Safari 6.0.5 (8536.30.1) on OSX 10.8.4. With Chrome I only get a "sorry there
was an error" message.

~~~
splatcollision
Thanks very much! I'm sorry to hear you found a bug. I'll investigate and see
if I can get a fix up.

------
daleharvey
This looks great, but it has the same problem I have with every other web
based design tool, it aspires to be a WYSIWYG editor.

I agree there is a need, but I think that need is exaggerated, writing html /
css is pretty easy, its not fun but its generally nothing compared to the
overall work, half the time you still have to do it manually anyway since it
has to fit into frameworks etc.

I want something that lets me focus on the design aspect, it should have nice
snap to grid features, ability to inspect and edit css, but it should also
have a vector drawing tools, image manipulations. The current set of design
tools have terrible support for most common web functionality, photoshop
doesnt even have rounded borders, illustrator / fireworks / sketch /
pixelmator all almost entirely ignore things that are important for designing
for the web. However web based editors almost all lack any graphical and
vector capabilities whatsoever.

I started on this and gave up a while ago,
[http://upmock.com/](http://upmock.com/) and wrote about it
[http://arandomurl.com/2012/10/15/upmock-is-
dead.html](http://arandomurl.com/2012/10/15/upmock-is-dead.html). Currently
the most promising so far has been SVG Edit, however it doesnt seem
particularly active nor has there been a focus on producing web designs

~~~
blankenship
_I agree there is a need, but I think that need is exaggerated_

Speak for yourself. As a code-savvy designer, who splits everyday designing on
paper, in Photoshop/Illustrator and in the browser, I don’t think I can
overstate how woefully our professional tools for web design have actually
kept up with web design.

 _photoshop doesnt even have rounded borders_

Sure it does—vector shapes + Stroke Layer Styles work great. Do you mean
something else?

~~~
crazygringo
I feel like I should write a bot to say this on forums across the Internet.

Every time somebody complains how Photoshop doesn't have rounded corners, they
mean it doesn't have _dynamic_ rounded corners. You can't change the
roundedness in any remotely easy way after you draw the shape, and changing
the dimensions of the shape distorts the corners.

They're just a huge pain to work with, when they need to be trivially easy for
doing web design.

~~~
oneplusone
Photoshop CC supports dynamic rounded corners.

------
willtheperson
I'm really excited about this.

When tools break away from old ways of "doing things" you can end up with much
more exciting stuff. I know that I fall into past behavior when pressed for
time (which is every project ever) and if I had an easier way to experiment, I
might try something different.

I'm hoping it has some idea of optimization though. He was dragging out
individual icons for every social button and logo and whatever. It doesn't
seem like sprite sheets are possible here but maybe? I don't imagine sass/less
support here but that would be neat.

Finally, I'd love to see how they are building the app itself. Is this a
Chrome embedded app?

~~~
az-combinator
having every project pressing for time is a problem with project management
and not the tools themselves. A little OT I know but something we usually take
for granted.

------
leishulang
Can it read existed html code and modify the design on top of it? Or does it
uses it's own project metadata for design information?

------
duopixel
Went through the whole video, looks superbly promising even at it's beta
stage. It is obvious the authors get best front-end development practices as
well as design principles. Definitely will follow up.

------
pbhjpbhj
In the video how did he manage to leave that M icon at 79px and not change it
to 80!!?

Something I did note was that the pre-used class names weren't auto-suggested;
eg on the footer buttons. Sure that'll get fixed. Also perhaps value snapping
to avoid values like "29.608938547486037%"?

Everything else looked pretty slick though.

Didn't see the GA code being added in the video. Also it seems like Typekit
was integrated to get some of the typographical flexibility.

Generally though I really liked it; seems very promising.

~~~
jwarren
I'm sure there's a name for it, but I fight quite hard to not necessarily
round values to pleasing numbers. Sometimes that's just the right value.

~~~
pbhjpbhj
The precision being used is far too high. Optional snapping to common values
is probably a good idea too (eg 80px is a common button/logo/icon size).

------
harrytuttle
This reminds me of Dreamweaver which makes me cautious having had to deal with
the output of it for years...

~~~
Posibyte
There's a sample output on their page [1] which is very clean.

[1]: [http://macaw.co/peek/sample/](http://macaw.co/peek/sample/)

~~~
harrytuttle
Dreamweaver's output was clean in the demos as well. It didn't stop a
veritable rats nest of code appearing on anything marginally complicated.

It's not an easy problem to solve without human intelligence.

~~~
az-combinator
It was also the developer's responsibility not to use DW in a way that would
make it spit a mess of code. Just because you could embed a table inside a
table of another table it mans you should.

~~~
pbhjpbhj
With DW that was the only way to actualise certain designs though.

------
KeyBoardG
Really, really nice job, congrats. All your hard work really shows. Looking
forward to this.

------
etchalon
These tools always look like they'd be great, and always completely fail for
an actual design workflow for anything outside of wireframing.

For a specific example as to why, look no further than the first 4 minutes
where the creator "imports all these assets we made". Made where?!

My design team doesn't work like that. No design team does. They don't "make
one thing over and then plug it in over here". They make everything together
in one program. Because it's impossible to jump between two different apps
when you're exploring a creative concept. You don't think to yourself, "OK,
I'll need this icon and this icon and maybe a background image with these
precise filters applied and it'll have a sidebar so I'll need a texture for
that..."

You open Photoshop, or Illustrator, or Pixelmator and you start trying things
until something you've tried looks good.

While it'd be great to see design tools that actually took the intricacies of
HTML structure and CSS into account, tools like Macaw (and all the others I've
seen) all fall down for real work.

------
jwarren
Looks brilliant for mockups and simple layouts! I'd love to see the output for
a more complicated layout.

I'm definitely excited for this one.

------
josh2600
Echoing other comments below, here's my feedback:

Visually it looks awesome, but what it really comes down to is the quality of
the code. Most WYSIWYG editors leave a lot to be desired.

Second, I am always wary of amazing tools with unknown pricepoints. I get that
you're still early, but some semblance of cost structure would be great.
Frankly, I don't know if you're going to charge $1500 or $5 a month or free. I
just don't know, there's too many ways you could choose to market this, and
that insecurity, that lack of knowledge makes me uncomfortable.

That being said, great job on the concept and I can't wait to see what it
looks like when it goes live.

~~~
timdorr
> Visually it looks awesome, but what it really comes down to is the quality
> of the code. Most WYSIWYG editors leave a lot to be desired.

Did you see the code output at the end? It looked like pretty solid HTML and
CSS to me. What was particularly interesting was the adhereance to OOCSS
principles in the styles, but that could just be the result of good practices
with the user.

~~~
pan69
It was a pretty simple "design", so yes, the markup should be reasonably
clean.

For a real demonstration why not try something more "real-world"[1] and see
how that turns out.

[1] [http://cnn.com](http://cnn.com)

~~~
umsm
I don't think most people will design a cnn.com on a regular basis or from the
ground up.

~~~
prawn
I have fairly standard clients and what I usually work on is closer to a CNN
page than the page Macaw demoed. And more often than not, it's from scratch.

------
GoNB
How do I use Macaw with Bootstrap/Foundation? Would I design the static
website, then go in with my text editor and implement my front end framework
of choice, or does Macaw have built-in support for front end frameworks?

~~~
dclowd9901
This is more a css/html replacement tool, and should probably be thought of as
such. Framework implementation is about code design and engineering, something
you should take up on your own.

Regardless, it'd be nice to not have to write markup and css, to me a boring
process; a product like this is long overdue. My question is how it fits in
with workflow. Who owns this in a group setting; the designer? The front end
dev? Do I have to design a page in photoshop before I try to build it in this
(in the presentation, the graphics were all ready to go and layout, but it's
never like that in real life). It just seems weird to have to go through the
process of designing a page, and then designing it again.

~~~
az-combinator
I would think it would be owned by the designer and would be used as a
prototype tool (as others mentioned before). I would not use PS for anything
else other than to create elements to support the design (crop images, special
graphics) but other than that a tool like this would be great to get the
project started on the right direction and test the functionality on different
browsers without having to involved a dedicated dev into the mix.

------
rhokstar
Would be nice to load frameworks like bootstrap to generate bootstrap code.

------
marcamillion
Wow....this looks awesome. This could definitely challenge the ubiquity of
something like Bootstrap.

If you have something like this....why use Bootstrap?

Can't wait for you to release it.

~~~
mcrider
I'm personally a little disappointed it doesn't use Bootstrap or Foundation. A
lot of developers are already skilled with those frameworks, and as I'm sure
modifications will have to be made to the code of any of the new responsive
design tools, using a familiar framework would be a big help.

I also hope these new tools allow us to output templated html and css --
there's nothing clunkier than dropping html into a rails project (I know that
webflow will be able to output jade templates).

------
davej
Watched the video. This looks amazing! I don't say that often.

Wow, fantastic job, the smart and pretty CSS/HTML output is the icing on the
cake.

------
nilliams
Best attempt at this I've seen, looking forward to getting my hands on it.

It states in the video this is a native app, but written with HTML/CSS. Would
be interested to know if this was written in node-webkit (like Light Table),
or if not, what?

[1] [https://github.com/rogerwang/node-
webkit](https://github.com/rogerwang/node-webkit)

------
iambateman
On price point, I'm guessing $79 basic, and $129 pro.

It's desktop, so unlikely to have a monthly model.

~~~
publicfig
Seems a bit low for the price, but I think you're right about no monthly
model. I could be wrong, but I don't believe it's possible to have
subscription based software at this point in the Mac App Store, which is where
they mentioned they'll be selling it.

------
ridersofnorth
This looks really promising. Can't wait to try it out. This will be just
available on Mac?

~~~
BHSPitMonkey
I hope not; It should be an easy task for them to port this to Linux and
Windows (and even to publish on the various first-party software stores they
come with), given that the app is evidently built using web technologies.
Perhaps even something common like node-webkit.

~~~
michaelbuddy
yup that seems to be their plan.

------
nodefortytwo
quite interested to see if it can really be used in production rather than
just mock-ups. For example can you use the stylesheets from one page across a
range of screens and still get the same level of clever optimisation.

~~~
GoNB
I'm wondering the same too. At the moment this looks like a great static
website design tool. It may allow me to provide rapid design for clients who
want a simple blog.

------
teyc
I'm astounded. Is this really a web-app. Did you roll your own client-side
framework? My mind is blown. And there are rulers as well?! Where did you
learn to code like this?

~~~
michaelmior
I believe it's a native app for Mac OS, not a web app.

------
knes
Looks really interesting for doing mockups that can be easily tweaks in the
browser or add low level features by editing the code.

------
matt__ring
I like it! Easily build a pretty page, drop in a 'lil angularJs app & go. Too
bad I'm not a mac guy...

------
marmarmar
seems like a good tool for prototyping

~~~
culshaw
I thought the same thing, looks way better than Edge ever did.

------
kyle_martin1
Awesome! What's the price point?

------
az-combinator
Would it be wrong to use his video to create a web based competitor? Looks
like it is possible.

~~~
michaelmior
Imitation is the sincerest form of flattery ;)

------
tortilla
This one might actually be a tool I can use in my workflow. Can't wait to try
it out.

------
sakal
I was impressed by video of Macaw, but it not released yet and I need it under
Linux. OMG

------
deepak-iiitb
Looks great for mock-ups. Feel would be a great tool for Product Managers too.

------
Fando
Simply stunning! Great work. Looking forward to trying it out.

------
od2m
This looks perfect the next time I need a static webpage...

~~~
jwarren
This could definitely be a first step towards building a CMS template.

------
hcarvalhoalves
Looks good, it seems to get the markup right.

------
jdmitch
Looks great - when is it out?

