How to create a horrible screenshot
Tags: writing
Published: 2021-02-19 02:59:40

---
title: How to create a horrible screenshot
published: true
description: Everyone wants to know how to make horrible screenshots to confuse your readers
tags: writing
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q6nwtjtsj9aoi0kzalja.png
---
If you write about web development you probably use screenshots. Whether it's for tutorials or documentation, a good screenshot can help guide readers. A bad screenshot can confuse them. I challenged myself recently to create the WORST screenshot just to think more about what makes a screenshot bad. 

I gave myself a caption to make a screenshot for. I chose "Start writing a new post on Dev.to". Here is my work of "art":

![bad screenshot see description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpwdp86487m92wbflub1.jpeg)

It has several key horrible elements:
- EXTREME JPEG compression so it's really blurry and hard to read.
- Tons of distracting clutter. I made sure to get every part of my screen and especially those juicy distracting browser elements like my bookmark bar and downloads. 
- Infuriatingly off-center from the desktop in the background.
- Poorly drawn arrow in a color that doesn't stand out from the background

Then I tried to create a "good" version:
![good screenshot see description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0r3lums01tkzgmsvph5q.jpg)

This is a lot less fun but it has:
- Higher image quality.
- I used [Cleanshot's](https://cleanshot.com/) "highlight" feature to deemphasize the other elements of the page.
- A big bold arrow in a contrasting color.
- Zoomed in (using browser zoom) but not so far in that it deforms the user interface.

Then I thought about how I could make ANOTHER bad screenshot. But include elements of the "good" one:
![bad screenshot 2 see description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjjohuj3rwfhz7g7vi96.jpg)

- Zoomed in so far you see a user interface that most users would never see, I.E., it no longer looks like the Dev.to homepage.
- Pixel blur, which is a feature that seems kind of cool but confuses some users. I'll never forget the time I made a tutorial for my dad that used pixel blur and he thought the pixel blur was covering up things that were "censored" like bad words 💀

For professional documentation you probably want to go with [content skeleton-style placeholders](https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a). These are illustrations where the elements are simplified so it's still recognizable as the user interface but much easier to understand. As far as I know you'd have to hand-draw or hand-code some CSS (unless there is some solution I don't know about). 


Anyway, some links that inspired this post:
- [Simplified graphics and screenshots in software documentation](https://www.tcworld.info/e-magazine/technical-writing/simplified-graphics-and-screenshots-in-software-documentation-1102/)
- [How to Take a Great Screenshot](https://www.hitsubscribe.com/take-great-screenshot/)


If you have any tips for making the "bad" one worse or the "good" one better, let me know in the comments.