I noticed the "Try Jetstrap free today!" then I saw you mention "Our first thought was $10/mo for 100 screens"[1] which I think is not only underpriced but the wrong pricing structure.
You should implement something like this:
- User signs up - gets 5 - 10 FREE Screens.
- Once they've used up their FREE screens take them to a page to purchase more screens.
- When they have 1-2 FREE Screens remaining you should have a popup which says they've nearly used their free screens up and to buy more (with one option offering to go to payment page & the other leting the user continue what they were doing).
- On the page where the users can purchase more screens, I wouldn't bother with a monthly subscription plan because that's not what your target audience is interested in.
The problem with this is that there is no incentive to keep one account.
GoMockingbird (http://gomockingbird.com) is an example of an application I probably have 4 accounts for-- not on purpose, I just couldn't figure out which email, twitter, facebook I used to sign up for it. I didn't realize that only the first project was free until later, because I generally stop using it after one project.
I could totally foresee a user signing up for 5-10 free screens then forgetting about the tool for later. When they come back, those original 5-10 screens may or may not be related to what they're working on now, and I can guarantee most people won't shell out the $39 when they realize they could just create a new account.
The proper way to monetize this (IMO) is through a freemium model. Don't limit them with what you have now. Figure out something that's truly a solid bell or whistle and sell them that. Give users the ability to create HTML/CSS for free, but maybe scroll-fixed javascript headers cost $10 for 10 pages (scroll here: https://www.kiteedu.com).
Right idea I think but I would go with something that makes it more useful for not just prototyping like api export / import and direct editing of template formats like interpreting ruby's erb just enough to display some placeholder text.
I tried this out earlier, just before you sent the beta email out. A few thoughts:
1. Keyboard shortcuts! I really wanted to deselect items by hitting escape but it didn't work. I kept trying anyway because I'm so used to Balsamiq :) I'd also love to be able to hit / to quick-search the list of elements I can add, then return to add the selected item. Again, Balsamiq really nails this.
2. I wanted to add a div with Bootstrap's pull-right class, but couldn't figure out how. Some means to add custom elements with custom css classes, even in a limited way, would really help me.
3. I typed some text (directly into a grid .row) but it didn't show up in the CSS+HTML tab. Not sure if this was a bug or not.
I really want this to work and it would save our team loads of time (meaning, we would pay for it :). Looking forward to what you do next.
I am not a designer by trade, but I am routinely called by the friends/family niche to build stuff for them -- I love how amazed they are when I spend 2 hours putting together a WordPress site for them; they seem so blown away by my non-existent abilities
What might you use to implement functionality and data then? I'm asking because I'm coming from database development in FileMaker with limited traditional coding knowledge. While it's very easy and fast to build solutions in FileMaker I've been looking for a web-based alternative for ages. Of course I tried frameworks like Rails and Django, worked tutorials, understand the concepts, can follow along but it's a steep learning curve and I'm nowhere near the results I'm able to achieve in FileMaker.
I'm confused as to why I would need to register at all? A public facing demo would be really nice, even if it limited the features so you could still charge for the full product.
I would use OAuth when I like your service and trust you (please understand that by you I don't mean you, I mean any website that asks me to sign up and isn't particularly well known). Right now I just want to use your site very quickly and see if it's something I'm interested in or not.
You can add Email & Password style accounts super easily using https://www.dailycred.com (this is my startup). You can use it just like your other OAuth providers, so it would really only take a few minutes to set up.
Sorry for being blunt, but the site looks quite bad on a mobile device [1][2][3].
I realize that this tool is probably meant to be used from a computer with a large screen and with a mouse, but consider the following scenario: Somebody, who is using their smart phone, is landing on your page from a search for "bootstrap responsive interface-building tool". If that was me, I'd probably leave the site pretty fast.
If you can, I would suggest keeping the ability to use old versions. With how quickly bootstrap is revving, there will soon be many sites using old versions that could still use the tool.
My suggestion as a UI/UX guy: Refine the call-to-action buttons by assigning them a different color. Black is not really an attention seeker. I would suggest something like a bright Green or pale Blue for the buttons (for the Sign up buttons on the top and the bottom). Hopefully this will improve your conversion rate.
Yeah, it depends on the scenario, green is like a very peaceful-ish color, red is like something to relate with urgency (In a negative way). Red in real life means danger, stop, error..etc.
I wanted to recommend red too initially, but I think for his use case blue or green would go well because of the background image (and also for the reasons above).
This guy does a nice job explaining how sometimes it's not so much the color, but how you use it. "What stands out gets clicked, what blends in gets ignored."
I love this tool. As a programmer I cringe at most WYSIWYG because they heavily dilute the code needed to make something happen + hardly ever get it done in the first place. This actually looks very promising.
One note though. Your target audience is going to include non-programmers and those people might not even know the proper names for some of these bootstrap elements. So I suggest some kind of toggle between the boostrap name buttons & maybe some sort of GUI. like Actually dragging a menu into the workspace, or dragging a twitter bootstrap button into the workspace, etc.
This looks like one of the most sensible WYSIWYG web page builders. Thank you for the minimal permissions to sign up with twitter. Might I recommend that you add the preview for the element when you hover over the component on in the tray? Nothing happens when I drag and drop things either -- latest chrome release channel.
There was a slight issue where the mousemove event wouldn't trigger if you dragged too slowly :) That has been fixed. Is it working better for you now?
Could you let us in on how to go about implementing such an interface? You don't have to go into specifics but if you used any tools or frameworks that you found invaluable etc, it would be nice to know.
Sure. The stack on the frontend is Backbone.js with Handlebars.js templates (and jQuery, of course). I used CoffeeScript's classes heavily to compartmentalize stuff.
Object orientation is your friend with these kinds of tools. We based a bit of the internal component model off of Java's AWT and Swing, making sure that each component we built was reusable in any situation, making it extremely easy to add new components.
Just like in the DOM, you are performing operations on a tree structure, so recursion and iterative optimization is important (especially in Javascript where function calls are expensive).
Other than that, it's just a lot of event handling and DOM manipulation.
Re: pricing...given the feedback here, maybe one thing you may want to do is to sell credits.
So maybe each screen cost X credits - but you sell the credits in packages. $10 for 10, $20 for 40, $50 for 150, etc. The idea being that you get more credits, the more you pay.
The beauty about it is that you front-load a lot of your revenue, which allows you to plan easier. It also is easier from the user's perspective, because I know I can always come back and use those credits.
You can even set some reasonable expiration time period - say 24 months - on the credits.
Anyway, that's just my $0.02.
Awesome product, by the way!
Edit 1: Another interesting side effect of implementing a credit system, is that you are setting the ground work for a marketplace. People can auction/sell some of their designs, and people can use their excess credits to buy those.
One suggestion: a "quick search" bar that would let you add elements by starting to type the names of things, similar to Balsamiq Mockups. It's a bit of a pain to navigate through the menus to find the right element.
I absolutely love the idea, but this works horrible on both Chrome and Safari.
I've seen bugs ranging from not being able to drag anything at all to elements not landing in a proper container, to just being overall confusing (dragging a table row results in dragging a table cell as a ghost. Where is my row?).
My trial was about trying to drag&drop a super-simple layout, with a table, with some form elements.
Unfortunately that's not properly possible right now, i'll wait up another bit for fixes. PLEASE keep up this work, we need more tooling like this!
Thanks for letting us know. I'm going through the issues reported in the comments here and trying to reproduce and fix them. Some I'm having a hard time reproducing :(
Having a window.onError hook that logs the traces to your backend can really help you debugging clientside stuff like this! :)
Also i can recommend logging (at least during your demo phase) a complete click-trhough of what your users are doing so you can reproduce it at will, using for instance http://www.clicktale.com/
Nice work. One nitpick is the "Saving..." text with the spinner is very distracting. My eyes shoot up and look at it every time. I have a personal feeling that displaying "Saving" text represents a lack of confidence that it will actually save. Since it's there my eyes go look every time to make sure it _has_ saved. If you feel it is important to display to your users their work has been saved.. show a subtle timestamp or something with the last save date, but remove the spinner.
I asked for this via Twitter and when I got that email today it was like Christmas. But then I read the email and went to the site, and was so sad they didn't do anything like this :(
I think this is a great tool, and desperately wanted it to work. In fact, decided to try it out on a project I'm currently working on. That said, the autosaving has been causing me problems all morning. It's unclear when it saves, and because it seems to lack a manual saving feature I was unable to save the last 30 min of work. All lost after reloading the page reverted to the version I started with. Very frustrating.
I would second comments elsewhere that balsamiq is a good model for this site. I am a paying balsamiq customer. Jetstrap seems like balsamiq but you are building a functional prototype instead of a wireframe mockup. As is, this could be worth about the same on a monthly basis, and I could possibly see this becoming a hosting site for full fledged pages built on jetstrap.
When I saw this and clicked it, I was preparing myself for a bootstrap-in-production-code abomination, but was pleasantly surprised. The design and interaction on this site are gorgeous and not boostrapped, and the tool looks really nice for putting together prototypes.
With all the horrible bootstrap default production sites i've seen lately, I've developed a pretty signficant hatred for the framework. But sometimes after seeing tools like this, I remember that it can be a very effective prototyping tool (as long as it's used only for prototypes, and you hire a real designer and/or front end guy to put together your production design and code).
That being said, awesome job with this site and this tool. Then only suggestion I could possibly make would be to change the header text from "build amazing websites" to "build amazing prototypes" - this at least helps to spread the concept that boostrap does not replace good, unique design and code.
Thanks! We did build a lot of this with bootstrap itself, using custom LESS.
I do disagree that bootstrap doesn't replace unique design and code. Lots of great websites have a standard set of interface elements, and bootstrap makes this extremely easy. Just add your custom styles and you have a unique site built on a solid CSS framework.
He said they just need to 'hire a real designer and/or front-end guy' - which basically translates to 'add your custom styles' and you're both happy. And I agree with you both.
The problem is so many people don't do that. They just leave the stock bootstrap there. If you can't even be bothered to change the colors from the templates, how am I supposed to take your company seriously?
Re: pricing. It depends how awesome you plan to make this. As it stands I'd probably pay $10 a month, maybe a bit more. If you fully pimped it out like Balsamiq has done for mockups - the sky is the limit. And if you had no competition for a bunch of your features - I'd actually prefer you charged more and had fewer customers, so everybody doesn't roll their eyes when they see something I built with Jetstrap, like they are doing now with Bootstrap (that assumes you get around to LESS integration...hint hint!).
Using bootstrap default styles on a production site is lazy and shows a complete disregard for the art of design and front-end development. It's like buying a template from themeforest for $30 and changing the site title and name, except even worse: it's even less unique and more recognizable.
I am super particular and nitpicky about design and front end things and have an abnormally high level of attention to detail so for me any company that uses default bootstrap in production is automatically not legit (this may not be the case for others). A legit company has the time and resources to create a custom unique design and interaction style that is suited to their brand. A BS company does not, so they use bootstrap.
An idea would be to integrate this with a DVCS system like Github och Bitbucket. Jetstrap could do commit/push at a frequent interval, thus allowing you to revert your changes. Good job.
slightly off topic, but where did you get the background music for the tour video where you walk through how it works and what it is. It has a great apple sounding beat.
Looks very pretty, but can't decide if this is useful or not. I love bootstap, but I am not convinced this is much quicker than a text editor (even if it is much prettier)
Quick bug report:
MacOS/Chrome (latest) - create navbar - click or double click on the bar, and you get errors.
Uncaught TypeError: Object #<Object> has no method 'apply' jquery.js:3332
jQuery.event.dispatch jquery.js:3332
jQuery.event.add.elemData.handle.eventHandle
Sure. One of my personal bootstrap pain points I wanted to solve was I often failed to properly use certain complicated bootstrap components. The better you get the less this becomes a big issue.
One way to use Jetstrap is to just generate snippets of Bootstrap if you already have a large code base and just want to copy and paste complicated components.
I agree taking the time to learn all the options in bootstrap is time consuming and this alleviates much of that via a nice UI, but would I pay for that, probably not.
I like. I hit some bugs when adding/working with tables, but I guess this is beta. I am looking forward to really trying to use it in the not so distant future.
It would be great if you could not only let me select the starting template but if you could let me choose from a dozen skins - say from Bootswatch, or similar features like lavishbootstrap.com, and the 'dice' feature at boottheme.com).
Thanks! That's definitely something we've thought of, and could very well find its way in at some point in the future. We'll be gathering a ton of feedback as we continue forward developing the tool.
My usage would be very occasional, maybe once every two or three months, for an intense day or two. I'd have no problem forking over $50 to use it each time, but it would be very annoying to pay $10/month for months when I have no usage at all. See the paradox? I'd pay more, maybe $200/year, instead of $120, not to have to worry about getting billed forever for something I'm not using.
If you could come up with some scheme that was usage-based rather than time-based, you might make more money in the long run. $5/screen? $50/project? I dunno.
Maybe $100/year, upfront, non-recurring. That wouldn't be terrible. It wouldn't feel like time-based usage because the timeframe is so long.
You might be able to learn something from the pricing experiences of the mockup tools like Balsamiq and Mockingbird.
Yes, we will eventually charge for it once we work out some of the kinks in the beta. Our first thought was $10/mo for 100 screens (though I agree with the feedback below, so this will probably go up). Any feedback on that?
Ridiculously underpriced when you compare it against any alternative other than "I am a hobbyist with infinite time, of course web design should be free."
An instructive question which was asked to me recently: "Who would be excluded from using this project if it cost [I'll fill in price points: $39 / $99 / $199 etc], is it in their best interests to use this, and do you seek their business?"
I thought twice about putting $10 on here since I didn't want to promise anything, but I wanted feedback. Thank you for commenting Patrick (I half thought you would :)). I completely agree with you.
Does everything have to be subscription based now? I know it is good for revenue, but it sure is a poor experience for the user. I would rather just pay $10 for 100 screens, if that is what you are charging, rather than tack on the /mo charge. When I run out, I buy more. Offer volume discounts for extreme purchasing over time, perhaps, but don't make me subscribe for light use. That's my initial feedback.
Subscription pricing is popular for the same reason Bootstrap is popular: Your customers, the ones who need the tool, don't care how strikingly original its design or business model is. They just want it to work.
Subscriptions work, everyone understands them, there is infrastructure to support them. Just sell them. Do not get cute with your pricing model without a very good reason, backed by data.
We've thought about this, and we do have recurring costs which make sense to bake into a recurring subscription. I understand the model doesn't work for everyone and some would prefer an offline tool and a one-time purchase. I appreciate the feedback and we will definitely take note of it as we progress.
Exacly! Please let us by 'x number screens for $'. Subscription is hardly required for something like this. (Ps please add youtube/vimeo video instead of flash video, I'm on iOS and would love to see it).
I like the idea of charging x amount for x screens. It makes more sense for me as it isn't a tool I would use on an ongoing basis, it would depend on my workload and what I'm working on.
Sounds underpriced to me (and adding screen limits to price points complicates things). I'd rather something like $50 per month with no limits. Most people are making money from the websites they build so something that increases efficiency is worth more than $10/mo.
Set up a stripe account today. Ask people to donate an amount that they would pay assuming a monthly rate. Analyze their usage data and payment data to assist you in coming up with payment plans.
I figured out how to reproduce this - click on 'create screen' without entering anything into the input field. It creates a blank canvas that doesn't accept any elements.
Yep. That's what I did originally. I was on chrome fedora without it working, but now on chrome mac it works. This time though I did change the name instead of leaving it blank.
Looking into it...just pushed a few tweaks. It could also be the default menu wasn't clear what you were supposed to drag and where to drop it. We need to fix that.
thanks for the reply, i have done something similar for a document editor/creator(EDI documents) but purely javascript. i might just try CS out now. cool stuff, hope to see more out from you guys.
Didn't work on Firefox 14.0.1 Ubuntu 12.04. Dragged elements don't appear on the canvas. The error in the console log, "not dropping, no container or component found". Same issue with Chrome Version 21.0.1180.81.
Looking forwards to when these are fixed though, I'd like to use it myself, and would be happy to contribute.
== Update ==
The problem I was having seemed to be I hadn't named my screen, I was then shown a blank white screen which looked like I could drag the elements onto, but this didn't work.
After playing with this for about 30 minutes I find myself fighting to get the elements positioned correctly. I'm not sure how difficult this would be, but it would be great to be able to update the view from the HTML panel.
This is coming soon. We do plan to charge for it so we can keep making it better, but the payment stuff hasn't been integrated and we are going to squash some more bugs before that. Thanks!
Thanks! We started working on it at the end of July this year. However, we ported over a ton of work for a product we also have for jQuery Mobile called Codiqa (http://codiqa.com/). Without that it probably would have taken many months longer.
You should implement something like this:
- User signs up - gets 5 - 10 FREE Screens.
- Once they've used up their FREE screens take them to a page to purchase more screens.
- When they have 1-2 FREE Screens remaining you should have a popup which says they've nearly used their free screens up and to buy more (with one option offering to go to payment page & the other leting the user continue what they were doing).
- On the page where the users can purchase more screens, I wouldn't bother with a monthly subscription plan because that's not what your target audience is interested in.
I'd offer the following options:
100 Screens - $39 ($0.39/Screen)
250 Screens - $95 ($0.38/Screen)
500 Screens - $180 ($0.36/Screen)
[1] http://news.ycombinator.com/item?id=4572125