Diagramming: Charting New Territory in Moqups 2

We’ve written a short illustrated fable on Medium, that explains how users drove the development of our new Diagramming tool. Check it out!

Diagramming was once a tool used primarily by System Architects and Business Analysts. But now, almost every kind of project begins with someone — or some team being tasked with creating diagrams.

At Moqups, we know that these diagrams can be as varied as the people who make them. They might be flowcharts, giving shape and clarity to the complex user-interactions and workflows within your software. Or sitemaps, offering bird’s-eye views of your website’s information architecture — before you move on to the graphic design phase. They can be use-case diagrams that help anticipate your clients’ needs. Or even something simpler — a decision tree to make  abstract choices concrete, or just a few lines and arrows to help your audience visualize the flow of your app.

But whatever their form, these diagrams are essential to a project’s success. They aren’t just part of the initial planning process. At every stage of development and implementation, teams rely on those diagrams and need them immediately at hand — for reference, guidance and documentation. And, as projects evolve, diagrams must as well. A good diagram can — and should — be a key part of any project’s rhythm and flow.

However, many users don’t need the full capabilities of a complicated  diagramming tool — or the distraction of complex UML — just to create a useful sitemap. They just need an elegant solution that fits comfortably into their existing workflow.

That’s why we’ve built a clean, intuitive Diagramming tool – with exactly the functionality you want – right into Moqups 2. Let’s take a look:

Creating diagrams in Moqups 2

To enter Diagramming mode, click the Diagram button in the top-toolbar (or press ‘D’). You’ll immediately see groups of pale blue dots (connecting points) appear around the edges of the objects on the page. 

To draw a line between any two objects, click on one of these dots, and drag the cursor towards the second object. As the line approaches a connecting point, it will snap and “stick” –  showing that it’s attached. And, it will remain connected, even as you move, resize or rotate objects!

We’ve crafted intelligent algorithms that help draw connectors around objects, so they won’t get tangled up. 

To exit Diagramming mode, just click anywhere on an empty surface on the page (or hit ‘D’ or Esc).

Depending on which connector style you choose, you’ll also be able to fine tune the shape of the connector lines by adjusting the vertical and horizontal offset-handles.

If you want to customize your connectors – by changing the line-style, or the start-and-end markers, just go to the Connector Style section of the Styles Panel (on the right sidebar). From there, you can pick alternative line-styles: orthogonal, orthogonal rounded, curved or straight. You can also choose from a variety of start-and-end markers.

Customizing the diagram connector styles in Moqups 2

Last but not least, we’ve added new flowchart stencils – under the “Flowchart Diagrams” category – in the Stencils Panel (on the left sidebar). These dedicated stencils should be enough to get you started but, of course, you can connect any Moqups object, stencil or image –  even one of your own templates!

moqups-diagram-flowchart-stencils

Now, you can easily create – and improvise – any kind of diagram you need.
We really hope you’ll love this new feature in Moqups… because we believe that diagramming is for everyone.

Take me to Moqups 2 →

P.S. If you happen to be GIF-phobic (or is it pronounced ‘gifobic’?) – check out our video:

Communicate Clearly Without Clutter: Manage feedback by resolving comments

The Gist

Moqups was designed with collaboration in mind because we figured that your team is probably a lot like ours: a group of creative professionals using comment threads to share feedback — both synchronous and asynchronous. That’s why we’re gratified that so many of you are using the Comment feature — and why we’re excited to see a huge spike in conversations within Moqups 2. We’re sure that you’ll love it…

We understand that as teams get larger, and projects more complex, real-time feedback becomes increasingly essential to the design workflow. But, as more collaborators join the conversation, the speed and volume of comments also accelerates. The result can be a swarm of information where it’s tough to distinguish between obsolete threads and current — sometimes urgent — messages.

If that’s your challenge, fear not! We’ve come to your rescue with new functionality that helps you clear away the clutter, and makes conversations cleaner and easier for your team.

Now, you can Resolve, or Resolve & Reply to comments, notify your team about those changes, Reopen resolved threads and, finally, clean up your page by hiding the resolved threads.

Let’s take a look at these features in action:

Mark Comments as Resolved

Once an existing comment has been read — and appropriate action taken — you can resolve the comment thread by clicking the Resolve button. The blue, numbered comment icon will be marked with a √ . We’ve even added a little animation to reflect the satisfaction of crossing another task off your list!

resolve-2

Take me to Moqups 2 →

Reply To And Resolve Comments At The Same Time

When you type into the comment field, the button automatically changes from Resolve to Resolve & Reply. This way, you can send a note to your colleagues to explain your action.

reply-resolve

Take me to Moqups 2 →

Reopen Resolved Comments (and Reply)

But if you need to reanimate a previously discussion? No problem! Just click on the Reopen button to make that thread active again — and type in the comment field to Reopen & Reply.

Take me to Moqups 2 →

Filter To Show Unresolved, Resolved or All Comments

By default, you will now see only comments and threads that are Unresolved (i.e. active). But, just click on the Show drop-down menu and you can also choose to see All, or just Resolved comments. This will help you see the big picture: not only what’s unresolved, but what your team has accomplished — and the progress they’ve made!

filter

Take me to Moqups 2 →

Notify Collaborators using Moqups, Email or Slack

As you’d expect, whenever you Resolve or Reopen a thread, your team members and collaborators will automatically get notified by email — and in the popular Slack team messaging app. If you haven’t already enabled Slack integration within Moqups 2, just go to Account SettingsNotifications → and then follow the instructions from there.

Slack notifications

Take me to Moqups 2 →

Outline panel, @username mentions in comments and more

Outline panel

We’ve made it much easier to navigate through the structure of complex projects. This is particularly useful if you have many elements on your pages.  Also, it should make it much easier to work with those compound stencils from the Material Design, Bootstrap or iOS kits.

But there’s more to it! You can now assign meaningful names to the items on your page. Doing this helps you easily find them later on and stay organized as the complexity of your pages will grow. Your colleagues will also appreciate it.

Do you have work in progress that you need to hide because you’re not ready to show it yet? You can hide it by toggling the visibility of your stencils. It even works for groups!

Here’s the summary of this new feature:

  • Click the Outline icon on the left sidebar to open the new panel (or press ALT+3)
  • To select objects, click the items in the outline tree. If the selection is a group, you can expand it by clicking the left arrow icon and access its inner structure
  • Hovering the items in the outline tree will highlight the corresponding objects on the page with a blue border
  • Double click the items in the outline to rename them
  • To toggle the visibility of your items, hover them in the outline panel and then click the small eye icon
  • Search for specific objects from the top search input

outline-panel

Take me to Moqups 2 →

@mentions in comments

Do you need to draw the attention of your collaborators or team members on a specific comment thread? Do this by mentioning them in a comment. You’ve already used this functionality on those time wasting social networks. To mention someone, type the @ character, followed by the first letter of their name, username or email. An autocompletion popup with suggestions should show up once a match is found. You can also trigger it by clicking the small “@” button on the bottom right of the comment popup. Once you send the comment with @username mentions, those users will get an email notification.

moqups-at-comment-mentions

Select text in view mode

Selecting text in the viewer was not possible until now. This made it hard to share copywriting content with your peers. This functionality was conflicting with the interactivity features (e.g. hotspots), so we had to disable it. To fix this issue, we’ve added a Select text mode in the viewer. Click the button with the cursor icon on the top toolbar of the viewer to enable this mode. Once toggled, all the texts on the project will be selectable so you can copy them to the clipboard.

moqups-select-text-mode

Inspector align toolbar

We’ve added a toolbar for getting a speed boost when aligning your objects. No more extra clicks. We made sure it stays sticky if the inspector needs scrolling, so you’ll always have it handy when you need it. One of our customers was persuasive enough to make us start a hackathon and deliver this within a day. Thank you!

moqups-inspector-align-toolbar

Hide contents outside page

It’s now possible to clip the content that’s sitting outside the page bounds. We’ve noticed that some users find it useful to have objects sitting outside the page for easy reusing, while others like the app to automatically hide the excess content. What to do, what to do? This is now an option in the workspace settings, below the page size inputs. Yet another heavily requested feature that we implemented during a productive coding spree.

moqups-clip-content-outside-pages

Take me to Moqups 2 →

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 →