Show HN: Moqups - Vectorial mockups with HTML5 and SVG
moqups.com
moqups.com
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
A lot of these items are on our plate already and we'll address them as soon as we get some bandwidth.
- We'll try to improve the Stencil/Images tab usability - Stencils are already using tags/aliases when searching them. Categories will be extremely beneficial as well. - Templates are on our plate too.
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!
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)
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.
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!
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.
- 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.
2. Any plans of supporting the iPad as a HTML5 app?
Really liking the interface while building mockups (already started building them!).
Thanks for a great product!
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.
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.
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.
...but performance really suffers after just 50-100+ objects :(
So of course I'm compelled to ask the devs: Why not Canvas?
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.
https://chrome.google.com/webstore/detail/nlfbhphohgafllkjna...
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)
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!!
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.
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)
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.
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!
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.
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.
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.
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
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.
PS: Love the product, will be using it from now on!
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!
All the best. I look forward to seeing what else you lot come up with :)
Can you give any sort of idea of the development effort that went into this? (ie. # of programmers, time period from starting, etc.)
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.
But I hate these merry fonts (the evil Comic Sans, and this one which I think is Chalkboard). Apart from that, perfect.
EDIT: You can actually select the type of font that you want when creating a new project (Serif, Sans serif, or mono!) :)
Out of interest, what did you use to do mockups for this app? ;)
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 :-)
In all seriousness, though, neat tool. It's kinda sluggish on the new iPad, though.