
Show HN: Moqups - Vectorial mockups with HTML5 and SVG - moqups
https://moqups.com/
======
jeremyt
As a huge Balsamiq user, I'm definitely pulling for you guys because I'm not
completely happy with them.

The basic functionality is great, but having the ability to make clickable
online demos where I could send links to people would be a killer feature that
would make me switch very quickly.

Having said that, a few UX notes:

-You have incompletely applied the tab metaphor on the left-hand panel. For a while, I was trying to figure out why a label was a stencil but a paragraph was an image. At the very minimum, your "shaded" tab should extend under the other one to show that it applies to both columns.

-Categorizing your stencils, even a little bit, would help. Balsamiq screwed this up, and now they have a bunch of nonsensical categories (quick, what would you expect to find under media?)

-I would recommend grouping your stencils by things that tend to be used together. For example, form elements should be all together, mobile stuff too.

-I know you're not native, but the right-click context menu on Balsamiq is much better than putting the align/arrange/lock at the top of the screen. I use this stuff a lot, and the extra distance is a pain

-Also, I don't see the capability to have some sort of templates. That's definitely a must for any decent size project

/edit I just discovered the context menu (double delayed click is a good
solution). Still think at least the lock button belongs on the menu and not at
the top

~~~
rwhitman
Yes rapid online sharing of prototypes is increasingly crucial. Every tool
I've used that does this has some clunky flaw. If this were combined with a
quick shortlink based share tool it would quickly become my goto wireframe app

~~~
moqups
Once you sign in and save the project, you can easily get the permalink of the
project in the Share popover.

------
micheljansen
Interesting tool! I'll definitely give this one a shot next time I'm mocking
up. Having said that, if you need to explain something by saying "This is a
bit tricky to master until you get a hold of it", that's probably because it's
a bad idea.

It's confusing that you have "click" "click, then click" and "doubleclick" as
three separate actions. They are too easy to mix up or accidentally activate.
Why not take a page from Apple's design patterns and put a context-sensitive
inspector panel on the right or top to hold things like fill, stroke,
alignment etc. This is the way Omnigraffle, Illustrator, Keynote, Sketch etc.
work and in my opinion it's a much more effective pattern than what you have
now.

Impressive work. Hope to see more of this!

------
duopixel
Wow I can't fathom the amount of work that has gone into this project. Was the
multi-line editor a challenge? I know SVG Edit has been struggling with this
feature for some time.

~~~
moqups
Pheeeew! Indeed. It was quite a challenge. After spending two months into
building a custom text layout engine, we ended up throwing all the code out
the window, mostly because the performance was terrible with more than a few
hundred characters. Beside this, there were a gazillion other scenarios that
we could not simply cover (kerning, spacing, i18n, ligatures, cross browser
differences & so on).

We ended up using foreignObject for rendering text, with the compromise that
we need to look for solutions to enable pure svg export. This is still a
technical debt on our plate. A roundtrip solution that converts hybrid SVG
into PostScript and then back into SVG may work... we'll see.

Either way, we'll start writing some technical articles on our blog, so others
can take advantage of our findings (we really owe a LOT to the community)

~~~
imalolz
That is awesome, thanks for sharing. I'm very interested, as I'm sure many
others are, to hear about the tools you've used and the development process.
Great app!

------
lewispb
After looking at Balsamiq I've been thinking something web based, free and
built on HTML5 would be much better.

Congratulations on what you've built!

2 features I would like to see are permalinks to a 'moqup', to send to
clients, and also it would be nice to be able to import Balsamiq XML files.

EDIT: Just spotted the share feature, looks great.

~~~
speg
I love Balsamiq but hate flash. Hello Moqups!

------
platonichvn
Great looking app! What did you guys use as your IDE and what is your build
process like? I'm currently in the process of transitioning a team from a
thick client plugin architecture to HTML 5 and am interested in hearing from
others how they have built impressive looking apps in Javascript and HTML.

~~~
moqups
Thank you.

Some of us are using WebStorm/IntelliJ and others swear by Sublime Text. The
SVG layout engine is custom built. The rest is pretty much vanilla Javascript
with some JQuery. Feel free to ask us anything!

~~~
platonichvn
Are you using JSLint or Google's Closure Compiler to ensure code quality on
the Javascript side?

~~~
moqups
JSLint

------
temuze
Impressive!

Two comments:

\- Using f1 on chrome brings up the Chrome help page. You might want to make
that another button.

\- It took me a while to realize that you're supposed to drag objects from the
left, and not use the mouse to define where they should go. That lead me to
accidentally select or move existing objects while attempting to place new
objects with my mouse. I'm not sure how common my experience was and I'm not
sure how to address it (or even that you should). But I figured you should
still keep it in mind.

~~~
moqups
Thank you!

\- We'll definitely investigate the F1 key issue. We have a broader bug that
causes the whole app to stop responding to keyboard shortcuts if the browser
window is not focused first.

\- Interesting, we'll look into also adding this behavior. It is indeed a
common behavior, specially in diagramming software.

~~~
Kerrick
Also, on a Chromebook, F1 is actually the back button. If the back button
isn't active (there's nowhere to go back) the moqup help works, but if the
back button is active, it simply goes back.

------
faz
1\. Will this be free forever or will it be bumped to a paid service?

2\. Any plans of supporting the iPad as a HTML5 app?

Really liking the interface while building mockups (already started building
them!).

~~~
moqups
1\. We'll keep the main functionality free (with some reasonable limitations).
We plan on adding some really cool collaboration and annotation/feedback
features soon that we'll probably ask a buck or two for. 2\. Yes, Mobile is
one of our top priorities, simply because the mockups look so gorgeous on the
Retina display and it makes sense. There are some challenges we need to
overcome though (performance is one). We can at least promise some great
additions on the Viewer veeeery soon.

------
iamdann
I teach a Skillshare class about UI/UX/Mockups/Wireframes for mobile apps and
I recommend Moqups to my students as a quick and fast way to start working.

Thanks for a great product!

~~~
moqups
We're humbled to hear about that. Moqups will always be free (including the
premium features) for non profits/educational organizations. Please drop us a
line at contact[@]moqups.com when you get the chance.

~~~
mikegirouard
Do user groups count as a non profit or would that need to be more formal (as
in a 501(c))?

~~~
moqups
With all the honesty, we haven't decided yet.

Moqups will continue to be free in its simplest form, so feel free to enjoy
it. After launching the premium features, we'll provide an application form
and carefully analyze each application in order to determine if it's eligible
for free use or not. Also, we'll make sure to provide more details about what
is needed for qualifying in this program.

------
alttab
Seemed to actually function on an iPad. Nice work. The competitive positioning
to Balsamiq is clear and well placed. How will you generate revenue if its
free?

~~~
moqups
We will offer other features like collaboration as part of our premium offer.
Our main focus for now is to provide the best possible experience to our
users.

Edit: Ipad works to some degree, but the app is definitely not yet optimized
for a great touch experience. We're also working hard on fixing that.

~~~
alttab
I was simply using it on the iPad, but generally I can't imagine the iPad is
great for mock up design (unless you do some really cool multi-touch things).

Generally, the use case for mock ups at least where I work (we use Balsamiq)
is that everyone at least has a laptop.

I'd work on getting parity with Balsamiq, and focus on doing other things
better. We use Balsamiq at work, and generally we have a lot of assets already
in it (I know you are working on importing), but you'll need to unentrench
their current user base.

Going on the freemium model will disrupt a lot of their income too. Right now
balsamiq requires that you pay to use it even if you are not collaborating,
but I'm sure you already knew that.

~~~
SoftwareMaven
I use my iPad for almost all my initial mockup work. There are some great apps
out there (iMockups, Mocking Pad, perhaps others). I find I'm more creative
when sitting on the couch working on UI design than I am hunched over a desk.
The apps do a pretty good job enabling pixel adjustments in a touch
environment.

------
robtotheb
Looks very similar to <https://gomockingbird.com/> which has been around for a
while.

~~~
martian
Mockingbird looked great, but it hasn't been updated since 2010 as far as I'm
aware.

------
jonpaul
Nice app. Do you mind sharing what technologies you use to power the app? e.g.
any JavaScript libraries, frameworks, etc?

------
simonsarris
I love it!

...but performance really suffers after just 50-100+ objects :(

So of course I'm compelled to ask the devs: Why not Canvas?

~~~
moqups
We've selected SVG over Canvas for many reasons.

I'll try to elaborate a few:

\- With SVG we can easily draw very complex geometry, resulting in nice
looking, configurable stencils, interactivity and many other features that
would've required immense engineering efforts to achieve in pure Canvas backed
up by heavy Javascript. This would've have reduced our creativity and ability
to adapt fast moving forward. Creating new stencils and adapting to new UI
trends is a breeze now. With Canvas, the situation would've been different and
highly coupled in the back of the Javascript code.

\- SVG is resolution independent. While we haven't optimized Moqups for a full
mobile experience YET, if you look at some mockups on any Hi-DPI (Retina)
display, the experience is simply gorgeous. Printing is also a great addition,
because you can virtually print huge sheets without loss of quality, making
face to face collaboration great.

\- SVG is heavily used for precise visualizations and technical drawing in
industrial engineering, outside its web roots. Not sure how to properly
explain this - We just kind of wanted to pay some homage to these folks.

The learning curve for SVG was tremendous though, with many obstacles that
made us cringe and almost and quit at points. This is mostly because SVG is
such an underused technology nowadays and the documentation is still scarce.
However, it was extremely fun and it's nice to see that SVG is becoming more
and more relevant nowadays in the context of HTML5.

About performance: Despite the many optimizations we have done, we still have
quite a few technical debts that, once fixed, will make Moqups even faster and
behave well with a lot of objects. Beside this, Chrome and others are about to
introduce hardware acceleration for the SVG layers soon, so all in all, more
good news.

------
danso
Are there any optimizations in the Chrome app version of this?

[https://chrome.google.com/webstore/detail/nlfbhphohgafllkjna...](https://chrome.google.com/webstore/detail/nlfbhphohgafllkjnakmdppmmkjfbnke?utm_source=chrome-
ntp-icon)

~~~
moqups
Not yet. We're planning Offline support, Google Drive, notifications and many
others.

------
nischalshetty
And I thought Balsamiq would never have a tough competitor! Great work, love
it.

------
carbzilla
Looks awesome!

Small UI bug I noticed, the icon in the Tail section for "top left" is the
same as the one for "left top" (<http://cl.ly/340F1H030G1s3D2F2F2H>)

~~~
moqups
Thank you. We've spotted that and already fixed it in our internal releases.
We'll deploy a new build with many fixes soon.

------
markive
Love it! You've got the 960 grid, how about some other common page template
sizes that the UI can snap to, like iPhone, iPad. I'd also like to be able to
go into that mode so I only see native (moqup style) controls as options..

I often want to bang out a layout so I know I've got UI / distribution of
controls sorted and then know my general widths / positioning..

If the snapping as good, and I could export or easily grab the positioning /
pixels that's something I'd pay a bit for..

Keep up the good work!!

~~~
moqups
We're planning to add inner snapping to various device stencils (iPhone for
now and others in the future), as well as polishing various interactions. We
also get very enthusiastic when planning features like master pages, rulers,
cotations and so on. Stay tuned!

------
Smudge
Maybe it's just me, but I think apps like this need (NEED) to focus on tablets
/ touch screens if they really want to stand a chance.

Don't get me wrong. It's an impressive tool and I'm sure it will work for a
lot of people. But there is nothing Moqups does that I myself can't do more
quickly with pen and graph paper.

What I want is a intuitive experience for touch screens, instead of yet-
another app that requires a bunch of clicking and dragging.

------
atesti
Does not work: I just see the logo, nothing loads. In the developer console, I
only see

GET <https://ssl.google-analytics.com/ga.js> <https://moqups.com/:26>
(anonymous function) <https://moqups.com/:26> (anonymous function)

failing

(I block ssl.google-analytics.com with my hosts file)

------
pajju
Beautiful!

1\. After registration, the next UI-view doesn't show up immediately.

2\. Adding more fonts and Social-media buttons. Even custom buttons too would
be a great addition!

3\. I'm a paranoid person and there are many like me. Please convince me
strongly, How secure is it to keep someone's Idea in your Back-end servers?

4\. Finally on long-term look for Building a platform and community around!
May be you can bring Front-end designers to hire them straightaway.

------
aboodman
I just used this to make mockups for a small project and it was awesome.

There's still lots of little polish things you can do, but the functionality
is almost completely there. Extremely useful.

You did a really good job picking the bits that were most important (at least
to me) before launch. The attempts at this that I've seen before were just way
too feature-poor to be useful.

Great work!

------
mduerksen
Quick Feedback:

1\. Looks fantastic!

2\. Where's the pricing? Coming from the landing page, I could not find it.
You should _really_ make this easy to spot.

~~~
moqups
Moqups is free while in Beta. Additionally, the main use cases will always be
free (with some reasonable limitations).

The premium features will revolve around collaboration, feedback, annotations
and other things. When these are launched, we'll definitely make the pricing
clear and visible for everyone.

~~~
mduerksen
Good to know - _place this information somewhere prominently on the landing
page now!_ :)

I guess you haven't completely decided how your pricing is going to be, so I
understand why you haven't published it yet, but seriously, you have buzz now,
and people may not register today because they are unsure about the
implications of it. Do not let that happen - give them at least the
information you just posted.

Edit: It doesn't have to be super-prominent, but so that the missing
information won't be an obstacle to registration.

------
allardschip
Nice. Even works somewhat on the iPad. Is it possible to have a different
default font? Looks like comic sans now.

~~~
lewispb
Much as I hate Comic Sans too, I think it does keep the emphasis on the layout
rather than the design, a useful characteristic of a mock up.

------
malkomalko
Found out how to do something that just blew my mind:

you can make your screenshots linkable very easily by adding a button over the
part of the page, linking it to another page and then sending it to the back
behind the photo.

even if the button is behind your screengrab photo, it will still link.

just wanted to share that little tip

------
drivingmenuts
You know, there are tons of other handwriting style fonts other than Comic
Sans ...

~~~
moqups
Thanks for the feedback. We're actually using Chalkboard, a close cousin of
Comic Sans MS.

There is no need to stick to the default setting. Feel free to pick your
favorite font style when you create a new project! Also, more advanced
typography settings are also coming soon.

~~~
jurre
Seems like a poor choice for a font for the default page though, given how
much comic sans ms is hated within the design community (end everyone else).

PS: Love the product, will be using it from now on!

~~~
sgdesign
To be fait, Comic Sans is mainly hated because it's used inappropriately so
much. In this particular case, it seems like a pretty appropriate use
(although I still find it ugly).

------
tsumnia
This looks awesome!

Are there any plans to expand to other mockups? I currently use Gliffy for my
ER diagrams and Process Flows. This just seems much cleaner and would love a
connector-type feature.

I'm gonna use this for my next mock-up most definitely!

------
Raticide
Looks real nice on Retina Mac.

~~~
moqups
That was our goal. We'll be working hard to provide a smooth mobile experience
soon :-)

------
lukeholder
As soon as you create reusable symbols across pages I will switch from
balsamiq.

~~~
moqups
This feature is on our short term roadmap. We just wanted to spend a bit more
time to get it right from the beginning.

------
gizzlon
This was not obvious: I wanted to select many small items inside a large box,
but I couldn't click-and-drag to select the small items without also selecting
the large box. The solution was to lock the big box.

------
skyhook_mockups
wow it's great to see the mockup space seeing some real innovtion and
competition. I've had my own head down for the last six months working on my
own mockup software and I agree that HTML5 is the way to go. Being able to
demo a design on a mobile device is a killer feature. Also it's so heartening
to see such a robust and enthusiastic response from the HN crowd... makes me
feel just that little bit more confident that mockup software is a good
category to be targeting.

All the best. I look forward to seeing what else you lot come up with :)

------
Killswitch
Awesome work, but I have one question that always plagued me... Maybe you can
help with it. Why do all these mockup sites have the style of being drawn in a
notebook?

~~~
ChrisClark
It needs to look like that, otherwise your dumber clients start to complain
that the site isn't in the right color, or the images are wrong. If it looks
anything like a normal site and not a sketch it causes extreme headaches
dealing with some customers.

------
jasonhanley
Beautiful, clean, and smooth on Chrome (Win7).

Can you give any sort of idea of the development effort that went into this?
(ie. # of programmers, time period from starting, etc.)

~~~
moqups
Thank you. We're a completely bootstrapped startup (6 people). Moqups was
created in our limited spare time for about a year where most of the time was
spent on researching/optimizing the SVG engine and we really started to take
it seriously in the last few months :-)

~~~
jasonhanley
Wow. That makes it even more impressive, in my opinion. Looks better than most
funded apps :)

------
locusm
I like it a lot and wish I had your html/js chops. Quite intuitive too. I
could quite easily sit at some cafe with a client and throw round ideas with
this.

------
kernel_sanders
Wow, great show HN! Works very smoothly on Mac OS 10.7/Chrome. I'll bookmark
this and use this myself as well as send to colleagues for sure. nice work.

------
Swizec
Feels a bit laggy on my computer (linux+chrome) when dragging items around.
But this looks really good! I might even start making mockups now.

~~~
moqups
Sorry to hear that. We really love Linux users too! This may be related to
some hardware acceleration issues.

Are you using the latest and greatest Chrome? Also, this performance
degradation may occur if you have many many other tabs open.

If the problem persist, there is still good news: try enabling the "Live
resize of objects" checkbox in the "Settings" popover.

~~~
Swizec
If memory serves I'm on the canary/developer build (18.0.xxx). I think that's
as latest as it gets, can't also say the greatest :)

~~~
quarterto
PSA: Chromium in the Software Center is very old. The current stable version
is 20.X. Download Chrome from Google.

------
Scottopherson
This is fantastic. Blows Balsamiq out of the water.

------
pooriaazimi
Absolutely wonderful.

But I _hate_ these merry fonts (the evil Comic Sans, and this one which I
think is Chalkboard). Apart from that, perfect.

~~~
atestu
These fonts are used appropriately here I'd say. They're here to make sure the
client knows it's not exactly how the finished product will look like.

EDIT: You can actually select the type of font that you want when creating a
new project (Serif, Sans serif, or mono!) :)

------
basicallydan
I like it. So much nicer-looking than current Balsamiq.

Out of interest, what did you use to do mockups for this app? ;)

~~~
moqups
Thank you!

Great question actually - Once we were able to use Moqups to mock up the
remaining dialogs, we started joking about Mockup Inception - Moqception.
Really weird feeling, but also nice :-)

------
imjoel
So much comic sans!! Ahhhgg!!

In all seriousness, though, neat tool. It's kinda sluggish on the new iPad,
though.

------
sgt
My first thought: "Wow". My second thought: "How do I give these people access
to my wallet?"

~~~
moqups
Moqups is free while in Beta. Additionally, the main use cases will always be
free (with some reasonable limitations). The premium features will revolve
around collaboration, feedback, annotations and other things. When these are
launched, we'll definitely make the pricing clear and visible for everyone.

------
kmil
please give option to change Comic Sans to soemthing else

~~~
moqups
The sample project is using the handwritten style, but no worries: You can
always select a different font style when creating new projects.

------
njx
Nice app. But I think the name moqups is a "bad choice"

~~~
skyhook_mockups
really? I think it's great! Picking a good domain name is hard and this one is
memorable I think.

~~~
njx
I personally feel you can't brand it and won't have any SEO benefit.

------
amitvaria
Looks great - any plans on Google Drive integration?

~~~
moqups
Yes. We've just launched the Chrome App store too <http://bit.ly/NUSGvH>.
DropBox and Basecamp also high on our integration priorities.

------
tonetheman
Very impressive. Clearly lots of work. Good job.

------
dabeeeenster
Is there a way to create templates?

~~~
moqups
We plan on adding this feature very soon!

------
sidcool
Pretty cool. I congratulate you.

------
fshen
Impressive.

------
brianbreslin
awesome! what is this going to cost?

------
xmpir
nice tool!

~~~
moqups
Thank you!

------
jQueryIsAwesome
This article was submitted just six hours ago and it haves 275 points but is
no longer in the front-page of HN, why? My only guess is that is because is
not a YC Company.

~~~
petercooper
As far as I recall, "Show HN" type posts get weighted down by the system. But
more generally, it may have been flagged more times than the average post
(though I wouldn't know why because it's awesome).

