4

At a high level, I will be managing a web design team that will be working with onsite developers on a large ASP.NET project developing website, mobile website, and mobile app versions (Android and Apple), and even a Windows version, of a software product. My question is as follows:

Notes need to be passed to the developers with each UI design, such as "validate first name field to max 12 characters" or "hide this element when...". I haven't seen a team have a really good way of adding these notes to designs. And, with making 10 variations of a design for mobile, web, different resolutions or platforms, etc. that just makes this problem more repetitive because every recipient needs those same notes so ideally one would want to centralize these notes. Putting them in Word seems old-fashioned but putting them directly on the page makes for a cluttered design and some developers even think the note is for the UI itself!

What's the best way or program for incorporating annotation?

Is there a design program that allows for this?

  • All your questions seem far more about project management and software recommendations than graphic design. You may want to explore softwarerecs.stackexchange.com ux.stackexchange.com and pm.stackexchange.com I'm not seeing a great deal of connection to graphic design in your questions. But that is, of course, just my perception. I may be wrong. – Scott Oct 28 '15 at 5:57
  • It is just my idea. Generally if we want to pass any guideline to designers we create style guides. why don't you create something similar to developers? name it dev guidelines. state all the rules and guidelines in it graphically. It might work. – bharat Oct 28 '15 at 7:01
  • I think you deliver at least 2 versions of each mockup. One with comments and one without for each. It's an easy workflow, just keep all comments in a layer group and save twice, hiding the comment layer group the second time you save. – Dom Oct 28 '15 at 12:21
2

You don't specify what's the file format of the proof/mockup.

PDF

But one good way to add notes is to use a PDF and add "comments" with Adobe Acrobat Pro. You can point out exactly on the page where the change needs to be done and add a sticky note with instructions. It doesn't clutter the layout because you can choose to show the comments/review on a separate panel or within the page.

What is useful is you can print the comments/review on separate sheets if you need to have a printed copy.

There's also a little checkbox for each comment and you can keep track of what was done or not, and even add questions; it keeps the name of the user for each comment.

You can also draw shapes, lines, circles, etc.

comments with PDF

annotations acrobat pro pdf

Some info about it:

http://msedits.co.uk/comments-and-other-pdf-mark-up/

Images

DropBox also has a comment system online but it can be confusing to work on many versions. It's not super precise.

dropbox comments

Finally, there's also HightailSpaces that can be convenient for this. It works a bit like the commentson a PDF but you can use JPG or image files as well, and keep track of the revisions and versions.

hightails comments

Here's a question with details about HightailSpaces:

I have to get a large number of photos approved for my project. Is there an online tool or platform that can help me with this?


You can also look online for designer tool to approve proofs, there's a few available.

I guess it would be easier for designers to have a screenshot of the website/UI if you need to add notes, and use one of the option above or similar.

  • 1
    Yup, PDF comments are great for this, and the comments can go both ways e.g. for requesting changes or highlighting possible issues to the designer. If it's a web mockup, it's common for the PDF to be a PNG (pixel image so you can check details are indeed visible), often behind a photo of an example of the intended device (but that's usually more to impress management, developers might find it unnecessary) – user56reinstatemonica8 Oct 28 '15 at 13:00
  • go-meek: Thank you very much for your detailed response. The original format, by the way, would vary depending upon the platform -- such as HTML for web but something else for mobile. I actually have another (unanswered) post here on his site asking for suggestions for software that best serves all platforms. Originally, I had tried posting that together with this question, but the moderator made me split them, leaving you confused on that side of things, sorry. – stackonfire Oct 28 '15 at 22:11
  • @stackonfire I don't know any easy way to do this with html besides exporting the pages into something more "flat" like a PNG or a PDF. It adds some challenges to use html directly because you need to find a software that will add these comments as some kind of extra layer that will also follow the "html/css layer" below it without interacting with them. I know there's plugins for similar things like this but nothing really solid and reliable or easy to share to my knowledge. If a collaborative tool for websites like this doesn't exist, you could really get a lot of fan$ by creating one ;) – go-junta Oct 29 '15 at 1:26
1

We used to pass notes in PSD, PDF or Word, but it was rather cumbersome, so we ended up building our own online job spec system. This is what our markup system generates as project documentation, for passing markup notes between designers and developers - https://www.oss-usa.com/TSAS_sample/

We define front end user experience and CMS functionality, so that everyone is clear on requirements; everything above mark up is basically an online form that contains all relevant information about the project. Markup areas are done by uploading a screenshot or JPEG from PSD and dragging a rectangle around it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.