What is it?

MAST is an annotation tool designed to facilitate the annotation of documents containing visual language - think pictures, advertising, comics, manuals, etc.

This type of document contains multiple layers of information. Information-wise, however, the data is ultimately visually encoded - to put it simply, it's encoded as pixels. Hence, work in MAST is based on regions (collections of pixels), which users can tag using custom annotation taxonomies (in MAST, schemas).

Furthermore, annotations may be associated via relations to other annotations, or even to other relation instances! This allows the use of complex grammars to help structure the information contained in these documents as de-facto languages - visual languages!

I was responsible for the final concept of the tool, including designing the UI&UX, and developing the tool itself. MAST is a distributed application (client-server architecture) built in Java, PHP, MariaDB and a sprinkle of JavaScript.

In this page you can see how MAST's UI moved from an initial, wireframe-based phase of participative design to a fully operational Java application.

From Wireframes (Balsamiq)...

Here are a couple of wireframes I designed to illustrate my ideas for one of the more complex UI's of MAST, focused on letting users define relations between entities (i.e., annotations or other relation instances).

...to User Interfaces (JavaFX)

Here you can see parts of MAST's final UI, implemented in JavaFX. Screenshots 1 and 2 correspond to the wireframed screens (above); screenshot 3 is the UI where users create and annotate regions on the documents, whereas screenshot 4 is MAST's main screen, displaying the documents currently available for the user.

Screenshot 1 - Creating a new relation using a the annotated regions of a document.

Screenshot 2 - Visualizing the diagram of an existing relation.

Screenshot 3 - Defining and annotating regions in a document.

Screenshot 4 - MAST's main screen, showing documents ready to be annotated.