Show HN: Use Easel to style and build Bootstrap interfaces

Here are some of my observations after using the app for about 45 mins.

- First impressions are very strong. A great design aesthetic, pleasing to the eye (although a bit overwhelming as others have pointed out)

- After about 5-10 mins frustration started to set in for the following reasons:

-- Hard to use on a 1280x1024 screen (overlapping toolbars)

-- Re-size handles don't seem to do anything most of the time

-- Positioning elements was difficult and often seemed to require some mind-reading to try to work out how you intended to have the tools work

-- Was difficult to conceptualise the underlying structure of the document (I noticed the breadcrumbs which help to explain element nesting)

Seems that you're targeting the tool at designers. The tool has loads of potential for this user base, but I think it would be difficult for a designer to pick up as it is. The reason for this is that it seems to have a lot of required knowledge of bootstrap's underlying structure to make use of it. The kinds of questions a designer will be asking:

- Whats a 'Well'?

- Can I put a 'Row' in a 'Layout' or does it only go in a 'Container'?

- What's the difference between a 'Container' and a 'Layout'

If you're familiar with the code then this stuff is going to be obvious.. otherwise it will lead to frustration.

I think the best way to tackle this type of issue is by having the tool abstract away the underlying layout. This could be done by splitting the workflow into 1) Layout, 2) Components. Users could be given a set of existing layouts (let's face it there aren't that many ways to lay out a document), and then they move onto Component mode that then shows the options for adding buttons, forms, tables etc.

Having about 10 pre-built layouts would be plenty and any modifications could be done by splitting/merging columns.

On the other hand you could be targeting the app at existing coders who need a way to quickly do some visual layout without opening a text editor (nobody really wants to write another layout from scratch again right?). For this use-case I think the tool can already be quite useful as the developer already has a mental model of the code and how a document/layout should be structured.

Overall great stuff, hope things go well.

Cheers, Eli

This is great feedback, we've definitely struggled with how to present building up a document in HTML to people who don't understand HTML. If you're purely a designer or a product manager you'll most likely to use the other aspects of Easel which allow you to position elements absolutely and style their CSS properties with the inspector on the right.

The bootstrap feature is aimed more specifically at developers and designers who are HTML and CSS savvy. We've found that there are many people out there who are interested in designing responsive application. While they can "design in the browser" with code they've found into inhibiting their creative process.

We've built this feature to allow those savvy designers to get back to what they do best, design and not code. It sounds like we're in the right direction and with the right mix of introduction, learning and clarification it will be alot easier to use.

Thanks again for taking the time to try things out and for giving us such honest feedback.