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
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.
- 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:
If you have any tips for making the "bad" one worse or the "good" one better, let me know in the comments.