6 ms·

Show HN: Use Easel to style and build Bootstrap interfaces

183 points by mcolyer 14y ago

mrchess 14y ago
It's a cool piece of engineering, but feels feature bloated to me. I am genuinely confused with the interface. 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 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.
- mcolyer 14y ago
  Thanks for the feedback mrchess. It's true that there are many options that appear all at once. Do you think having a tour that highlighted specific next actions would address some of your concerns?
  - mrchess 14y ago
    I don't think a tutorial would help. The feeling is similar is that of being thrown into Photoshop. Here's a couple initial thoughts after playing for 30 minutes: 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. My 2c.
- hnwh 14y ago
  agreed..i really want this to work, but just got mind-wtf'd when loading the page..
yesimahuman 14y ago
Congrats Ben and Matt, this looks sick.
OriginalSyn 14y ago
Unfortunate naming collision, For far too long I was wondering where EaselJS[1] came into the picture. http://www.createjs.com/#!/EaselJS http://www.createjs.com/#!/EaselJS
- alexanderh 14y ago
  Came here to say this. At least its not another competing javascript framework, but a full blown web-tool.
philipmorg 14y ago
This looks great! Wish I'd had it when I used Bootstrap for my photography site http://philipmorganphotography.com http://philipmorganphotography.com
mrgreenfur 14y ago
Pretty awesome app. The interface is a little confusing and it's annoying to see a welcome note on every visit. 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).
- mcolyer 14y ago
  Thanks mrgreenfur. It's definitely something we're planning on adding in the future. We'll be sure to take a look at tutorialize.me when we get started on it.
  - mrgreenfur 14y ago
    Cool. Shoot me a note via the contact form when you get into it and I'll help you out!
- mrbogle 14y ago
  The welcome note is only on the bootstrap demo. You can signup from the homepage: http://easel.io http://easel.io , or from the 'I want an account' button on the demo. Documents you create with your own account wont have the welcome popup.
mion 14y ago
It looks cool and I'd totally use something like that, but the demo page has too many stuff on it which kinda scared me away.
neya 14y ago
You should post a simple guided tour like how Yahoo does for their first time E-mail users or how google does for the new compose button. The app itself is excellent and your target audience I believe is not everyone, but specific web-designers with HTML+CSS knowledge - So you should try to make that clear. Right now, it looks as if it's meant for everyone and hence the "too complex" complaints. I'd give this a 5-star rating. I'm a designer myself and this would save me tons of time. Keep up the good work, thanks! :)
- mcolyer 14y ago
  Thanks neya, we'd love to see what you come up with in Easel. 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.
sgdesign 14y ago
Looks great! I'd be curious to know how it compares to Divshot (http://divshot.com http://divshot.com)?
- coderdude 14y ago
  Looks like there are now three serious competitors in this space: - Jetstrap (http://jetstrap.com/ http://jetstrap.com/) - Divshot (http://divshot.com/ http://divshot.com/) - Easel (https://www.easel.io/ https://www.easel.io/) I could see a company like Adobe wanting to get in on this.
  - jennyshen 14y ago
    that was what I was going to say. Tons of competitors already..
    - TSR830-10Q 14y ago
      I think tons might be a slight exaggeration, if you restrict it to visual builders targeting Bootstrap, there's 2 publicly available alternatives. Both of those in BETA, all 3 look promising.
  - TSR830-10Q 14y ago
    I've been using Jetstrap and Divshot for 2 weeks on a small project. Of the two so far, I've found Divshot has more features and ease of use, yet Jetstrap is very good in its own right. I want to try Easel and I signed up, but the site seemed to be overwhelmed (by Show HN?) and it failed to load for me. 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?
    - yesimahuman 14y ago
      Thanks, I built Jetstrap :) 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/ 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.
omegant 14y ago
I have been looking for something like this (I´m trying to test some ideas), I think is a necessary tool. But I find it confusing, make it more intuitive, after all this is not for an expert coder, is more for people who doesn´t know how to do it, isn´t it?.
callmeed 14y ago
I'd really like to see some sort of open-source or license-able tool like this that can be integrated into other apps or CMS tools. Something packaged up like rich-text editors are
flipside 14y ago
I was importing things from bootstrap before so thanks for streamlining the process! Also, FYI: the link to the blog post is broken
- mcolyer 14y ago
  That's great to hear! We've also fixed up that broken link, thanks for letting us know.
mhitza 14y ago
Stop script | Continue I'll go with the first choice.
- epaga 14y ago
  It would be more helpful to the developers if you let them know which browser & OS you were on...
  - mhitza 14y ago
    You're right. Firefox 16.0.2. But I'm more likely to consider it overneedy for a netbook with 1GB ram and dual core Atom ~1.8GHz
arcatek 14y ago
Is it possible to make 100%-width elements ?
- mcolyer 14y ago
  It depends on what you want. The bootstrap container elements are 100% of the width but if you place things inside of them the have a small amount of padding. Do have something specific you'd like to accomplish?
  - arcatek 14y ago
    I'm trying to put a navigation bar inside a fluid container (like any static navigation headers), it doesn't seem to work :<
    - mcolyer 14y ago
      Ah. Navigation bars are intended to go outside of containers. You can make it span the entire width by setting the position in the inspector to "fixed top".
skyhook_mockups 14y ago
Congratulations for shipping! It's a huge milestone to reach and I'm sure it is nerve wracking to press that submit button on a 'Show HN' 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
- mcolyer 14y ago
  Thanks Eli, we've actually been shipping for the past several months but it's good to get such a large new feature out the door none the less. 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.
aviswanathan 14y ago
Very cool stuff. Something that immediately comes to mind is if this can be done in an even more inclusive way (not necessarily dependent on Twitter Bootstrap). I.e. if there is a WYSIWYG kind of way to create divs, containers, and easily drop elements into them.
aviswanathan 14y ago
Very cool stuff. Something that immediately comes to mind is if this can be done in an even more inclusive way (not necessarily dependent on Twitter Bootstrap). I.e. if there is a WYSIWYG kind of way to create divs, containers, and easily drop elements into them.
aviswanathan 14y ago
Very cool stuff. Something that immediately comes to mind is if this can be done in an even more inclusive way (not necessarily dependent on Twitter Bootstrap). I.e. if there is a WYSIWYG kind of way to create divs, containers, and easily drop elements into them.
nemesis1637 14y ago
Very cool indeed. I spent about 20 mins messing around and was thoroughly impressed. I typically use Balsamiq Mockups but will have to try this for my next project.
rorrr 14y ago
It's ok, but there are bugs. After deleting all of elements from the demo project, and inserting a heading and a layout element, I ended up with this: http://i.imgur.com/V9QOP.png http://i.imgur.com/V9QOP.png I also noticed that it takes me longer to drag and drop shit around than to code it in HTML/CSS.
- mrbogle 14y ago
  If it's a nav bar with positioning set to fixed-top, it will be z-index'd on top of the container. The container will need top margin to bring it out from under the nav bar. This is something we should probably do automatically, but right now we're using the vanilla bootstrap behavior.
liquidcool 14y ago
Perhaps I missed it, but one thing I didn't see was how to upload or point to new web fonts. That would be very nice.
- mrbogle 14y ago
  This is one of our next features. We've had a lot of feature requests for a better font integration. If you have a typekit account, we will soon be able to use that. Email me: ben@easel.io and we'll set it up.
shredfvz 14y ago
Things I like about Easel: - Zipfile export contains everything you need to demo your site with a web server - The UI. It's simple and elegant [1] 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 [2] - 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. [1] http://imgur.com/hrUcE http://imgur.com/hrUcE [2] http://imgur.com/d3QJA http://imgur.com/d3QJA
- mrbogle 14y ago
digitalengineer 14y ago
Designer here. I was just using Easel yesterday before you added Bootstrap. I was trying to work 'visually'. Great first impression. VERY glad to see you've added bootstrap! Noticed a few things about the first Easel (Easel Pack (?) interface elements): I'd like the ability to paste color codes instead of using a color-circle. I need the colors to match the corporate identity and can't do that if I can't paste the exact color code. I also need the colors of elements to match, so I'd love to be able to create a color swatch. You have solved a lot of things for me with the Bootstrap integration. I really like the way you're going about it. Good work man!
- mcolyer 14y ago
  I'm glad you've found it useful. We're planning on improving the color selection but until then you can actually just paste in the exact hex code if you highlight the current hex code in the color picker. Hope that helps.
  - digitalengineer 14y ago
    Thanks! I'll have a (better) look.
digitalengineer 14y ago
Oh with regards to your payoff: "Design & build in your browser" I don't design in the browser. I do build my design in the browser. I design on paper, using Photoshop, Illustrator and what not. If you're designing you don't have a clear idea of what you're going to make and you're changing things, replacing, resizing... Wouldn't recommend that in a browser ;-)
- mrbogle 14y ago
  We want you to design in the browser. We want you to do that experimentation in your browser with easel. :) The ultimate goal of easel is to be the tool for designing websites.
joewee 14y ago
Really awesome work. Saved me about a month of work! You can count me as a customer.

183 points by mcolyer 14y ago

It's a cool piece of engineering, but feels feature bloated to me. I am genuinely confused with the interface. 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 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.

mcolyer 14y ago
Thanks for the feedback mrchess. It's true that there are many options that appear all at once. Do you think having a tour that highlighted specific next actions would address some of your concerns?
- mrchess 14y ago
  I don't think a tutorial would help. The feeling is similar is that of being thrown into Photoshop. Here's a couple initial thoughts after playing for 30 minutes: 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. My 2c.
hnwh 14y ago
agreed..i really want this to work, but just got mind-wtf'd when loading the page..

yesimahuman 14y ago

Congrats Ben and Matt, this looks sick.

OriginalSyn 14y ago

Unfortunate naming collision, For far too long I was wondering where EaselJS[1] came into the picture. http://www.createjs.com/#!/EaselJS http://www.createjs.com/#!/EaselJS

alexanderh 14y ago
Came here to say this. At least its not another competing javascript framework, but a full blown web-tool.

philipmorg 14y ago

This looks great! Wish I'd had it when I used Bootstrap for my photography site http://philipmorganphotography.com http://philipmorganphotography.com

mrgreenfur 14y ago

Pretty awesome app. The interface is a little confusing and it's annoying to see a welcome note on every visit. 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).

mcolyer 14y ago
Thanks mrgreenfur. It's definitely something we're planning on adding in the future. We'll be sure to take a look at tutorialize.me when we get started on it.
- mrgreenfur 14y ago
  Cool. Shoot me a note via the contact form when you get into it and I'll help you out!
mrbogle 14y ago
The welcome note is only on the bootstrap demo. You can signup from the homepage: http://easel.io http://easel.io , or from the 'I want an account' button on the demo. Documents you create with your own account wont have the welcome popup.

mion 14y ago

It looks cool and I'd totally use something like that, but the demo page has too many stuff on it which kinda scared me away.

neya 14y ago

You should post a simple guided tour like how Yahoo does for their first time E-mail users or how google does for the new compose button. The app itself is excellent and your target audience I believe is not everyone, but specific web-designers with HTML+CSS knowledge - So you should try to make that clear. Right now, it looks as if it's meant for everyone and hence the "too complex" complaints. I'd give this a 5-star rating. I'm a designer myself and this would save me tons of time. Keep up the good work, thanks! :)

mcolyer 14y ago
Thanks neya, we'd love to see what you come up with in Easel. 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.

sgdesign 14y ago

Looks great! I'd be curious to know how it compares to Divshot (http://divshot.com http://divshot.com)?

coderdude 14y ago
Looks like there are now three serious competitors in this space: - Jetstrap (http://jetstrap.com/ http://jetstrap.com/) - Divshot (http://divshot.com/ http://divshot.com/) - Easel (https://www.easel.io/ https://www.easel.io/) I could see a company like Adobe wanting to get in on this.
- jennyshen 14y ago
  that was what I was going to say. Tons of competitors already..
  - TSR830-10Q 14y ago
    I think tons might be a slight exaggeration, if you restrict it to visual builders targeting Bootstrap, there's 2 publicly available alternatives. Both of those in BETA, all 3 look promising.
- TSR830-10Q 14y ago
  I've been using Jetstrap and Divshot for 2 weeks on a small project. Of the two so far, I've found Divshot has more features and ease of use, yet Jetstrap is very good in its own right. I want to try Easel and I signed up, but the site seemed to be overwhelmed (by Show HN?) and it failed to load for me. 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?
  - yesimahuman 14y ago
    Thanks, I built Jetstrap :) 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/ 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.

omegant 14y ago

I have been looking for something like this (I´m trying to test some ideas), I think is a necessary tool. But I find it confusing, make it more intuitive, after all this is not for an expert coder, is more for people who doesn´t know how to do it, isn´t it?.

callmeed 14y ago

I'd really like to see some sort of open-source or license-able tool like this that can be integrated into other apps or CMS tools. Something packaged up like rich-text editors are

flipside 14y ago

I was importing things from bootstrap before so thanks for streamlining the process! Also, FYI: the link to the blog post is broken

mcolyer 14y ago
That's great to hear! We've also fixed up that broken link, thanks for letting us know.

mhitza 14y ago

Stop script | Continue I'll go with the first choice.

epaga 14y ago
It would be more helpful to the developers if you let them know which browser & OS you were on...
- mhitza 14y ago
  You're right. Firefox 16.0.2. But I'm more likely to consider it overneedy for a netbook with 1GB ram and dual core Atom ~1.8GHz

arcatek 14y ago

Is it possible to make 100%-width elements ?

mcolyer 14y ago
It depends on what you want. The bootstrap container elements are 100% of the width but if you place things inside of them the have a small amount of padding. Do have something specific you'd like to accomplish?
- arcatek 14y ago
  I'm trying to put a navigation bar inside a fluid container (like any static navigation headers), it doesn't seem to work :<
  - mcolyer 14y ago
    Ah. Navigation bars are intended to go outside of containers. You can make it span the entire width by setting the position in the inspector to "fixed top".

skyhook_mockups 14y ago

Congratulations for shipping! It's a huge milestone to reach and I'm sure it is nerve wracking to press that submit button on a 'Show HN' 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

mcolyer 14y ago
Thanks Eli, we've actually been shipping for the past several months but it's good to get such a large new feature out the door none the less. 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.

aviswanathan 14y ago

Very cool stuff. Something that immediately comes to mind is if this can be done in an even more inclusive way (not necessarily dependent on Twitter Bootstrap). I.e. if there is a WYSIWYG kind of way to create divs, containers, and easily drop elements into them.

aviswanathan 14y ago

nemesis1637 14y ago

Very cool indeed. I spent about 20 mins messing around and was thoroughly impressed. I typically use Balsamiq Mockups but will have to try this for my next project.

rorrr 14y ago

It's ok, but there are bugs. After deleting all of elements from the demo project, and inserting a heading and a layout element, I ended up with this: http://i.imgur.com/V9QOP.png http://i.imgur.com/V9QOP.png I also noticed that it takes me longer to drag and drop shit around than to code it in HTML/CSS.

mrbogle 14y ago
If it's a nav bar with positioning set to fixed-top, it will be z-index'd on top of the container. The container will need top margin to bring it out from under the nav bar. This is something we should probably do automatically, but right now we're using the vanilla bootstrap behavior.

liquidcool 14y ago

Perhaps I missed it, but one thing I didn't see was how to upload or point to new web fonts. That would be very nice.

mrbogle 14y ago
This is one of our next features. We've had a lot of feature requests for a better font integration. If you have a typekit account, we will soon be able to use that. Email me: ben@easel.io and we'll set it up.

shredfvz 14y ago

Things I like about Easel: - Zipfile export contains everything you need to demo your site with a web server - The UI. It's simple and elegant [1] 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 [2] - 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. [1] http://imgur.com/hrUcE http://imgur.com/hrUcE [2] http://imgur.com/d3QJA http://imgur.com/d3QJA

mrbogle 14y ago

digitalengineer 14y ago

Designer here. I was just using Easel yesterday before you added Bootstrap. I was trying to work 'visually'. Great first impression. VERY glad to see you've added bootstrap! Noticed a few things about the first Easel (Easel Pack (?) interface elements): I'd like the ability to paste color codes instead of using a color-circle. I need the colors to match the corporate identity and can't do that if I can't paste the exact color code. I also need the colors of elements to match, so I'd love to be able to create a color swatch. You have solved a lot of things for me with the Bootstrap integration. I really like the way you're going about it. Good work man!

mcolyer 14y ago
I'm glad you've found it useful. We're planning on improving the color selection but until then you can actually just paste in the exact hex code if you highlight the current hex code in the color picker. Hope that helps.
- digitalengineer 14y ago
  Thanks! I'll have a (better) look.

digitalengineer 14y ago

Oh with regards to your payoff: "Design & build in your browser" I don't design in the browser. I do build my design in the browser. I design on paper, using Photoshop, Illustrator and what not. If you're designing you don't have a clear idea of what you're going to make and you're changing things, replacing, resizing... Wouldn't recommend that in a browser ;-)

mrbogle 14y ago
We want you to design in the browser. We want you to do that experimentation in your browser with easel. :) The ultimate goal of easel is to be the tool for designing websites.

joewee 14y ago

Really awesome work. Saved me about a month of work! You can count me as a customer.