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":

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:

This is a lot less fun but it has:

• Higher image quality.
• I used Cleanshot's "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:

• 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. 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
• How to Take a Great Screenshot

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