Published on <a href="https://blog.prototypr.io/design-collaboration-tools-for-web-design-921888b2d73f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Ruchi Goel 
Effective design collaboration is one major key to success, in most of the professional domains. Lack of interaction within the team can have a serious impact on the project. To ensure a clear and productive collaboration process among designers, developers, stakeholders etc. it becomes important to keep them all in sync i.e. on the same page.
Daily SCRUM meetings, periodic project discussions, progress reports etc., help to foster a collaborative platform, to keep everyone in the loop. But these solutions have limitations, like each and every team member need to be free at the exact same time, which is quite tough; catering to the fact that all team members might not be available in house. Reason can be geographically distributed teams, outstation client meeting, some international conference or anything else. So, to have a seamless platform to discuss, share and get updates from, is a must and design collaboration tools fit in as a valid solution.
Teams vary in terms of size, geographical locations, resources, goals, the process and the approach they follow, but generally have common design cycle phases. So here I have put together some popular online tools for different collaboration phases of the design process, to help you choose an optimum one for your needs.
<img alt="" src="https://cdn-images-1.medium.com/max/1015/0*1mzYhk8EmxAcaYg7.">
<h3><a href="https://www.invisionapp.com/">InVision</a></h3>
InVision deals mainly in prototyping and collaboration domain. It provides you with option to choose for either prototype or board when creating a new project.You can import your designs(from <a href="https://www.sketchapp.com/">Sketch</a> or <a href="http://www.adobe.com/in/products/photoshop.html">Photoshop</a>) or images into InVision which can be converted to realistic prototypes by adding animations, gestures and transitions. InVision is a great collaboration platform as it allows you to drop annotations and comments anywhere on the screen by just clicking on it, enabling visual feedback. You can simply share your project link via share button or via Facebook, Twitter, LinkedIn etc.With InVision’s <a href="https://www.invisionapp.com/blog/introducing-invision-liveshare-real-time-design-meetings-in-your-browser/">LiveShare</a> (an in-browser design collaboration tool) you can easily collaborate with other team members as everyone have their own pointer and a name label.
<a href="https://www.invisionapp.com/plans">Pricing</a>: InVision tool is free for one prototype as long as you require it. Paid plans are Starter($15/month); Professional($25/month); Team($99/month).
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*V-Np_UWH2aUtSQK0.">Source: <a href="http://www.qingpingshan.com/m/view.php?aid=123088">http://www.qingpingshan.com/m/view.php?aid=123088</a>
<h3><a href="https://zipboard.co/">zipBoard</a></h3>
ZipBoard is a simple design feedback tool, which enables easy and contextual feedback. Even from clients and non-technical team members as well. With zipBoard you can simply browse through the web content and wherever you notice any issue, just grab a screenshot(board). Now you can add annotations to pinpoint the issue. It also allows you to assign, prioritize and organize all the issues.You can add unlimited number of collaborators to review your project or you can get reviews for the project using a sharable link too. zipBoard provides you with JIRA and Slack integration to keep all your team in sync.
<a href="https://www.zipboard.co/pricing">Pricing</a>: It is free for one project and provides free 30-day trial on all plans. Paid plans are Starter($29/month); Team($59/month).
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*m9r9DSNoDw-G7tik.">Source: <a href="https://www.zipboard.co/">https://www.zipboard.co/</a>
<h3><a href="https://www.uxpin.com/">UX pin</a></h3>
UXPin has two products one is <a href="https://www.uxpin.com/products/uxpin-prototyping">UXPin prototyping</a> and the other is <a href="https://www.uxpin.com/products/uxpin-systems">UXPin systems</a>. While the former is a design and prototyping tool, the latter is a handoff tool including design and prototyping. You can create a design from scratch or UXPin has plugins which allow you to export your designs from Sketch and Photoshop. It helps to design fully responsive prototypes with dozens of built-in UI libraries (Bootstrap, Foundation, Android, iOS, etc). It is very well suited for wireframes.
Team members can be added in 3 roles- Manager, Creator and Collaborator. While the manager can create and access all projects, the creator can create and access selected projects and collaborator can only access selected projects. UX pin allows smooth collaboration where users can comment directly on elements and intimate anyone in email and <a href="https://slack.com/">Slack</a>.
<a href="https://www.uxpin.com/pricing.html">Pricing</a>: Paid plans are Prototyping($29/user monthly); Systems($49/user monthly).
<img alt="" src="https://cdn-images-1.medium.com/max/750/0*yOkiLNloKlT-Zc4K.">Source: <a href="https://www.uxpin.com/products/uxpin-prototyping">https://www.uxpin.com/products/uxpin-prototyping</a>
<h3><a href="https://www.figma.com/">Figma</a></h3>
Figma is the first interface design tool with real-time collaboration.
It is browser-based and connects to the cloud, allowing for multiple designers to work on the same project simultaneously. Figma is a platform independent design tool providing features such as vector networks, version history etc. <a href="https://medium.com/@mengto/figma-vs-sketch-c01e5e74eddd">Unlike Sketch</a>, no third-party tool is required with Figma because everything occurs in the browser itself. You can simply drag the comment pointer on any part of the design and add a comment to it enabling collaborative environment.
The multiplayer feature allows real-time collaboration. Other enticing features like the ability to view designs and make real-time changes on mobile make the tool much simpler to use and access.
<a href="https://www.figma.com/pricing">Pricing</a>: Figma is free for the individuals. Paid plans include Professional Team($15/editor/month or $12/editor/month billed annually).
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*3zrwNQ14K89a4OpZ.">Source: <a href="https://blog.statsbot.co/why-your-design-team-should-consider-switching-to-figma-3d8962d08a5d">https://blog.statsbot.co/why-your-design-team-should-consider-switching-to-figma-3d8962d08a5d</a>
<h3><a href="https://zeplin.io/">Zeplin</a></h3>
Zeplin is a handoff tool, enabling designers and developers to collaborate efficiently and save time,wasted in chasing minute details. It is available for Windows, Mac and web. It automatically creates style guides, in sync with sketch and photoshop designs.The user friendly interface is another plus, like you can check details(font style, font size, font color etc.) simply by selecting the element you wish to inspect.Also by connecting your zeplin project with slack, you can keep your teammates updated for all the design changes.
<a href="https://zeplin.io/pricing.html">Pricing</a>: It is free for one active project. Paid plans are Starter($19/month or $17/month billed annually); Growing Business($29/month or $26/month billed annually); Organisation($9/user/month or $6.75/user/month billed annually).
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*g7YCGpvqhr5A-4or.">Source: <a href="https://webdesign.tutsplus.com/articles/sketch-and-zeplin-helping-designers-and-developers-collaborate--cms-26421">https://webdesign.tutsplus.com/articles/sketch-and-zeplin-helping-designers-and-developers-collaborate&#8211;cms-26421</a>
<h3><a href="https://www.hotjar.com/">Hotjar</a></h3>
Hotjar is an analytics and feedback tool that monitors user actions on a website. It provides multiple research and analytics options like heatmaps, recordings, conversion funnels, feedback polls etc. which gives a complete data on visitors actions. Hotjar is good for heat maps and recording user’s actions.For a better insight on the available features check <a href="https://www.hotjar.com/tour">here</a>.
<a href="https://www.hotjar.com/pricing">Pricing</a>: It provides 15-day free trial on all plans with a 30-day money back guarantee. Paid plans are Basic( free, collect data from 2,000 page views/day); Plus( $29/month, collect data from 10,000 per day).
<img alt="" src="https://cdn-images-1.medium.com/max/800/0*vKGpmeNjeX8BefQd.">Source: <a href="https://www.hotjar.com/">https://www.hotjar.com/</a>
Depending upon the design phase and collaboration needs you can choose the right tool for your team.
Happy designing!
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=921888b2d73f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/design-collaboration-tools-for-web-design-921888b2d73f">Design Collaboration tools for web design</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Design Collaboration tools for web design

Top Stories