Create an Annotated Webpage : 3 easy ways to do so

Hi all, my name is Farid and I have been annotating webpages for the past 10 years as a UX/UI designer. In this article we will discover the top 3 ways how you can annotate a webpage. We will cover.

We will discover:

1. How to annotate a webpage via a simple browser extension like Beep (the easy way)

1. How to annotate via screenshots (the old school way)

2. How to annotate using editing tools (the complicated way)

The reason why I am showing all three is because we all have different tastes, and can prefer different solutions.

1. How to create an annotated webpage using a chrome extension like Beep

Let's start with my preferred solution. This is a tool I built myself since I had to annotate often and I build it to do this better than any other tool.

1. First you need to install Beep for Chrome or other Chrome based browsers

2. You have to sign up

3. Once you signed up you can go to literally any webpage you want to annotate and click Alt/Option + C to create an annotation

4. You can create as many annotations as your heart wishes💗

5. After you are done creating your annotations, you can easily share them with anyone by copying a link for annotations.

2. How to annotate via screenshots

This is the old school way to annotate webpages but still loved by many professionals. I personally am happy that there are now more convenient ways to do that, but in case your heart still wishes to do it this way, here is how:

1. Open a screenshotting tool of your preference. On Windows there is a default tool called "Snipping Tool", you can simply open that. On Mac you can use hotkey Shift Command 4 to take a screenshot.

2. Once you have taken the screenshot you can draw/annotate on them, both apps (Windows or Mac) allow you to draw on them.

3. Now it is time to save them. Save the screenshots to your desired folder

4. Next open a document (word doc for example or any other tool you use for documents)

5. Import your images into that document and voila! You now have a document with all of your annotations. Feel free to send it to anyone

3. How to annotate a webpage via editing tools like Photoshop or others

So, this option is a bit more advanced and also more complicated, but the advantage over screenshotting option is that you can annotate on the whole page without adding many screenshots one by one.

1. First save your webpage as a pdf. To do so you can click Ctrl + P (print) but instead of printing in the destination select save as pdf.

2. Next step is to open this pdf in a editing tool like Photoshop or others. You could also do so in just a presentation software like Power Point

3. For this step you need to be familiar with the tool you are using. For example if you know how to use Photoshop, once you have imported that pdf you will know how to annotate and draw on it. The same goes for other tools you are familiar with.

4. Once done you can save your file as a pdf again. And voila! You have a pdf file with all the annotations you need.

So here you go, three easy ways to annotate anything. If you are a beginner I advise you to use the easiest option which is Beep.

I hope this was helpful!