Show HN: Moqups - Vectorial mockups with HTML5 and SVG

by moqups • 14 years ago

310 103 14 years ago

lewispb2• 14 years 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.

moqups28• 14 years 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• 14 years ago

I love Balsamiq but hate flash. Hello Moqups!

allardschip• 14 years ago

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

moqups28• 14 years 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.

lewispb2• 14 years 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• 14 years ago

Looks real nice on Retina Mac.

moqups28• 14 years ago

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

xmpir• 14 years ago

nice tool!

moqups28• 14 years ago

Thank you!

Swizec2• 14 years 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.

moqups28• 14 years 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.

Swizec2• 14 years 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 :)

kmil• 14 years ago

please give option to change Comic Sans to soemthing else

moqups28• 14 years 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• 14 years 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• 14 years ago

It's Chalkboard actually.

nischalshetty• 14 years ago

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

faz• 14 years 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!).

moqups28• 14 years 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• 14 years 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)

moqups28• 14 years 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• 14 years ago

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

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

moqups28• 14 years 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• 14 years 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.

pajju• 14 years 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• 14 years 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• 14 years 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!

moqups28• 14 years 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• 14 years ago

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

platonichvn2• 14 years 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.

moqups28• 14 years 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!

platonichvn2• 14 years ago

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

amitvaria• 14 years ago

Looks great - any plans on Google Drive integration?

moqups28• 14 years ago

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

jasonhanley2• 14 years 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.)

moqups28• 14 years 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 :-)

jasonhanley2• 14 years ago

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

alttab2• 14 years 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?

moqups28• 14 years 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.

alttab2• 14 years 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.

lukeholder• 14 years ago

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

moqups28• 14 years 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• 14 years ago

Is there a way to create templates?

moqups28• 14 years ago

We plan on adding this feature very soon!

fshen• 14 years ago

Impressive.

markive• 14 years 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!!

moqups28• 14 years 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!

kernel_sanders• 14 years 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.

drivingmenuts• 14 years ago

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

moqups28• 14 years 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• 14 years 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!

temuze• 14 years 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.

moqups28• 14 years 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• 14 years 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• 14 years ago

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

username3• 14 years ago

Sounds similar too. There's no easy way to pan in both.

martian• 14 years ago

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

malkomalko• 14 years 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• 14 years ago

This is fantastic. Blows Balsamiq out of the water.

duopixel• 14 years 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.

moqups28• 14 years 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• 14 years 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• 14 years 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• 14 years 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

moqups28• 14 years ago

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

moqups28• 14 years 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• 14 years ago

Very impressive. Clearly lots of work. Good job.

pooriaazimi• 14 years 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• 14 years 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• 14 years ago

So much comic sans!! Ahhhgg!!

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

Killswitch• 14 years 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• 14 years ago

Because if the results look too much like an actual site, people will think it's the real template.

ChrisClark• 14 years 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• 14 years ago

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

https://chrome.google.com/webstore/detail/nlfbhphohgafllkjna...

moqups28• 14 years ago

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

jonpaul• 14 years ago

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

mduerksen2• 14 years 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.

moqups28• 14 years 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.

mduerksen2• 14 years 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• 14 years 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?

njx3• 14 years 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

moqups28• 14 years 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• 14 years 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!

njx3• 14 years ago

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

skyhook_mockups2• 14 years ago

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

njx3• 14 years ago

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

skyhook_mockups2• 14 years 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• 14 years ago

awesome! what is this going to cost?

sidcool• 14 years ago

Pretty cool. I congratulate you.

sgt• 14 years ago

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

moqups28• 14 years 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• 14 years 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• 14 years 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• 14 years 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• 14 years 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• 14 years 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://moqups.com/:26 (anonymous function) https://moqups.com/:26 (anonymous function)

failing

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

aboodman• 14 years 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!

Show HN: Moqups - Vectorial mockups with HTML5 and SVG

Related Stories