19

Ask DN: Best tool for marking up/annotating website frontend?

over 3 years ago from

I work (as a designer) in an agency where we outsource a lot of front-end web development. A big part of the job is providing feedback and tweaks to developer's builds/HTML (always reasonable, promise).

At the moment I just take screenshots in Safari and mark that up in InDesign, send that as a PDF. It does the job but I'm sure there's a better way both for me and the developer. The comment system in InVision is great, for example. [Juntoo](juntoo.co) looks good, but I haven't heard much of it. Something that can annotate mobile/tablet breakpoints would be amazing.

What do you use? How do you like to provide/receive feedback?

17 comments

  • Emile-Victor PortenartEmile-Victor Portenart, over 3 years ago (edited over 3 years ago )

    Hi Mig, we definitely had the issue over here so we developed our chrome extension to fix this issue.

    Have a look at Getmarker.io. The basic idea is to capture & annotate a screenshot and send it directly to your favourite project management tool like Trello, Jira, Slack,… So your dev can have a list of cards with the screenshots and the url where it was taken and some additional comments if you want.

    It saves me a lot of time when I have to send feedback to our front-end. Let me know what you think about it!

    8 points
  • Bertrand Bruandet, over 3 years ago (edited over 3 years ago )

    I never use one of them but check :

    4 points
    • Mig J, over 3 years ago

      Hadn't seen these - thanks! They do require you to upload screenshots/artwork which is the main step I want to skip - it'd be great to just input the dev URL and then mark that up on the fly.

      0 points
  • Tristam GochTristam Goch, over 3 years ago

    I've not used it for a while, but BugHerd worked well for this

    4 points
  • Olaf ChromikOlaf Chromik, over 3 years ago (edited over 3 years ago )

    Visual Web Annotation Tools, here we go:

    3 points
  • Jonas S, over 3 years ago

    I'm not sure if you know that Invision has this Chrome extension called Live Capture? We use it for the type of feedback that you're describing.

    From their site:

    "With our new Chrome extension: InVision LiveCapture, you can quickly grab full-length snapshots of live websites, and add detailed feedback just like you would on a normal screen inside InVision."

    https://www.invisionapp.com/new-features/25/livecapture-bring-the-web-into-invision

    2 points
  • John CanelisJohn Canelis, over 3 years ago

    I use xScope for the guides and Skitch for annotations.

    1 point
  • Devesh Kumar, over 3 years ago

    Evernote Skitch does the basic annotations perfectly. It's webclipper also helps in annotation and syncs with skitch.

    1 point
  • Bhavya Aggarwal, over 3 years ago

    Try using zipBoard(www.zipboard.co) . It is very easy to use and a very handy for sharing quick feedback on html or URLs. See how it works here: https://www.youtube.com/watch?v=HnLBe2Gkx1E 1 project is always free.

    I am a co-founder at zipBoard.

    1 point
  • Chris Gallello, over 3 years ago

    This may not be exactly what you're looking for, but it's similar. Lets you select elements on the page to add comments to, and it grabs screenshots when you add a comment. I built it in 2014, so let me know if you have any questions. http://www.uxcheck.co.

    1 point
  • Janis VegisJanis Vegis, over 3 years ago

    Hey Mig!

    I faced the same problems every day while I was working for a full–time digital agency and that's why I started to make Finch.io – Finch allows you to fine–tune any live website's design in the browser. You can create different versions of your website and share them with your team. The best part is that developers will only get what they need – pure CSS code. For example, when you edit a heading's colour, line–height and character spacing, in the background Finch translates these changes into CSS code and generates a list of all code changes.

    A couple of weeks ago we launched private beta and currently we're developing commenting functionality – you'll be able to attach a comment to a particular element and specify which breakpoint(s) you're talking about.

    If this sounds interesting, leave your e–mail on Finch landing page or hit me up via janis@finch.io to get an early access :)

    1 point
  • Juan J. RamirezJuan J. Ramirez, over 3 years ago

    Snagit

    0 points
  • Derrick GriggDerrick Grigg, 3 years ago (edited 3 years ago )

    A little late to the game but PageProofer is a great option for what you are looking for. It works similar to InVision except it's built to work on websites not static images. It works across all major browsers and devices from desktop down to phone size and fully supports responsive websites. Full disclosure, I created PageProofer after years of dealing with exactly the issues you outlined.

    0 points