Template Creation

Template Creation can be accessed in two contexts: from a blank template ("new" mode), or an existing one ("edit" mode). In new mode, only a title placeholder is provided. In edit mode, all existing styles and elements from a saved template are loaded first.

edit mode gif
Opening a template from the browse page in "edit" mode -- save options read "save as new" and "update", apologies for low quality

Template styling options apply to the entire template, and can be modified via buttons on the top control panel. These include options like background colour, length and adding elements. Elements are added based on scroll position. Undo/redo functionality is also located here as it applies template-wide. These control changes to colours, additions, deletions, etc.

control panel gif
A GIF of the control panel

Individual elements can be resized and placed using direct manipulation, as hinted at by the handles. They can be styled by clicking the edit button, which brings up the element edit menu. This menu includes basic operations such as resizing (for those who prefer exact values), and also style options we know from visualisation research are useful to emphasise information, such as layer and shadow to affect perceived depth. Changing element colour is also an important factor, and based on user feedback we included a palette for users to track colours used and apply them to other elements. The edit menu features depend on the element type, for example only textbox elements have options to change text alignment, padding and background colour.

edit menu gif
A GIF of the element edit menu

The template creator mode again comes into play with saving: with a blank template, users have the option to save their template only, while in edit mode, they can save as new or update the template. Users may only update a template if they are logged in as the creator or a collaborator for that template, otherwise they must save as new. Collaborators are defined at the save stage -- users may add any registered user as a collaborator.

save gif
A GIF of the saving process -- "new" mode