Show HN: I built a mockup/prototype/wireframe editor in ten weeks
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/
51 comments
[ 3.3 ms ] story [ 111 ms ] threadLooks 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 :)
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.
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.
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.
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?
EDIT: Also, what browser (with version) and OS (with version) are you using?
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:
The empty popovers are created without event delegation, and buttons act as links (anchors).Once again thanks a lot!
I'll propose it as the next standard tool in my company if it stays alive for enough time ;)
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.
Just a tip for a small change to make look better, put icons in the top menu (i think bootstrap has it already)
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.
Secondly, if you could mention the name of the app which you think we have plagiarized, I'd be happy to look into your claims. If your claims of plagiarism are solely based on the general UI and interactions, then I feel it has no merit, since there is not much we can change here without alienating users who are used to the interface through years of using similar tools.If your claims of plagiarism stem from any other reason, I'd be happy to look into it.
Lastly, I do not see how my being Indian affects this in any way. Plagiarism and stealing are serious issues regardless of the nationality of the perpetrators.
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.
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
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.
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!
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.
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.
Once again, thanks a lot for your advice, especially since it's in an area I don't know much of.
That's another example: http://fatiherikli.github.com/mockup-designer/
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
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.
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.
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.
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.
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).
I can imagine myself (and others) clicking together a complex form within 30 seconds.