Show HN: Easel, web design in the browser

Marquee is _really_ cool. But they are aimed at a different audience: non technical users. Our goal is to help streamline the design -> development process. The people making apps need a lot more flexibility than marquee provides.

This is cool. I like the concept. I'm hoping that someone can create a web app that reduces the need for Photoshop. You guys are off to an auspicious start. Great work!

My only comment is that the UI was confusing for me. After 60 seconds of playing around, here are a few ideas to consider (if you wish):

1) The "inspector" window on the right seemed to change a lot. I know contextual "inspectors" are standard UI practice, but as an Easel noob something about your implementation was confusing to me. (For example, why when I click one of the rounded buttons does the inspector say "Rectangle" and when I click another one it says "Element?")

2) There were a lot of icons that I couldn't understand at first glance. Icons are okay, but too many unfamiliar ones makes me confused. (i.e., What does the "lightning bolt" mean?)

3) At one point I had the menu bar at the top, the tools bar on the left (a la photoshop), the contextual inspector on the right, and another floating window open on the bottom left. It just felt overwhelming having so many controls open. (That was when I instinctually closed the Easel window.) Maybe you could anchor all of the floating inspectors into 1 group on the right, like Photoshop does.

4) The circles for the 2 colors is confusing to me. (What does the number inside of the second circle mean? Why do many other graphics app use 2 squares instead of 2 circles?)

5) Fields in the inspector weren't labeled. For example, when I select the "easel.io" logo at the top of the page, one of the fields in the inspector says "Lobster." As a font nerd I know that must the "font" field, but do you expect every user to know this? Some labels, or icons like Photoshop's font inspector, would help me understand what each field does. (http://i.imgur.com/CAY88.png)

Overall the UI just felt overwhelming. There was too much "unfamiliar" stuff and not enough "familiar stuff."

A good article is "Interfaces for Staying in the Flow" by Bederson/UMD HCI. On the first page there's Figure 1 (http://hcil2.cs.umd.edu/trs/2003-37/2003-37.pdf), which shows how flow is derived from a balance of skills and challenges revealed over time. My feedback is there were too many challenges in Easel at first. In terms of Figure 1, that would be a low x-axis value and a high y-axis value. This would indicate the UI may create "anxious" users.

If I may, I'd also recommend a little bit of "convention over configuration" for the UI. Although DHH talks about this in re: a codebase, I think the rule applies equally well for the UI. If there's a standard way that apps do something, try and stick with it. For example, canvas size isn't something you usually find directly embedded into a menu.

In short: I would suggest making the "basic features" more "familiar" looking at first; this way, people can get started making sites right away. Then, bury the "detail features" further in the UI so that if you want to do more complex tasks you have to spend more time learning the program. Benderson's article does a great job explaining all of this.

On a totally separate note, "Easel" is an excellent name for this product... and in this business, the name matters a lot.

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".

Very cool interface. Any a very nice usage of keyboard shortcuts.

Can Easel output an entire web page? - meaning can I layout an entire page then get a zipped download of the page plus any CSS and JavaScript resources?

Maybe for you, not for people who create real designs that aren't just css buttons, gradients and rounded borders.