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.
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.
Consider adding tips to give new users a quick overview of how it works? Something like what tutorialize.me offers would be really useful. (I'm a co-founder of tutorialize.me).
My only feedback would be to make it simpler by removing or hiding some of the advanced functionality. Shoving options in my face is just so overwhelming. Like, what am I even looking at here? http://i.imgur.com/baoGV.png
The canvas isn't really in focus. For some reason a textarea is highlighted in red, I have all these options on the right... so many numbers. I can edit position (isn't part of the beauty of bootstrap a locked grid system?), anyway, you get the idea.
1. Not sure what monitor size you are using, but the right menu blends with the editing area. Would be nice to add a shadow to give me clarity on the division of the right menu.
2. Resize handles on a lot of objects yet I can't resize them.
3. Clicking on the items on the left menu for a preview throws me off. Makes me think that the descriptions are options eg. Page Heading (I tried to drag some of them out a few times).
4. How do I zoom out?
I guess in the context of a Bootstrap toolkit, less is more. I just want to be able to drag stuff and have it all "work". I don't really care about the extra options because the padding, typography, is already taken care of with Bootstrap. That being said I'd want Advanced features to be opt-in.
Keep up the good work, thanks! :)
As for the tour, the feedback here has been strongly in favor of a more guided introduction so we'll see what we can cook up.
- Jetstrap (http://jetstrap.com/)
- Divshot (http://divshot.com/)
- Easel (https://www.easel.io/)
I could see a company like Adobe wanting to get in on this.
Surely we want competitors in this area, there's obviously a need for it and a number of tools competing on features and price can be good for consumers?
To answer the parent, Adobe technically does have a competitor in this space, though it's not focused on bootstrap and it's kind of complicated: http://html.adobe.com/edge/reflow/
As someone with a product in this space, I'm confident each of the current offerings listed above will diverge sufficiently in the future, specifically in their target audience. It's still so early though.
And Max (yesimhuman) is right: it's pretty early, and we're all approaching the problem from different perspectives.
More flexibility: You can style elements, and you dont need to use the bootstrap containers (or bootstrap) if you dont want to. This is cool as we've been able to design all of easel inside of easel itself.
Collaboration: A very central part of the design process. You can share designs with your team, create clickable prototypes to test your ideas, and everyone invited can leave comments.
Our goal is to make easel awesome for all your web work in a professional team setting.
I'm stoked to try this out!
- Zipfile export contains everything you need to demo your site with a web server
- The UI. It's simple and elegant  in its most minimal implementation, but grows in complexity in the right ways when you need it to. The menus are easy to understand at the core, and the functionality behind it should be self-evident to most front end devs. Kinks can be worked out but the overall implementation is effective. I don't like that the RHS menu overlaps with the design you're working on, but I take partial responsibility for using a 1366x768 display.
Things I don't like about Easel:
- Exported stylesheets for demo app aren't perfect 
- Elements don't snap to grid.
- It's extremely buggy. Some features flat out don't work, some work but are an eyesore. After clicking "Upgrade", I should not have to type "ESC" to exit the Upgrade path for example.
- The left hand side menu - the dropdowns make it seem like I have multiple choices to select from. It took me a while to realize my mouse wasn't failing to select from an apparent dropdown list.
- The right hand side menu - it should be dockable, minimizable, an arrow should be there, something should let me hide it from view if need be. This comes in handy when selecting multiple elements on a small screen.
Things I like about divshot:
- Edit CSS. This is a nice feature. Not that I want to be editing much code in a browser, I have Vim for that. It's just that access to the raw stylesheets gives you fine grain control over everything.
Things I don't like about divshot:
- Edit CSS was buggy and slow to load changes.
- The export to HTML/CSS feature is essential, but please don't make me have to link to your hosted version of my static assets. I don't enjoy CSS templates that employ href's to placehold.it either for this reason. I want to not worry about my Interweb connection status when running a server on localhost to preview the HTML as I integrate it into a bigger project. This is make or break important for me. Send all of the static assets I need in a zipfile.
- Previews. I don't want to see the dark blue bar on the RHS in preview mode, maybe turn it off when I switch to full screen mode?
- Color scheme. Prototyping should be energizing. Doing mockups should be (is) more exciting than many other phases in the app development lifecycle, because it's the closest you ever get to pure creativity without being weighed down with technical decisions. Give me a simple, lightweight tool that makes it easy and fun to make creative app designs with. The dark blue UI brings me down.
To address your concerns:
- The stylesheet from the demo seems to work as expected. It mixes absolutely positioned elements and elements inside containers. The goal of that demo is to show the flexibility. I suppose the usage of absolutely positioned elements isnt obvious.
- When using the bootstrap containers, elements snap to bootstrap's grid systems. When you dont use the containers, you can use the built in grid. Under the grid menu, you can turn on/off the grid and a 960gs grid system.
- I'd like to know more about the bugs. We'll fix the issue with the upgrade path. I didnt see your email address in your hn profile. Please email me at email@example.com and let me know which features dont work and which ones are an eyesore.
-- did the bootstrap dropdown not work? There should be 2 other options: 'Easel Pack' and 'Icons'
-- We'll think about the best way to allow hiding/resizing of the inspector.
Thanks again for the comment.
The preview sidebar is something that's been bugging me for a while...so now it's gone. No reason to overcomplicate things, preview now just serves up the static HTML.
We've got some big things coming up, stay tuned!
Also, FYI: the link to the blog post is broken
I'll go with the first choice.
But I'm more likely to consider it overneedy for a netbook with 1GB ram and dual core Atom ~1.8GHz
Saved me about a month of work! You can count me as a customer.
Do have something specific you'd like to accomplish?
I also noticed that it takes me longer to drag and drop shit around than to code it in HTML/CSS.