

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

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.<p>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)!<p>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.<p>Thanks!<p>Links:
Mocktails - http://www.mocktailsapp.in
Blog - http://blog.mocktailsapp.in/
======
pooriaazimi
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>

~~~
chaosprophet
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.

------
dgunn
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!

~~~
chaosprophet
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.

~~~
dgunn
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...](http://www.kalzumeus.com/2006/10/02/object-lesson-on-blogging-
for-your-business/) 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.

~~~
chaosprophet
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.

------
stackthatcode
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.

~~~
chaosprophet
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>

~~~
levymetal
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.

~~~
chaosprophet
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.

------
dclaysmith
Clickable <http://www.mocktailsapp.in>

------
GFischer
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 :)

~~~
chaosprophet
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.

------
ctek
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.

~~~
chaosprophet
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.

~~~
petervandijck
You should worry about marketing BEFORE building the product :)

------
roldie
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.

~~~
chaosprophet
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).

------
smallegan
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.

~~~
chaosprophet
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?

~~~
pooriaazimi
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.

~~~
chaosprophet
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!

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

~~~
chaosprophet
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?

~~~
yuchi
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).

~~~
chaosprophet
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!

~~~
yuchi
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 ;)

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

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

~~~
chaosprophet
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.

------
speg
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..

~~~
chaosprophet
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.

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

~~~
chaosprophet
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

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

------
fatiherikli
Looks good.

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

~~~
levymetal
Would be handy to have a snap to grid feature

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

------
leouznw
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)

~~~
chaosprophet
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.

------
blablabla123
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.

~~~
chaosprophet
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.

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

~~~
chaosprophet
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.

