4 ms·

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 p

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? :)
- splatcollision 14y ago
  Absolutely! There's still much to be done, I'll be continually improving this app and keeping up with web standards. Can't wait for wider support for CSS filters for example.
jurre 14y ago
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 14y ago
  Thanks for the feedback! I've gone through several versions of the home screen so far and will try to improve it further.
salimmadjd 14y ago
Nice stuff man. As other have said it, the design is old school. Looking at your personal site, I know do design work as well. But I think we can all benefit from additional design help. Also, can you include the common grid marks, 960, 1280, etc.
- splatcollision 14y ago
  Thanks! I won't be including pixel grids at all, but the width preview tool has some standard breakpoints baked in. I feel strongly that 960, etc are fictions created by web designers and in reality we don't have the luxury of assuming fixed widths on the web.
mrbogle 14y ago
Interesting. Using canvas allows us to do a couple things: - draw vector shapes - export images on the client side - filters/effects in the future - pixelated zoom (not implemented, yet, though)
- splatcollision 14y ago
  Agree there are advantages and disadvantages of each approach. I encourage you to keep improving your app, it is indeed an excellent alpha. I always wanted to integrate canvas and SVG into Edit Room but have not done so yet. Cheers!
rstacruz 14y ago
I've always thought about this idea. After dissecting my own process, I think Easel.io's "picture only" approach is good. It's very common that I iterate by doing very messy things, like say, breaking menus apart into two just to see how it will work. A DOM-based tool will probably have a nightmare with this, and even if it manages to account for this elegantly, I know from experience that having too many iterations that actually mess up the code can only be a bad thing. I like Easel's approach. I want to paint a "picture," then build it with hand-made CSS. I don't want some tool being smart about my workflow. Easel exports just the right building blocks so I can implement by picture into a webpage the way I want to.

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? :)

splatcollision 14y ago
Absolutely! There's still much to be done, I'll be continually improving this app and keeping up with web standards. Can't wait for wider support for CSS filters for example.

jurre 14y ago

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 14y ago
Thanks for the feedback! I've gone through several versions of the home screen so far and will try to improve it further.

salimmadjd 14y ago

Nice stuff man. As other have said it, the design is old school. Looking at your personal site, I know do design work as well. But I think we can all benefit from additional design help. Also, can you include the common grid marks, 960, 1280, etc.

splatcollision 14y ago
Thanks! I won't be including pixel grids at all, but the width preview tool has some standard breakpoints baked in. I feel strongly that 960, etc are fictions created by web designers and in reality we don't have the luxury of assuming fixed widths on the web.

mrbogle 14y ago

Interesting. Using canvas allows us to do a couple things: - draw vector shapes - export images on the client side - filters/effects in the future - pixelated zoom (not implemented, yet, though)

splatcollision 14y ago
Agree there are advantages and disadvantages of each approach. I encourage you to keep improving your app, it is indeed an excellent alpha. I always wanted to integrate canvas and SVG into Edit Room but have not done so yet. Cheers!

rstacruz 14y ago

I've always thought about this idea. After dissecting my own process, I think Easel.io's "picture only" approach is good. It's very common that I iterate by doing very messy things, like say, breaking menus apart into two just to see how it will work. A DOM-based tool will probably have a nightmare with this, and even if it manages to account for this elegantly, I know from experience that having too many iterations that actually mess up the code can only be a bad thing. I like Easel's approach. I want to paint a "picture," then build it with hand-made CSS. I don't want some tool being smart about my workflow. Easel exports just the right building blocks so I can implement by picture into a webpage the way I want to.