This article is for users who are new to dashboard wireframing, and for teams who are already experienced in creating dashboards.

For those new to the process, we’ll start with a quick primer on dashboards and their most common use cases.

But, if you’re an experienced dashboard designer, and want to skip that explanation, you can just click down to our step-by-step guide on how to build dashboard wireframes in Moqups – and get right to work!

Here’s what we’ll cover in this post:

• What is a dashboard?
• What is the purpose of a dashboard?
• Who uses dashboards?
• What elements go into a dashboard?
• What is a dashboard wireframe?
• Why wireframe a dashboard?
• How do I make a dashboard wireframe in Moqups?

Sign up for free

What is a dashboard?

Digital dashboards are named after automobile dashboards and serve the same basic purpose. A car dashboard provides real-time data about the car’s system to help drivers make informed short term and long term decisions. Its display also provides alerts to warn of impending problems.

Online UI dashboards do the same thing for an app or website. They aggregate data into a central hub so teams of all kinds can monitor performance, get insights, and take action.

What is the purpose of a dashboard?

• To pull together relevant data on a single screen
• To provide at-a-glance info that users need to do their job
• To track performance, spot trends, and aid in forecasting
• To help teams and individuals make informed, timely decisions
• To provide alerts and warnings about immediate issues

Who uses dashboards?

Dashboards are used by any kind of company or team that needs to monitor performance, spot trends, and take action based on relevant data.

In their article, Dashboards: Making Charts and Graphs Easier to Understand, the Nielsen Norman Group breaks down the classification of dashboards into two basic types: Operational and Analytical.

Operational dashboards provide both monitoring and controls for users engaged in time sensitive tasks for complex administrative or industrial systems: Health Care, Manufacturing, Energy, Customer Service, Shipping, Finance, IT Operations, Logistics, and Supply Chain Management.

Analytical dashboards tend to be less time sensitive, and offer at-a-glance information and diagnostic data needed for business intelligence analysis, and for both strategic and tactical decision making: Sales, Marketing, E-Commerce, Human Resources, and Educational Administration, and Website Management.

What elements go into a dashboard?

Dashboards use different kinds of data visualization in the form of charts, graphs, or tables. The hierarchy of that content is typically arranged in an easy-to-read layout that may include navigation, sidebars, filtering. Operational and IoT (Internet of Things) dashboards may also include device controls.

What is a dashboard wireframe?

A wireframe is the blueprint for the final dashboard design and typically goes through three stages of design and development:

Low-Fidelity Wireframe: This quick draft uses grayscale and temporary placeholders. This deliberate lack of detail helps teams iterate freely before the design is locked in place. Lo-fi wireframes are used early in the design process, to get feedback from end users – and sign-off from stakeholders.

Mid-Fidelity Mockups: Once there’s consensus on the basic layout, teams add realistic data, fonts, and colors to move closer to the final design. Mid-fi mockups allow teams to experiment with different forms of data visualization and color palettes to maximize readability under typical user conditions.

High-Fidelity Prototypes: This is the last stage before hand-off to the developers. Hi-fi prototypes reflect the look of the final design with all the dashboard elements and branding locked in place. Teams often add interactivity to mimic the feel of the end product. This allows them to test the design with stakeholders and end users before coding begins.

Why wireframe a dashboard?

The international data-consultancy firm, Decision Foundry, specializes in creating dashboards for their clients. In our case study,  How Decision Foundry uses Moqups to deliver better data experiences, CEO Ross Jenkins highlights some compelling reasons to wireframe dashboards early in the design process. Here’s a brief summary, along with some tips and best practices of our own.

As with any wireframe, most of the benefits of doing this with dashboards have to do with ease and speed of making changes and adjustments while still working with a low-fidelity mockup.

Get everyone on the same page

Building a wireframe at the beginning of the process helps ensure that the design and dev team are aligned with the client’s expectations and business goals. This helps establish a co-creation environment from the get-go.

Prevent scope creep

In initial meetings, wireframe examples help stakeholders come to consensus about the required scope and content of the dashboard before the development process begins. This way, projects stay on deadline and on budget.

Avoid disappointment

It’s absolutely essential to get early approval on a working draft before committing time and resources to a high-fidelity design. Going forward without that vital sign-off is a recipe for frustration on the part of both the design team and your stakeholders.

Make data count

Screen territory on a dashboard is limited, so stakeholders need to decide which data is most actionable. Having quick mockups helps clients make tough decisions about what data to include. It also gives them a chance to check with their tech team about the feasibility of gathering and displaying it.

Get timely feedback

Teams can share lo-fi wireframes with end users to get their ongoing input at key stages in the design process. Getting their feedback – right on the basic design – helps ensure their needs and priorities will be accurately reflected in the final product.

Maximize usability

Make sure that your screens are easy to understand at a glance. To create the best user experience, iterate with different layouts and data content. Optimize the design for the context in which they’ll be monitored. An office, an emergency room, a factory floor, and a windmill farm each have different readability and device requirements.

Ensure consistency

Creating a bare-bones wireframe template can ensure consistency as multiple teams develop multiple dashboards. It also allows teams to customize performance metrics in a way that is personalized for different levels of access or management.

How do I make a dashboard wireframe in Moqups?

Moqups is the perfect tool for creating dashboard wireframes. We have all the elements you need, so you don’t have to add any extra packages or kits. Simply drag and drop charts or graphs from our library, paste in your real CSV data, and customize to fit your use case.

Step 1: Create a Moqups account

It’s free to sign up to Moqups. There’s no credit card required, and you can start building your dashboard in minutes!

Step 2: Make a basic layout

Start from a blank page, from one of our own admin dashboard templates, or build over a screenshot from an existing UI. Use our stencil and icon libraries to add the basic elements of your layout, including titles, charts, graphs, tables, sidebars and navigation.

Step 3: Iterate and experiment

While you are still in the lo-fi stage, rearrange freely to try different layouts and configurations. Collaborate with your stakeholders to pick the one that best reflects their priorities. If they use filters to drill down on the data, add those icons and document the requirements with annotations right on the design.

Step 4: Add data and visualization

Move from low to mid or hi-fi by adding your real data via CSV. Use our quick chart switcher to pick the right visualization for each metric you display. At this point, you can also style your charts, experiment with different palettes, and add your graph legends.

• Here’s a quick primer about the types of charts and graphs available in Moqups, and the main use cases for each kind.
• For best practices, the NN Group has a great video on Data Visualizations for Dashboards that discusses different visualization styles, and focuses on the pitfall of some charts and graphs.

Step 5: Make it real

This is the final step before hand-off to developers. Once the layout and decisions are done, you can add high-fidelity design elements like branding and color schemes. If you want to mimic the feel of the final product, add some basic interactions to your links or filters. Share the design with stakeholders via project link in order to get final approval.

Ready to build your dashboard?

Why not start with one of our pre-made dashboard wireframes? Whether you’re building an analytical or operational dashboard, we have professionally designed templates that you can easily customize and adapt to your specific domain and use case.

Start from a dashboard wireframe template

The post How to create a dashboard wireframe appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

If you’re new to the game, we’ll start with a quick primer on UI wireframing and its most common use cases.

But, if you’re an experienced UX/UI designer, you can always jump down to our step-by-step guide on how to build wireframes in Moqups – and get going right away!

What is a UI wireframe?

A UI wireframe acts as a blueprint for the final design of any digital interface. Early in the design process, teams use grayscale placeholders and dummy text to sketch out key elements of a mobile screen or webpage. This lets them experiment with different layouts in low fidelity before committing resources to a high fidelity design.

Since even the roughest wireframe can communicate new concepts – or quick tweaks to an existing UI – wireframes can help UX designers build consensus and get initial sign-off from both team members and stakeholders.

For a fuller explanation of wireframes, check out our blog post, What is a wireframe?

Who makes quick UI wireframes and why?

Wireframes aren’t just for designers! Sure, designers use wireframes to turn abstract ideas into tangible form and provide a skeletal structure for high-fidelity design. But there’s also a wide range of non-designers that often need to build quick wireframes. These include:

• Founders to visualize their ideas for stakeholders
• UX teams to experiment with competing design layouts 
• Agencies to present concepts to clients and get sign-off
• Consultants to make sure a UI aligns with business goals
• Analysts to document end-user needs and business requirements
• Dev teams to align front and back-end developers

Because lo-fi wireframes are so quick and easy to make, even team members with no design background can still share their solutions and ideas. This makes wireframing especially useful for cross-functional and cross-disciplinary teams.

Create a free account

How to create a UI wireframe

Map the user flow with a diagram

When you’re designing a UI, you need to understand the navigational requirements of the screen or webpage you’re working on. You’ll want to establish where the user’s coming from, and where they should go.

The best way to achieve this is to create a user flow diagram. The scale of the diagram will depend on whether you’re building out the full UI of an app or website, or just adding a new feature to your current UI.

By mapping out the paths a user can take within your interface, you can quickly establish requirements for each step of their journey. These requirements may include whatever content, data collection, verification, or transactional communications are necessary to help your customers achieve their goals.

Visualizing the userflow gives your team an opportunity to streamline the UI, identify dead ends, and create a seamless and successful user experience.

If you want to experiment with a user flow diagram, just click on our free template below.

Build a wireflow

The Nielsen Norman Group coined the term ‘wireflow’ to describe “a format that combines wireframe-style page layout designs with a simplified flowchart-like way of representing interactions.”

Because flowcharts lack page context, and wireframes lack navigational context, UI design teams often add wireflows as a step between user flows and wireframes. This is especially useful with mobile apps because multiple screens can be represented on a single canvas.

To build a wireflow, you don’t need to include all the details of your eventual wireframes. Remember, the purpose of a wireflow is to tell a quick, visual story of your user interactions. Rough but identifiable representations of your screens are enough to show your user navigation.

To help you kickstart your wireflow, we’ve created a template with a wide range of easily customizable mobile cards. Just click on the image to get started.

Lay out the elements for each screen

Once you’ve established your user flow, it’s time to start wireframing!

Wireframes can be created from scratch for new concepts, built over screenshots of your current UI for updates or iteration, or adapted from a  pre-made template to match your use case. And, with a wireframing app like Moqups, you can simply drag and drop UI elements from the library to the page.

At the beginning of the process, just add the key elements required by each screen and don’t sweat the details. You want to sketch up your ideas fast, experiment, and explore alternatives. That will be much easier if you haven’t sunk a lot of time into refining an initial design.

Don’t worry about actual content, colors, fonts, or branding. Just use simple grayscale placeholders and lorem ipsum text. That way, you can focus on the layout and requirements of each screen and not get bogged down with granular design decisions – that’s for later!

Remember, a wireframe is just a first draft. Its sole purpose is to iterate and communicate new ideas quickly – and that’s faster to do in low-fidelity. You can always add high fidelity elements later, once your basic layout has been approved. 

You can learn more about the transition from lo-fi to hi-fi in our article, Low Fidelity vs High Fidelity Wireframes.

Add some detail

Once your basic layout is set, you can move your design from lofi to mid-fi – and from wireframe to mockup – by adding details that preview your final design.

Start by replacing the lorem ipsum and ‘redacted’ text with actual headings and content. You can also swap out grayscale image placeholders with real graphics, or use stock photos if your final images aren’t ready yet.

As you start to add brand logos, colors, and fonts, your design will come alive, providing stakeholders with a stronger sense of its final appearance.

If you’re interested in the transition from low to mid to high fidelity, our article Wireframe vs Mockup vs Prototype: What’s the difference? goes into lots of depth.

Add interactions for navigation

Most people associate interactivity with high fidelity designs since interactions are usually added at the end of the design process. At this point, they mimic the behavior of the final product – before launching into development. An interactive prototype can be used for user testing or presentations to stakeholders and investors.

But interactions aren’t just useful for hi-fi prototypes. They’re also handy at the wireframing stage to bring clarity and demonstrate basic navigation to the team. Applying interactions can also make adding requirements and documentation a breeze. For example, you might want to link a block in your sitemap to the wireframe for that page. Or, from a user flow element to the modal it represents.

How do I make a quick UI wireframe in Moqups?

• Step 1: Sign up to Moqups. It’s free! There’s no credit card required, and you can start creating in minutes.
• Step 2: Start from a blank page, a template, or import a screenshot from an existing UI you’d like to build upon.
• Step 3: Moqups has all the asset libraries you need to start wireframing. No need to import kits before you get to work. Just drag and drop stencils, images, and icons to the page to adjust their size and shape. 
• Step 4: Use the toolbars and format panel to do basic styling and formatting.
• Step 5: Collaborate with your team, in real time to find consensus and get validation. 
• Step 6: Share your wireframe via link, or export as a PNG or PDF.

Start from a UI wireframe template

Best practices for quick UI wireframing

Annotate for clarity

Add sticky notes, callouts, and thought bubbles to your wireframe. Use annotations to document business rules, technical specifications, end-user requirements, and data collection criteria. The whole purpose of wireframing is to make sure no detail is overlooked, and that all voices are heard.

Seek early feedback

Wireframes make it easy to get input, validation, and approval early in the process. Build consensus and get vital buy-in before you commit time and resources to further design and development. Have team members and stakeholders leave comments right on the design, pinning their feedback to specific elements within the layout.

Don’t be afraid to experiment

With wireframes, it’s easy to create alternative concepts side by side so that your team, clients, and end-users can compare different layouts. Often, the best solution uses elements from a bunch of competing options, so brainstorm before you start and iterate freely.

Why Moqups is perfect for quick UI wireframes

Moqups makes it easy to get started

All the wireframing, diagramming, and annotation you’ll need come pre-loaded with our app. You won’t need to search and download stencil, diagram or icons kits to get going.

Everyone can contribute

Since our UI is simple and accessible, every member of the team can skip the learning curve and get right to work. Our app is the perfect balance of powerful functionality and a lightweight feel.

Moqups is an all-in-one tool

Wireframes – even quick ones – don’t live in isolation. They’re just one asset in a project that may include diagrams, flowcharts, strategic frameworks, and dashboards. With Moqups, you can brainstorm, plan, wireframe, diagram, and prototype all in one place.

Go from low-fi to hi-fi with one app

Even quick UI wireframes can develop into mockups – or even interactive prototypes. With Moqups, you are never blocked! You don’t have to switch apps when you’re ready to take your wireframes to the next level.

Create a free account

The post Quick UI Wireframes: A Step by Step Guide appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

But aligning a multi-disciplinary team can also be a challenge. To set realistic deadlines – and actually meet them – managers need to figure out where everybody is, prioritize what matters, and track progress. 

Page labelling is a powerful project management tool that can help with all of that. It can improve collaboration and visibility between departments – and make both planning and execution easier.

If you’re subscribed to our Team or Unlimited plans, you’ll find our new labelling feature in the Pages panel. It’s available in the ‘More actions’ menu or as a right-click option.

Both new and old projects automatically load with a default set of status labels and colors that you can apply right away.

If you want to customize your workflow to suit individual teams, departments, or customers, you can also edit or add your own labels. By standardizing what works best for your project, you can quickly create a repeatable – and predictable – process that delivers projects on time and on budget. And, by filtering pages by labels, your team can cut through the noise and focus on urgent, current work.

Here’s a quick primer on how to set, add, manage, and filter labels:

Set page labels

The quickest way to set a page label is by double-clicking on the page icon itself and choosing a label from the dropdown. To remove a label from a page, just use the ‘Clear label’ option from the same menu. 

You can also access the dropdown by selecting ‘Set page labels’ from either the ‘More actions’ button or the right-click Context menu.

Create labels

You can create your own custom labels by selecting any page and choosing the ‘Add new label’ option. If the selected page has no current label, the new label is automatically applied to that page; if the page already has a label, it retains its status when the new label is added to the dropdown.

Manage labels

The ‘Manage labels’ option allows you to change the name or color of an existing label, or remove it from the legend by deleting it altogether.

Filtering pages by labels

Finally, one of the most useful aspects of this feature is the ability to filter pages by their labels. This allows you to drill down on the specific work at hand. 

Just click the ‘Filter by labels’ button at the top right of the Pages panel, and select which labelled pages you wish to view. To remove the filtering, click on the ‘Clear filter’ option at the bottom of the same dropdown

We know that one of the toughest challenges in product management is to bring all the moving pieces of a project together. We hope page labels will make it easier to plan, execute, and track big projects by helping you create assets and manage workflow all in one place!

As always, please let us know how you like the feature, and send us your suggestions about how to improve it!

The post Introducing: Page Labels and Colors appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Easy patch tool for images

Need to quickly mock up alternative text or designs over current screenshots? Now you can just click and drag to mask any part of an image. This feature makes it much quicker to iterate, update, or maintain a website or app UI. Now you see it…now you don’t!

Copy individual properties of an object’s style.

In Moqups, you’ve always been able to copy/paste a style from one object to another. But users told us they wanted more granular access to a style’s individual aspects. In other words, they wanted to select and apply specific properties – like shadow, color, rounded corners, blur, padding, or opacity – one at a time.

This is especially important if you’re trying to maintain a consistent visual style across all types of objects in your design. So now, all properties in the Format Panel have their own ‘Copy properties’ button!

More comment updates!

In February, we rolled out a better commenting experience. We introduced sticky comments, improved filtering, revised the look and feel of the Comments panel. We also asked for your comments on our Comments!

The feedback was wonderful, and included some terrific suggestions that we’ve already incorporated with these new tweaks:

Pinned vs Free-floating comments

One of our customers pointed out that it was impossible to distinguish between comments that are stuck to objects and those that are unattached. Since his team typically deals with 40-50 comments per page, that’s a problem. So, we found a terrific solution.

Now, when you attach a comment to an object, the bubble will transform to a pin-shape and automatically change direction depending on where you place it. Comments in the page’s empty space will appear round and remain free-floating.

Mark all comments as read

In response to a different customer request, we’ve also added a ‘Mark all as read’ filter to the dropdown. To keep things clean, you’ll only see this option when you have unread comments on the page.

A small note: We’ve also made ‘Hide replies’ the default for our comments sidebar; that way, you can quickly scan all new comment threads before expanding them. Your suggestions really help make our features better, so please keep the feedback coming!

Font filtering by category

We’ve added categories to the font dropdown in the format panel. This is very useful if you are searching for a specific look for your design, or trying to match an existing font. You can still choose to ‘Show all fonts’ but you can quickly narrow your font search by choosing between 30 category filters (i.e. Popular, Sans Serif, Serif, etc.). We’ve also updated our list of Google fonts.

New stencils and other related improvements

We’ve added the following new stencils:

• Pointer annotation
• Tag
• Tooltip
• Toggle

We’ve also improved the Rating stencil so you can add a specific number of stars.

And, we’ve introduced contextual search tips at the bottom of the panel so that you can find what you need – even if it isn’t in the stencils library!

New Sign-in/Sign-up template bundle

We’ve had a lot of requests for this one! The template has pop-ups for signing into an account, and for creating a new one. It also includes a full sequence of modals for password reset and verification. And, you can choose between lo-fi and hi-fi examples depending on the fidelity of your project.

New network diagram symbols and templates

So you can meet all your diagramming needs within Moqups, our library of network icons includes AWS Architecture, Azure Services, Kubernetes, Google Cloud, and Cisco. Now, so you don’t have to start from scratch, we’ve also added five new network diagram templates:

• AWS Overview Diagram
• Azure App Service Network Architecture
• Azure Network Diagram
• Kubernetes Cluster Architecture
• Google Cloud Sample Architecture

16 Improvements

Color Picker

• Color swatches now include both Tailwind and IBM palettes.
• You can enter HTML color names into the input (i.e. red, green, blue, tomato) .
• Input is auto-selected when you open the color picker.
• We support new formats as input: 3 digit hex, 8 digit hex, rgb, rgba, hsl, hsla, lab, lch.
• We now utilize a native eyedropper in Chrome; you no longer need the Moqups extension.
• Picking a color with eyedropper sets opacity to 100%.
• We’ve moved gray colors in each palette to the top since they are the ones mostly utilized for wireframing.
• The picker scrollbars on Windows are now thinner.
• We’ve increased the size of the swatches list for large screens.

Workflow & Performance

• We’ve added our floating zoom controls to both Preview Mode and the Offline Viewer for quicker control no matter how you view your project.
• Rendering of page-thumbnails is now faster and more efficient.
• The ‘Hide content outside page’ now applies per page, not to all pages in the project.

Stencils, Icons & Components

• We’ve updated the Font Awesome Brands library, as well as our selection of AWS and Azure icons.
• We’ve improved the tags for stencils.
• Instances of Components now have their own identifier-icon in the Outline Panel so you can find them more easily.

Interactions

• Normally, when you apply show/hide/toggle interactions to groups, the visibility of the grouped elements automatically resets to their initial default value each time the interaction is triggered. However, sometimes, you may want to apply additional interactions that change the visibility of grouped elements and want to preserve that state of visibility when the interaction resets. The most obvious use case would be a dropdown in which the selected option remains selected. Accordingly, we now provide the option to override the automatic reset.

19 Bug Fixes

• Copy and pasting styles from one sticky note to another now works as expected.
• Fixed a problem with drop shadow rendering when exporting images with transparency.
• Zooming in and out now ignores any locked-object selection.
• The floating zoom bar now displays properly in the Offline Viewer
• You can now edit the Rating stars stencil by double clicking.
• Connector labels now adopt the page color as their background by default.
• Fixed a bug that caused connector marker ends not to display after changes.
• Fixed a bug that caused the wrong arrow endings to display when free drawing with the  Quick Draw toolkit.
• Your browser’s tab will now display a play symbol when you have your project in Preview mode.
• The keyboard shortcut list displays better.
• Made a change so that the badge color of search results in the Stencils and Icons panels is now distinct from the badge color of unread comments in the Comments panel.
• Fixed issues with the replace function for the image placeholder stencil, especially when the placeholder was inside a component.
• Fixed a bug when creating new projects or adding templates to folders in the Dashboard.
• Improved text formatting behavior.
• You can now group elements inside a Component just as you can with normal stencil groups.
• When an Instance is a group of stencils, and those grouped elements are removed, the instance now properly reverts to a single element and loses its ‘group’ status in the Outline Panel.
• You could always double-click on any object in the Outline panel to instantly scroll to that object on the page; this functionality now applies to Components as well, fixing an oversight.
• Made the text-selection color consistent for all browsers.
• Fixed a bug that prevented the size of multiline text objects from updating after bold styling was applied to the tex

The post What’s New: April 23, 2024 appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

As a result, our last couple of releases have focused squarely on practical improvements and user-inspired changes. We’ve made working with tables, icons, diagrams and images much easier – and we did it by listening to you.

Our commitment, in this release, remains the same: To deliver a bunch of new, relevant and tangible enhancements that respond directly to your needs and suggestions.

And our new Dark mode is just the tip of the iceberg! We’ve refreshed our UI, overhauled comments, streamlined interactions, and made the UI more responsive.

These changes, along with a host of other refinements, are part of our ongoing effort to make Moqups more versatile, accessible, and powerful.

So, let’s dive in and check out what’s new! And if you want to click down through the list, here’s the gist:

• New Themes
• Better Comments
• Refreshed UI
• Clearer Interactions
• Simpler Workflow
• UI Responsiveness
• Improvements and Fixes

New Themes

This is one of our most-requested updates. You can now use the Settings button to choose between Dark, Light and Classic themes. You can also choose our Match System option if you want Moqups to mirror your browser’s settings.

Better Comments

We’ve revamped our comments so they’re easier to make, find, and read. Here’s a quick rundown of changes that will make managing team feedback simpler and more efficient.

Sticky comments

No more lost and orphaned comments! Threads now stick to specific objects within a design, even when the design is rearranged. This long-overdue update should streamline your workflow, and bring clarity to ongoing discussions.

Comment search

At the top of the Comment Panel, you’ll find a new search bar. Use it to quickly locate specific feedback throughout the project, or on a selected page. This makes it much easier to track and participate in discussions.

Comments panel

Comments are now grouped by thread, mirroring their arrangement on the page as well. This provides immediate context for new comments, and makes it easier to catch up on discussions at a glance.

Clicking a thread or comment in the panel opens it on the page and auto-scrolls to the end of the thread for easy replying. Clicking on an individual comment takes you right to its place in the discussion.

We’ve also added a new @mention filter so you can quickly zero in on the info most relevant to you!

And then there are a few small changes that should have a big effect on the overall clarity and usability of the panel:

• Cleaner button icons
• Rearranged controls that stay visible as you scroll.
• A unified symbol for unread comments
• A clearer switcher from Page to All Pages comments

Comment threads

Our redesign extends to comment pop-overs on the page. First, we made them less intrusive, so they won’t obscure your designs. We did this by limiting their height, and making them both responsive and scrollable.

We also made the pop-over cleaner by reducing the size of its buttons, moving the Reply buttons to the right side, and changing the ‘Markdown’ and ‘Send’ hints into on-hover tooltips.

As for markdown itself, we’ve added better styling and emoji support.

Lastly, we made editing comments easier – just double click to add, update or correct a comment!

Refreshed UI  

Our goal with the updated interface was, quite simply, to improve the experience of our app. We wanted to make it easier on the eyes, quick to read, and lighter on your cognitive load!

Ideally, the new UI is so much more intuitive that you might not even notice some of the changes. Still, if you’re interested in what’s changed, let’s pull back the curtain.

Refined sidebars

You’ll find a lot of changes to our sidebars, starting with a more balanced feel since the width of the right and left panels finally match! Now, here’s a quick rundown of the changes to the panels themselves:

Format Panel

To make formatting clearer, we’ve unified the size of the panel’s field inputs, fonts and interface icons – and freshened the look of the icons themselves. We also updated the sliders and made both the toggle and active states more visible by highlighting them in blue. And there’s a restyled color picker that now includes the HTML Colors palette.

Stencils and Outline Panels

In the Stencils panel, we’ve updated thumbnails for the whole library, added a new Pointer annotation, and unified the borders/strokes for all our flowchart stencils.

In the Outline panel, we’ve added lots of new icons – to make identifying, selecting and arranging objects faster. And, hopefully, the new ‘eyelashes’ on the visibility button make it both clearer and more playful!

Images & Templates Panels

Both these panels now have a better grid view with bigger, easy-to-read thumbnails for your assets.

Streamlined menus and toolbars 

We’ve done a lot of work on the menus and toolbars to make navigating them feel effortless and natural.

First, we moved the Handoff button over to the right side of the top menu, so now its panel opens directly beneath it. We’ve also removed tabs, and added a switcher to jump from CSS to JSX.

Next, we unified the look and positioning of our context toolbars, streamlined our color-picker, and created larger clickable areas for both menus and toolbars in order to improve the mobile experience.

Finally, we changed Components from orange to purple to reflect the current color consensus amongst most design and wireframing apps.

Clearer Interactions  

Interactions now stand out in green. We’ve also made it easier to tell when you’re in edit-interaction mode, improved both object and page targeting, and removed unnecessary options from the dropdowns. And, the single Add Hotspot button now adjusts automatically to your selection size – or drops the hotspot in the middle of the viewport if no object is selected.

Simpler Workflow 

It’s frustrating when an app seems to be working against your own intent. We know that! So, here are a couple of small changes that should alleviate irritation and improve quality of life. They both involve remembering your choices as you work:

• If you choose the color picker or a specific swatch (i.e. Material Design or iOS colors) it now stays that way, across your projects – until you change it.
• The app now maintains your page zoom level and scroll position throughout a project. No more trying to reorient yourself as you jump back and forth between pages.

UI Responsiveness

To make Moqups accessible on mobile, we’ve made the following changes:

• The welcome screen, which lets you select previous projects, now fits on any screen.
• Our sidebars are now hidden, by default, for fast viewing (you can click to open them).
• Menu and toolbar buttons no longer overlap on small screens.

Improvements and Fixes

Finally, here are couple of miscellaneous changes:

• All our in-app modals now have a unified design and placement of buttons.
• If you change your interface language, the size of the buttons and labels adapt their size to your lexicon.
• We’ve revised our Chart editor to make the color change field easier to click, and to ensure that it doesn’t cover the editor’s controls.

Well, that’s all for now. But stay tuned! We have lots more changes and improvements in the pipeline. Once again, thanks to all our faithful, dedicated, and diligent users who reached out to offer their feedback and suggestions.

We especially appreciate those of you who took time to explain the role Moqups plays in your workflow, and how we can best meet the needs of your team.

The post Dimming the Light with Dark Mode appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Our new Team Plan is an even better deal

In case you missed it, our Team Plan now includes 5 seats and SAML Single Sign On. With more members, and better security, it’s the perfect fit for small agencies and cross-functional departments.

Global icon search, and new sets too!

We’ve completely revamped our icon search function. Now, you can search across icon sets, and compare results in different kits, without losing your search context. No more guessing or needless clicks!

Our Icon library also includes more choices to search: we’ve upgraded our Material icon sets, and added Heroicons, Fluent, and IBM Carbon Design packs.

We’ve also made it easy to add subsequent icons from the same set. Just click any icon on the page. Then, in the dimensions section of the Format Panel, click the Library Icon link, under the icon’s name, to open that set in the Icon Panel.

Lots more UML stencils

We’ve had tons of requests for more UML diagram elements. The most recent feedback simply said, “More UML!”.

Well, we heard you!

Here’s a list of the newly added stencils: Assembly, Required Interface, Provided Interface, State, Simple State, Composite state, Start, End, Exit, Terminate, Decision, Connector, Entity, Boundary, Controller, Send Signal, Receive Signal, Node, and Fork/Join.

We’ve also made several other improvements for UML diagramming:

• Merged the Use Case and UML stencil categories
• Added a ‘Port’ connector end, with a fixed size and orientation, that attaches by properly overlapping where it connects (as opposed to snapping to an edge)
• Changed the behavior of smart-add arrows so that they automatically select the appropriate connector style for each type of UML stencil
• Improved snapping connections for UML stencils

Quick Fit feature on the Zoom control

The floating Zoom controls now include a Fit icon which zooms contextually according to the following steps, and matches the existing keyboard shortcuts:

• Zoom to selection
• Zoom to page
• Zoom to content (including content beyond the page)

French language option

Et enfin, le français aussi! Along with German, Spanish, and Italian, you can now choose French as your interface language.

Working with images is quicker and easier

We’ve made four significant changes to help you manage your images:

First, you can now upload images to the page from the Note dropdown in the top menu:

We’ve also expanded the image toolbar so you can resize, crop (either manually or to our new presets), remove background colors, replace selected images, or download image source files to your desktop.

The ‘replace image’ function now works with our Placeholder stencil, so you can swap in real pics when you’re ready to go hi-fi.

And, finally, in response to multiple user requests, we’ve enabled the Fill tool for images, so you can add a color overlay and adjust its opacity. You can also add a color gradient.

The Opacity input in the Color Picker controls the density of your overlay’s color, whereas the Opacity slider in the Format Panel adjusts the opacity of the image itself (including the overlay).

Log in with Microsoft or Apple login

Our newly redesigned login screen now supports both Microsoft and Apple login options:

We improved our Table Stencil

Recently, we added a bunch of new features to our Table stencil. If you haven’t read our blog post with the full list, check it out! And, as a result of your feedback from that release, we’ve just added a couple of additional features:

You can now set the numbers of rows and columns right from the Format panel. These new inputs make it quicker to get started with your table, and easier to expand as requirements change.

We’ve added an export feature, so you can save your table’s data as a CSV file. Clicking the Export icon on the Edit Data toolbar will export your entire table, whereas the Export button on the table formatting toolbar will allow you to export selected cells.

You can also copy data right from the table to paste outside Moqups to a spreadsheet, or within Moqups to another table – or as sticky-notes, text and flowchart blocks.

23 Improvements

Onboarding

• We removed a redundancy where new users who were not yet part of any team, were shown both the Choose a Template popup and the New Project modal. Now they’ll see only the Choose a Template screen.
• Since they are not yet part of a team, we also removed the ‘All Teams’ category from the template-picker to reduce confusion.

Teams/Projects

• The last team you used is now also the default choice when you create a new project.
• The team you used to create your most recent project will be the default team when you enter the Dashboard.

Fonts

• New Google Fonts update.

Interactions

• When you are creating a page interaction, the page from which you’re working is no longer shown as one of the Target choices.

Performance

• We now preload images in adjacent pages in both Edit and Preview modes so switching between pages is faster and smoother.

Stencils

• Our new Container stencil is now available in both the Callouts & Annotations and UML stencil categories. We’ve also added a ‘None’ option to existing ‘Vertical’ and ‘Horizontal’ container header/ title options, so you can use the container without a header. And, we’ve made it quicker and easier to edit.
• We have both left-pointing and right-pointing arrow stencils, but there is now an additional checkbox in the Format panel to quickly reverse the arrow’s direction.

Annotations

• The Bracket annotation stencil now has a rounded-corner adjustment tool.
• All our annotation stencils now have color presets similar to the ones for Sticky Notes.
• For Sticky Notes, you can now customize the text color.
• When you select more than one annotation, the group/ungroup button now appears in the style toolbar.

Mobile Viewing

• There’s now a context menu option to go full-screen (without the toolbar) when viewing a project on mobile devices

Interactivity

• Renamed ‘Mouse In/Out’ action to ‘Mouse Enter/Leave’
• Go to Page’ is now preselected as the default destination
• Renamed ‘Go to URL’ destination to ‘Open Link’ and, when it is selected, the cursor is now set to the URL input field so you can immediately type or paste
• Grouped the ‘Parent’, ‘Next’, ‘Previous’ and specific page destinations under a single ‘Go to Page’ option, and added page-name context beside those options.
• Renamed the ‘Jump Back’ destination to ‘Go Back’
• When you duplicate an interaction, the ‘Update Interaction’ field will open – with the cursor set on the URL input – so you can edit right away.
• In Preview mode, we’ve renamed the ‘Hotspots’ button as ‘Interactions’ since it shows all interactivity, not just Hotspots.
• While setting an action on an object, the crosshair cursor will be activated when you click on either the Target icon or on the Select Object input.

Shortcuts

• Cmd/Ctrl + . hides both sidebars to give you a quick, unobstructed view of your design and a wider workspace.

9 Bug Fixes

• Maintain correct proportions of the Link stencil when it’s added to the page.
• Export to PNG for large pages and projects now works as expected.
• Faster online/offline notification in response to the user’s network status.
• On Table and Chart stencils, color changes are now applied immediately, before the color picker is closed.
• Disable 2FA when an account is transferred to a new Admin.
• Minor fixes to image uploads.
• If you remove a link using the keyboard shortcut, that action now removes any custom formatting as well.
• Fixed a bug that caused any selected text color to be excluded from the Replace Color function.
• When exporting, all objects are now layered and arranged correctly.

The post What’s New: A Dozen Features for Dec ‘23 appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Tables and grids are at the heart of what our users love – and need – to create with Moqups.

So much of the public discussion around both design and UX has to do with aesthetics, whitespace, and maximizing conversions. But for many of our clients, aesthetics often takes a back seat to functionality. And, for many, the question isn’t how much of the page to leave blank, but how much data can be displayed on a single page.

These customers don’t need eye-catching designs or animations. They just want their web and app pages to be practical, clear, and comprehensive.

So, for folks working in insurance, banking, public administration, health care, logistics, and system monitoring (just to list a few), what really matters is how complex information can be displayed as simply and clearly as possible.

For their end-users – agents, technicians, engineers, operators, brokers, administrators – to do their jobs well, they need complex data requirements right there, at their fingertips, effectively and accurately displayed.

These users have been sending us a steady stream of requests and suggestions about how to improve our table stencil. And we’ve listened.

To be honest, when we first introduced the Table stencil four years ago, we figured our customers would use it primarily as a visual stand-in for future data, just as our Image Placeholder stands in for eventual hi-fi photos.

Boy, were we wrong!

Yes, sure, they might have started with a simple placeholder, but as they moved from low to high fidelity – one of Moqups’ strengths – they expected more from the table stencil. They needed it to accommodate large datasets that accurately reflected the complexity of the work that their end-users perform.

For these types of clients, it’s no exaggeration to say that data is the mainstay of their work – and their projects might consist of hundreds, if not thousands of pages of tables.

And that’s not all we heard from our users. They also wanted to use the table, not as a wireframe or mock-up, but as a practical repository for info related to the project itself. A lot of the time, they prefer to stay within the Moqups context, and collate all kinds of workflow data right there, especially if they don’t need the full feature set of a spreadsheet.

This didn’t come as a total surprise, since our team does the same in our own projects. We add tables all the time to help us record and track our work.

So, for all of you who work with tables, we’ve revisited our stencil and added a bunch of improvements that should bring the experience closer to what you’re familiar with from dedicated spreadsheet software.

Sticky Tables

First off, we’ve added stickiness to the table!

Now, like all of our Notes & Annotations and Containers, you can stick all kinds of other objects – like icons, avatars, or images – and they’ll stay in place as you move the table. And that means you can mock up the kinds of realistic data sets that include all sorts of badges and links.

Although Tables are not sticky by default, you can quickly turn their stickiness on (and off) in the Format Panel.

And don’t worry about tables in pre-existing projects; they’ll remain in their previous normal state, with the Sticky Behavior control now appearing in the Format Panel.

Move Row and Columns

Because of user feedback and changing business practices, there’s often a need to swap the positions of rows and columns within a design.

To make these changes both quick and painless, we’ve added a Move function to the Quick Edit toolbar. Once you’ve made a selection, just use the arrows to move it up and down or back and forth.

Zebra Striping

The bigger and more complex the table, the harder it can be to scan. That’s why shading alternating rows or columns makes it easier to stay within your lane – and find the right data point. Now, you can add both horizontal or vertical Striping right from the Format Panel.

Start Fast with a Blank Table

Now, you can get going quicker. We’ve removed the sample text from the stencil. With an empty default state and an active cursor in the first cell, all you have to do is drag and drop…and start typing!

New Data Table Template Bundle

If you want to kickstart a project with something pre-made, and prefer having sample text in a table, don’t worry. We’ve added a professionally designed Data Table to our template library so you can quickly insert it in any project.

It‘s already pre-populated with sample entries, checkmarks, links, filters, icons, search bar, row counter, add button, and navigation arrows – so it’s ready to go.

The three-page template bundle also includes two color variants, and a page of handy elements for quick customization. And don’t forget that you can use the Replace Icons feature to make it your own in seconds!

Insert Row or Column

You could always duplicate a row or column by clicking on one of the little dots along the headers. But that function also duplicated the data in your selection.

A lot of you said that you preferred an empty default when you added a row or column, so we’ve put a new insert function right in the toolbar. Just make a selection, click the button, and presto!

More Toolbar Options

Along with the Insert feature (above), we’ve also added Bold and Italic styling options to the table toolbar. And, we’ve improved the color picker to provide a more consistent experience no matter where you are in the app.

Hide Outside Borders

Using the Format Panel, you can now choose to hide or show outside borders just as you always could with the internal, horizontal and vertical borders.

Improved Keyboard Shortcuts

We’ve tweaked the behavior of the following hotkeys to help you work faster and smarter:

Enter Key

• Pressing the Enter/Return key will move your cursor down to the cell below so you can quickly add data. 
• If you are at the bottom of the table, hitting Enter will add a new row.

Arrow Key Navigation

• Use the arrow keys to navigate up and down or sideways within the table.
• Along the top row, the Up arrow will take you to the cell on the far right of that row.
• Along the bottom row, the Down arrow will take you to the cell on the far right of that row.

Shift + Arrow to Select

• You could always use Shift + Click to select groups of cells around your original cell.
• Now you can hold down Shift and use the Up/Down/Left/Right arrow keys to make your selection.

We hope these additions and improvements help speed and simplify your workflow.

If you need more detailed info about the stencil, please check out our Help Center article on Tables. And, as always, we’d love your feedback at support@moqups.com.

The post New Table Features and Functionality appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Paste lists and CSV data in Table, Note, Flowchart or Text formats

We’ve made it faster and easier to translate lists and data into usable elements. That way, you can skip the tedious repetitive stuff and get on with your work.

With our new Paste in Format feature, you can instantly turn text lists or CSV data into populated tables, whiteboards, and diagrams. Just copy the data and paste it onto the Moqups page. Then, choose how you want to display your clipboard data in the Pick a Format pop-up.

New Icon Packs

We’ve had several requests for more icon sets. So, this month, we’ve added the Kubernetes, Google Cloud, and Cisco packs for those folks working in Network and Cloud infrastructure:

And, for the gaming community, we’ve also added the RPG Awesome kit.

Highlighter Drawing Mode

By popular demand, we’ve added a freehand highlighter to our Quick Draw toolkit. You can activate the highlighter from the dropdown in the top-toolbar, or by using the Shift + H  keyboard shortcut.

Placeholder Text

If you’re just starting to layout your app or webpage, you may be working in very low-fidelity. In those circumstances, all you really want are shapes as placeholders, and even our Lorem Ipsum stencil might have too much fidelity for your purposes.

That’s where our new Placeholder Text stencil comes in. It represents your future copy as a mere blob of text, and is perfect for visualizing optimal text density, placement and configuration – before you start to write your content.

Replace Colors in Selection

With Moqups, you could always replace colors throughout a project, or on a page. But now you can also replace a color within a selection or group of objects. This makes it especially easy to apply branded color schemes to grouped elements as your team moves from lo-fi wireframe to mid or hi-fi mockup.

More, Better Pre-Made Templates

Here’s the latest in our ongoing work to refresh and expand our pre-designed templates. To make it easier to find our latest additions and template bundles, we’ve added ‘New’ and ‘Premium’ badges to the template picker. Just type ‘new’ or ‘premium’ into the Search input to check them out.

New Templates

• Tier List, Event Floor Plan, Now-Next-Later Roadmap, E-Commerce Shop Wireframe, UX Flow Chart

Revamped Templates

• Four L’s Retrospective, 5 Why’s Analysis, Business Model Canvas, KWL Chart, Mobile App Landing Page Wireframe, Johari Window, SIPOC Diagram, Daily Stand-up Meeting, Value Stream Map

6 Improvements

• Projects:
  • The Color-Picker and Replace Colors feature now show drop-shadow colors as part of the Project Colors palette.

• Diagrams:
  • When diagram connectors snap to grouped objects, they now attach to whichever object is arranged to the front, rather than the largest object in the group.

• Pages:
  • When you add an image to an empty page that’s smaller than the image, the page size automatically expands to accommodate your image.

• Stencils:
  • We’ve optimized the size of compound stencils (including Material Design) to make working with those objects faster and easier.

• Export:
  • Because of possible issues when exporting large numbers of pages to PDF, you now receive a warning to limit PDF exports to 150 pages.

• Fonts:
  • New Google fonts update.

5 Bug Fixes

• Project Contributors will now have access to their own personal Account assets (templates or images), as well as the assets for the specific Project they’re working on.
• Template bundles now import in the correct page order.
• Fixed a bug that occasionally caused the pasting of a valid Moqups object to appear as JSON data if the user had a text object selected.
• Removing the sample content from the Note stencil now removes the Checklist formatting as well.
• Fixed a bug that caused the image Replace feature to malfunction on images pasted directly to the page.

The post What’s New: March 27, 2023 appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Custom Team Templates to Share

Now, you can turn any Moqups project into a template and share it with your team or the world!

Custom templates save time and money for companies that rely on repeated design workflows, or that have multiple teams working through the same process. Templates can help you build on work that’s already been done – and take advantage of effort and expertise that’s already been applied to previous projects.

Turn your own projects into templates right from the Sharing modal, or from the Dashboard’s Project Window.

You can create a new project from a custom template, or insert it into an open project. Either way, you’ll find your custom templates in the Team category of the template picker. For easy identification, they also get their own badge and label in the Project Page of the Dashboard.

For more about this feature, check out our recent blog post on Team Templates.

Improved Pre-Made Templates

We’ve been working hard to improve the entire template experience at Moqups and expand your choice. The process is ongoing, but we’ve already added lots of new, professionally designed templates so you can find one that perfectly matches your use case.

We’ve also revised and revamped the ones you’re familiar with. Along with fresh, updated designs, we’ve added new elements, instructions, variations, and expanded our bundles. So, check out their new look! Here’s a shortlist of just some of the changes:

New Templates

• Empathy map canvas, E-commerce dashboard, E-mailing bundle, Moodboard, Atomic UX research, and more.

Revamped Templates

• Wireframing: Landing page, Blog page, Admin dashboard, and more.
• Diagramming: All existing Flowchart, UML use case, Sequence, and Class diagrams (with added building blocks).
• UX Research: User persona, Story mapping, Empathy mapping, and more.
• Project Management: All Mind maps and Retrospectives, Product roadmap, and more.

To make finding the right template faster and easier, we’ve redesigned the template picker to accommodate both pre-made and Team templates. And, we’ve sped up search, made categorization more accurate, and improved the template thumbnails.

Name Sync for Outline Panel

When you’re working with lots of objects, the Outline Panel is a lifesaver. You can use it to find and select objects, quickly group or name them, and arrange them in layers on the page. It also lets you quickly lock and unlock, toggle visibility, and delete both objects and groups.

Last year, we added special icons to the panel to help you quickly distinguish between object types. This month we’ve added another helpful feature.

Now, when you type text into any flowchart and some text stencils (Paragraph, Heading, Label), the object automatically adopts that text as its name.

This makes it much easier to identify specific objects, especially in complex flow and process diagrams, or within detailed designs.

If you don’t want an object labeled with its text, just overwrite the auto-generated name in either the Outline Panel or the Format Panel and it will stick!

Paste CSV Data as a Table

You could always paste CSV data directly to our Chart and Graph stencils. Now, you can do the same with the Table. In fact, you don’t even need to have a table stencil already on your page. Just press Cmd/Ctrl + V and your copied data will instantly appear as a new table on the selected page!

Custom SAML

We offer single sign-on with SAML for OneLogin, Okta, and Microsoft Azure AD. However, if your preferred identity provider doesn’t offer the ability to connect with Moqups, you can now use our Custom SAML Configuration Guide to set up your own, custom SAML connection.

Change Admin Feature

There are lots of reasons why you might want to change admins by transferring ownership of your account to a new email address.

Maybe there’s been a change in personnel. Or, you want to move the administration of your Moqups account to a supervisory level (i.e. your company’s Accounting department).

Now, you can change your admin directly from your Dashboard’s Account Page.

Access for New Project Controls

New projects are private by default but, in Team Settings, Admin and Managers can now change the default to Team Access. Subscribers to our Unlimited plan also have the option of disallowing private projects altogether.

Getting Started With Moqups Guide

New to Moqups and curious about what you can build and do? Then check out our Get Started With Moqups Guide. It’s a quick overview of our tools, features and functionalities to help you get started! We cover wireframing, diagramming, whiteboarding, and data visualization so you can get the most out of Moqups as a full, visual communication app.

8 Improvements

• Diagrams:
  • When you draw a new flowchart connector – or use the quick-add arrows to extend your diagram – new connectors inherit the style of the last connector used on that page.
  • Flowchart stencils now have padding controls.

• Annotations:
  • We’ve added both padding and line-height controls to Sticky Notes.

• Pages:
  • You can quickly add a list of your page titles to the clipboard using the Copy Pages menu option, and then paste the list to a document or spreadsheet.

• Export:
  • ‘Export selection’ now merges the group’s layers and exports as a single file, rather than as multiple files.

• Comments:
  • Comment threads on mobile devices look better.

• Atlassian:
  • You can use SAML to log in to our Jira Cloud and Confluence Cloud integrations.

• Google Fonts:
  • We’ve added a huge complement of new fonts, so check if your faves are on our updated list!

11 Bug Fixes

• Individual team avatars now display a consistent color throughout the app.
• When creating a new project from the Dashboard, you now see your current team context as the default for the team-selector dropdown.
• If you refresh a new project before it automatically saves, now you won’t lose your work.
• ‘Recover projects’ and ’Undo/Redo’ features now load images more reliably.
• Fixed a bug that caused ‘Fit page to content’ to occasionally alter the page layout.
• Applying multiple ‘bold’ font weights within the same object now works as expected.
• Partially coloring a selection of text now works consistently.
• Export selection (of a single object or group) now includes the selection name as well as the project name.
• Using the Replace feature with Flowchart stencils no longer causes the stroke to disappear.
• Stroke-width input now accommodates pasted values without errors.
• In View mode, the ’Log In’ button no longer obscures the toolbar.

The post What’s New: January 16, 2023 appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.

Being able to create domain-specific templates is especially valuable for teams that repeat a design process, or where multiple teams do similar work. Custom templates assure consistency across an organization, and give teams confidence that they’re working from a pre-approved blueprint.

Now, you can designate any of your projects for use as a custom template – within your team, your account, or more widely, by anyone who has a link to the project.

Team Templates can save time and money

Nothing slows down a team more than a blank page. Even when everybody knows the basic goal, agreeing on a starting point can be frustrating and time-consuming.

People prefer to react to something that’s already in place. That’s why we say that templates ‘kickstart the process’. Even the roughest of layouts – already on the page – allows folks to react, suggest changes, or provide new ideas of their own. 

That’s the advantage of building your own, custom templates: It gives clients and team members something to work with – immediately! It also means that the hard work you’ve done in creating a project from scratch – along with your research and expertise – can give a leg up to others working with a similar use-case.

In our recent Customer Story, CEO Ross Jenkins talked about this process in his own company, Decision Foundry.

“At any one time, we may be developing a hundred different projects,” says Jenkins. “Most of our employees are analysts working with clients. If they have to start from scratch with each new project, they’ll simply be less efficient and productive.”

Kickstarting projects with custom templates works incredibly well for us.

Ross Jenkins, CEO at Decision Foundry

“Starting from one of our industry-specific templates probably captures about 60% of what our clients need,” Jenkins explains. “That frees up a ton of time and energy for the remaining 40%, which is building a truly bespoke and nuanced strategy around what they’re trying to achieve.”

Create, share and use Team Templates

You can designate any of your projects to be used as a custom template – within your team, your account, or more widely, by anyone who has a link to the project. That template remains as an active project that can be updated by any member with edit access, and the project’s comments remain visible, just as in normal projects.

When someone uses the project as a template, they get an exact duplicate of the original – including its hidden pages – but with the comments and chat stripped away so they can start fresh.

Creating a template

If you’re working on a project, just click the Sharing button. In the Share with Others modal, toggle ‘Allow use as template’ to the ‘On’ position. Once a project has been turned into a template, anyone with view rights can duplicate the project, and use it as the base for a new one.

If you’re in the Dashboard, you’ll find the same option in the ‘More actions’ menu beside the project.

Sharing a template

Once you’ve designated a project as a template, it’s marked in the Dashboard with a special badge and label, and it automatically appears in the Team category of the template picker so team members can use it.

You can also share a link to a team template directly from the ‘Sharing’ button in the editor. In the ‘Share with Others’ modal, choose between ‘Allow access to project collaborators only’ and ‘Anyone with link can view’ depending on how widely you want to share the template.

Using a template

You can use team templates as the base for new projects or insert them in existing ones.

Whenever you create a new project, you’ll find your custom templates in the ‘Team’ category of the template picker. You can also insert them into any open project from the editor’s Insert Template button.

If you’re subscribed to our Unlimited Plan and work with multiple teams, the picker’s category will display ‘All Teams’ templates. That way, you can take advantage of all templates within your account.

As you share projects with your team, your organization, and the wider world, send your feedback and suggestions to support@moqups.com – and let us know how Team Templates are working for you!

The post Turn your projects into templates appeared first on The Moqups Blog | Mockup, Wireframe & UI Prototyping News.