New: Bootstrap 3 stencil kit is now available in Moqups

We’re wondering how much coffee our designer is drinking lately because he’s on fiiire. Here’s another nifty addition to our existing stencil library. The Bootstrap framework is one of the most popular HTML and CSS frameworks out there. The new stencils will come handy for quickly designing high fidelity websites that are based on this framework.

Like the stencils from the recently launched Material Design kit, these are also compound stencils. This means you’ll have to double click the stencils to access their inner elements and sub groups to customize their contents and appearance. You can find the new stencils under the Bootstrap category in the Stencils sidebar on the left of the app.

Let us know what you think or if there’s anything else you’d like to see added.

Take me to Moqups 2 →

Moqups Bootstrap UI Kit
Moqups Bootstrap UI Kit

Introducing the new Material Design stencil set

moqups-material-design-stencils

A large set of Material Design stencils is available for you to use inside Moqups 2, starting today. You can find the new collection under the Material Design category.

Take me to Moqups 2 →

Please note that like the iOS stencils, these are compound stencils, which means that they are groups of basic stencils (e.g. shapes, labels, icons and so on), configured to depict various user interface widgets in great detail. This approach allows you to have complete control over appearance of the user interface, so the components of your UI can evolve with your designs, without being restricted by the rigid structure of the basic stencils.

Whether you should use the basic stencils or compound stencils depends a lot on your needs. Typically, you will most likely want to use the compound stencils when you’re working on high fidelity mockups, which are getting closer to the final design. In contrast, the basic stencils are suitable for the initial exploratory work and brainstorming sessions, where speed and convenience are key.

Resizing and editing the compound stencils is also a bit different. While the basic stencils will resize without distortion because of their simple structure and layout, the compound stencils will require you to access (by double clicking) the inner objects or the groups inside and adjust them individually. Same goes with editing their contents. If you’ve used more advanced graphical editors in the past, you’ll feel right at home with this approach.

As always, we’re eager to hear your feedback!

More export improvements: Trim to content and transparent background for PNG export

Just a few days ago we’ve been announcing the revamped export system. Today, we’re happy to roll out new export functionalities.

Trim to content bounds

If you enable this checkbox, the image size will be automatically resized and positioned to fit the exact visible content of your pages. This is particularly useful if you want to use the exported PNGs for embedding in web pages, wikis or even in your apps. It also saves you from doing this task manually.

Transparent background

Tick this checkbox so your pages will have transparent background when exported to PNG. Combined with the Trim to content bounds feature, the assets you generate with Moqups should become much more useful for your day-to-day use cases.

new_export_options

We’re working hard to add even more exciting export functionalities in the upcoming weeks. These will help you automate your workflows and give you a well deserved productivity boost. Stay tuned  — we’re just warming up!

 

Take me to Moqups 2 →

Revamped PDF and PNG Export — Better, crisper results

We’ve rebuilt our export system from scratch. Exporting your projects to PDF and PNG should look much better now. A lot of bugs and limitations from the previous versions were also resolved.

Here’s the gist of it:

  • Fonts should be displayed in great quality
  • Text with different font weights are now properly rendered
  • Most PDFs should have a healthy size loss after switching to a rigorous diet
  • Exporting drop shadows on objects finally works in both PDF and PNG (it was previously disabled due to technical limitations — not anymore!)
  • Images that are cropped or have rounded corners no longer look sad when exported

We’re preparing an amazing set of new export features in the upcoming weeks. Stay tuned!

P.S.— To export your projects, click the menu with the Moqups logo in the top-left corner of the app and select Export.

Take me to Moqups 2 →

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!