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
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.
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
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.
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.
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)
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.
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!
- 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.
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.
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.
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.
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?
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.
- 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.
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..
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!
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.
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.
[+] [-] jeremyt|13 years ago|reply
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
[+] [-] moqups|13 years ago|reply
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.
[+] [-] rwhitman|13 years ago|reply
[+] [-] micheljansen|13 years ago|reply
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|13 years ago|reply
[+] [-] moqups|13 years ago|reply
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)
[+] [-] lewispb|13 years ago|reply
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|13 years ago|reply
[+] [-] moqups|13 years ago|reply
[+] [-] platonichvn|13 years ago|reply
[+] [-] moqups|13 years ago|reply
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!
[+] [-] temuze|13 years ago|reply
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|13 years ago|reply
- 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.
[+] [-] faz|13 years ago|reply
2. Any plans of supporting the iPad as a HTML5 app?
Really liking the interface while building mockups (already started building them!).
[+] [-] moqups|13 years ago|reply
[+] [-] iamdann|13 years ago|reply
Thanks for a great product!
[+] [-] moqups|13 years ago|reply
[+] [-] alttab|13 years ago|reply
[+] [-] moqups|13 years ago|reply
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.
[+] [-] robtotheb|13 years ago|reply
[+] [-] martian|13 years ago|reply
[+] [-] username3|13 years ago|reply
[+] [-] jonpaul|13 years ago|reply
[+] [-] simonsarris|13 years ago|reply
...but performance really suffers after just 50-100+ objects :(
So of course I'm compelled to ask the devs: Why not Canvas?
[+] [-] moqups|13 years ago|reply
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.
[+] [-] njx|13 years ago|reply
[+] [-] danso|13 years ago|reply
https://chrome.google.com/webstore/detail/nlfbhphohgafllkjna...
[+] [-] moqups|13 years ago|reply
[+] [-] nischalshetty|13 years ago|reply
[+] [-] carbzilla|13 years ago|reply
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|13 years ago|reply
[+] [-] markive|13 years ago|reply
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|13 years ago|reply
[+] [-] Smudge|13 years ago|reply
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|13 years ago|reply
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|13 years ago|reply
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|13 years ago|reply
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!