

Show HN: Easel, web design in the browser - mrbogle
https://alpha.easel.io/demo

======
splatcollision
Congratulations! Glad to see more people attempting this type of thing. The
demo content design is pretty nice.

Some good things in Easel, but I have lots of problems with all the tiny
little controls. Also it's an interesting decision to use a canvas element
instead of the DOM. Without solving the overall page layout issue, this is a
nice drawing tool like others have mentioned, and kudos to the technical and
design effort, but in the end if you're not using the DOM, you're making
pictures of web sites...

Therefore, it's my responsibility to let you all know about Edit Room, my
project as an independent developer, <http://www.edit-room.com/>

Edit Room is also a 'web design in the browser' app, but it uses the real DOM,
not a canvas, so whatever you can build with Edit Room is what is truly able
to be built with HTML and CSS. It's only a slight limitation due to the unique
way I've handled absolute/relative layouts. Edit Room still gives you
incredible design and layout freedom, without floats.

Edit Room doesn't do fixed widths at all. Documents created with Edit Room
flex naturally. Everything you layout and design with my app is based on a
flexible grid, and it has a built-in width preview, so you can design at any
screen width.

Edit Room exports the full HTML and CSS for your entire layout, or you can
copy individual elements' CSS, it's adaptable to your workflow.

Edit Room also supports linking Typekit and Fontdeck accounts, so you can use
Web Fonts in your exported designs.

You can try out the demo here: <http://www.edit-room.com/screens/13/edit>

Oh, and one more thing: You can animate your layers with visual keyframes and
Edit Room generates CSS3 Animations.

~~~
jurre
This is very impressive, nice job! If I can give you one piece of advice
though it would be to hire a designer. You need to give people the feeling
that they will be able to build a beautiful website with your product and I
almost dismissed it by looking at your landing page's design, it was only when
I decided to check out the demo that I was convinced.

~~~
splatcollision
Thanks for the feedback! I've gone through several versions of the home screen
so far and will try to improve it further.

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

~~~
mrbogle
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.

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

~~~
tomsaffell
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).

~~~
mrbogle
You should email me. ben@easel.io

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

~~~
mrbogle
Thank you for such a detailed reply!

As for the circles, we thought they looked better than squares.

We've been getting tons of response on the number in the middle of the circle;
it is the stroke width.

The 'inspector' (good name, btw) needs work. It definitely needs better layout
and labeling.

Re: challenges. Noted.

Overall, thanks for the feedback. Know that we are integrating this into our
todos. :)

------
pygorex
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?

~~~
mrbogle
It can. But things will all be absolutely positioned. The intent is to
generate pieces of html and css that fit into your dev environment. The code
generation is still very much in-flux, but from what we're seeing, programmers
dont want the entire thing generated.

~~~
pygorex
_but from what we're seeing, programmers dont want the entire thing generated_

Actually for developers like myself there's several use cases where having
access to the complete generated source would be awesome:

1\. Separate the positioning/layout styles and the color/font/design styles
into separate CSS files. That way I can include all the designs created with
Easel easily instead of copy/paste one at a time for each element generated.

2\. For showing a mockup to a client or knocking out quick interface for a
side project using absolute positioning can be acceptable.

~~~
dagingaa
Aye, an export function that generates e.g. less-files much the way bootstrap
has organized their imports would be killer for this app. It would make it
dead simple to prototype buttons or sections of a page, and easily include
them in your build process down the line. Having variables separated would
also be a plus.

------
iusable
Instantly fell in love with this.

Thank you for not trying to dumb down the UX with an 'easy to use' UI. It's
clearly an 'easy to learn' UI and I can't wait to get that invite.

~~~
mrbogle
email me at ben@easel.io and I'll speed that invite up.

------
mkl
Hi, this seems neat. Some points:

In Chrome 19.0.1084.52 on Ubuntu, I'm getting told to use Apple command key
shortcuts.

There is no scrollbar. The scroll wheel works, but the site captures the
middle mouse button (without using it?), so grab and drag (with the
chromeTouch extension) doesn't work.

The little instruction sequences would make a lot more sense if they said what
was happening. E.g. instead of "hold shift, click the text", "hold shift and
click the text to frob the whatsit".

Grids and columns seem limited and too much work for aligning things. Check
out what Inkscape can do.

There seem to be functions that are inaccessible if you don't know their
keyboard shortcuts, or perhaps just not working for me, e.g. selecting
multiple objects (not shift, control, or alt?!), making a group.

~~~
mrbogle
Thanks for the feedback.

The apple keys are part of the design so sadly wont change.

Shift should work for selecting multiple items, so thats a bug. We admittedly
haven't done much testing on other platforms.

Grouping and making elements should definitely be in the right click menu.
There are some (probably esoteric) icons on the inspector/property panel for
these functions.

We'll look into the chrometouch extension and see how we can make it work with
the app. I didnt know it was capturing the middle mouse button. Will fix.

Thanks again for the feedback.

~~~
lucian1900
What do you mean "part of the design"? Showing keys you know very well many of
your users can't type is part of your design?

~~~
schrijver
Yes how does that work? Strange statement! I second lucian1900s suggestion.

~~~
mrbogle
Sorry for the confusion. It's just what mkl said: the apple keys are hardcoded
into the demo page.

------
gizzlon
Cool :)

Two notes:

    
    
      - I'm not on a mac so don't give me mac shortcuts
      - Control+Shift+E is already bound in firefox (and it's a very handy shortcut)

~~~
robyates
Ditto for me as non-Mac user as well. One neat feature might be to detect
which operating system you use and display the appropriate shortcuts.

------
digitalengineer
Great idea guys! I can already see myself designing something and building a
quick real-world prototype and sharing the url of that with clients. So much
better than designing/wireframing something, creating a 1000-layer mockup in
photoshop, sending over a dozen JPEGS to the client and explaining what's
what. As a designer the interface is a nobrainer. I can just step in and get
to work. Very easy! Nice to see 960 grids-support as well! I understand
there's no liquid-layout support but thats okay. It's not the most important
thing. (And I feel you could always add support for that later). One tip: I
see the vector-drawing tool and an image import tool. How about vector-import?

~~~
mrbogle
Thank you. Please email me at ben@easel.io

------
sandijs
It's a interesting problem you guys are tackling and your progress is very
impressive! I like the UI! And for sure it's good that more people are working
to make web design more enjoyable. For some time I was wondering why there are
so many new frameworks for coding emerging and way less 'visual frameworks'
designers can use. That's why we are building one – focusing on freedom and
responsive websites rather than code, something Photoshop can not handle for
sure. More at <http://www.froont.com>. Anyhow we are living in very
interesting times! Looking forward to see how Easel.io will evolve!

------
iamhenry
I've tried to tackle this very same problem. I've been doing a lot of UX work
for a native Mac OS, which would allow you to design similar to PS but use a
preview using a Webkit engine.

You can check out the mock I've been working on via my Dribbble site
(<http://cl.ly/HOrs>) and the larger version is attached below that shot as
well. If anyone is interested we should definitely sync up and tackle this
problem.

I think you you have here is off to a good start but is definitely too basic
if you are intending it to take over PS. Would be great for simple prototyping
sites though.

------
skyhook_mockups
Congrats on putting out a great looking alpha. One question I have: The entire
layout is being drawn inside of a canvas. Why was this decision made? Since
(at least partly) the purpose of your tool is to output css it seems that you
have tasked yourself with recreating CSS rendering inside of a canvas. Seems
like a huge and unnecessary burden when just outside of the canvas you have
this rendering tool specifically designed to render CSS.

------
callmeed
You should take a look at Unbounce. While they're targeting landing pages,
their page editor does this the right way IMO.

What I'd personally like to see is a JS in-browser page editor that is (a)
built on top of Twitter Bootstrap (b) open source and (c) integrate-able with
other sites much like rich-text editors are.

I think you could still tack on a paid service to it, but starting with the
above would be gold, Jerry, gold!

------
flixic
Does "Download as PNG" menu action in File menu work for anyone? That is the
only feature I care about, and I haven't seen anything like that before.

~~~
mrbogle
Which browser? Will look into...

~~~
avojro
Chrome 19 on Win 7 for me.

Also the Element window gets stuck on my cursor when I try to scroll through
it.

Really looks great though.

~~~
mrbogle
Thanks :).

Ah, ok. Will fix the stuck issue. That's a nasty one.

------
DigitalSea
I'm a web application nerd and I really think you're onto something here. As
an initial offering this app has a lot of promise and I can't wait to see what
else you guys do with it in the future. Everyone will be designing (pretty
shortly) in their browsers it's only a matter of time with the advent of cloud
computing.

~~~
mrbogle
Thanks. We agree with you. It will be so much easier when the tools understand
the process.

------
untog
To be clear- does this generate HTML, or just images that are accurate in
terms of what is possible with a browser?

~~~
egonschiele
apple-shift-e shows an export lightbox with html.

~~~
untog
Then I'm a little dubious about that- given that everything appears to be
absolutely positioned. Reminds me of the Adobe web design tool before they
bought Macromedia (anyone remember the name of it?)

As a mock-up tool, it's great.

~~~
mrbogle
re: absolutely positioning, definitely not ideal. We're toying around with
different code generation techniques. We feel at this point, that generating
layout html isn't really a good idea. So we're focusing on getting the colors,
shadows, text, etc out out the tool.

We'd love to know what you might need as far as code generation.

~~~
nlh
This is not an easy problem (and I think nailing the parts you're focusing on
first is a good decision) but if you guys could get the code generation part
of the overall page layout problem solved, you'd really have something unique.

I think by far the most time consuming (and frustrating) part of "easy" web
design, at least for me, is getting the floats, clears, block vs inline, etc.
stuff working perfectly without resorting to absolute positioning or other
shortcuts.

If I could quickly throw together a page layout - navbar on top, image on left
on main box, text lined up on right, etc. define a few properties (fluid vs
fixed width), this element centered, that element indented, etc. and quickly
get a working page layout system in place, that could save people hours. I'd
pay for that in a heartbeat.

Like I said, I know this isn't an easy problem to solve and I like the idea of
getting the per-element / style code generation done first, but do keep this
in the back of your minds. Keep it up!

~~~
sandijs
floats, block vs inline and adaptive layouts.. for sure it is not easy but we
are working to solve that in <http://www.froont.com>.

------
mwill
I was a a bit bummed when I realised that slick scrolling is canvas. It feels
outstanding on my mac trackpad. It's a very 'appy' web-app, if that makes
sense.

It wasn't until I read the comments here that I realised that this doesn't
actually export html/css. It's still a downright slick mockup tool.

~~~
mrbogle
It does export pieces of the design in html/css.

------
fendrak
This strikes me as a good mix of Balsalmiq (www.balsalmiq.com) and Photoshop.

One of my pet peeves is getting mockups from designers that clearly fail to
take the actual abilities of browsers into account. Hopefully, this can change
that, while still giving them the design freedom they want!

~~~
luiperd
Then you need to get a designer that knows how the web works! It shocks me
when I see fellow designers make things that's not feasible on the web.

~~~
joshnh
On the other hand, a designer that has no knowledge of HTML or CSS can open
doors that you may have never considered, even if it involves more work.

------
dsrguru
The "Make me pretty" section doesn't render properly for me under Firefox 13.0
on Arch Linux, but it looks right in Chromium. Here's what it looks like in
Firefox:

<http://oi46.tinypic.com/29ptdtk.jpg>

~~~
mrbogle
Ooh, Thanks.

------
benblodgett
Personally I don't see how this would save me time, I would rather just design
in html/css.

------
jkeel
My favorite part is the HTML/CSS snippet generation. Many times I've had to
play around with the CSS in Chrome inspector to get what I wanted. While it's
not hard, I do like to be able to mock something up like this and then get the
css.

------
biot
A minor bug: if you change a value in a text field (such as the Y offset for a
drop shadow) and click the OK button, the value is not saved. You need to
first make the focus go out of the text field and then click the OK button.

~~~
mrbogle
Thanks.

------
aik
Cool. One of the things that confuses me though are the hotkeys
(control+shift+5 turns the div into a button? not very intuitive). Instead of
hotkeys, I'd prefer to be told how to do it normally (in some intuitive way).

~~~
fredsters_s
Do you use Photoshop? It's analogous to the hotkeys there.

~~~
aik
Yes but Photoshop has the tools and buttons to accomplish the same thing.
Generally you learn those first, and the hotkeys second. Jumping directly to
the hotkeys, especially without any sort of hotkey chart, I find off-putting.

~~~
mrbogle
Noted. We'll work on making this more clear and maybe direct people to click
rather than use the hotkeys.

------
jashkenas
Thanks to some quick turnaround from the Easel guys, just added it to the
Backbone.js homepage here:

<http://backbonejs.org/#examples-easel>

------
agumonkey
I had a funny satisfaying feeling to have a free Illustrator Licence for a
minute.

That said I agree that, as cool and well delivered, it's against the
fluid/responsive web we're in.

------
capex
For standard webpage elements, this would work great. But for more customized
styles, you'll still be using Photoshop or pen-paper and then jump onto this.

------
blyxa
Looks like this webpage is drawn in Canvas. Can this tool translate the entire
Canvas content to a HTML doc that I can then publish?

------
alexwolfe
Nice Ben, great to see this app continuing to get better. I'm really digging
the Elements Dialog, would love to see that expand.

~~~
mrbogle
Yeah, I have some plans on how that will fit into your workflow with the rest
of the guys. Will email soon.

------
premise
I’m sorry, my Firefox said that the script was unresponsive, I clicked
‘Continue,’ and everything remained sort of frozen.

------
ericingram
Looks nice, is it or will it be open source?

~~~
mcolyer
We aren't currently planning on making it open source.

~~~
jeremyarussell
Props to you for that man, especially since considering how smooth this demo
was working I'm pretty sure you wouldn't have problems selling it.

------
twodayslate
I'll stick with Photoshop and Sublime Text 2. Thanks though, it was fun to
play around with for a while.

------
yesimahuman
Nice Ben! Good luck with everything. We will be testing it in the future and
will give you feedback :)

~~~
mrbogle
Yay. Thanks Max. Can't wait to have you guys in it more :)

------
dgcoffman
How is this useful? I can edit colors, border radius, box shadow, line height,
font, positioning, and alignment in real time on a real HTML mockup using
Firebug, webkit developer tools, even the Internet Explorer F12 tools.

Web design mockups that include these things should be done in HTML and CSS.
WYSIWYG editors are crippling for professionals and poison for amateurs.

------
benmccann
It's impossible to use in Chrome 19 on Win 7 because the scrollbars are
missing.

~~~
mrbogle
You can use the hand tool to pan around. You can press the space bar to enable
it. Then just drag the canvas around.

------
sycren
I'm more interested in the infinite canvas feel. How did they do that?

~~~
sprobertson
If you're interested in a library for that effect, there's this:
<http://ianli.com/infinitedrag/> I've been using it to make an infinite-canvas
notetaking app and it works quite well.

------
ravejk
Looks a lot like getmarquee.com, only not as impressive.

~~~
mrbogle
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.

------
fredsters_s
There's no way this won't kill Photoshop for web design

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

~~~
mrbogle
Many designers definitely need more than the tool currently provides. I'm
curious, what would it need for you to use easel?

------
btucker
Very cool. Is there "snap to grid" functionality?

~~~
mrbogle
Yes, there is a snappable, customizable grid. Under the grid menu, you can
show the grid and grid system.

------
kposehn
Wow.

Just, wow.

------
jcfrei
very nice and fast - definitely by leaps and bounds more intuitive than the
old dreamweaver I was using some 10 years ago!

------
chrisrickard
jinkers.. one of the best webapps iv'e seen

------
bretthellman
Very nice. What's next for Easel?

------
ukd1
This is AWESOME!

~~~
niico
+1. Incredible job Ben. Incredible job.

