You might not consider screenshots as some form of art. Well, we do. We consider ourselves as screenshot lunatics.
We even created our very own visual bug tracking tool revolutionizing the way we report bugs and collect feedback. With screenshots. Pretty cool, huh?
In this post I’m going to show you the ins and outs on how to take a great screenshots. Whether you want to capture a mobile screenshot, or you’re managing screenshots for web projects as a designer or developer.
Let’s get started.
Before we tool up, I want to raise the question of your goal and aim? Why do you want to create a screenshot and capture the current screen?
No matter what reason you have for creating a screenshot, the process of taking a screenshot doesn’t stop after you’ve captured the screen.
Screenshots have become a communication tool which enables us to express ourselves.
Or as Joanne McNeil puts it:
“It’s photography for life on the screen”
Screenshots enables us to share moments and stories taking place on the screen. Whether it’s a screenshot of a funny tweet, or simply an error message which makes our life harder.
Screenshots have re-placed the written communication in our lives. So I wanted to make sure that you know how to get more out of your screenshots.
A screenshot is worth a thousand words
A screenshot can be used in a lot of different situations and scenarios. Whether sending a screenshot of the latest amazon summer sale offer to your wife or asking for feedback on a new design you’ve crafted.
Screenshots are the most effective way to speed up communication.
There are lot of discussions going on in that topic of visual communication.
Researchers at 3M Corporation claim that we are able to process visuals 60.000 times faster than text.
Though the 60.000 question remains still unanswered, it seems legit to claim that our eyes can process images way easier and faster than text.
One screenshot – many use cases
Especially in web development and web design, a screenshot plays a crucial role in everything we do. Whether it’s about new ideas, prototypes, design drafts or website prototypes, we mostly use visual communication tools to show our work in progress.
Build a screenshot workflow
The art of taking a screenshot doesn’t stop after the screenshot is created. Therefore you’ll end up in a pretty messy situation if there’s no workflow in place for dealing with your screenshots.
We’ve talked with a lot of customers and other people who have shared their screenshot workflows with us. Here’s a curated list of the most common types of screenshot workflows.
1. The quick & dirty workflow
This workflow does what its name states. It works pretty simple and quick to grab a screenshot and send it over to a colleague or client.
This workflow might be a bit hard to manage, especially when using it within larger web team, since it mostly requires tools (like email or your local hard drive) which doesn’t perfectly fit into screenshot workflows.
And please do me a favour: Do not make use of this workflow when sending screenshots to clients asking for feedback. You won’t do any good by sending screenshots to clients via email.
Pro’s of this workflow:
- easy to understand workflow
- works quick and simple
Con’s of this workflow:
- no possibility to manage screenshots
- no way to collaborate and work together on screenshots in a structured way.
[otw_is sidebar=otw-sidebar-2]
2. The Office suite screenshot workflow
So, knowing about the quick and dirty screenshot workflow and its drawbacks, people are searching for better tools to get your (screenshot) work done.
And since Microsoft’s Office suite is installed and available on most devices, it seems natural that Word and Powerpoint are great tools for capturing & managing screenshots.
Though you do not do any good when making use of this workflow.
Pro’s of this workflow:
- Using tools you and your colleagues (might) already use
Con’s of this workflow:
- no possibility to collaborate, discuss, and work together on screenshots in a structured way.
- managing screenshots, tasks, responsibilities, and statuses is not possible.
3. The Skitch+Evernote workflow
Skitch is a great tool for creating screenshots. Period. It not only is a comprehensive screenshot tool with some feature-rich options for annotating your screenshot, but also works great with Evernote.
Skitch, also owned by Evernote, can store all created screenshots in your Evernote notebooks. Besides that, all screenshots can be sent via Skitch using Facebook, Twitter or simply Email to colleagues and clients.
Though you’ll probably have a hard time actually managing statuses and responsibilities on those screenshots.
Pros of this workflow:
Con’s of this workflow:
- hard to manage screenshots
- it doesn’t allow you to discuss and comment on screenshots
- communication on screenshots still takes place via email or other chat tools
- still, many tools needed for that workflow
4. the mobile screenshot workflow
So, you want to capture something on your mobile phone. Great. Depending on your use case, I recommend the following setup.
4a. Create a screenshot with your Android Phone
If you have Android device running Cream Sandwich (4.0) or above, it’s pretty easy.
Press the Volume Down and Power Button at the same time. Hold them for a second. Et voila your phone will take a screenshot.
4b. Create a screenshot with your iPhone
Similar to Android, it’s super easy to take a screenshot on the iPhone. Press the Home button and the Sleep button at the same time. And here we go.
You’re screenshot is now saved to your iPhone Camera roll.
4c. Create a screenshot with your Windows Phone
Using a Windows phone running 8.1 you simply need to press the power button and the volume up button at the same time.
Pro tip for iOS: Manage mobile screenshots with IFTTT
When creating a lot of mobile screenshots (for example because you’re testing a mobile app or a responsive website on your mobile device) you’ll end up with a mess of screenshots in your camera roll.
By making use of this IFTTT recipe you can save all your created screenshots automatically in an own folder on your phone.
[otw_is sidebar=otw-sidebar-3]
5. The All in for web development Workflow
Working on web projects and want to explore a new workflow of creating browser screenshots? Make sure to check out Usersnap & Instabug for creating browser screenshots for any web projects.
Usersnap
Screenshots are a quick and easy way to show your work in progress and communicate with colleagues and clients on various tasks.
Screenshots are almost forensic. Screenshots enable us to prove that what we are experiencing is really taking place.
It’s common speaking that the internet doesn’t forget. Nor do screenshots. With Usersnap you’ll get everything you need for sharing and collaborating browser screenshots with colleagues and clients.
It not only gives you a powerful tool for creating a screenshot, but also for managing them in an efficient and structured way.
Pro’s of this workflow:
- super easy way to create browser screenshots with no installation needed
- adds meta information to every screenshots (which most colleagues & clients don’t know)
- let’s you chat in real-time on any created browser screenshot
- integrates well with other existing project management tools
- only 1 tool for workflow needed
Con’s of this workflow:
- only limited to browser screenshots (though you can upload “desktop” or mobile screenshots as well)
Instabug
So you’re working on designing and developing a mobile app and ask yourself how to collect feedback & screenshots from people who are testing your app.
Well, one way (and this would be a quick & dirty one as well) would be to ask your users / colleagues / clients / testers to create a screenshot with the built-in screenshot taking tool and send them over via email.
Luckily, there’s a solution for all those mobile developers out there. And it’s called instabug. Though it still is in beta according to their website. It enables you and your users to create screenshots of your app while testing it.
Pro’s of this workflow:
- easy way to manage feedback on mobile apps
- works great for iOS & Android (though it’s limited to those platforms)
- integrates well with other existing project management tools
Con’s of this workflow:
- Limited to native mobile apps (which requires an own setup for everything else)
Choose your tools wisely
As mentioned in the presented workflows before, it’s more important to work on your process before choosing the tools you want to work with. After thinking about various use cases and the situations where you need to take a screenshot, you’ll definitely come up with a different tool.
What’s your screenshot workflow?
I hope you understand our huge excitement for screenshots and visual communication a bit better. And maybe I’ve convinced you improving your workflow of sending someone a screenshot.
PS: How does your screenshot workflow look like?
PPS: There are always better ways for taking a screenshot.
This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project.
Resolve issues faster with visual bug reporting.
Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.
And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
