GoodVibes.website
How to Take Screenshots (and Use Them to Design Your Website!)

How to Take Screenshots (and Use Them to Design Your Website!)

Whether you're just getting started with your website or want to request specific tweaks, screenshots can be one of the easiest, most powerful tools in your toolkit. You don't have to describe everything in words - just show us what you're talking about.

This guide will walk you through:

  • How to take screenshots on your device (iPhone, Android, Windows, Mac, etc.)
  • How to annotate them to highlight exactly what you want
  • Why screenshots are such a helpful (and sometimes fun!) way to communicate your vision

Why Take a Screenshot?

A picture really is worth a thousand words - especially when you're trying to design a website.

Maybe you saw a layout on another site that you really like. Or maybe you want to change something on your site but don't know the name of the section or how to describe it. Instead of guessing what to type, just snap a screenshot and send it in!

You can:

  • Circle the parts you want to keep or change
  • Add little labels like “Make this bigger” or “Use a different color”
  • Use screenshots from completely different websites to say: “I like this header better than mine”

Even better: You don't need to write anything fancy. Just scribble “This part too busy?” or “Make this pop?” and that's perfect. We get it.

How to Take Screenshots on Your Device

Here's a quick breakdown for popular devices and systems.

📱 iPhone or iPad

  • With Face ID: Press the Side Button + Volume Up at the same time.
  • With Home Button: Press the Home Button + Side Button (or Top Button).
  • The screenshot thumbnail appears in the bottom-left. Tap it to edit or markup immediately, or just let it save to your Photos app.

💡 Tip: You can also say “Hey Siri, take a screenshot.”

📱 Android Phones & Tablets

  • Most Android devices: Press the Power Button + Volume Down at the same time.
  • Some Samsung phones have a “Palm Swipe” gesture or Screenshot icon in the quick settings.
  • Screenshots go into your Photos or Gallery app.

💡 Try long-pressing the screenshot notification to jump into editing mode.

💻 Windows PC

  • Quick Screenshot: Press PrtScn to copy the whole screen (paste into Paint or Word to save).
  • Snip & Sketch Tool (Windows 10/11): Press Windows + Shift + S. Drag to select your area. Then paste it anywhere or open Snip & Sketch to annotate.
  • Snipping Tool (older versions): Search "Snipping Tool" in Start menu.

💡 Pro tip: In Snip & Sketch, you can draw with pen tools to circle, highlight, and more.

💻 Mac

  • Full screen: Press Command + Shift + 3
  • Selected area: Press Command + Shift + 4 and drag to capture.
  • Add annotations: Open the screenshot from your desktop, click Markup in Preview to draw, highlight, and add text.

🐧 Linux

  • Try Print Screen or Shift + Print Screen depending on distro.
  • Most systems support screenshot apps like Flameshot or Shutter for advanced editing.
  • You can also use tools like GIMP or Ksnip to draw on screenshots.

How to Mark Up a Screenshot

Want to take things up a notch? Here's how to mark up your screenshots so you can literally show us what you mean.

🖌️ Tools You Can Use:

  • Microsoft Paint (Windows): Basic but works! Paste the screenshot, use the brush, line, and text tools.
  • PowerPoint: Surprisingly great for adding callouts, arrows, and text boxes.
  • Preview on Mac: Open the image and click the Markup button for arrows, circles, shapes, and more.
  • Snip & Sketch (Windows): Built-in, lets you draw or type on the image.
  • Skitch by Evernote, Canva, or Figma: If you're feeling a bit fancier.

🖋️ Bonus Tip: Try a Drawing Tablet

If you're going to be doing a lot of feedback and design collaboration, consider getting a drawing tablet (like a Wacom or XP-Pen). These plug into your computer and let you write or sketch with a pen - great for circling things or just quickly jotting down thoughts.

And hey, kids love them too. Great excuse to get one.

Other Creative Ways to Submit Website Feedback

Screenshots are just one of many ways you can communicate what you want. You can also:

  • Dictate your ideas using voice-to-text (see our getting started article)
  • Write things up in Notepad or Word
  • Send sketches: Draw something on paper, snap a pic, and send it in!
  • Mark up screenshots of your existing site if you're doing a redesign or migration

And if you're ready to make specific edits to your site, check out our guide: How to Make Changes

Need More Help?

Don't worry if you're not tech-savvy. That's what goodvibes.website is for. You bring the ideas - we'll handle the code. In fact, under the hood, we're making real code changes in a safe preview environment. Nothing goes live until you're happy and say so. 🙌

So snap those screenshots. Circle what you like. Cross out what you don't. Speak your website dreams into existence.

Your vision is just a screenshot away. ✨

Let me know if you'd like to add images (e.g. sample marked-up screenshots or a diagram of keyboard shortcuts), or link this article directly from another.