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.
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 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.
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.
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.
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:
Con’s of this workflow:
[otw_is sidebar=otw-sidebar-2]
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:
Con’s of this 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:
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]
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.
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:
Con’s of this workflow:
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:
Con’s of this workflow:
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.
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.
Ever wonder how some companies make product updates feel like the highlight of your day? …
Picture this: You’re in the middle of a hectic workday, balancing strategic decisions with daily…
Ever wish customer feedback came with subtitles? With the right feedback analytics tools, you can…
Survey design is the backbone of effective data collection, enabling businesses, product managers and researchers…
Wondering how to master Jira’s vast capabilities for strategic project/product success? Epics are the key…
In this article, we walk you through the ultimate in-app feedback how to strategy, including…