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)
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!
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.
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.
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.
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.
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.
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.
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.
- 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.
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.
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.
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.
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.
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!
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).
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!
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.
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 :)
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?
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.
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 :-)
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.
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.
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 :-)
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.
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.
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).
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