10 ms·

Show HN: Easel, web design in the browser

346 points by mrbogle 14y ago

ericingram 14y ago
Looks nice, is it or will it be open source?
- mcolyer 14y ago
  We aren't currently planning on making it open source.
  - jeremyarussell 14y ago
    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.
aik 14y ago
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 14y ago
  Do you use Photoshop? It's analogous to the hotkeys there.
  - untog 14y ago
    Is that a good idea or not, I wonder? Wouldn't people with Photoshop be using it instead of this? Seems like it might be a good idea to target it at non-PS owners.
    - fredsters_s 14y ago
      As a web designer that primarily uses Photoshop, I'd say it's a great idea. Photoshop is horrible for web design. So horrible that I design purely in the browser now. This is going to be a nice addition to my workflow for when I want to include something shiny.
      - b1ind 14y ago
        Photoshop is needed for anything beyond a simple design.
  - aik 14y ago
    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 14y ago
      Noted. We'll work on making this more clear and maybe direct people to click rather than use the hotkeys.
- melvinmt 14y ago
  Have to say this was very confusing for me too. I can't remember a thing like CTRL+SHIFT+5, besides from the fact it isn't even explained what it's supposed to do?
fredsters_s 14y ago
There's no way this won't kill Photoshop for web design
- hexvector 14y ago
  Maybe for you, not for people who create real designs that aren't just css buttons, gradients and rounded borders.
  - mrbogle 14y ago
    Many designers definitely need more than the tool currently provides. I'm curious, what would it need for you to use easel?
- b1ind 14y ago
  Really, all Photoshop needs to kill this is some more attention towards Web-designers. It's a lot easier for Adobe to squeeze in browser simulation, button states, etc. then it would be for Easel to emulate all the features in Photoshop.
- dgcoffman 14y ago
  http://csshat.com/ http://csshat.com/
jcfrei 14y ago
very nice and fast - definitely by leaps and bounds more intuitive than the old dreamweaver I was using some 10 years ago!
yesimahuman 14y ago
Nice Ben! Good luck with everything. We will be testing it in the future and will give you feedback :)
- mrbogle 14y ago
  Yay. Thanks Max. Can't wait to have you guys in it more :)
ukd1 14y ago
This is AWESOME!
- niico 14y ago
  +1. Incredible job Ben. Incredible job.
flixic 14y ago
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 14y ago
  Which browser? Will look into...
  - avojro 14y ago
    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 14y ago
      Thanks :). Ah, ok. Will fix the stuck issue. That's a nasty one.
- jeremyarussell 14y ago
  Seems to work, just need to rename the .part extension to .png or something. I was able to open the saved file with firefox fine anyways. Edit: I'm on firefox btw.
untog 14y ago
To be clear- does this generate HTML, or just images that are accurate in terms of what is possible with a browser?
- egonschiele 14y ago
  apple-shift-e shows an export lightbox with html.
  - untog 14y ago
    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.
    - deleted 14y ago
      [deleted]
    - mrbogle 14y ago
      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 14y ago
        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!
kposehn 14y ago
Wow. Just, wow.
benmccann 14y ago
It's impossible to use in Chrome 19 on Win 7 because the scrollbars are missing.
- mrbogle 14y ago
  You can use the hand tool to pan around. You can press the space bar to enable it. Then just drag the canvas around.
fendrak 14y ago
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 14y ago
  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 14y ago
    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.
btucker 14y ago
Very cool. Is there "snap to grid" functionality?
- mrbogle 14y ago
  Yes, there is a snappable, customizable grid. Under the grid menu, you can show the grid and grid system.
bretthellman 14y ago
Very nice. What's next for Easel?
hcarvalhoalves 14y ago
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.
- Watts 14y ago
  I think this is great for prototyping ideas. Using Photoshop for web design is an approximation at best.
  - grantjgordon 14y ago
    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.
    - mrbogle 14y ago
      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.
      - Watts 14y ago
        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.
blyxa 14y ago
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?
ravejk 14y ago
Looks a lot like getmarquee.com, only not as impressive.
- mrbogle 14y ago
  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.
- pazimzadeh 14y ago
  Marquee reminds me of scrollkit.com
sycren 14y ago
I'm more interested in the infinite canvas feel. How did they do that?
- mrbogle 14y ago
  Lots of padding.
- sprobertson 14y ago
  If you're interested in a library for that effect, there's this: http://ianli.com/infinitedrag/ http://ianli.com/infinitedrag/ I've been using it to make an infinite-canvas notetaking app and it works quite well.
capex 14y ago
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.
deleted 14y ago
[deleted]
thejerz 14y ago
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 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 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.
callmeed 14y ago
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!
pygorex 14y ago
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 14y ago
  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.
  - pirer 14y ago
    >programmers dont want the entire thing generated. Those who don't program would love it.
  - pygorex 14y ago
    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 14y ago
      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.
DigitalSea 14y ago
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 14y ago
  Thanks. We agree with you. It will be so much easier when the tools understand the process.
twodayslate 14y ago
I'll stick with Photoshop and Sublime Text 2. Thanks though, it was fun to play around with for a while.
alexwolfe 14y ago
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 14y ago
  Yeah, I have some plans on how that will fit into your workflow with the rest of the guys. Will email soon.
agumonkey 14y ago
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.
skyhook_mockups 14y ago
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.
dgcoffman 14y ago
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.
dsrguru 14y ago
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 http://oi46.tinypic.com/29ptdtk.jpg
- mrbogle 14y ago
  Ooh, Thanks.
biot 14y ago
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 14y ago
  Thanks.
chrisrickard 14y ago
jinkers.. one of the best webapps iv'e seen
mkl 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      Yes how does that work? Strange statement! I second lucian1900s suggestion.
      - mrbogle 14y ago
        Sorry for the confusion. It's just what mkl said: the apple keys are hardcoded into the demo page.
premise 14y ago
I’m sorry, my Firefox said that the script was unresponsive, I clicked ‘Continue,’ and everything remained sort of frozen.
iamhenry 14y ago
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 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.
gizzlon 14y ago
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 14y ago
  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.
iusable 14y ago
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 14y ago
  email me at ben@easel.io and I'll speed that invite up.
digitalengineer 14y ago
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 14y ago
  Thank you. Please email me at ben@easel.io
splatcollision 14y ago
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/ 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 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.
- digitalengineer 14y ago
  The technique looks good! I feel it could use an 'inspector-like' window for all the variables instead of putting them all over te screen. Clever use of 'star-feature'. (Like Apple does with Keynote or like the flavors.me tool). Prices feel a bit expensive to me. Noticed you don't yet have a logo and/or identity?
- mrgreenfur 14y ago
  This is a pretty incredible "project". The styling is a little old-school, but the product is incredible. Are you planning to make this bigger? :)
jkeel 14y ago
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.
mwill 14y ago
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 14y ago
  It does export pieces of the design in html/css.
benblodgett 14y ago
Personally I don't see how this would save me time, I would rather just design in html/css.
jashkenas 14y ago
Thanks to some quick turnaround from the Easel guys, just added it to the Backbone.js homepage here: http://backbonejs.org/#examples-easel http://backbonejs.org/#examples-easel
sandijs 14y ago
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 http://www.froont.com. Anyhow we are living in very interesting times! Looking forward to see how Easel.io will evolve!

346 points by mrbogle 14y ago

ericingram 14y ago

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

mcolyer 14y ago
We aren't currently planning on making it open source.
- jeremyarussell 14y ago
  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.

aik 14y ago

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 14y ago
Do you use Photoshop? It's analogous to the hotkeys there.
- untog 14y ago
  Is that a good idea or not, I wonder? Wouldn't people with Photoshop be using it instead of this? Seems like it might be a good idea to target it at non-PS owners.
  - fredsters_s 14y ago
    As a web designer that primarily uses Photoshop, I'd say it's a great idea. Photoshop is horrible for web design. So horrible that I design purely in the browser now. This is going to be a nice addition to my workflow for when I want to include something shiny.
    - b1ind 14y ago
      Photoshop is needed for anything beyond a simple design.
- aik 14y ago
  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 14y ago
    Noted. We'll work on making this more clear and maybe direct people to click rather than use the hotkeys.
melvinmt 14y ago
Have to say this was very confusing for me too. I can't remember a thing like CTRL+SHIFT+5, besides from the fact it isn't even explained what it's supposed to do?

fredsters_s 14y ago

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

hexvector 14y ago
Maybe for you, not for people who create real designs that aren't just css buttons, gradients and rounded borders.
- mrbogle 14y ago
  Many designers definitely need more than the tool currently provides. I'm curious, what would it need for you to use easel?
b1ind 14y ago
Really, all Photoshop needs to kill this is some more attention towards Web-designers. It's a lot easier for Adobe to squeeze in browser simulation, button states, etc. then it would be for Easel to emulate all the features in Photoshop.
dgcoffman 14y ago
http://csshat.com/ http://csshat.com/

jcfrei 14y ago

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

yesimahuman 14y ago

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

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

ukd1 14y ago

This is AWESOME!

niico 14y ago
+1. Incredible job Ben. Incredible job.

flixic 14y ago

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 14y ago
Which browser? Will look into...
- avojro 14y ago
  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 14y ago
    Thanks :). Ah, ok. Will fix the stuck issue. That's a nasty one.
jeremyarussell 14y ago
Seems to work, just need to rename the .part extension to .png or something. I was able to open the saved file with firefox fine anyways. Edit: I'm on firefox btw.

untog 14y ago

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

egonschiele 14y ago
apple-shift-e shows an export lightbox with html.
- untog 14y ago
  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.
  - deleted 14y ago
    [deleted]
  - mrbogle 14y ago
    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 14y ago
      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!

kposehn 14y ago

Wow. Just, wow.

benmccann 14y ago

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

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

fendrak 14y ago

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 14y ago
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 14y ago
  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.

btucker 14y ago

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

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

bretthellman 14y ago

Very nice. What's next for Easel?

hcarvalhoalves 14y ago

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.

Watts 14y ago
I think this is great for prototyping ideas. Using Photoshop for web design is an approximation at best.
- grantjgordon 14y ago
  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.
  - mrbogle 14y ago
    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.
    - Watts 14y ago
      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.

blyxa 14y ago

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?

ravejk 14y ago

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

mrbogle 14y ago
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.
pazimzadeh 14y ago
Marquee reminds me of scrollkit.com

sycren 14y ago

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

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

capex 14y ago

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.

deleted 14y ago

[deleted]

thejerz 14y ago

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

callmeed 14y ago

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!

pygorex 14y ago

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 14y ago
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.
- pirer 14y ago
  >programmers dont want the entire thing generated. Those who don't program would love it.
- pygorex 14y ago
  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 14y ago
    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.

DigitalSea 14y ago

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 14y ago
Thanks. We agree with you. It will be so much easier when the tools understand the process.

twodayslate 14y ago

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

alexwolfe 14y ago

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 14y ago
Yeah, I have some plans on how that will fit into your workflow with the rest of the guys. Will email soon.

agumonkey 14y ago

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.

skyhook_mockups 14y ago

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.

dgcoffman 14y ago

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.

dsrguru 14y ago

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 http://oi46.tinypic.com/29ptdtk.jpg

mrbogle 14y ago
Ooh, Thanks.

biot 14y ago

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 14y ago
Thanks.

chrisrickard 14y ago

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

mkl 14y ago

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 14y ago
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 14y ago
  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 14y ago
    Yes how does that work? Strange statement! I second lucian1900s suggestion.
    - mrbogle 14y ago
      Sorry for the confusion. It's just what mkl said: the apple keys are hardcoded into the demo page.

premise 14y ago

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

iamhenry 14y ago

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

gizzlon 14y ago

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 14y ago
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.

iusable 14y ago

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 14y ago
email me at ben@easel.io and I'll speed that invite up.

digitalengineer 14y ago

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 14y ago
Thank you. Please email me at ben@easel.io

splatcollision 14y ago

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

digitalengineer 14y ago
The technique looks good! I feel it could use an 'inspector-like' window for all the variables instead of putting them all over te screen. Clever use of 'star-feature'. (Like Apple does with Keynote or like the flavors.me tool). Prices feel a bit expensive to me. Noticed you don't yet have a logo and/or identity?
mrgreenfur 14y ago
This is a pretty incredible "project". The styling is a little old-school, but the product is incredible. Are you planning to make this bigger? :)

jkeel 14y ago

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.

mwill 14y ago

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 14y ago
It does export pieces of the design in html/css.

benblodgett 14y ago

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

jashkenas 14y ago

Thanks to some quick turnaround from the Easel guys, just added it to the Backbone.js homepage here: http://backbonejs.org/#examples-easel http://backbonejs.org/#examples-easel

sandijs 14y ago

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 http://www.froont.com. Anyhow we are living in very interesting times! Looking forward to see how Easel.io will evolve!