12 ms·

Show HN: Moqups - Vectorial mockups with HTML5 and SVG

310 points by moqups 14y ago

nischalshetty 14y ago
And I thought Balsamiq would never have a tough competitor! Great work, love it.
lewispb 14y ago
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.
- moqups 14y ago
  Thank you. Balsamiq import is on our mid-term roadmap. Permalinks are already available in the Share menu (you need to sign in/up first)
- speg 14y ago
  I love Balsamiq but hate flash. Hello Moqups!
allardschip 14y ago
Nice. Even works somewhat on the iPad. Is it possible to have a different default font? Looks like comic sans now.
- moqups 14y ago
  Yes, for now there are 4 styles available when you create new projects. At a later time we'll be introducing advanced typography features.
- lewispb 14y ago
  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.
Raticide 14y ago
Looks real nice on Retina Mac.
- moqups 14y ago
  That was our goal. We'll be working hard to provide a smooth mobile experience soon :-)
deleted 14y ago
[deleted]
xmpir 14y ago
nice tool!
- moqups 14y ago
  Thank you!
Swizec 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      PSA: Chromium in the Software Center is very old. The current stable version is 20.X. Download Chrome from Google.
kmil 14y ago
please give option to change Comic Sans to soemthing else
- moqups 14y ago
  The sample project is using the handwritten style, but no worries: You can always select a different font style when creating new projects.
- bromagosa 14y ago
  They do give the option when creating a project, but it may be nice to also allow to change the font of an already loaded project.
- mdemare 14y ago
  It's Chalkboard actually.
faz 14y ago
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 14y ago
  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.
carbzilla 14y ago
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 http://cl.ly/340F1H030G1s3D2F2F2H)
- moqups 14y ago
  Thank you. We've spotted that and already fixed it in our internal releases. We'll deploy a new build with many fixes soon.
basicallydan 14y ago
I like it. So much nicer-looking than current Balsamiq. Out of interest, what did you use to do mockups for this app? ;)
- moqups 14y ago
  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 :-)
gizzlon 14y ago
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.
drivingmenuts 14y ago
You know, there are tons of other handwriting style fonts other than Comic Sans ...
- moqups 14y ago
  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 14y ago
    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 14y ago
      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).
pajju 14y ago
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.
locusm 14y ago
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.
iamdann 14y ago
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 14y ago
  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 14y ago
    Do user groups count as a non profit or would that need to be more formal (as in a 501(c))?
    - moqups 14y ago
      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.
lewisflude 14y ago
This solves a problem I've been having! I'll actually use this. I'm not sure how, but if there's any way I can help you guys - let me know!
lewisflude 14y ago
This solves a problem I've been having! I'll actually use this. I'm not sure how, but if there's any way I can help you guys - let me know!
platonichvn 14y ago
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 14y ago
  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 14y ago
    Are you using JSLint or Google's Closure Compiler to ensure code quality on the Javascript side?
    - moqups 14y ago
      JSLint
amitvaria 14y ago
Looks great - any plans on Google Drive integration?
- moqups 14y ago
  Yes. We've just launched the Chrome App store too http://bit.ly/NUSGvH http://bit.ly/NUSGvH. DropBox and Basecamp also high on our integration priorities.
jasonhanley 14y ago
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 14y ago
  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 14y ago
    Wow. That makes it even more impressive, in my opinion. Looks better than most funded apps :)
alttab 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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.
lukeholder 14y ago
As soon as you create reusable symbols across pages I will switch from balsamiq.
- moqups 14y ago
  This feature is on our short term roadmap. We just wanted to spend a bit more time to get it right from the beginning.
dabeeeenster 14y ago
Is there a way to create templates?
- moqups 14y ago
  We plan on adding this feature very soon!
fshen 14y ago
Impressive.
markive 14y ago
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 14y ago
  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!
cbrcoder 14y ago
Phenomenal work. The one suggestion I would give is to increase the height automatically, at present we need to change it manually from settings icon.
kernel_sanders 14y ago
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.
temuze 14y ago
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 14y ago
  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 14y ago
    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.
robtotheb 14y ago
Looks very similar to https://gomockingbird.com/ https://gomockingbird.com/ which has been around for a while.
- username3 14y ago
  Sounds similar too. There's no easy way to pan in both.
- martian 14y ago
  Mockingbird looked great, but it hasn't been updated since 2010 as far as I'm aware.
malkomalko 14y ago
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
Scottopherson 14y ago
This is fantastic. Blows Balsamiq out of the water.
duopixel 14y ago
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 14y ago
  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 14y ago
    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!
jeremyt 14y ago
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 14y ago
  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 14y ago
    Once you sign in and save the project, you can easily get the permalink of the project in the Share popover.
- moqups 14y ago
  Incredibly good feedback. Thank you! 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.
tonetheman 14y ago
Very impressive. Clearly lots of work. Good job.
pooriaazimi 14y ago
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 14y ago
  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!) :)
imjoel 14y ago
So much comic sans!! Ahhhgg!! In all seriousness, though, neat tool. It's kinda sluggish on the new iPad, though.
Killswitch 14y ago
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?
- Migs 14y ago
  Because if the results look too much like an actual site, people will think it's the real template.
- ChrisClark 14y ago
  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.
danso 14y ago
Are there any optimizations in the Chrome app version of this? https://chrome.google.com/webstore/detail/nlfbhphohgafllkjnakmdppmmkjfbnke?utm_source=chrome-ntp-icon https://chrome.google.com/webstore/detail/nlfbhphohgafllkjna...
- moqups 14y ago
  Not yet. We're planning Offline support, Google Drive, notifications and many others.
jonpaul 14y ago
Nice app. Do you mind sharing what technologies you use to power the app? e.g. any JavaScript libraries, frameworks, etc?
mduerksen 14y ago
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 14y ago
  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 14y ago
    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.
simonsarris 14y ago
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?
- njx 14y ago
  Canvas is definitely faster than SVG for scaling objects in the HTML dom. I had to switch to canvas for the same reason for mockuptiger
- moqups 14y ago
  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.
tsumnia 14y ago
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!
njx 14y ago
Nice app. But I think the name moqups is a "bad choice"
- skyhook_mockups 14y ago
  really? I think it's great! Picking a good domain name is hard and this one is memorable I think.
  - njx 14y ago
    I personally feel you can't brand it and won't have any SEO benefit.
skyhook_mockups 14y ago
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 :)
brianbreslin 14y ago
awesome! what is this going to cost?
sidcool 14y ago
Pretty cool. I congratulate you.
sgt 14y ago
My first thought: "Wow". My second thought: "How do I give these people access to my wallet?"
- moqups 14y ago
  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.
jQueryIsAwesome 14y ago
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 14y ago
  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).
micheljansen 14y ago
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!
Smudge 14y ago
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 14y ago
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://ssl.google-analytics.com/ga.js https://moqups.com/:26 https://moqups.com/:26 (anonymous function) https://moqups.com/:26 https://moqups.com/:26 (anonymous function) failing (I block ssl.google-analytics.com with my hosts file)
aboodman 14y ago
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!

310 points by moqups 14y ago

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

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.

moqups 14y ago
Thank you. Balsamiq import is on our mid-term roadmap. Permalinks are already available in the Share menu (you need to sign in/up first)
speg 14y ago
I love Balsamiq but hate flash. Hello Moqups!

allardschip 14y ago

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

moqups 14y ago
Yes, for now there are 4 styles available when you create new projects. At a later time we'll be introducing advanced typography features.
lewispb 14y ago
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.

Raticide 14y ago

Looks real nice on Retina Mac.

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

deleted 14y ago

[deleted]

xmpir 14y ago

nice tool!

moqups 14y ago
Thank you!

Swizec 14y ago

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 14y ago
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 14y ago
  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 14y ago
    PSA: Chromium in the Software Center is very old. The current stable version is 20.X. Download Chrome from Google.

kmil 14y ago

please give option to change Comic Sans to soemthing else

moqups 14y ago
The sample project is using the handwritten style, but no worries: You can always select a different font style when creating new projects.
bromagosa 14y ago
They do give the option when creating a project, but it may be nice to also allow to change the font of an already loaded project.
mdemare 14y ago
It's Chalkboard actually.

faz 14y ago

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 14y ago
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.

carbzilla 14y ago

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 http://cl.ly/340F1H030G1s3D2F2F2H)

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

basicallydan 14y ago

I like it. So much nicer-looking than current Balsamiq. Out of interest, what did you use to do mockups for this app? ;)

moqups 14y ago
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 :-)

gizzlon 14y ago

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.

drivingmenuts 14y ago

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

moqups 14y ago
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 14y ago
  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 14y ago
    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).

pajju 14y ago

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.

locusm 14y ago

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.

iamdann 14y ago

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 14y ago
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 14y ago
  Do user groups count as a non profit or would that need to be more formal (as in a 501(c))?
  - moqups 14y ago
    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.

lewisflude 14y ago

This solves a problem I've been having! I'll actually use this. I'm not sure how, but if there's any way I can help you guys - let me know!

lewisflude 14y ago

This solves a problem I've been having! I'll actually use this. I'm not sure how, but if there's any way I can help you guys - let me know!

platonichvn 14y ago

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 14y ago
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 14y ago
  Are you using JSLint or Google's Closure Compiler to ensure code quality on the Javascript side?
  - moqups 14y ago
    JSLint

amitvaria 14y ago

Looks great - any plans on Google Drive integration?

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

jasonhanley 14y ago

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 14y ago
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 14y ago
  Wow. That makes it even more impressive, in my opinion. Looks better than most funded apps :)

alttab 14y ago

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 14y ago
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 14y ago
  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 14y ago
    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.

lukeholder 14y ago

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

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

dabeeeenster 14y ago

Is there a way to create templates?

moqups 14y ago
We plan on adding this feature very soon!

fshen 14y ago

Impressive.

markive 14y ago

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 14y ago
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!

cbrcoder 14y ago

Phenomenal work. The one suggestion I would give is to increase the height automatically, at present we need to change it manually from settings icon.

kernel_sanders 14y ago

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.

temuze 14y ago

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 14y ago
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 14y ago
  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.

robtotheb 14y ago

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

username3 14y ago
Sounds similar too. There's no easy way to pan in both.
martian 14y ago
Mockingbird looked great, but it hasn't been updated since 2010 as far as I'm aware.

malkomalko 14y ago

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

Scottopherson 14y ago

This is fantastic. Blows Balsamiq out of the water.

duopixel 14y ago

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 14y ago
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 14y ago
  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!

jeremyt 14y ago

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 14y ago
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 14y ago
  Once you sign in and save the project, you can easily get the permalink of the project in the Share popover.
moqups 14y ago
Incredibly good feedback. Thank you! 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.

tonetheman 14y ago

Very impressive. Clearly lots of work. Good job.

pooriaazimi 14y ago

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 14y ago
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!) :)

imjoel 14y ago

So much comic sans!! Ahhhgg!! In all seriousness, though, neat tool. It's kinda sluggish on the new iPad, though.

Killswitch 14y ago

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?

Migs 14y ago
Because if the results look too much like an actual site, people will think it's the real template.
ChrisClark 14y ago
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.

danso 14y ago

Are there any optimizations in the Chrome app version of this? https://chrome.google.com/webstore/detail/nlfbhphohgafllkjnakmdppmmkjfbnke?utm_source=chrome-ntp-icon https://chrome.google.com/webstore/detail/nlfbhphohgafllkjna...

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

jonpaul 14y ago

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

mduerksen 14y ago

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 14y ago
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 14y ago
  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.

simonsarris 14y ago

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?

njx 14y ago
Canvas is definitely faster than SVG for scaling objects in the HTML dom. I had to switch to canvas for the same reason for mockuptiger
moqups 14y ago
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.

tsumnia 14y ago

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!

njx 14y ago

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

skyhook_mockups 14y ago
really? I think it's great! Picking a good domain name is hard and this one is memorable I think.
- njx 14y ago
  I personally feel you can't brand it and won't have any SEO benefit.

skyhook_mockups 14y ago

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

brianbreslin 14y ago

awesome! what is this going to cost?

sidcool 14y ago

Pretty cool. I congratulate you.

sgt 14y ago

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

moqups 14y ago
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.

jQueryIsAwesome 14y ago

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 14y ago
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).

micheljansen 14y ago

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!

Smudge 14y ago

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 14y ago

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://ssl.google-analytics.com/ga.js https://moqups.com/:26 https://moqups.com/:26 (anonymous function) https://moqups.com/:26 https://moqups.com/:26 (anonymous function) failing (I block ssl.google-analytics.com with my hosts file)

aboodman 14y ago

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!