Developers love to explore new tools and technologies. When it comes to providing or collecting feedback from colleagues & clients, we mostly go back to the traditional way of creating and annotating screenshots. However, there are much better (and more efficient) solutions available.
Since much of our web projects and their processes take place right in our browsers, there are great screenshot tools out there, perfectly designed for communicating with co-workers and providing feedback. These in-browser web tools vary in their range of functions and offer great resources for capturing your (or your clients) browser screens.
The modern way of creating browser screenshots
There are a bunch of traditional desktop tools available - such as Skitch or Snagit - which are great for capturing anything on your desktop. What I’m now experiencing are great solutions that allow creating and annotating screens right within browsers.
With these tools annotations and browser shots are created directly on the web page. There’s no need to install something on your client’s computer.
I’d like to present you 5 awesome screenshot tools which will make your web projects more efficient and fun for everyone involved.
1. Awesome Screenshot
Awesome Screenshot is a great browser extension which lets you capture, edit, annotate and save a portion of your current screen (or your entire browser screen as well).
There are a huge number of screen annotation options available and the tool not only lets you save your files to Diigo (a bookmarking tool), but also to your local disk or Google Drive.
How it worksEssential Reading: Learn React from Scratch! (2019 Edition)
Awesome Screenshot is available as a browser extension for Google Chrome, Mozilla Firefox or Apple’s Safari. After installing & adding the browser add-on to your favourite browser, you can start annotating your browser screens.
You can save the created screenshot to your local disk or upload it directly to awesomescreenshot.com, where you’ll get a shareable link (which is quite handy if you want to show something to your clients).
Compared to the other tools, there may be a little drawback by using Awesome Screenshot when you want to collect feedback & communicate with your clients, since everyone has to install the extension in his/her very own browser.
Usersnap is a screenshot tool which offers you the possibility to capture images, screens and create screenshots of your browser window. With the screenshot tool you can create browser shots directly inside your browser - without any additional installation.
How it works
There are two different options available to make use of the screenshot tool of Usersnap. There are browser extensions for Firefox and Chrome available. On the other hand, you can also add a feedback button to your website which will be displayed to your website visitors.
With easy-to-use annotation and capture tools you (or your clients) can leave comments, sketches and notes.
There’s a free trial for Usersnap available where you can make use of all features for free for 15 days. Personal plan for Usersnap starts at $19 per month.
Wishbox is a great tool especially for smaller companies when it comes to customer support and collecting customer feedback. Communicating with screenshots and annotated sketches makes interactions with clients way easier & faster.
How it works
Similar to redline and Usersnap, you can simply embed a little code snippet on your website and website visitors can start giving feedback on any page by opening the Wishbox widget.
Unfortunately, there are no browser extensions and integration options available. In contrast to redline & Usersnap for example you cannot connect Wishbox with any tool. All created screenshots are simply sent to your inbox. I’d recommend setting up an own mail account or at least inbox rules which makes managing your screenshots more comfortable.
Wishbox offers a free plan for 100 screenshots, which isn’t that much if you want to collect feedback from various customers and website visitors. The Economy plan starts at $19 per month.
4. InVision LiveCapture
InVision App is a well-known prototyping & collaboration tool during the design stage of a web project. Designers, project managers & clients can collaborate on mockups & design drafts in a very easy way by simply uploading your design files to InVision.
How it works
With InVision LiveCapture, InVision is now entering the web development market as well by providing a screenshot tool which makes collaboration on HTML prototypes or any website easy. Live Capture offers a browser extension for Google Chrome which can be used to capture browser screens.
After installing the Chrome extension you can capture any web page, which is directly saved to your InVision projects. In contrast to the other presented tools there are no annotation tools available while capturing the screen. However you can annotate these screenshots directly inside InVision app.
Pricing starts at $15 per month and goes up to $100 per month for the Team plan.
5. redline (now usersnap, #2 in this list)
redline is a beautifully designed and simple in-browser screenshot tool.
How redline works
Whether by clicking on the red ribbon or the bookmarklet in your browser, you’ll get access to easy-to-use annotation- & screen capture tools.
redline offers a free personal plan, including the option to send screenshot to your/or someone else’s inbox. If you want to connect the screenshot tool from redline with your project management tool, pricing starts at $19 per month.
Summing things up
There’s no general answer to the perfect screenshot tool for web projects. Depending on your team size, clients and projects you’re working on, you’ll deal with different requirements.
|Features||Awesome Screenshot||Usersnap||Wishbox||InVision LiveCapture||redline|
|Browser extensions||Chrome, Firefox, Safari||Chrome, Firefox||no||Chrome||no|
|Embed on website||no||yes||yes||no||yes|
|Get meta information||no||yes||yes||no||yes|
Collaboration features are probably quite important for larger teams, whereas other features are more important to freelance developers. Give the tools a try and check out which one fits best for your business case.