With the introduction of Components, you can now create reusable elements that instantly sync across all instances of that element within your Moqups project.

Turn any single object or group into a Component, and all copies of that element will automatically inherit any changes made to the original. This way, your team can apply quick, consistent updates within projects, and avoid the tedium of reformatting over and over – one object at a time.

By making it easier to tweak elements throughout a project, Components encourage teams to experiment freely, iterate and test more often, and accelerate the overall design and development process.

Components are particularly useful when creating and maintaining frequently repeated UI elements like headers, footers, logos, icons, modals, and device or platform-specific templates.

And the best thing about using components as a foundation tool, is that they have a cumulative effect; over time, the more components you add, and the more you nest instances, the faster and more efficient your future execution becomes.

That’s why components – sometimes named ‘symbols’ – have become such an essential tool for building design systems. But you don’t have to be working within a comprehensive design system to take advantage of components’ power. They can smooth and speed any type of workflow – on any kind of project!

You may have already noticed the new Components button in our top-toolbar. You’ll find all of the Component and Instance controls there, and in the Component section of the right-click Context Menu. Let’s take a look at how they work:

Creating Components and Instances

Once you turn an object or group into a Component, it acts as a master to any and all copies – or Instances – that are made from that component.

That means that any formatting you apply to the Component is immediately reflected by every Instance in the project.

However, for maximum flexibility, instances remain independent of the component in their Coordinates (including Flip and Rotate), and Visibility. This means you can relocate or hide components without affecting the position or visibility of their instances.

To create a Component:

1. Select any object or group on the page.
2. From the Component button in the Top Toolbar, or the Component section of the right-click Context Menu, choose Create Component.
3. Once created and selected, Components are identifiable by their orange ‘Component’ label, badge and frame; in the Outline panel, they are identified by an orange highlight.

To create an Instance:

1. Make a copy of the Component using Ctrl/Cmd  + D, the Duplicate option in the Context menu, or simply hold down Alt/Option and drag.
2. You can paste the Instance to any page within the project
3. Now, change the size, text, color, or other formatting attributes of the Component
4. Once the changes are complete, click outside the Component’s object-frame – and watch the changes propagate to all Instances within the project.

Editing and Adding New Objects

Components and Instances – even those made from single objects – behave like groups. To edit any component or instance:

1. Select it so you see the orange Object-Frame.
2. Then, double-click so the thicker Component Edit Border appears in orange.
3. Now, you can…
   • • Click through to edit
     • Add a new element from the left-sidebar
     • Copy and paste an object in from the page itself

Applying Overrides to an Instance

Sometimes, you may want to customize part of an individual instance, yet still leave it connected and responsive to its component for other changes and updates. For example, you might want to change at CTA’s color on a specific page, but still want that button to sync with its master for any future changes in size and text.

That’s why any changes made locally, to any individual instance overrides the component’s ability to change that specific formatting attribute (text, color, blur, rounded corners) in the future.

And any overrides applied locally will have no effect on other instances, or the original Component itself. This allows your team to be consistent in design, but still responsive to the particular context of each instance.

Detaching and Resetting an Instance

If you’ve made local modifications to an individual instance, but then want to remove those overrides and re-apply the full style and properties of the component, select Reset Instance.

And, if you want to turn an instance back into a normal object or group, just select Detach Instance.

Locating and Restoring Components

You can leave individual Components in the context of a design, or create a separate project page where all your components can live – and then pin that page to the top of the Pages Panel.

And, if you’re working with an instance, and need to check or tweak the component itself, just click on the instance and select Go to Component from the menu. No matter where the instance is, you’ll jump immediately to its Component’s location within the project.

If, for some reason, you delete a Component, and leave orphaned instances behind, just select any instance and choose the Restore Component option – and the component will magically reappear! Note that this works even for instances with overrides – you’ll still get the original component back.

Components can help reduce errors, ensure consistency and, most importantly, save time by freeing your team from the tedious, repetitive work of updating and reformatting.

As always, we want to hear your feedback, so we can continue to improve your experience. So, please send us your feedback and suggestions at support@moqups.com .

New Features:

• You can now both color and highlight any selection of text – individual characters, words, or whole paragraphs – directly from the Quick-Format Text toolbar, making it easier for teams to write and edit content directly on the page.
• The Stencil Library’s new ‘Callouts & Annotations’ category includes the versatile Callout, as well as newly added Bracket, Speech Bubble, and Thought Bubble stencils. All the annotation stencils are now sticky by default, and can be attached to any object. Drag the tail on to the object and release when you see the orange frame. If you don’t want annotations to stick, just toggle from ‘Sticky’ to ‘Normal’ in the Format Panel.
• Users with project links can now request access if they have not already been granted permission.

Improvements:

• Charts now display all the ‘Chart Type’ buttons directly in the popover toolbar so you can quickly experiment, and then pick the visualization that best suits your data – no matter which chart you originally chose.
• You can now more easily select objects and edit their text within nested Components.

Bug Fixes:

• Fixed a bug that prevented the Linear Gradient’s circular slider from rotating to 0 degrees.
• When moving Custom Guides, the tooltip now displays coordinates as whole numbers – not fractions.
• Object handles (for rounded corners, stars, polygons, etc.) now work with touch-based devices.

Helping teams create mockups is at the core of our mission. After all, it’s where we started – and how we got our name! But since we launched in 2012, Moqups has evolved to become much more than a wireframing tool.

We’ve added diagramming, prototyping, whiteboarding, charting, annotation, and commenting because we understand – and our users have shown us – that wireframing doesn’t happen in a silo.

For teams to wireframe effectively, they first need to research, strategize, and map out user flows. And once the wireframes are done, they still require high fidelity mockups and interactive prototypes for both pitching and testing.

All of this, before the designers and developers take over, is what we like to call ‘foundational’ work. It isn’t always pretty – and it can often be bafflingly complicated – but good thinking and planning results in a smoother, less expensive process – and a better final product.

And during this foundational stage, visual communication and collaboration is vital. Good, fast, sustainable decisions come from hearing all voices, checking requirements at the right time, and building genuine consensus before moving forward.

And that means having a single, accessible platform where every member of the team can contribute, suggest, revise and verify. An app that works with your team, not against them.

Last week, we passed our 1,500,000 user mark, and Moqups is now the first stop for product managers, business analysts, UX professionals, executives, and all kinds of cross-functional teams working on complex projects.

But if you are a UX designer, don’t fear! We’re not about to leave wireframing behind. We just want our users to be able to use Moqups in their larger research, planning, design and development process.

For instance, although we’re listed as one of the ‘Leaders’ on G2’s Grid® for Wireframing, our reviewers talk about the benefits of a platform that lets them go beyond just wireframing:

This kind of feedback is great encouragement for us as we build up Moqups’ functionality. We know that there are lots of ways into a project – through competitor research, moodboards, sitemaps, user flows – and, yes, through wireframes! With Moqups, you really can begin anywhere.

Still, nothing quite beats wireframing for getting an idea out of your head and onto the page!

And, if you are new to wireframing itself, and want a clear, concise primer to get you going, check out Bridget Poetker’s article at G2, What Is a Wireframe? (+How to Create One in 5 Simple Steps). It’s a terrific starting point!

Try Moqups now for free →

According to Gartner, 30% of companies say that by 2020 their greatest competitive advantage will be the ability to exploit digital technologies. As organizations navigate this digital transformation – and adopt agile processes – they need software that helps their teams create and collaborate seamlessly.

Last year saw a flood of new online collaboration tools, but their focus on specificity and specialization has created as much chaos as they promised to eliminate.

That’s where Moqups’ all-in-one approach has an advantage. By bringing whiteboard, diagram, and design features together within a single, online app, Moqups puts your company’s teams together on the same page – literally.

Using an all-in-one visual collaboration platform like Moqups can transform your team’s workflow, boost organizational efficiency, and help your company thrive in a fully digital – and visual – world. Here are three research-backed reasons why.

1. Bridging Information Silos With Online Team Collaboration

Despite the proliferation of new online collaboration software, businesses are still incredibly siloed. Worldwide, 39% of employees say their coworkers don’t collaborate enough. 

This kind of isolation can have a devastating effect on organizations. When departments or divisions work in silos, they develop tunnel vision – and lose sight of the larger corporate strategy and priorities. The end result is wasted time, duplicated work, and costly mistakes. Frustrations mount, collegiality breaks down, and momentum is lost.

That’s why 75% of employers rate teamwork and collaboration as “very important”. They understand that collaboration increases transparency and morale. And that, in turn, fuels more engagement, consensus, and productivity. Companies that promote collaboration are 5x more likely to be characterized as high performing. 

But teams are much more likely to remain in their silos when they work with disparate tools – and communicate with different professional idioms. Moqups solves that problem by giving teams a shared visual space to think, plan, and collaborate together. This way, all voices get heard, and all stakeholders – not just designers – can shape and share ideas.

Business analysts, product managers, and IT consultants can make visual risk and SWOT analyses, use case diagrams, and business model canvases. Executives can build organizational charts and product planning roadmaps. Project managers and UX designers can create flowchart diagrams, wireframes, mockups, and prototypes.

Moqups’ all-in-one solution lets team members visualize requirements, clarify specifications, and produce a wide variety of foundational artifacts and documentation for any kind of project. 

2. Reducing Information Search Costs Within Organizations

Employees waste an inordinate amount of time chasing data and documentation through an elaborate labyrinth of repositories: Email, Slack, Google Drive, Github, Trello, and any number of whiteboarding, design, and prototyping apps. The majority (61%) of employees regularly access four or more systems and nearly one-sixth of them regularly access 11 or more. 

On average, it takes workers eight searches to locate the right document, and 44% of the time, they can’t even find the information they were looking for! As a result, workers spend 36% of their day just trying to track down and consolidate information. 

And it’s no wonder why. Visual documentation is often spread across a multitude of highly specialized apps – each targeted at a specific niche or use case. But these kinds of specialized tools – which lack interoperability – increase the information search costs for organizations. And their complexity and steep learning curve limit stakeholder participation and discourage collaboration.

Moqups, on the other hand, offers a unified team collaboration tool that bundles together the best of these features within one app – and provides teams with a clear source of truth. Wireframes, prototypes, flowcharts, mind maps, and moodboards can all live together in a single repository, drastically reducing information search time and cost. 

Adhering to the 80/20 rule, Moqups provides all the features you need, and none that you don’t. And its UI is both lightweight and accessible – so your entire team can skip the learning curve, find the documents they need, and get right to work.

3. Giving Due Recognition for Online Team Collaboration

Feeling recognized and appreciated are fundamental human needs. Yet an astounding 82% of US workers don’t feel that their supervisors give them sufficient credit for their contributions. As a result, employee engagement and motivation dissipate.

But when teams create on a myriad of platforms, it becomes difficult for their work to gain visibility. It can be challenging for senior-level managers to track down and access projects – especially if they’re not involved in production. As a result, too much work happens behind the scenes, without an opportunity to assess individual contribution, and reward achievement.

Moqups enables managers to pull back the curtain and gain insights into how team members have contributed at every stage of development. With Moqups, employee work is online, centralized within a single online collaboration tool, and easy to access through a clear and simple interface. That means that managers can easily monitor the entire lifecycle of a project, from concept to creation, and discover the hidden work – and heroes – that deserve recognition.

A Call for an All-In-One Visual Collaboration Platform 

Online collaboration tools have traditionally been the exclusive domain of designers, due in large part to their complexity, and the steep learning curve involved. Moqups offers the first-of-its-kind platform that empowers all members of an organization to leverage the power of visual content. In doing so, it helps to solve the most crippling problems confronting today’s organizations – information silos, steep information search costs, and inadequate recognition. The result is a fully engaged and empowered workforce that is primed to thrive.

Try our free templates →

Make shared projects collaborator-friendly by channeling your inner Marie Kondo!

No matter where you live on the planet, it’s pretty much impossible to escape Marie Kondo, the queen of decluttering. Her three books, including the breakthrough, The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing have sold over 11 million copies in 42 countries. In January, she launched a Netflix series, and in 2020, she’ll turn her attention to both career and the workplace with a third book: Joy at Work.

What has made Kondo such a global phenomenon, beyond the effectiveness of the KonMari method, is her philosophical elevation of ‘tidying up’ – from dreaded chore to spiritual exercise.

For Kondo, decluttering is an act of empathy – for both the things and the people that surround us. She encourages us to envision the flow of an ideal day – and then arrange the elements of our home to best realize that experience.

Anybody working in the world of UX will recognize this approach. It’s what we do every day, with every page, modal, menu, and interaction. Declutter, simplify, clarify, speed up flow, reduce friction – and yes – spark joy!

And, when we get it right, users feel a magical combination of safety, familiarity, reassurance and delight as they pursue new paths, chase new ideas, or just fulfill basic tasks.

Tidying orders and relaxes the mind. – Marie Kondo

But as we focus on this experience for our users, it’s easy to overlook its importance for our colleagues. A clean, clear, relaxing and comfortable flow should be as much a part of our shared, internal projects as it is for our public-facing UI.

Organizations rely increasingly on distributed teams – and asynchronous collaboration is key to that kind of workforce and workflow. With so many team members and independent contractors sharing projects, tidying up helps eliminate confusion, reduce stress, and maintain both momentum and morale.

And it is not a stretch to say that this experience should be something joyous. We all know how dispiriting it is to be invited into a project, only to be overwhelmed by a sense of clutter, confusion and disorientation. But, how calming and relieving it is to open a shared document and immediately have an intuitive sense of that project’s purpose, hierarchy, and focus.

So, in the KonMari spirit, here are some tips to help your team keep projects tidy, accessible, and collaborator-friendly!

Learn more about Moqups →

Organize Pages in Folders to Create Clear Hierarchies

Sometimes, teams collaborate on projects asynchronously. Other times, an entire team – in the office and remote – will share a screen and create together in real time. In both cases, a clear hierarchy of well-named pages and folders can make that work clearer, faster, and more enjoyable.

As your project expands, find your inner Kondo, and start tidying by category! Take the inevitable mix of brainstorming pages, user flows, stakeholder feedback, experiments, and iterations, and group them into easily identifiable and accessible folders – making sure that both folders and pages are clearly named.

To create a new folder, just click on the Create a New Folder icon – and then drag it where you need it. And to save time, try creating a folder directly from a selection of pages by right clicking and choosing ‘New Folder With Selection’.

Check out our previous blog post for more about page and folder management, including nesting and hiding pages and folders.

Fit Page to Content to Keep Things Clean

During the initial creative process, it’s helpful to work on a page big enough to accommodate all your iterations and experiments. But that can result in all kinds of flotsam and jetsam littering the margins.

So, before inviting collaborators to share your work, take a moment to remove those vestigial distractions. Then, resize the page instantly by right-clicking and selecting ‘Fit page to content’.

Resolve Comments to Reduce Clutter

When cross-functional teams collaborate – suggesting new ideas, clarifying requirements, and building consensus – project pages can become peppered with comments. When deadlines approach, and even more people join the conversation, it’s important to remove distractions and distinguish between current and obsolete conversations. 

To keep everybody’s eye on what matters, you can quickly declutter by resolving comments. Team members can then filter comments to show Unresolved, Resolved, or Unread conversations.

Just open the comment and hit the ‘Resolve’ button or, if you wish, leave a closing message to explain your action and click ‘Resolve & Reply’.

Resolving has advantages over deleting the thread because any member of the team can always restore the conversation when and if the topic needs further discussion.

Copy Pages to Combine & Consolidate Projects

Sometimes, initially distinct initiatives can begin to overlap, and teams just end up jumping back and forth between two related projects.

For example, you may have a design and marketing team working on the same initiative, but in two different Moqups projects. Or you might be developing two different features that end up having mutual dependencies. In cases like these, the best way to keep things tidy is to combine all or parts of those discrete projects.

Just right-click on any selection of pages and select ‘Copy Pages’ from the dropdown. Now, you can paste those pages into the Pages Panel of any other project.

You can also use the same process to break overstuffed and unwieldy projects into smaller, more focused initiatives!

Team vs Project Libraries in Images and Templates

Both the Images and Templates libraries are subdivided into Team and Project templates. Taking advantage of these options makes it easier for your team to quickly find relevant assets – either by search or by scrolling.

Keep project-specific assets in the ‘Project’ library, and use the ‘Team’ repository for company-wide, reusable assets like branding elements and logos. Read more in the Images section of our Help Center.

Archive Projects to Keep Your Dashboard Clean

Finally, don’t forget that you can always declutter the Projects window of your Dashboard by archiving inactive projects. This quick tip will help eliminate confusion and save your team time when they search for projects!

And, if you ever need to re-examine an archived project, you can always restore it. Learn more about how to archive, restore, delete and recover projects in our Help Center.

Tidying up and decluttering helps streamline your colleagues’ workflow, and eliminate the wasted time that’s part of a confusing collaborative experience. You’ll know that you’ve got it right when team conversations focus on the choices and decisions to be made, not on where to find things!

Create a free account →

New Features:

• Our new Table offers a fully-visual editing experience, and replaces the old, syntax-based Grid stencil. Now, you can:
  • Quickly select, resize, and reformat rows and columns
  • Apply background color to rows, columns, and cells
  • Use rich text editing, and add links and highlights
  • Justify and align cell content, and apply both vertical and horizontal padding
  • Adjust cell-border width, format and color 
  • Merge, split, and distribute cells
• The Sticky Note stencil is the latest addition to our ‘Callouts & Annotations’ category. Like the Callout, Bracket, Speech Bubble, and Thought Bubble, the Sticky Note has both Normal and Sticky modes – allowing it to either be attached to an object, or float freely. And, its ear can quickly be resized with the custom handle.
• We’ve added an iPhone X stencil to the Stencil Library.

Improvements:

• Components:
  • When you apply the ‘Detach Component’ option to a nested component, only the top-level component is detached; the nested sub-components are unaffected, and retain their component status.
  • Top-level components can now be locked.
• View and Preview modes no longer include sidebars. Instead, the Page Tree and the Comment list can be opened by using buttons along the top toolbar.
• Diagram extenders now connect to an adjacent object only if that object is another unlocked diagramming stencil. Otherwise, the extender creates a new diagramming object.
• We’ve improved the Welcome Screen to include a Recent Projects sidebar, and a ‘Browse all projects’ link to the Dashboard. 
• The Image Placeholder stencil now has a Rounded Corners control.
• When an unsaved project is saved – either by autosave or by command – the user is now prompted to enter a project name, and to select a project owner.
• Google Fonts have been updated to include new typefaces:
  • Bahianita, Barriecito, Beth Ellen, Be Vietnam, Big Shoulders Display, Big Shoulders Text, Blinker, Chilanka, Crimson Pro, Darker Grotesque, DM Sans, DM Serif Display, DM Serif Text, Farro, Fira Code, Gayathri, Grenze, Hepta Slab, Lacquer, Lexend Deca, Lexend Exa, Lexend Giga, Lexend Mega, Lexend Peta, Lexend Tera, Lexend Zetta, Libre Caslon Display, Libre Caslon Text, Literata, Liu Jian Mao Cao, Livvic, Long Cang, Manjari, Mansalva, Ma Shan Zheng, Noto Sans HK, Red Hat Display, Red Hat Text, Saira Stencil One, Turret Road, Vibes, Zhi Mang Xing

Bug Fixes:

• The Radial Gradient – with Stretch mode enabled – now centers properly in the Wedge shape.
• In Default Styles mode, the color picker for ‘Fills & Strokes’ now responds properly.
• Fixed an issue that affected visibility actions in the HTML export.
• Objects that have their aspect ratio locked, and have also been rotated, now resize properly.

Mock up data grids intuitively and visually – and leave the quirky syntax behind!

Data is the raw material of the global economy – guiding the reinvention of established companies, and driving the strategy of new ones. And that information’s power is compounded when it is easily shared, analyzed, visualized, understood and acted upon.

One of our highest priorities is data visualization and representation in all its forms, and last month, we introduced new chart and graph features and templates. Now it’s Tables’ turn.

Although grids and tables aren’t technically data visualizations, they’re often combined with charts and graphs – and often created by the same teams. Whereas charts tend to show the overview, shape, and summary of data, tables present detailed information in as close to its raw form as possible. 

Great tables have several advantages. They can provide access to precise numbers and specific information in large, dense data sets. And, they allow users to scan, compare, and analyze data in multiple directions – in the order of their choice – and take action based on those insights.

The Rationale Behind Our New Table

Grid and tables are an essential part of our users’ workflow, especially if their focus is on enterprise products. In complex apps for logistics, project management, sales, customer relations, or human resources, the majority of screens may contain – or simply be – a grid or table.

The problem was, our old Grid stencil worked fine for small tables with only three or four rows and columns. But, if you wanted to mock up complex data grids, a syntax-based stencil just wasn’t up to the task.

Improving the Grid has consistently been one of the most frequently recurring topics on our support channels – and your message was clear: We needed a better grid solution. So, our rationale for creating a new Table stencil was, quite simply, our users’ voice. The only question was how to solve the problem.

The Grid’s syntax based approach wasn’t easily scalable – we would have had to invent new syntax for every new formatting option. But that would only complicate your workflow, and be the very antithesis of our mission: Moqups should offer the most productive ways to visualize ideas of any kind – and visualize at the speed of thought! Visual-ize. 

The answer was clear. We had to go visual.

Our first approach was to try using open-source libraries in order to save a few dev cycles and release this to you sooner. But, once we evaluated those options, we realized that we had a Goldilocks problem – they were either too specialized or too generic for our needs. So we would have to handcraft a solution. It took us a few sprints – but it’s finally here.

It was a fun, but intensive exercise. Although we often felt as though we were reinventing Excel, the process allowed us to prepare the underlying architecture for rapid iteration and the expansion of features. 

And, since this new stencil is a central piece of our future development, it’s been built with all kinds of future interoperability in mind – like the ability to share data to other stencils such as charts, import data dynamically from external sources, and much more. But, right now, it’s all about simplifying your workflow and making you more productive. 

The new Table stencil offers a completely visual editing experience and provides a new set of features that allow you to customize pretty much every aspect of a single or multiple table cells. And, it tries to mimic the functionality of popular spreadsheet editors so your muscle memory should feel at home in the new environment!

So, let’s take it for a test drive and see what you can do.

Learn more about Moqups →

Adding, Resizing, and Customizing Borders

You’ll find the new Table in the Stencils Panel. Add it to the page by dragging and dropping and, as you resize and rescale, hold down Shift if you want to maintain its aspect ratio.

Before diving into detailed editing, you might want to use the dedicated section in the Format Panel to make some initial styling decisions about the table as a whole. Here you can choose to show or hide borders, adjust cell padding, select font family and size, set border attributes, or add a drop shadow:

If you want to get rid of our placeholder text – and begin with a tabula rasa – before adding your own data, just click the Edit Data button (or double-click on the table) to reveal the Table headers and toolbar. Then use ‘Select all’ button in the upper-left corner (or Cmd+A) and hit delete on your keyboard.

Insert, resize, and customize columns, rows, and cells

Once you’re in edit mode, the dots along the headers let you insert rows and columns in that particular position. To delete a row or column, select the appropriate header, and click the trash bin in the table’s toolbar.

To resize rows and columns, use the lines between their headers. If you want to set the rows and columns to equal sizes, just click the ‘Distribute Cell Sizes’ button.

Once you have selected a row or column’s header, you can use the toolbar to adjust the text’s horizontal and vertical alignment:

The toolbar also lets you select the font color and background color for individual and groups of cells. Color can help guide the reader’s eye to interesting information, and make it easier for them to navigate your data. This also comes in handy if you want to create in-table heatmaps – where higher numbers correspond to darker or more saturated cell backgrounds.

The bottom toolbar is also where you can merge and split cells:

Use the rich-text editor to format text and add links

With a cell selected, press Enter/Return or double-click to edit the text. If you simply want to replace the text, then just start typing!

While you’re in edit mode, you can use the Quick Format toolbar to format, color or highlight selected text, or to add links.

Lighting-fast keyboard shortcuts

Finally, a couple of tips for you power-users! While in edit mode, hit the Tab key to quickly navigate between table cells. Press Shift+Tab to go back to the previous cell. Or, continue pressing Tab on the last row to add new rows to your table.

Moving forward with Tables

We know that there’s still some missing pieces to the puzzle – functionality that you need, and would make your work easier. We’re working on putting those pieces in place, but we would love to hear from you – about your priorities and use cases. So, please send us your wishlist at support@moqups.com. After all, Santa’s coming pretty soon!

Create a free account →

Enable Color Eyedropper, Take Full-Page Screenshots, and More

We’re proud to introduce our Chrome Extension. It bundles together a bunch of oft-requested features that should make your workflow a little smoother and faster:

• Enable the Color Eyedropper to sample and match colors
• Capture page screenshots directly to your Moqups library
• Jump to your Dashboard and create projects with one click

Read on to see what you can do with our new extension, take a peek behind the scenes at our development process, and find out why these features are only available on the Chrome browser… for now!

Want to install the extension?

1. Visit the Chrome Web Store or, from within the Moqups app, just click on the eyedropper in the color-picker and follow the link.
2. After installing the extension, the blue Moqups button will appear to the right of the browser’s address bar.
3. To enable the eyedropper, you’ll need to refresh any tabs that have the Moqups app currently open.

Install Our Chrome Extension

The technical adventure behind our color-eyedropper

Color eyedroppers are everywhere. After all, most graphic-design apps include the ability to sample and apply colors. They’re essential for matching colors, especially when you are bringing in outside assets in the form of graphics, images, illustrations, or screenshots.

So, why didn’t we deliver this basic functionality sooner – and why are we relying on a Chrome extension to provide it now? Two words: security and technology.

Most software designed to render complex 2D graphics in the browser relies on either SVG/HTML or Canvas to display those graphics. But, both SVG/HTML and Canvas have their specific limitations. 

Like Google Slides and the web-version of Apple’s Keynote, Moqups chose SVG/HTML to display our projects. This has enabled us to support rich-text content, provide great out-of-the-box typography (especially for non-latin characters), and offer a more realistic preview experience. 

However, one of the disadvantages of SVG/HTML is that the pixel-level access required to sample colors is either blocked, or heavily restricted, by browser makers. This is because of security issues. Without these restrictions, malicious third party scripts, embedded within pages, could gain unauthorized access to your sensitive information. 

So, we had to find a different approach.

Creating a Chrome Extension offered us a secure and practical solution – enabling us to capture images of any website, and providing the pixel level access we dearly needed to sample colors.

Using our new eyedropper

The eyedropper lets you target any color on the page and apply it instantly to your design elements. Once you’ve installed the Moqups extension – and refreshed your Moqups tabs – the eyedropper will be automatically enabled. You’ll find it in the lower-right corner of the Format Panel’s color picker.

Using the eyedropper is simple:

1. Click the eyedropper icon to open an inspector window in the upper-right corner of the screen.
2. As you move the crosshair-cursor around the page, the window will display a close up view of the pixels beneath, as well as both their RGB and Hex values.
3. Click to select the color beneath the cursor.

How the eyedropper makes screenshots possible

The eyedropper works by taking temporary screenshots of the page in order to extract the color-values under the mouse cursor. Although these screenshots are just an intermediary step in the color-selection process, we quickly realized they also had a value of their own.

By repurposing them creatively, we could make it possible for you to take website screenshots – and upload them directly to your Moqups image library. Even better, we could provide you with the ability to take full-page screenshots by having the extension stitch together a bunch of smaller shots to create one giant image.

Screenshots are a central part of almost everyone’s workflow – whether you are doing competitive research, creating mood boards, looking for inspiration, or giving feedback to your team. 

With our new extension you no longer have to go through the tedious process of taking screenshots, hunting for them in your Downloads folder, renaming them, and then manually uploading them to Moqups. Now, you can quickly grab a visible area, a selection, or the entire web page, and instantly add it to your Team Images library.  

Taking screenshots is quick and easy:

1. Click the Moqups extension icon to the right of the browser’s address bar
2. Select one of the Capture Page Screenshot options
   • • Visible Area will capture only what’s currently visible in your browser window
     • Selected Area will let you click and drag to choose a specific part of the window
     • Entire Page will grab the entire webpage
3. Your screenshot will open in a new browser tab; here, you can name it, save it directly to your Team Images library in Moqups – or cancel if you want to try again!
4. Once you’ve clicked the ‘Save to Moqups’ button, and the image has been uploaded, just click the ‘Done! Go to Moqups’ button to jump right to your project.

Create new projects, and jump directly to the Dashboard

To help make your workflow even smoother, we added one more feature to the extension:

You can now create a new project, or open one from your Dashboard, just by clicking the Moqups button. This comes in handy when you’re jumping between browser tabs, or grabbing screenshots to build your mood boards, mockups, or storyboards.

What’s next?

We’re definitely not stopping here. We’re looking at supporting both Firefox and Safari. Since Firefox is emulating the Chrome Extension API, we’re optimistic that we’ll be able to achieve almost the same functionality, right out of the box. Safari, however, may be a tougher nut to crack since it offers only a limited set of extension-API capabilities.

But, in the meantime, help us make our Chrome extension even better by sending any feedback or bug reports to support@moqups.com.

Create a free account →

New Features

• A Welcome Screen now greets new users and offers the option of starting from a selection of templates or from a blank page.
• Charts:
  • Our New Funnel chart is great for visualizing website conversions, sales pipelines, customer retention, and PPC promotional campaigns.
  • When you select a chart on the page, new buttons let you quickly Edit Data & Color or Change Chart Type.
  • You can now show value labels on the chart itself; you’ll find this option in Format > Chart Style > Plot.
  • You can also choose to render values as percentages, as part of the Plot options
  • We’ve improved the representation of negative values in stacked charts.
  • And we added digit-group separators to make large value numbers easier to read.

Improvements

• In both the Image and Templates libraries, searches now include the names of folders.
• When you export a single page to PNG, you now have the option of opening the exported file in a new tab.
• We’ve improved the behavior of nested components after overrides and during reset.
• The names of image-objects on the page are now reflected in both the Outline Panel and Format tab.
• Double-clicking on the Rotation handle now quickly resets the Rotation Angle to ‘0’.

Bug Fixes

• Object interactions are now preserved when you copy/paste, cut/paste, or duplicate an object.
• Fixed a bug that caused the color picker from the ‘Replace Colors’ section to get stuck and linger on the page.
• The automatic saving of Interactions is now more reliable.
• In the Sharing window, we fixed a bug that mistakenly displayed the ‘Remove Collaborator’ option for Team Members.
• Fixed a bug that caused the canvas to malfunction if, before login or sign-up, you selected ‘Show page thumbnails on hover’ option in Workspace > Advanced Settings.
• Copying and pasting Components between projects now works more reliably.
• When creating an Instance, and then nesting it within the original component, the instance is now correctly identified in the Outline Panel.
• Fixed a bug that made the Preview button in the Moqups Main Menu inoperative.
• The ‘New project’ pop-up modal now has the correct Team pre-selected when you create a project from the Dashboard.
• In the Pages Panel top toolbar, we disabled the ‘Create a new folder’ button during searches.
• Fixed a bug that prevented Interactions from functioning on unsaved projects during Preview.

The post What’s New: May 13, 2019 appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Turn any single object or group into a Component, and all copies of that element will automatically inherit any changes made to the original. This way, your team can apply quick, consistent updates within projects, and avoid the tedium of reformatting over and over – one object at a time.

By making it easier to tweak elements throughout a project, Components encourage teams to experiment freely, iterate and test more often, and accelerate the overall design and development process.

Components are particularly useful when creating and maintaining frequently repeated UI elements like headers, footers, logos, icons, modals, and device or platform-specific templates.

And the best thing about using components as a foundation tool, is that they have a cumulative effect; over time, the more components you add, and the more you nest instances, the faster and more efficient your future execution becomes.

That’s why components – sometimes named ‘symbols’ – have become such an essential tool for building design systems. But you don’t have to be working within a comprehensive design system to take advantage of components’ power. They can smooth and speed any type of workflow – on any kind of project!

You may have already noticed the new Components button in our top-toolbar. You’ll find all of the Component and Instance controls there, and in the Component section of the right-click Context Menu. Let’s take a look at how they work:

Creating Components and Instances

Once you turn an object or group into a Component, it acts as a master to any and all copies – or Instances – that are made from that component.

That means that any formatting you apply to the Component is immediately reflected by every Instance in the project.

However, for maximum flexibility, instances remain independent of the component in their Coordinates (including Flip and Rotate), and Visibility. This means you can relocate or hide components without affecting the position or visibility of their instances.

To create a Component:

1. Select any object or group on the page.
2. From the Component button in the Top Toolbar, or the Component section of the right-click Context Menu, choose Create Component.
3. Once created and selected, Components are identifiable by their orange ‘Component’ label, badge and frame; in the Outline panel, they are identified by an orange highlight.

To create an Instance:

1. Make a copy of the Component using Ctrl/Cmd + D, the Duplicate option in the Context menu, or simply hold down Alt/Option and drag.
2. You can paste the Instance to any page within the project
3. Now, change the size, text, color, or other formatting attributes of the Component
4. Once the changes are complete, click outside the Component’s object-frame – and watch the changes propagate to all Instances within the project.

Editing and Adding New Objects

Components and Instances – even those made from single objects – behave like groups. To edit any component or instance:

• Select it so you see the orange Object-Frame.
• Then, double-click so the thicker Component Edit Border appears in orange.
• Now, you can…
  • Click through to edit
  • Add a new element from the left-sidebar
  • Copy and paste an object in from the page itself

Applying Overrides to an Instance

Sometimes, you may want to customize part of an individual instance, yet still leave it connected and responsive to its component for other changes and updates. For example, you might want to change at CTA’s color on a specific page, but still want that button to sync with its master for any future changes in size and text.

That’s why any changes made locally, to any individual instance overrides the component’s ability to change that specific formatting attribute (text, color, blur, rounded corners) in the future.

And any overrides applied locally will have no effect on other instances, or the original Component itself. This allows your team to be consistent in design, but still responsive to the particular context of each instance.

Detaching and Resetting an Instance

If you’ve made local modifications to an individual instance, but then want to remove those overrides and re-apply the full style and properties of the component, select Reset Instance.

And, if you want to turn an instance back into a normal object or group, just select Detach Instance.

Locating and Restoring Components

You can leave individual Components in the context of a design, or create a separate project page where all your components can live – and then pin that page to the top of the Pages Panel.

And, if you’re working with an instance, and need to check or tweak the component itself, just click on the instance and select Go to Component from the menu. No matter where the instance is, you’ll jump immediately to its Component’s location within the project.

If, for some reason, you delete a Component, and leave orphaned instances behind, just select any instance and choose the Restore Component option – and the component will magically reappear! Note that this works even for instances with overrides – you’ll still get the original component back.

Components can help reduce errors, ensure consistency and, most importantly, save time by freeing your team from the tedious, repetitive work of updating and reformatting.

As always, we want to hear your feedback, so we can continue to improve your experience. So, please send us your feedback and suggestions at support@moqups.com.

The post Speed Up Your Process With Components appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

New Features:

• You can now both color and highlight any selection of text – individual characters, words, or whole paragraphs – directly from the Quick-Format Text toolbar, making it easier for teams to write and edit content directly on the page.
• The Stencil Library’s new ‘Callouts & Annotations’ category includes the versatile Callout, as well as newly added Bracket, Speech Bubble, and Thought Bubble stencils. All the annotation stencils are now sticky by default, and can be attached to any object. Drag the tail on to the object and release when you see the orange frame. If you don’t want annotations to stick, just toggle from Sticky to Normal in the Format Panel.
• Users with project links can now request access if they have not already been granted permission.

Improvements:

• Charts now display all the ‘Chart Type’ buttons directly in the popover toolbar so you can quickly experiment, and then pick the visualization that best suits your data – no matter which chart you originally chose.
• You can now more easily select objects and edit their text within nested Components.

Bug Fixes:

• Fixed a bug that prevented the Linear Gradient’s circular slider from rotating to 0 degrees.
• When moving Custom Guides, the tooltip now displays coordinates as whole numbers – not fractions.
• Object handles (for rounded corners, stars, polygons, etc.) now work with touch-based devices.

The post What’s New: June 10, 2019 appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Helping teams create mockups is at the core of our mission. After all, it’s where we started – and how we got our name! But since we launched in 2012, Moqups has evolved to become much more than a wireframing tool.

For teams to wireframe effectively, they first need to research, strategize, and map out user flows. And once the wireframes are done, they still require high fidelity mockups and interactive prototypes for both pitching and testing.

All of this, before the designers and developers take over, is what we like to call ‘foundational’ work. It isn’t always pretty – and it can often be bafflingly complicated – but good thinking and planning results in a smoother, less expensive process – and a better final product.

And during this foundational stage, visual communication and collaboration is vital. Good, fast, sustainable decisions come from hearing all voices, checking requirements at the right time, and building genuine consensus before moving forward.

And that means having a single, accessible platform where every member of the team can contribute, suggest, revise and verify. An app that works with your team, not against them.

Last week, we passed our 1,500,000 user mark, and Moqups is now the first stop for product managers, business analysts, UX professionals, executives, and all kinds of cross-functional teams working on complex projects.

But if you are a UX designer, don’t fear! We’re not about to leave wireframing behind. We just want our users to be able to use Moqups in their larger research, planning, design and development process.

For instance, although we’re listed as one of the ‘Leaders’ on G2’s Grid® for Wireframing, our reviewers talk about the benefits of a platform that lets them go beyond just wireframing:

One of the most important things while in the early stage is the flow chart. With Moqups, I can do flowcharts and wireframes and sitemaps all in one project, which is awesome for managing.

Celeste T.

This kind of feedback is great encouragement for us as we build up Moqups’ functionality. We know that there are lots of ways into a project – through competitor research, moodboards, sitemaps, user flows – and, yes, through wireframes! With Moqups, you really can begin anywhere.

Still, nothing quite beats wireframing for getting an idea out of your head and onto the page!

And, if you are new to wireframing itself, and want a clear, concise primer to get you going, check out Bridget Poetker’s article at G2, What Is a Wireframe? (+How to Create One in 5 Simple Steps). It’s a terrific starting point!

The post To Wireframes and Beyond! appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

As organizations navigate this digital transformation – and adopt agile processes – they need software that helps their teams create and collaborate seamlessly.

Last year saw a flood of new online collaboration tools, but their focus on specificity and specialization has created as much chaos as they promised to eliminate.

That’s where Moqups’ all-in-one approach has an advantage. By bringing whiteboard, diagram, and design features together within a single, online app, Moqups puts your company’s teams together on the same page – literally.

Using an all-in-one visual collaboration platform like Moqups can transform your team’s workflow, boost organizational efficiency, and help your company thrive in a fully digital – and visual – world. Here are three research-backed reasons why.

1. Bridging Information Silos With Online Team Collaboration

Despite the proliferation of new online collaboration software, businesses are still incredibly siloed. Worldwide, 39% of employees say their coworkers don’t collaborate enough. 

This kind of isolation can have a devastating effect on organizations. When departments or divisions work in silos, they develop tunnel vision – and lose sight of the larger corporate strategy and priorities. The end result is wasted time, duplicated work, and costly mistakes. Frustrations mount, collegiality breaks down, and momentum is lost.

That’s why 75% of employers rate teamwork and collaboration as “very important”. They understand that collaboration increases transparency and morale. And that, in turn, fuels more engagement, consensus, and productivity. Companies that promote collaboration are 5x more likely to be characterized as high performing. 

But teams are much more likely to remain in their silos when they work with disparate tools – and communicate with different professional idioms. Moqups solves that problem by giving teams a shared visual space to think, plan, and collaborate together. This way, all voices get heard, and all stakeholders – not just designers – can shape and share ideas.

Business analysts, product managers, and IT consultants can make visual risk and SWOT analyses, use case diagrams, and business model canvases. Executives can build organizational charts and product planning roadmaps. Project managers and UX designers can create flowchart diagrams, wireframes, mockups, and prototypes.

Moqups’ all-in-one solution lets team members visualize requirements, clarify specifications, and produce a wide variety of foundational artifacts and documentation for any kind of project. 

2. Reducing Information Search Costs Within Organizations

Employees waste an inordinate amount of time chasing data and documentation through an elaborate labyrinth of repositories: Email, Slack, Google Drive, Github, Trello, and any number of whiteboarding, design, and prototyping apps. The majority (61%) of employees regularly access four or more systems and nearly one-sixth of them regularly access 11 or more. 

On average, it takes workers eight searches to locate the right document, and 44% of the time, they can’t even find the information they were looking for! As a result, workers spend 36% of their day just trying to track down and consolidate information. 

And it’s no wonder why. Visual documentation is often spread across a multitude of highly specialized apps – each targeted at a specific niche or use case. But these kinds of specialized tools – which lack interoperability – increase the information search costs for organizations. And their complexity and steep learning curve limit stakeholder participation and discourage collaboration.

Moqups, on the other hand, offers a unified team collaboration tool that bundles together the best of these features within one app – and provides teams with a clear source of truth. Wireframes, prototypes, flowcharts, mind maps, and moodboards can all live together in a single repository, drastically reducing information search time and cost. 

Adhering to the 80/20 rule, Moqups provides all the features you need, and none that you don’t. And its UI is both lightweight and accessible – so your entire team can skip the learning curve, find the documents they need, and get right to work.

3. Giving Due Recognition for Online Team Collaboration

Feeling recognized and appreciated are fundamental human needs. Yet an astounding 82% of US workers don’t feel that their supervisors give them sufficient credit for their contributions. As a result, employee engagement and motivation dissipate.

But when teams create on a myriad of platforms, it becomes difficult for their work to gain visibility. It can be challenging for senior-level managers to track down and access projects – especially if they’re not involved in production. As a result, too much work happens behind the scenes, without an opportunity to assess individual contribution, and reward achievement.

Moqups enables managers to pull back the curtain and gain insights into how team members have contributed at every stage of development. With Moqups, employee work is online, centralized within a single online collaboration tool, and easy to access through a clear and simple interface. That means that managers can easily monitor the entire lifecycle of a project, from concept to creation, and discover the hidden work – and heroes – that deserve recognition.

A Call for an All-In-One Visual Collaboration Platform 

Online collaboration tools have traditionally been the exclusive domain of designers, due in large part to their complexity, and the steep learning curve involved. Moqups offers the first-of-its-kind platform that empowers all members of an organization to leverage the power of visual content. In doing so, it helps to solve the most crippling problems confronting today’s organizations – information silos, steep information search costs, and inadequate recognition. The result is a fully engaged and empowered workforce that is primed to thrive.

The post How Online Collaboration Tools Boost Team Performance appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Data visualization used to be the province of financial analysts, sales teams, and graphic designers, but it is now ubiquitous throughout competitive organizations. Departments at all levels are being asked to set their own goals, establish KPIs, track progress, and evaluate outcomes.

In a data-driven world, all kinds of teams need to create charts and graphs for their dashboards, presentations, and reports. And to turn data into compelling stories, they want to be able to experiment with different forms of representation – and customize the results to suit both their business and their audience.

Last year, we introduced Charts so that teams could create quick charts and graphs – right where they work – without switching apps or creative context. Since then, we’ve worked hard to improve every aspect of that experience, making it faster and easier for your team to start, experiment, customize and communicate their data in visual form.

New chart & graph templates to jump-start your work

You can always start your chart from scratch. But it is often helpful – and quicker – to browse a collection of pre-made templates. Relevant examples can provide inspiration, and suggest all sorts of ideas for customization. 

But more importantly, they can help your team understand the types of charts well suited to specific categories of data – and the best-practices for each of those graphs.

To help your team get going, we’ve added 46 charts and graphs to our template pages.  

Browse by chart type and use case, and then simply click Edit this chart to open your template in Moqups and start customizing it to fit your requirements.

Switch between chart types to find one that best suits your data

Chart stencils now have a popover toolbar that lets you experiment with a variety of chart types – to find the one that works best for your data, context and audience.

As well as the Chart Type buttons, we’ve also added a handy Edit button. This makes it easy to cut and paste data from CSV files, customize colors, and label your values and categories.

Visualize and analyze any kind of process with our new funnel chart 

Funnel charts are used to represent and analyze the progressive stages of any process or procedure. 

They can help identify bottlenecks and problems, and are great for visualizing website conversions, sales pipelines, purchasing funnels, customer retention, order fulfillment, employee and volunteer recruitment, and PPC promotional campaigns.

You’ll find our new Funnel Chart stencil in the Charts section of the Stencils library. 

If you want to learn more about common use cases – or start with a ready-made example – check out our Funnel Chart template page.

Show value labels right on the chart itself

Sometimes the chart speaks for itself, and values along the axis are sufficient. Other times, you may want your audience to focus on the specific values themselves. That’s why we’ve added the option to show values right on the chart – either as count or percentage values.

To show or hide value labels:

1. Click on any chart on the page 
2. Navigate to the Chart Style section of the Format Panel
3. Enable Show values 

Render chart values as percentages

You now have the option to render chart values as percentages. This is useful for any chart that shows the relationship of parts to a whole, especially Pie and Donut charts, Grouped Bar and Column charts, and Stacked Column, Bar and Area charts. You’ll find this option in the Chart Style section of the Format Panel, right next to Show Values.

For Pie and Donut charts, rendering values as percentages simply shows, for each slice, that section’s percentage of the whole:

For Grouped Bar or Column charts, this option displays the percentage for each subcategory that makes up the larger, grouped category:

For Stacked charts – whether Bar, Column, or Area – render as percentage has a much more dramatic effect, changing the visual representation of the chart to a ‘100% Stacked Chart’:

We’ve made all our charts easier to read

Finally, a couple of smaller notes! We’ve improved the presentation of all our charts, making them easier on your audience’s eye!

We added digit-group separators to large value numbers making it possible for actual humans to read! Instead of 10000, you’ll now see 10,000. And, we also improved the representation of negative values in our Stacked Bar and Stacked Column charts, making them simpler to parse at a glance.

We hope these new features and templates make it easy for your team to build BI dashboards, prepare reports, and create presentations. 

What’s next for Charts? Well, that’s partially in your hands. We need your feedback and suggestions to make charting and graphing even better in Moqups. So, please send us your thoughts at support@moqups.com.

On our side, we’re already at work improving our color themes, and creating additional templates – like SWOT, 5 Whys, Business Model Canvas, Empathy Maps, etc. – as part of a new ‘Strategy & Analysis’ section. So stay tuned!

The post New Chart Templates & Features Make Data Visualization a Breeze appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

No matter where you live on the planet, it’s pretty much impossible to escape Marie Kondo, the queen of decluttering. Her three books, including the breakthrough, The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing have sold over 11 million copies in 42 countries. In January, she launched a Netflix series, and in 2020, she’ll turn her attention to both career and the workplace with a third book: Joy at Work.

What has made Kondo such a global phenomenon, beyond the effectiveness of the KonMari method, is her philosophical elevation of ‘tidying up’ – from dreaded chore to spiritual exercise.

For Kondo, decluttering is an act of empathy – for both the things and the people that surround us. She encourages us to envision the flow of an ideal day – and then arrange the elements of our home to best realize that experience.

When KonMari meets UX

Anybody working in the world of UX will recognize this approach. It’s what we do every day, with every page, modal, menu, and interaction. Declutter, simplify, clarify, speed up flow, reduce friction – and yes – spark joy!

And, when we get it right, users feel a magical combination of safety, familiarity, reassurance and delight as they pursue new paths, chase new ideas, or just fulfill basic tasks.

Tidying orders and relaxes the mind.

Marie Kondo

But as we focus on this experience for our users, it’s easy to overlook its importance for our colleagues. A clean, clear, relaxing and comfortable flow should be as much a part of our shared, internal projects as it is for our public-facing UI.

Organizations rely increasingly on distributed teams – and asynchronous collaboration is key to that kind of workforce and workflow. With so many team members and independent contractors sharing projects, tidying up helps eliminate confusion, reduce stress, and maintain both momentum and morale.

And it is not a stretch to say that this experience should be something joyous. We all know how dispiriting it is to be invited into a project, only to be overwhelmed by a sense of clutter, confusion and disorientation. But, how calming and relieving it is to open a shared document and immediately have an intuitive sense of that project’s purpose, hierarchy, and focus.

So, in the KonMari spirit, here are some tips to help your team keep projects tidy, accessible, and collaborator-friendly!

Organize Pages in Folders to Create Clear Hierarchies

Sometimes, teams collaborate on projects asynchronously. Other times, an entire team – in the office and remote – will share a screen and create together in real time. In both cases, a clear hierarchy of well-named pages and folders can make that work clearer, faster, and more enjoyable.

As your project expands, find your inner Kondo, and start tidying by category! Take the inevitable mix of brainstorming pages, user flows, stakeholder feedback, experiments, and iterations, and group them into easily identifiable and accessible folders – making sure that both folders and pages are clearly named.

To create a new folder, just click on the Create a New Folder icon – and then drag it where you need it. And to save time, try creating a folder directly from a selection of pages by right clicking and choosing New Folder With Selection.

Check out our previous blog post for more about page and folder management, including nesting and hiding pages and folders.

Fit Page to Content to Keep Things Clean

During the initial creative process, it’s helpful to work on a page big enough to accommodate all your iterations and experiments. But that can result in all kinds of flotsam and jetsam littering the margins.

So, before inviting collaborators to share your work, take a moment to remove those vestigial distractions. Then, resize the page instantly by right-clicking and selecting Fit page to content.

Resolve Comments to Reduce Clutter

When cross-functional teams collaborate – suggesting new ideas, clarifying requirements, and building consensus – project pages can become peppered with comments. When deadlines approach, and even more people join the conversation, it’s important to remove distractions and distinguish between current and obsolete conversations. 

To keep everybody’s eye on what matters, you can quickly declutter by resolving comments. Team members can then filter comments to show Unresolved, Resolved, or Unread conversations.

Just open the comment and hit the Resolve button or, if you wish, leave a closing message to explain your action and click Resolve & Reply.

Resolving has advantages over deleting the thread because any member of the team can always restore the conversation when and if the topic needs further discussion.

Copy Pages to Combine & Consolidate Projects

Sometimes, initially distinct initiatives can begin to overlap, and teams just end up jumping back and forth between two related projects.

For example, you may have a design and marketing team working on the same initiative, but in two different Moqups projects. Or you might be developing two different features that end up having mutual dependencies. In cases like these, the best way to keep things tidy is to combine all or parts of those discrete projects.

Just right-click on any selection of pages and select Copy Pages from the dropdown. Now, you can paste those pages into the Pages Panel of any other project.

You can also use the same process to break overstuffed and unwieldy projects into smaller, more focused initiatives!

Team vs Project Libraries in Images and Templates

Both the Images and Templates libraries are subdivided into Team and Project templates. Taking advantage of these options makes it easier for your team to quickly find relevant assets – either by search or by scrolling.

Keep project-specific assets in the ‘Project’ library, and use the ‘Team’ repository for company-wide, reusable assets like branding elements and logos. Read more in the Images section of our Help Center.

Archive Projects to Keep Your Dashboard Clean

Finally, don’t forget that you can always declutter the Projects window of your Dashboard by archiving inactive projects. This quick tip will help eliminate confusion and save your team time when they search for projects!

And, if you ever need to re-examine an archived project, you can always restore it. Learn more about how to archive, restore, delete and recover projects in our Help Center.

Tidying up and decluttering helps streamline your colleagues’ workflow, and eliminate the wasted time that’s part of a confusing collaborative experience. You’ll know that you’ve got it right when team conversations focus on the choices and decisions to be made, not on where to find things!

The post Tidying Up with Moqups: 6 Tips to Declutter Your Projects appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

New Features:

• Our new Table offers a fully-visual editing experience, and replaces the old, syntax-based Grid stencil. Now, you can:
  • Quickly select, resize, and reformat rows and columns
  • Apply background color to rows, columns, and cells
  • Use rich text editing, and add links and highlights
  • Justify and align cell content, and apply both vertical and horizontal padding
  • Adjust cell-border width, format and color 
  • Merge, split, and distribute cells
• The Sticky Note stencil is the latest addition to our ‘Callouts & Annotations’ category. Like the Callout, Bracket, Speech Bubble, and Thought Bubble, the Sticky Note has both Normal and Sticky modes – allowing it to either be attached to an object, or float freely. And, its ear can quickly be resized with the custom handle.
• We’ve added an iPhone X stencil to the Stencil Library.

Improvements:

• Components:
  • When you apply the ‘Detach Component’ option to a nested component, only the top-level component is detached; the nested sub-components are unaffected, and retain their component status.
  • Top-level components can now be locked.
• View and Preview modes no longer include sidebars. Instead, the Page Tree and the Comment list can be opened by using buttons along the top toolbar.
• Diagram extenders now connect to an adjacent object only if that object is another unlocked diagramming stencil. Otherwise, the extender creates a new diagramming object.
• We’ve improved the Welcome Screen to include a Recent Projects sidebar, and a ‘Browse all projects’ link to the Dashboard. 
• The Image Placeholder stencil now has a Rounded Corners control.
• When an unsaved project is saved – either by autosave or by command – the user is now prompted to enter a project name, and to select a project owner.
• Google Fonts have been updated to include new typefaces:
  Bahianita, Barriecito, Beth Ellen, Be Vietnam, Big Shoulders Display, Big Shoulders Text, Blinker, Chilanka, Crimson Pro, Darker Grotesque, DM Sans, DM Serif Display, DM Serif Text, Farro, Fira Code, Gayathri, Grenze, Hepta Slab, Lacquer, Lexend Deca, Lexend Exa, Lexend Giga, Lexend Mega, Lexend Peta, Lexend Tera, Lexend Zetta, Libre Caslon Display, Libre Caslon Text, Literata, Liu Jian Mao Cao, Livvic, Long Cang, Manjari, Mansalva, Ma Shan Zheng, Noto Sans HK, Red Hat Display, Red Hat Text, Saira Stencil One, Turret Road, Vibes, Zhi Mang Xing

Bug Fixes:

• The Radial Gradient – with Stretch mode enabled – now centers properly in the Wedge shape.
• In Default Styles mode, the color picker for ‘Fills & Strokes’ now responds properly.
• Fixed an issue that affected visibility actions in the HTML export.
• Objects that have their aspect ratio locked, and have also been rotated, now resize properly.

The post What’s New: October 2, 2019 appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Data is the raw material of the global economy – guiding the reinvention of established companies, and driving the strategy of new ones. And that information’s power is compounded when it is easily shared, analyzed, visualized, understood and acted upon.

One of our highest priorities is data visualization and representation in all its forms, and last month, we introduced new chart and graph features and templates. Now it’s Tables’ turn.

Although grids and tables aren’t technically data visualizations, they’re often combined with charts and graphs – and often created by the same teams. Whereas charts tend to show the overview, shape, and summary of data, tables present detailed information in as close to its raw form as possible. 

Great tables have several advantages. They can provide access to precise numbers and specific information in large, dense data sets. And, they allow users to scan, compare, and analyze data in multiple directions – in the order of their choice – and take action based on those insights.

The Rationale Behind Our New Table

Grid and tables are an essential part of our users’ workflow, especially if their focus is on enterprise products. In complex apps for logistics, project management, sales, customer relations, or human resources, the majority of screens may contain – or simply be – a grid or table.

The problem was, our old Grid stencil worked fine for small tables with only three or four rows and columns. But, if you wanted to mock up complex data grids, a syntax-based stencil just wasn’t up to the task.

Improving the Grid has consistently been one of the most frequently recurring topics on our support channels – and your message was clear: We needed a better grid solution. So, our rationale for creating a new Table stencil was, quite simply, our users’ voice. The only question was how to solve the problem.

The Grid’s syntax based approach wasn’t easily scalable – we would have had to invent new syntax for every new formatting option. But that would only complicate your workflow, and be the very antithesis of our mission: Moqups should offer the most productive ways to visualize ideas of any kind – and visualize at the speed of thought! Visual-ize. 

The answer was clear. We had to go visual.

Our first approach was to try using open-source libraries in order to save a few dev cycles and release this to you sooner. But, once we evaluated those options, we realized that we had a Goldilocks problem – they were either too specialized or too generic for our needs. So we would have to handcraft a solution. It took us a few sprints – but it’s finally here.

It was a fun, but intensive exercise. Although we often felt as though we were reinventing Excel, the process allowed us to prepare the underlying architecture for rapid iteration and the expansion of features. 

And, since this new stencil is a central piece of our future development, it’s been built with all kinds of future interoperability in mind – like the ability to share data to other stencils such as charts, import data dynamically from external sources, and much more. But, right now, it’s all about simplifying your workflow and making you more productive. 

The new Table stencil offers a completely visual editing experience and provides a new set of features that allow you to customize pretty much every aspect of a single or multiple table cells. And, it tries to mimic the functionality of popular spreadsheet editors so your muscle memory should feel at home in the new environment!

So, let’s take it for a test drive and see what you can do.

Adding, Resizing, and Customizing Borders

You’ll find the new Table in the Stencils Panel. Add it to the page by dragging and dropping and, as you resize and rescale, hold down Shift if you want to maintain its aspect ratio.

Before diving into detailed editing, you might want to use the dedicated section in the Format Panel to make some initial styling decisions about the table as a whole. Here you can choose to show or hide borders, adjust cell padding, select font family and size, set border attributes, or add a drop shadow:

If you want to get rid of our placeholder text – and begin with a tabula rasa – before adding your own data, just click the Edit Data button (or double-click on the table) to reveal the Table headers and toolbar. Then use Select all button in the upper-left corner (or Cmd+A) and hit delete on your keyboard.

Insert, resize, and customize columns, rows, and cells

Once you’re in edit mode, the dots along the headers let you insert rows and columns in that particular position. To delete a row or column, select the appropriate header, and click the trash bin in the table’s toolbar.

To resize rows and columns, use the lines between their headers. If you want to set the rows and columns to equal sizes, just click the Distribute Cell Sizes button.

Once you have selected a row or column’s header, you can use the toolbar to adjust the text’s horizontal and vertical alignment:

The toolbar also lets you select the font color and background color for individual and groups of cells. Color can help guide the reader’s eye to interesting information, and make it easier for them to navigate your data. This also comes in handy if you want to create in-table heatmaps – where higher numbers correspond to darker or more saturated cell backgrounds.

The bottom toolbar is also where you can merge and split cells:

Use the rich-text editor to format text and add links

With a cell selected, press Enter/Return or double-click to edit the text. If you simply want to replace the text, then just start typing!

While you’re in edit mode, you can use the Quick Format toolbar to format, color or highlight selected text, or to add links.

Lighting-fast keyboard shortcuts

Finally, a couple of tips for you power-users! While in edit mode, hit the Tab key to quickly navigate between table cells. Press Shift+Tab to go back to the previous cell. Or, continue pressing Tab on the last row to add new rows to your table.

Moving forward with Tables

We know that there’s still some missing pieces to the puzzle – functionality that you need, and would make your work easier. We’re working on putting those pieces in place, but we would love to hear from you – about your priorities and use cases.

So, please send us your wishlist at support@moqups.com. After all, Santa’s coming pretty soon!

The post Introducing Our New Visual & Customizable Table Stencil appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Updated: We’ve released this extension for Firefox as well. You can add it to Firefox here.

We’re proud to introduce our Chrome Extension. It bundles together a bunch of oft-requested features that should make your workflow a little smoother and faster:

• Enable the Color Eyedropper to sample and match colors
• Capture page screenshots directly to your Moqups library
• Jump to your Dashboard and create projects with one click

Read on to see what you can do with our new extension, take a peek behind the scenes at our development process, and find out why these features are only available on the Chrome browser… for now!

Want to install the extension?

1. Visit the Chrome Web Store or, from within the Moqups app, just click on the eyedropper in the color-picker and follow the link.
2. After installing the extension, the blue Moqups button will appear to the right of the browser’s address bar.
3. To enable the eyedropper, you’ll need to refresh any tabs that have the Moqups app currently open.

The technical adventure behind our color-eyedropper

Color eyedroppers are everywhere. After all, most graphic-design apps include the ability to sample and apply colors. They’re essential for matching colors, especially when you are bringing in outside assets in the form of graphics, images, illustrations, or screenshots.

So, why didn’t we deliver this basic functionality sooner – and why are we relying on a Chrome extension to provide it now? Two words: security and technology.

Most software designed to render complex 2D graphics in the browser relies on either SVG/HTML or Canvas to display those graphics. But, both SVG/HTML and Canvas have their specific limitations. 

Like Google Slides and the web-version of Apple’s Keynote, Moqups chose SVG/HTML to display our projects. This has enabled us to support rich-text content, provide great out-of-the-box typography (especially for non-latin characters), and offer a more realistic preview experience. 

However, one of the disadvantages of SVG/HTML is that the pixel-level access required to sample colors is either blocked, or heavily restricted, by browser makers. This is because of security issues. Without these restrictions, malicious third party scripts, embedded within pages, could gain unauthorized access to your sensitive information. 

So, we had to find a different approach.

Creating a Chrome Extension offered us a secure and practical solution – enabling us to capture images of any website, and providing the pixel level access we dearly needed to sample colors.

Using our new eyedropper

The eyedropper lets you target any color on the page and apply it instantly to your design elements. Once you’ve installed the Moqups extension – and refreshed your Moqups tabs – the eyedropper will be automatically enabled. You’ll find it in the lower-right corner of the Format Panel’s color picker.

Using the eyedropper is simple:

1. Click the eyedropper icon to open an inspector window in the upper-right corner of the screen.
2. As you move the crosshair-cursor around the page, the window will display a close up view of the pixels beneath, as well as both their RGB and Hex values.
3. Click to select the color beneath the cursor.

How the eyedropper makes screenshots possible

The eyedropper works by taking temporary screenshots of the page in order to extract the color-values under the mouse cursor. Although these screenshots are just an intermediary step in the color-selection process, we quickly realized they also had a value of their own.

By repurposing them creatively, we could make it possible for you to take website screenshots – and upload them directly to your Moqups image library. Even better, we could provide you with the ability to take full-page screenshots by having the extension stitch together a bunch of smaller shots to create one giant image.

Screenshots are a central part of almost everyone’s workflow – whether you are doing competitive research, creating mood boards, looking for inspiration, or giving feedback to your team. 

With our new extension you no longer have to go through the tedious process of taking screenshots, hunting for them in your Downloads folder, renaming them, and then manually uploading them to Moqups. Now, you can quickly grab a visible area, a selection, or the entire web page, and instantly add it to your Team Images library.  

Taking screenshots is quick and easy:

1. Click the Moqups extension icon to the right of the browser’s address bar
2. Select one of the Capture Page Screenshot options
   • Visible Area will capture only what’s currently visible in your browser window
   • Selected Area will let you click and drag to choose a specific part of the window
   • Entire Page will grab the entire webpage
3. Your screenshot will open in a new browser tab; here, you can name it, save it directly to your Team Images library in Moqups – or cancel if you want to try again!
4. Once you’ve clicked the Save to Moqups button, and the image has been uploaded, just click the Done! Go to Moqups button to jump right to your project.

Create new projects, and jump directly to the Dashboard

To help make your workflow even smoother, we added one more feature to the extension:

You can now create a new project, or open one from your Dashboard, just by clicking the Moqups button. This comes in handy when you’re jumping between browser tabs, or grabbing screenshots to build your mood boards, mockups, or storyboards.

What’s next?

We’re definitely not stopping with just Chrome and Firefox. We’re also looking at supporting Safari – although that may be a tougher nut to crack since it offers only a limited set of extension-API capabilities.

But, in the meantime, please help us make our Chrome and Firefox extensions even better by sending any feedback or bug reports to support@moqups.com.

The post Our New Google Chrome Extension appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Sometimes a simple landing page launched at the right time can have significant outcomes – it can help you acquire those long-term valuable customers that are going to enjoy a product for years to come.

Below you’ll find a curated list of free landing page templates, courtesy of Moqups. They are designed to help you increase people’s awareness about your products or services while offering the tools to convert them into loyal customers. Be sure to check them out before you kickstart your next promotional campaign.

1. Event Landing Page Template

While for some hosting an event is a pleasant activity, for others it can be quite a challenge. Things can go astray in a blink of an eye, so it comes as no surprise that it takes a certain type of personality to manage event organization successfully.

Although there are a thousand things that could go wrong, there is one thing that, if done right, can make a world of difference. Event promotion is the vital component in this process, and, when done correctly, it can set your event up for success.

Nowadays, the best way to promote any event is to go online. So, you can use our event landing page wireframe template and build pages that focus on portraying upcoming events and targeting key audiences, while resonating with your company’s vision and mission.

You can adjust this wireframe template to create a variety of event landing pages that fit your general tone of voice. You’ll also be able to highlight top speakers, include testimonials from past attendees or emphasize vital benefits.

2. Webinar Landing Page Template

If hosting a webinar is high on your priority list, one of the most efficient methods of spreading the news is through online campaigns. But, how does a successful campaign look like in this context?

The answer is simple: it helps you reach as many potential participants as possible. Designing a landing page that serves this purpose can be the element that will define the success of your next online campaign.

Our webinar landing page wireframe template is the ideal tool to use when promoting upcoming webinars. Use the benefits section to attract participants by highlighting key takeaways. Share your webinar schedule so that everyone knows what to expect and when to expect it. Lastly, you can also emphasize key speakers in the dedicated section located at the bottom of this free landing page template.

3. Ebook Landing Page Template

An ebook launch is a significant step in a writer’s career, which is why it’s essential to ensure that even the smallest details are set in place properly. Promotional aspects may sometimes be overlooked, even though they can have a major impact on how the ebook is perceived from the very beginning.

The good news is that now it’s easier than ever to advertise upcoming ebooks. We provide the ebook landing page wireframe template, a tool designed to help you build pages where you can share valuable details on your product, which you can then promote to make sure it reaches as many people as possible. Our free landing page template helps you focus on specific sections such as:

• Ebook structure
• Benefits
• Author overview
• Testimonials
• Strategically placed call-to-action buttons

4. Workshop Landing Page Template

As with other types of events, workshops require a complex set of preparations as well. From knowing the main topic of discussion inside out to working out aspects such as staffing or advertising, hosting a workshop is no easy task. 

To make life easier, we’ve created a workshop landing page wireframe template that will help you to promote your event successfully. You can now create an engaging landing page that will put your workshop in the spotlight by making use of a set of strategically placed sections such as: 

• Workshop description 
• Complete schedule
• Testimonials
• Administrative details on fees and registration
• Speaker information
• Contact details

5. Contest Landing Page Template

Contests are excellent tools that help companies reach new people, expand customer databases, and increase the popularity of a product. One could state that their main goal is to get people talking about the company standing behind them. 

But contests also represent a playful way for businesses to interact with new or existing customers. When executed with an out-of-the-box mindset, they can often go viral. Two elements can determine the virality rate of any given contest: the concept and the promotional strategy around it. 

While coming up with the concept involves a lot of creativity, creating a promotional strategy around it, requires a healthy mix of creativity, resources, and knowledge. Our contest landing page wireframe template is a game-changer, and it is now available to support your promotional efforts. Using this wireframe template will help you build landing pages that address basic questions about your contest, such as:

• What is this contest about?
• What are the available prizes?
• How can people enter the contest?
• Who can enter? What are the eligibility requirements?
• What are the terms and conditions of attending this contest?

6. Online Course Landing Page Template

There is one vital element that can boost attendance rates if you’re planning to host an online course, and that is online promotion. Creating a campaign around your upcoming session will not only help you reach as many people as possible, but it will also reinforce your online presence, as well as help you gain more leads. 

We bring you the online course landing page template – a wireframing tool you can use to create landing pages that will specifically target and advertise online courses. It is one of our responsive landing page templates, and the best bit is that you can adjust it to match your overall advertising strategy or the topic of your online course. 

You can use the sections we’ve provided to address fundamental questions such as:

• What is the course about?
• Who is this course for? 
• What are the main modules of the course?

You will also be able to offer more details on the instructor’s background and add in testimonials from past attendees. Don’t forget to reinforce your main call-to-action: place it strategically across multiple locations on the page, so that visitors can act upon it in a fast and easy manner.

7. Lead Capture Landing Page Template

Are you working tirelessly towards acquiring new leads? If the answer is yes and you need a new strategy, here is our two cents: build a lead capture landing page. This page will not only reinforce your brand’s image in front of existing customers, but it will also provide you with the opportunity of reaching new ones. What’s more, it will automate your lead acquisition strategy, and you’ll find it easy to integrate into your company’s marketing efforts. 

The lead capture landing page wireframe template is a tool you can use to build a page designed specifically to attract new leads. On this page, you’ll be able to share valuable information on your products or services by filling in sections that are crucial for customers’ understanding. As a result, you’ll have the opportunity to formulate answers for the following set of questions: 

• What is your company’s main statement?
• What are the best features of your products/services? 
• Which are the top benefits of your products/services?
• Why should people use your products?

8. Free Trial Landing Page Template

Never underestimate the importance of a free trial. The more complex your product is, the less likely people are going to be to buy it right away. 

Before any purchasing decision is made, your potential customers will browse around, look up competitors, and compare your product to others. They will ask themselves questions such as: which product has the best features and is the most beneficial to my work? Which product is the most cost-effective? And, if I pay a higher price, how will that cost be justified?

Offering them the possibility of a free trial will not only answer these questions, but it will also help them understand your product better, and you’ll also be able to alleviate any doubts. 

Bring your team together and start brainstorming ideas for setting up your next free trial. One of our free landing page templates, the free trial landing page wireframe template, is an excellent starting point in this process. This wireframe template lets you integrate key sections into your landing page such as: 

• Product features
• Promotional video
• Key benefits
• Pricing plans
• Call-to-action buttons

9. SaaS Landing Page Template

One of the best ways to introduce a new SaaS product on the market is to build a unique landing page that will focus solely on presenting features and benefits while helping potential customers understand what exactly makes your product stand out. 

Moqups offers you a SaaS landing page wireframe template you can use to create pages designed to advertise your products or services – this is yet another one of our free landing page templates and includes the following sections: 

• Compelling tagline accompanied by a call-to-action button
• Multiple benefits sections
• Presentation video
• Pricing plans
• List of world-renowned company clients

When editing this template, you can easily delete, add, or substitute existing sections with those that fit your product best. This way you can ensure that the final version of this page will stand out and will boost customer acquisition rates.

Are you interested in more free landing page templates? Head to our template library – this is where you’ll find a varied collection of wireframe templates you can easily use to build those landing pages that add value to your business strategy. We are also continually updating our collection, so if there’s anything specific that you’d like to see, don’t hesitate to get in touch. We’d love to hear your thoughts! 

The post 9 Free Landing Page Templates Guaranteed to Convert appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.