{"id":2236,"date":"2011-11-06T02:35:43","date_gmt":"2011-11-06T06:35:43","guid":{"rendered":"http:\/\/www.red-sweater.com\/blog\/?p=2236"},"modified":"2011-11-06T02:54:17","modified_gmt":"2011-11-06T06:54:17","slug":"visual-design-proofmarking","status":"publish","type":"post","link":"https:\/\/redsweater.com\/blog\/2236\/visual-design-proofmarking","title":{"rendered":"Visual Design Proofmarking"},"content":{"rendered":"

I enjoyed Jason Fried’s “Quick little UI feedback tip”<\/a> in which he alludes to his use of a graphical shorthand for providing feedback on user interfaces. I like the idea of something akin to literary proofreading marks for quickly conveying change suggestions in the design process.<\/p>\n

He describes the evolution of his own shorthand for annotating one particular kind of design feedback: the vertical misalignment of an element. He started out with a thin line indicating the vertical white space above and below the “misplaced” element, but settled on a more exaggerated use of squares above and below, to express how different the visual whitespace weights are.<\/p>\n

\"NewImage\"<\/p>\n

While I applaud the thinking that went into Jason’s conclusion, it feels a bit too clever to me. I think it would be tedious to bother calculating and drawing perfect squares above and below the target text, and the squares on their own convey little information about the recommended design solution.<\/p>\n

Instead of skirting around the recommendation, why not annotate the image with an overlay that shows the space that a corrected element might occupy? In this case, the implication is that the text should be altered in some way so that it forms a middle aligned element within its field:<\/p>\n

\"Annotation<\/p>\n

<\/span><\/p>\n

With this notation, the green highlighted area represents the minimal vertical space that both contains all of the targeted element, and is middle aligned in the context of other elements. I believe this highlights, as well as Jason’s perfect squares do, that the current text is out of middle alignment. And like his squares, the degree of misalignment is conveyed by the unoccupied portion of the green band.<\/p>\n

Beyond identifying the problem, it also offers a canonical fix: nudge the existing element, or increase its size so that it’s middle aligned within the green band. The band itself serves as a visual placeholder for a final, properly aligned element. Best of all, this annotation is quicker to make than perfect squares, and easier to verify at a glance that it conveys the intended feedback.<\/p>\n","protected":false},"excerpt":{"rendered":"

I enjoyed Jason Fried’s “Quick little UI feedback tip” in which he alludes to his use of a graphical shorthand for providing feedback on user interfaces. I like the idea of something akin to literary proofreading marks for quickly conveying change suggestions in the design process. He describes the evolution of his own shorthand for […]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[],"class_list":["post-2236","post","type-post","status-publish","format-standard","hentry","category-design"],"_links":{"self":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/posts\/2236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/comments?post=2236"}],"version-history":[{"count":19,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/posts\/2236\/revisions"}],"predecessor-version":[{"id":2255,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/posts\/2236\/revisions\/2255"}],"wp:attachment":[{"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/media?parent=2236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/categories?post=2236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redsweater.com\/blog\/wp-json\/wp\/v2\/tags?post=2236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}