New features: Markdown in comments, Font weights and Project transfer

Now that Moqups 2 is out, we’re committed to increasing the pace for releasing new features. Here’s what we have in store for you this month:

Font weights (beta)

Font weights support in Moqups 2

Many fonts come with lighter and bolder variants. In the typography industry that’s called “font weights”. Juggling with font weights is useful to improve the aesthetics of your design and make it look more professional.

This one was sitting on our backlog for too long. One of our customers was persuasive enough to make us start a hackathon and see how fast we can deliver. It turned out to be a good idea. Thank you, fellow customer!

Why is it still in beta?

We’re still fiddling with some issues related to exporting. This, in turn, also triggered an unstoppable desire to revamp the entire export system. So we’re doing that now. Please bear with us. We’re almost there.

Markdown in comments

Moqups 2 markwdown support

Take me to Moqups 2 →

Markdown allows you to format your text using a simple syntax that anyone can understand. Simple formatting for making text *italic*, **bold** or creating lists is now possible. That’s because it’s so simple. But you can add headings, images, strikethroughs, links and tables too, using the same formatting. And whatnot. That’s simple as well.

We’re supporting most of GitHub’s flavored Markdown specification. Check out their cheat sheet to learn more.

Transfer your projects to other accounts

Sometimes you need to change the ownership of an existing project. You sold your teammates on the usefulness of a premium Moqups account (THANK YOU!) and you want to use its perks to take the project that you started in your account to new levels of awesomeness. You need to hand off the amazing work you’ve completed to your customers. You’re changing jobs and someone else needs to take over your work. Reasons can be many.

This process used to have a fair amount of bureaucracy in it. It involved a lot ping pong between users and our support staff, so we thought it’s time to automate it. To start a transfer request, go to your projects and then click Transfer to another account from the More menu. You’ll be guided on what to do next from there. Here’s a short video on how it works:

Take me to Moqups 2 →

Notable bug fixes & improvements

As  always, we’re constantly making bug fixes and improvements. From now on you’ll see a blue bar on top of the app whenever we have a new release, so you can stay in touch

  • Flipped the Align Vertical Centers and Horizontal centers icons. Dan (aka “Dan from Moqups“) was somehow under the impression that the wrong way is the right way. And then he convinced the whole office about this. For years. He’s changed his mind again — many thanks to all the users who persuaded him to see the truth clearly
  • Fix: Opacity setting in the color picker is not visible
  • Fix: Sometimes images would get pasted in the wrong place
  • Fix: iOS Components category was hidden when not logged in
  • Fix: Ctrl/CMD + click on an image opens it in new tab on Firefox
  • Fix: Toggling the left sidebar in view mode moved the hotspots in the wrong position
  • Fix: Hotspots display in editor when “Show hotspots” option is disabled
  • Fix: Only 20 images were shown when when the sidebar was resized to max width

Take me to Moqups 2 →

Moqups 2 — Zoom, Rotation, Web fonts, Group Editing and much more

Everything at a glance

  • Page zoom
  • Editable groups (works with nested groups too)
  • Resize multiple objects at the same time
  • Rotation (finally!)
  • Flip horizontal/vertical
  • Rulers & guides
  • Hundreds of web fonts
  • More typography settings (letter spacing, small caps/all caps, strikethrough)
  • Crop your images
  • In-place comments
  • Reusable stencil templates
  • Rich text editing
  • Drop shadow
  • Border radius
  • Pan with the space key
  • Thousands of icons from the most popular libraries
  • Replace icons by drag & drop (magically inherits the existing style, position and relative size)
  • Smart shapes (wedge, arrow, polygon, callout)
  • More prototyping actions (Go to URL/Next page/Previous page/Back)
  • Redesigned color picker with swatches and color variations
  • Consolidated most stencil properties
  • Completely rewritten from scratch
  • Brand new user interface

We had to look at the app several times to make sure we didn’t miss anything. We probably missed something :-)

Take me to Moqups 2 →

A new beginning

It’s been a long time since the last update, hasn’t it? We’re often asked if we’re still alive or if the project is still maintained. Truth be told, for the past 1.5 years we’ve been hard at work for a brand new release.

Since our first release in 2012, we’ve been constantly amazed by your designs. Not only once we’ve scratched our heads and wondered “How did they do that? Moqups can’t do that yet!”. We’ve seen you improvising, pushing the app to the limits, way beyond the quickly get-that-idea-out-of-your-head concept we started with. We’ve got tremendous feedback and feature requests from our community, continuously validating an emerging pattern: many of our users wanted to go from low-fidelity wireframes to high-fidelity mockups, without having to switch between apps. Can we do something to help?
Challenge-Accepted-Meme

— Now, developing an app like Moqups is far from being an easy task.  No matter the programming language or framework you’re using, dealing with so much complexity won’t get your team too far. Doing this in a web browser is even harder. Browser compatibility shenanigans, performance bottlenecks, unpredictable network conditions and whatnot. When we wrote the first version of Moqups, we relied heavily on the tools and libraries created in a time when the web, as an app platform, was still in its infancy. A lot has changed since then and the web we know today is more mature and fully capable of delivering great user-experience and  performance. After pondering with many refactoring strategies (and ditching every one of them), we realized that in order to push things forward,we needed a new foundation with an architecture that makes complexity manageable and allows us to move faster. Complete rewrites are against conventional wisdom in the software industry but we’ve done crazier things before. 

 

Zooming

You can now easily zoom in to fine tune specific details or zoom out to get the bird’s-eye view of your projects.  Hold the spacebar to pan the page with your mouse like a pro

pizzazoomfinal

Precision: Rulers and Custom Guides

Take out the guesswork when aligning objects. Precision baby! You can add custom guides in two ways:

  1. Double click the rulers to quickly add a guide at specific coordinates
  2. Click and drag from the ruler area to the page to add custom guides

Guides are draggable, so click and drag each of them to readjust their position. To clear a guide, drag it out of the page. If you’re familiar with any popular graphic editor, you’ll feel at home with some keyboard shortcuts (CTRL/CMD+ ; to toggle your custom guides and CTRL/CMD + ALT/OPTION + R to toggle the rulers)

rulersfinal

Editable Groups

Resizing multiple objects and groups is now a breeze. Also, you’re no longer forced to unwrap a group to access and modify the contents inside it. Yeah, that annoying task of grouping-ungrouping-grouping objects a gazillion times is no longer necessary. Simply double click a group to access and modify its contents. Click outside to exit the group hierarchy and presto!

groupsfinalfinal

Rotate Objects

Drag the circle handle to rotate one or multiple objects. Hold Shift to rotate in 15˚ increments. This was one of the most requested features and probably the hardest to implement.

rotationfinal

 

Web Fonts

Eliminate monotony from your designs with a choice of more than 600 web fonts integrated in the new app. Bonus: More advanced typographic settings like letter spacing, small caps/all-caps and strikethrough.

Webfonts

 

Border Radius

Customize the radius for individual corners in rectangles. Sharp, round, just a little bit sharp, just a little bit round… you’ll love this one!

roundedcornersfinal

 

Drop Shadow

This is self-explanatory. Make your objects stand out from the crowd with a touch of shadow.

drop-shadowfinal

Smart Shapes

Who said you need surgical graphic skills for creating complex shapes? Create arrows, callouts, polygons, stars, wedges in less than a jiffy! 

smartshapesfinalfinal

Templates

Reuse your work easily by saving groups of objects as templates. Save frequently used user interface patterns, compose new user interface widgets and so on! We’re eager to hear your say on this one, since we feel it has a lot of potential for improvements

stencil templatesfinalfinal .gif

 

Icon Library

With the current flat design trends, having the right icon for the right action is extremely important. That’s why icons have a special place in the new release. We’ve integrated the most popular design packages and more are on the way. Font Awesome, Material Design, Hawcons or Entypo. Drop us a note if you’d like to see your favorite package integrated in Moqups and we’ll take a look!

Hat tip: Replace icons by simply dragging and dropping on top of another icon.

iconswitchfinalfinal.gif

 

Project Defaults

Customize the default theme of your project. Select your favorite colors, fonts and other style settings for keeping a consistent look & feel across your project pages.

Screen Shot 2015-12-21 at 14.22.40

Color Schemes

The new app has support for multiple color schemes and we’ve integrated a few common ones like iOS and Material design. Soon you’ll be able to import others, as well as defining your own

Screen Shot 2016-01-07 at 12.48.17

Image Cropping

Remember when you had to use another app to crop your images, wasting minutes between time consuming uploads? Those days are gone! Now you can easily crop any image by simply double clicking it and adjusting the black resize handles (Pro tip: Hitting Enter works too). Crops don’t affect the original image, so you can always change your mind in case you need further adjustments or crop the same image multiple timescropping

Better at Prototyping

The interactivity capabilities in the old Moqups were limited to specifying a particular page as the click target. As your projects grew in size and pages shuffled around, it was hard to update each hotspot on every project update. Now you can simply use the Go to next page and Go to previous page settings to automate the navigation between pages. Jump back is the more powerful version of Go to previous page as it gets you back to the page which originated the click. By popular demand, you can now also specify custom URLs as click targets (Go to URL)

Screen Shot 2016-01-07 at 12.52.11

Rich text editing

Most stencils having text now support rich text editing. The only exceptions are the ones that require a special syntax for their structure

Rich text editing

A brand new design

As we added more functionality, the old user interface started to show its limits — aaand it also felt a bit dated. Back from the drawing board, we’ve tried to make various functionalities  a bit more visible and easy to discover, as well as leave room for future improvements. Here’s a summary of changes:

  • Resize the left sidebar by dragging from the right edge
  • Toggle active panel’s visibility by clicking its icon
  • The “Styles” panel on the right sidebar is the place where you can configure the properties for the current selection
  • The “Workspace” panel is where you Configure most app and project setting like page size, project title, rulers, guides and snapping

 

Transitioning to Moqups 2

We’ve received a lot of feedback on this topic during the beta period. Some users are in the middle of huge projects and some just want to take their time to do the switch.  We do realize that adjusting to something so different takes time and most of all, we want to avoid disrupting your work in any possible way.

So here’s our plan:

  • The old app is now Moqups Classic. You can still find it under the old address for now (http://moqups.com ) . We’ll be supporting it for as long as it is used by a significant number of users.
  • You can find Moqups 2 at https://app.moqups.com
  • You can use both apps in parallel on the same account and subscription. 
  • You can easily migrate the projects created in Moqups Classic to the new version.
    1. Open the projects dialog ([M]oqups menu → Open Projects)  
    2. Click the Edit on the desired project
    3. The Migration assistant will guide you through the migration process

Please keep in mind that there are some important differences between the two versions. We suggest playing with the new version on a blank project  before migrating your older project so you can get used to how things work

  • Icons are now standalone objects as opposed to being part of the stencil. This allows you to have full control over the icon placement as opposed to being constrained by a few specialized settings. So, if ,for example, you want to add an icon to a button, you can simply drop an icon on top of the button and then group the two so they stick together when moving them around
  • We’re exploring a new approach to working with complex stencils. If you navigate to the “iOS Components” category in the Stencils sidebar, you’ll notice a whole new set of stencils that mimic the real user interface from iOS devices. The major difference from the common stencils (great for quick wireframing) is that these are in fact compound objects created from simple shape stencils  (we call them primitives) and text, which are then grouped together. The biggest advantage with this approach is that you have free-form control on how things look and feel (great for high fidelity mockups). This is in contrast with the rigid approach of the basic stencils where the customization is limited for the sake of convenience and speed editing. Depending on your feedback, we’ll fine tune the approach and also integrate more UI kits using this approach (BTW – Material Design is on the way)

As always, your amazing suggestions are helping us make Moqups a great product. This is only the beginning. We can’t wait to show you what’s in store for 2016 and beyond!

Take me to Moqups 2 →

How Design Can Change The World

A couple of weeks ago we got an intriguing kind of message. We get many interesting messages – some of them we print out and they become office memes – but what struck us about this message was that it came in not very long after we wrote about the importance of giving back.

Jono told us about the XPRIZE Foundation, a non-profit that sponsors and manages large international competitions that bring about “radical breakthroughs for the benefit of humanity”. Their motto is, ‘Making the Impossible Possible’. Founded by Peter Diamandis, their board of trustees includes Elon Musk, James Cameron, Larry Page, and Arianna Huffington, amongst others. When Elon Musk comes calling…you keep reading.

The latest competition, worth $15 million, is designed to eradicate illiteracy through the creation of Open Source software that will teach kids reading, writing, and arithmetic within 18 months. This will greatly benefit areas where little to no education exists.

While XPRIZE provides the logistical support for product launch, it relies on all types of people to come up with solutions. The recently launched design drive encourages designers to create visual mock-ups of what the literacy software would look like. How will an illiterate boy or girl learn that A is the first letter in the alphabet? How will software on a tablet teach somebody to spell their name for the first time? It’s a powerful challenge. And design is where it all starts.

Jono noticed we have a tool that encourages design collaborations. We also have a community of designers who build many awesome products using Moqups.  While software engineers are going to build the product, it’s unlikely that many of the teams that form up will have the design skills to get their rocket software off the ground gracefully.

This is why designers, and the design drive, are important to this challenge. It’s all about generating ideas and creating that perfect storm of creativity, know-how, and collaboration that leads to truly innovative solutions. Here’s what Jono has to say about it.

If you’re a developer, scientist, teacher, writer, or a designer, you have the opportunity to participate, just by providing feedback and ideas. You also have an opportunity to form a team with people who are passionate about making a difference in the world, the way these people did. Given the technology that exists and the tools at our disposal these days, this is a clear cut chance to make the world a better place.

Go to forum.xprize.org to start sharing your design ideas!

Giving Back To The Community is Important For Your Startup

Countless startups are built with open source projects. Moqups, built entirely on open source technologies, is just one example. The hours that developers the world over have put into these technologies simplified our lives and saved us from reinventing the wheel. Because we owe our existence to the open source community, we wanted to give back in our own way. So we created the non-profit plan for all non-profits, educational organizations, and members of open-source projects.

Initially it was just the open source community that came to mind, but then we decided to experiment with educational institutions and non-profits. The reasoning behind the decision was simple; one of our core beliefs is that software should be easily available to those who need it most but can’t always afford it.

To date, we’ve had over nearly one hundred universities sign up and, along with them, entire classes of students. It was amazing to hear from a professor of Hong Kong’s PolyU, considered one of the world’s top Design schools, who wanted to use Moqups for his ‘Information Architecture and Visualisation’ course. Talk about validation. But it’s not entirely surprising. Moqups has almost no learning curve, anyone can use it. Instead of spending valuable teaching time on learning a tool, the course director and students can get right into the course material. We’ve also had numerous NGOs and non-profit organizations reach out. Among these we count Mozilla and Khan Academy.

Giving back to the community is not the whole story though. It’s an important reason, to be sure, but there’s also the simple fact that many entrepreneurs need to count the pennies when they’re starting up. We get it, investing in growth and infrastructure is probably more vital to your product than design and creativity tools for which workarounds exist. This is especially true for schools or NGOs whose options are limited given the lengths they need to go through to justify spending. And of course, there are the starving students, and we’ve all been there, so helping them out is a no-brainer.

To be honest, we never thought the non-profit package would be so successful. For some odd reason, we figured that only a few organizations would take us up on the offer, but we’re blown away by the response. Every time the new school year rolls around we’re swamped with requests from places like MIT, Berkley, Stanford, or Carnegie Mellon. As an aside, we also never thought we’d reach remote places like Greenland where the local government is using Moqups to wireframe a new citizen portal, but that’s another story.

This brings us to most important lesson of all. Take our advice and do this with your own startup. Here are three good reasons why:

  1. You get constant feedback and validation for your product.
  2. It’s an excellent source of motivation during the ‘bad old days’ most startups experience at one point or another.
  3. That feeling when your product is truly helping people solve their problems is priceless.

In the technology sector, where we’re always using open source tools, the sharing economy manifests itself daily. It helps grow new companies and build great products. So giving back puts us at the heart of the revolution.

But if all these are not compelling enough reasons, there are about eight more furry ones below. When Texas Husky Rescue contacted us because they wanted to use Moqups to design their new site, they bribed us with several images that kinda made our day.

Optimizing For Creativity, or, Why We Don’t Have a Landing Page

At first, it was the need to get the product out the door that trumped marketing considerations. But here we are two years later with a mature product, super users, and still no landing page.  In a world of conversion optimization, the Moqups homepage is something of a paradox.  One of our early users was fascinated by the whole thing.

moqupstweet

A landing page would be nothing short of a creativity killer for new users. It might lead to a few extra sales, true, but we’d be compromising one of core principles; creativity and design go hand in hand.

Moqups is a tool that enhances a distinctive creative process. Period.  Picture yourself in the perfect storm of a lightbulb moment and the right place to act upon it. It doesn’t happen often, but when it does, how do you like hitting a five-step funnel that ends with a credit card form?  Do you still remember exactly what you saw in your mind’s eye when the inspiration hit? Is the creative spark just as bright as it was when you ‘landed’?

The truth is any authoring app disparages its own value proposition when usability is taken over by sales and marketing considerations (the guys at Hemmingway know that).  It also disrespects the idea person, or, as Google calls them, the Smart Creatives.  We don’t think that they need a conversion funnel to pay for a good product.  Nor does anyone need much convincing once they have an idea.

Then there’s the technology angle.

HTML5 implies instant gratification. But if you throw the common growth hacking techniques on top of an HTML5 app you’ve broken that promise. In our Internet world of forgotten passwords, attention grabbing (but ultimately disappointing) headlines, and ubiquitous advertising, there’s no greater satisfaction than hitting a page and getting what was promised. By foregoing the prospect of more sales delivered by a marketing driven landing page, we’re giving our users an experience that they appreciate.

moqupstweet2

Finally, some of us have ADD, and conversion funnels are guaranteed to kill our temporary mojo.  Conventional wisdom dictates that Landing Pages are the holy grail of growth, but that simply isn’t the case with every app. We want everybody who hits Moqups to keep that creative spark alive and bright. Does this mean we will never, ever, ever have a landing page? No, it just means that whatever happens, we’ll always optimize for creativity.

 

New: Stencil Styles, Google Drive, Publishing

I mentioned in the previous post that we’re preparing a new version of Moqups that will take your sketching to a whole new level. While we wrap that up (there are a lot of new features that we’re excited about), we’re releasing a few enhancements to the current version.

Style the (previously) unstylable

styles

Now you can configure styles for all of the stencils—think colors, strokes and text styles—so go ahead and make that image placeholder really shine!

You can style multiple stencils at once by selecting them and clicking on the icon in the stencil toolbar to reveal the property inspector. Any change you make will be applied to all selected stencils.

inspector

And I know you’re going to love this: we’ve added Copy styles (Alt + C) and Paste styles (Alt + V) to the right-click menu, so you can paint many other stencils with one stencil’s styles.

Publish project resources

publish

Here’s the ability to host PDF and image exports directly on our servers, so you can embed them into web pages, project management apps, bug trackers or just send the links via email or instant messaging. Learn more

Add Moqups to your Google Drive

gdrive

If you have a Google account, connecting Moqups to your Google Drive makes it extremely easy to create new Moqups projects from inside your Drive, and have them show up next to your docs and spreadsheets. Learn more

Plus you can log into Moqups using your Google account. Learn more

Change your user name

We got a lot of these requests on support, so we included the ability to change your user name in the profile section.

What’s next

We’re preparing enhancements around typography, out of which web fonts (Google Fonts specifically) are the highlight.

Thanks,
Dan from Moqups

Nested pages, PDF links and more

Organize your pages

We’ve made some changes to the page manager to help you organize larger projects:

  • Reorder and nest pages to shape your project’s information architecture
  • Find pages by title with the sidebar search box

pages

You’ll find the new page manager in the left sidebar next to Stencils and Images. We’ve also kept a simplified version for quick navigation in its usual spot — thanks for the early feedback!

Links & hotspots in exported PDFs

moqups-pdf-links-outline

Projects exported as PDF get to keep their links & hotspots, so you can share interactive prototypes offline. And the Table of Contents conveniently reflects the your project’s page nesting.

Shoutout to hacker-in-residence Sergiu for tinkering with Qt’s C++ internals to make this oft-requested feature a reality!

Put a face on it

avatars
Moqups just got a set of bespoke avatars from the lovely Ana Botezatu to complement our Gravatar-powered profile pictures. And if you can’t find your animal spirit in the list, you can also upload your own image.

Presentation mode

tab

You can click the tiny tab under the viewer toolbar do hide all interface elements.

Check out the new features!

Coming soon

We’re working hard on a new version to bring you enhanced maneuverability (object rotation, resizing of multiple objects and groups), more flexibility in styling the default stencils as well as the ability to create custom ones, plus support for web fonts.

Thanks for being with us,
Team Moqups