Hacker News Reader

Comment by hcarvalhoalves | Hacker News Reader

Just a drawing tool in the browser. This doesn't do anything different than Photoshop or Omnigraffle, if the web designer is smart enough to reuse layers / components.

It could be a really useful though if it had support for more than absolute-positioned, fixed-sized elements, and used the browser's layout engine instead.

Today's biggest problem is that web designers use Photoshop for coming up with mockups and then they just expect content to fit on their fixed-sized design, when the web exactly the other around - content is king.

View on HN

The hard part about using the browser's layout engine is that it is limiting to the designer. We'd have to snap things into say, floating position, etc. And we'd have to know exactly what the designer was thinking when they're dragging some element around. Or they would have to know about floats, and how to use them.

We think (right now) that the best way around this is some kind of constraint system, like CAD apps have. We're not sure what that looks like yet, though.

I think what you have is great and I think you should run with what people are seeing this as "awesome" for, design prototyping. I think making this into anything that generates layout or uses the browser engine is going to be either: much harder than you think, or: will lose much of the functionality that you can allow for now via "do whatever, drag/drop, absolute positioning".

I totally agree. I've been wanting an app like this for the last 6 months (wondering why one didnt already exist), and a lack of fluid layout doesnt put me off at all. The one thing I really want is realtime collaborative use, ala google docs (Firebase should make that easy).

You should email me. ben@easel.io

Thanks. That is the intent. Design prototyping, but with tools that allow the dev to build it more quickly.

> The hard part about using the browser's layout engine is that it is limiting to the designer.

True, and the even harder part is building a system that treats that as a feature rather than a bug.

Right. That's a human problem, though. Many designers have told us they feel very restricted in wysiwyg tools, so refuse to use them.

That makes a lot of sense: most WYSIWYG tools end up presenting a UI that cares more about appearance than semantics, so if you actually care about building good semantic HTML and complementary presentational CSS, most WYSIWYG tools utterly fail. So if a designer cares about building fluid layouts and semantic content rather than pixel-accurate recreations of Photoshop images, it makes sense that they'd feel very restricted in a WYSIWYG tool.

it is limiting to the designer

As a user, I want the designers to be limited. Scaling by percentages and using constraints sounds like an improvement. On the other hand, I like your minimalistic tools.

The hard part about using the browser's layout engine is that it is limiting to the designer.

Web design is all about limits. The designer has to understand, and ultimately play along, the constraints the media imposes on him - otherwise he's not a web designer, he's just a guy coming up with pretty mockups.

(...) Or they would have to know about floats, and how to use them.

Sincerely, if a web designer doesn't understand how floats work, what are they doing working with the web in the first place? Web designers != Photoshop pilots

I think it is more than a drawing tool, this is what the TBL intended the web to be. Where you can view and update pages from the same interface:

http://www.w3.org/Amaya/

A bit like a wiki but more rich.

I think this is great for prototyping ideas. Using Photoshop for web design is an approximation at best.

True, but this is just a different sort of approximation, too. Layouts where all the elements are absolutely positioned don't work in the real world, so the markup and css will have to be 60%+ rewritten and will likely not look exactly as it's laid out here.

The intent at this point is to not generate layout html/css. Humans are much better at this right now than the editor could be. And the assumption is that the programmer will want to write the layout code himself anyway, being careful to place it in nice modules that fit with their dev environment.

We could build an entire product just trying to generate semantic, reflowable markup from a design.

I agree. Let's be honest - it's kind of weird that we rely on a program that is really designed for editing photographs as our main tool for designing web sites. I'm all for exploring this further at least as a tool for doing layouts and design that CSS can handle. For everything else (e.g. designing icons), there are more appropriate tools.

It would be nice to have something that allowed you to use both. There can be so much rapid experimentation in photoshop because we know the tool so well - having that import easily into something like this for the final touchup would be ideal (in my most perfect world) as so much time goes into the touchup and the last few pixels in css.

One of Photoshop's virtues is, in my opinion, that it is NOT a browser and does not force one to think in terms of what browsers can do. Like all freedom, such a huge range of possibility does pose certain problems, but it also allows for very interesting, sometimes completely novel solutions.

I do both design and development and I find I use very different parts of my brain when doing one or the other. For me, it's important to stay far away from any kind of code until it's actually time to start implementing. Otherwise, I fall back to predictable habits.

Reply on news.ycombinator.com