How to draw over any website

During the process of building website we sometimes need to quickly draw something over a page to mark something we would like to change or to express our thoughts about an element. Usually it would involve taking a screenshot of given page, copy it into our favourite image editor, add whatever we wanted to add, save and email the result to our collaborator. Lots of time consuming steps. Fortunately we can simplify this process by using Markup.io – free service dedicated to drawing over web pages.

Markup.io - draw on any web page
Markup.io – draw on any web page

How does it work?

Markup.io uses a bookmarklet you add to your web browser. After you navigate to the page you want draw over, you press the bookmarklet and you get some overlay options displayed in the right top corner.

The Pen tool is Markup.io’s swiss army knife – you can draw ellipses, rectangles and arrows easily. If you want to mark an area, you can use Rectangle tool or Ellipse tool. Arrow tool is perfect if you need to point at something. Using Line tool you can underscore interesting things. You can easily choose line width and style by using slider and predefined styles box. The tool allow you to have separate settings per shape. If you need to add any text, you can do it via Text tool – in this case the line width slider serves as font sizer. If you made any mistakes and you would like to delete something, you can do it just by selecting the shape and pressing delete on your keyboard. Moving things around is very simple too – you just click shape to select it and then drag it to desired position.

Markup.io provides you with convenient keyboard shortcuts for all of it’s tools, as well as keys for Select All, Undo, Redo, Save and Nudge. You can view the help list of key bindings anytime by pressing Shift + ? or by pressing small icon at the bottom of the Info box.

Markup.io - publishing the markup
Markup.io – publishing the markup

Once you finished drawing, you can simply share the result with your collaborators by pressing Publish button and sliding the green button to the right – you will get a link to the page with your drawing that you can send over IM or email. Once the other person gets your changes, he can respond to them in visual way using your drawing or starting from scratch.

In my opinion Markup.io is missing one thing – I would like to be able to display an overlay drawing over my website if I want to – e.g I could draw that big arrow pointing to Facebook likes or mark some other interesting button. User should be able to dismiss it easily (by pressing Esc or Space). Let’s hope this feature will be implemented at some time and there is gonna be WordPress plugin done as well. You can submit your own ideas from the Markup.io main site – there is Feedback button on the left edge of screen.

If you prefer doing changes to your website visually you should definitely give Markup.io a try – it really simplifies the process of making notes and drawing over the pages.

You can try Markup.io here for FREE!

One Comment

Add a Comment