Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Easel, web design in the browser

alpha.easel.io

Post reply on HN
Print view View original

91–100 of 125 posts

Re: Show HN: Easel, web design in the browser

#91

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

Re: Show HN: Easel, web design in the browser

#94

Post by lucian1900 »

mrbogle wrote: post #87
mkl wrote: post #86

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…

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…

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?

Re: Show HN: Easel, web design in the browser

#95

Post by 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?

Re: Show HN: Easel, web design in the browser

#96

Post by schrijver »

lucian1900 wrote: post #94
mrbogle wrote: post #87

Earlier quoted context omitted.

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…

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?

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

Re: Show HN: Easel, web design in the browser

#97

Post by nlh »

mrbogle wrote: post #25
untog wrote: post #20

Earlier quoted context omitted.

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.

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.

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!

Re: Show HN: Easel, web design in the browser

#98

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

Re: Show HN: Easel, web design in the browser

#99

Post by rooibos »

hcarvalhoalves wrote: post #27

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…

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.

Re: Show HN: Easel, web design in the browser

#100

Post by digitalengineer »

splatcollision wrote: post #98

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…

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?
Post reply on HN