Show HN: I built a mockup/prototype/wireframe editor in ten weeks | Hacker News Reader

Show HN: I built a mockup/prototype/wireframe editor in ten weeks

42 pointschaosprophet48 comments

Hi HN, After watching a lot of Show HN's here, it's finally my turn to show something. This is the first real project I have shipped, so it is extra special to me.

For those who will inevitably ask why I made yet another mockup editor I covered it on our blog (http://blog.mocktailsapp.in/why-build-yet-another-mockup-editor-tm). Not all the features mentioned in that post have been implemented yet. As such Mocktails is pre-beta software and very minimal. It does not even have user accounts or any actual server side component at all for that matter (yet)!

Our intention is to build Mocktails into a first-rate mockup editor within the next six months. Please visit, provide your feedback and spread the word.

Thanks!

Links: Mocktails - http://www.mocktailsapp.in Blog - http://blog.mocktailsapp.in/

View on HN

Great implementation.

Three points though:

1. "Move one level up" / "Move to top" -> they sound strange to me.

=> use "Bring Forward/Send Backward" (for one level up/down) and "Bring to Front/Send to Back" (for moving all the way) (<- copied shamelessly from Keynote.app, because I really like it)

2. If my mouse is over a box or "thing", when I drag I want to take that "thing" with me - why do I have to first click on it (to select it) and then be able to drag it somewhere else?

3. http://news.ycombinator.com/item?id=4842530

Hi, Thanks for taking the time to checkout Mocktails and for your suggestions.

1. Yes, 'Bring Forward' does sound much more obvious than 'Move one level up'. I'll change this soon.

2. Another good point. We are deviating from normal drag behavior and that is not good. Thanks for pointing this out.

3. I have replied to that comment directly, but to reiterate, it's a good idea, and I'll see if we can implement it, without sacrificing simplicity.

Very nice. Congrats on shipping.

Why the subdomain blog.mocktailsapp.in?

You're building a product which is already established as a thing people need. You can almost be sure people are searching, right now, for 'mockups with version control' (or some other benefit which differentiates your software from the competition). Your competitors pages are too established for a newer domain like yours to easily out rank them on terms like 'mockups', but since they have little to no reason to talk about things like version control, you can easily out rank them for something like 'mockups'+'version control' or 'collaborative mockups', etc. You should try your best to concentrate your page rank (and links) into a single domain as early as possible to give yourself the maximum advantage.

Search isn't great for the discovery of many apps out there. Since it could be for yours, take advantage of it!

I'm really looking forward to seeing this go forward. Again, great job!

Thanks for the kind words and for using Mocktails.

As for your question: I subscribe to the belief that if a company has a product page at 'www' subdomain or at the root domain, then it's blog should be located at the 'blog' subdomain. That was literally the only reason for putting the blog there.

You are correct in that we dont rank very well for mockups, and your points on SEO are quite apt. However, I do not know much about SEO, so I wonder if the benefits accrued by moving the blog to the 'www' subdomain would be outweighed by placing enough links to the 'www' subdomain in the blog posts.

Also, for now, I would like to focus on just building the product, especially since the much-vaunted version control doesn't actually exist yet. This would prevent a ton of support tickets from people who came in searching for 'version controlled mockups' and then dont find the feature anywhere.

I don't think you should focus on learning the many facets of SEO while trying to deliver a product but there are some quick, actionable pieces of advice which are undisputed enough that you can pretty much blindly implement them.

A great place to learn about seo (especially as it pertains to software products and marketing them) is patio11's blog. A particularly relevant, however short, article is http://www.kalzumeus.com/2006/10/02/object-lesson-on-bloggin... which speaks specifically to this point.

Also, I would recommend getting as many support tickets as possible. Not only are they feedback from users about what the product needs (you're probably aware of how important this is considering it's the mantra of every notable writer in the startup/saas domain) but they represent people who a.) are interested enough in your product to complain that they can't use it yet and b.) have implicitly given you permission to contact them. A simple, "This will be implemented soon. I'll email you when it's ready." makes the immediate problem disappear while creating a list of users primed and ready to start breaking your software for you when it hit beta and beyond.

Hmmm... Again you're pretty much spot on. I guess while we should primarily focus on building the product for now, there is no real reason why we cannot make some simple changes to capture more mindshare and search engine ranking. I'll look into some basic SEO tonight and make some changes ASAP.

Once again, thanks a lot for your advice, especially since it's in an area I don't know much of.

Fricking impressive, dude. I tried it and can immediately see the value.

Some constructive criticism: the scroll bar for the toolbox is too narrow for my personal taste. Gmail does this and it drives me crazy trying to actually grab it. Why not make it a nudge or three wider?

Otherwise, hats off to you for shipping.

Thanks for your kind words and for trying out Mocktails.

I personally found 10px width to be quite usable, but if you are having trouble with it then I don't mind nudging it up to say 15px.

If you have any other suggestions or feature requests, please do not hesitate to let us know. You could do this at our feedback forum at http://mocktailsapp.uservoice.com

15px would likely make it more usable on tablets. As an aside I wasn't able to resize a rectangle on an iPad 2. Good start!

Ah yeah, jquery-resizable is a tad difficult to use on touch devices. However, we are not planning to optimize for mobile devices anytime soon, since this is a tool people are mostly going to be using from their desktop.

You could do what Mountain Lion does - 7px standard scroll bar, which grows to 11px on hover. It actually has a 15px clickable area on hover when you include the 2px margins. 15px visible all the time is a bit of overkill.

But don't make the mistake of implementing every little feature request or trying to fix everyone's problems (no offence to the op here). That's how bloat happens. Let uservoice do the talking to find out what the majority of people want, and focus on that.

Well, I don't really think 15px would look terribly wide, so rather than unnecessary complexity by expanding on hover, might as well always have it at that width. And you are absolutely correct that we cannot implement every single feature request. We'll most definitely be letting our users decide on uservoice.

Clickable http://www.mocktailsapp.in

First of all, congratulations for shipping :)

Looks nice :) .My first question when I opened it - does it warn you when you're nearing your localStorage quota?

On the points you mention in your blog - are you certain other wireframe tools don't have collaboration?

Points 2 and 3 are pretty important (especially point 3). If other services don't have version control, and yours does, it's an important one.

The rest of the points don't seem that important to me, but I've barely used any mockup tools.

Lastly, how do you plan to monetize?

Good luck and congrats :)

Hi, Thanks for taking the time to play with it. As for your questions:

1. It does not warn you if you are nearing localStorage quota limits. AFAIK, there is no browser API to check your remaining quota. However, this is a pretty good idea, and I'll check to see if it can be implemented in any way.

2. There are some tools that have collaboration (Mockflow is the only one that I can remember right now). Unfortunately they dont have the other features I needed. The main advantage of Mocktails as I see it is that you get all the important stuff in one nice neat package.

3. Glad you agree on publishing and version control. These two have bit me in the ass so many times.

4. Monetizing will be based on number of projects per user for individual accounts and users per organization for enterprise accounts. I haven't worked out much beyond that for now.

Impressive, but be very careful going up against established players such as Balsamiq because you will have a difficult time competing. I am not sure if you want to one day make this a paid app, but if you do, think about developing and marketing it to the needs of a specific niche. Remember, there are thousands of similar "projects" and clones of existing software that died a very slow and painful death because they were not profitable enough to continue developing.

Thanks for taking the time to play with Mocktails. You are correct in that it's difficult to compete in this space. As of now, we are thinking of having our marketing emphasize our strengths such as publishing and built in version control.

To be quite fair though, the day where we have to worry about marketing is quite far away. For now, we just have to buckle down and keep building the product.

You should worry about marketing BEFORE building the product :)

Great app, very impressive indeed.

No one else has mentioned it, but I am not seeing the effect of the grid toggle. Selected or not, I don't see a grid.

Also, I'm curious as to how you are going to implement an export feature. I know several other web-based mockup editors put exporting behind the paywall as a premium feature. Good for them I suppose, but I immediately switched to a different editor.

Thanks for checking out Mocktails.

1. Yes, the grid toggle is not working. It's a bug. Thanks for bringing this to my notice.

2. We haven't thought about the specifics of a free plan yet, but I'm pretty sure we won't be paywalling specific features (except for collaboration maybe).

Great work!

One Suggestion: When I have a bunch of objects selected and I choose to align them I think it should probably keep the selected elements relative position to each other and apply the alignment to the entire set of elements vs applying individually to each element causing them to smash up if they are on the same horizontal or vertical axis.

Thanks for trying out Mocktails.

To get the behavior you desire, you could group all the elements together and then move that group. The alignment option is specifically for aligning all individual elements to one particular baseline. Like for example if I am building a form and want to align all the fields in the form to each other, I would select the fields and then align them to selection left.

If I have misunderstood your comment, could you please elaborate a bit?

Suggestion: You can put a checkbox on the alignment list, for example above "Selection Left" that's off by default. If it's on, you do what parent said (i.e., align them like they're a group). If it's off, you align them individually.

I don't want to introduce unnecessary complexity, but your suggestion would be quite usefull, especially if people get confused like this. I'll look into integrating this. Thanks!

Superfast issue: Selecting a color in the label popover, and closing the popover does not close the color popover.

Thanks for trying out Mocktails and reporting this issue. This should not be happening as there is code in there specifically to prevent this. If possible, could you check if there are any javascript errors printed to the console? It would be of immense help to track this and fix it. Thanks!

EDIT: Also, what browser (with version) and OS (with version) are you using?

Mac OS X 10.8, Chrome 23.0.1271.91 (latest)

The scenario is in fact trapped, at first when tried again I couldn't reproduce the issue. Actually it's a little edge case:

1. Create an object (tested with a label and a button) 2. Click on it [properties popover opens] 3. Click on a color picker [color popover opens] 4. Click on the object [properties popover closes, color popover stays open]

From this moment on if you try to open another color popover it will result in an empty popover, with buttons and header but not the color picker.

Pressing clear or cancel on the original popover (still opened) causes the following:

    Uncaught TypeError: Cannot read property 'color' of undefined paper.min.js:1
    paper._changeProperty paper.min.js:1
    paper._changeColor paper.min.js:1
    (anonymous function) paper.min.js:1
    p.event.dispatch lib.min.js:1
    g.handle.h

The empty popovers are created without event delegation, and buttons act as links (anchors).

Thanks a lot for this detailed bug report. I'll look into this ASAP. If you would like me to keep you updated on the status of this bug, please let me know your email (or any other way to communicate with you in private). You can mail me at bg@mocktailsapp.in or to bugs@mocktailsapp.in.

Once again thanks a lot!

Thank you for your responsiveness. You're doing a great work on and around your app.

I'll propose it as the next standard tool in my company if it stays alive for enough time ;)

Wow! Thanks for having so much faith in us. We'll definitely try to live upto it!

Fantastic! I've seen a lot of these apps and this one looks really promising. Please, carry on :-)

Thank you for your kind words and for your time. Really glad you liked the app.

If you would like to be informed of updates please hit the 'Sign up for updates' button or follow @MocktailsApp on Twitter. We promise not to spam you, or use your email for anything other than sending you updates. We'll also provide one-click unsubscribe methods.

Nice. I used to use Balsamiq, but this looks like nice (flash-free!) alternative. Grats on shipping, it's the hardest part. Can to share some details? What framework did you use? What's the backend look like, etc..

Thanks for checking out Mocktails. Competing with Balsamiq is going to be hard and we'll use every strength we have (of which no-flash is primary :D).

EDIT: Sorry, forgot to reply to the second part of your comment.

The entire app is at this point solely HTML+JS+CSS. The only framework used is Bootstrap. There exists no backend except for nginx serving out the static files. This will ofcourse change in future and we will probably write a blog post explaining our stack some day.

Congrats on shipping your first product! It looks very clean and awesome so far.

Thank you! All the credits for the good looks should really go to Twitter Bootstrap. I'm a pathetic designer and if left to me the app would have looked like this (http://imgur.com/YYogy). All I can say is: thank heavens for bootstrap :P

Haha, I know how you feel. I'm a developer that has a horrible eye for good design.

Looks good.

That's another example: http://fatiherikli.github.com/mockup-designer/

Thanks for trying out Mocktails. Glad you liked it. As for your link, while I am a huge fan of minimalism, it's a tad too minimal, don't you think?

Would be handy to have a snap to grid feature

Do not know exactly whom you were addressing but we'll be implementing this in a future release. Thanks!

Very Cool!

Just a tip for a small change to make look better, put icons in the top menu (i think bootstrap has it already)

Thanks for playing with Mocktails.

I should have put some icons in there, but there were a lot of buttons that required icons (esp. in the properties popover), so I decided to ship it and beautify it later.

Have you thought about providing an export function? (Just plain HTML - so one can attach custom CSS)

I can imagine myself (and others) clicking together a complex form within 30 seconds.

There will be an export function in future, but I highly doubt it will include HTML. The challenges with generating clean HTML from a mockup are quite painful. For example, all the elements in the mockup are positioned absolutely. I doubt this would be viable for people who wish to export HTML.

I really like it. Saved for later use. Well done!

Thanks! Glad you liked it :) If you would like to be informed of updates please hit the 'Sign up for updates' button or follow @MocktailsApp on Twitter.

We promise not to spam you, or use your email for anything other than sending you updates. We'll also provide one-click unsubscribe methods.

Reply on news.ycombinator.com