What we were solving
When switching to HTML wireframes from static paper ones, we noticed that we lost the ability to send and receive client notes as they were now looking at their wireframes solely on a computer screen. We needed a way to place annotations on a website, that could help guide a user to understand elements that weren’t fully built out.
This started out as a “what if there was…” idea over lunch one day with a colleague of mine. Later that day, he had built his idea in keynote to illustrate the action that he was looking to create.
To make this work for our needs, I created a listener that would browse the page looking for a unique attribute. When it found this, Metaframe would append a marker number (“4” for example), and also set the text located in this attribute in a list on the left hand side.
We made the right hand drawer collapsible, and the numbers able to be toggled on and off in order to see the wireframe as it was meant to be seen.
Overall, Metaframe received large amounts of praise from the web community when it was presented at Refresh Pittsburgh. It has since evolved to include a PHP backend for adding comments and storing threads.
Metaframe has also been mentioned on several “useful tools” lists and even a published book titled Learning Responsive Web Design: A Beginner's Guide.