This site is intended for use in teaching graphic arts print and web production workflows by “gamifying” the steps. The site includes two pages — one for a web page in HTML/CSS and the other for a magazine to be printed on a web offset press.
The “puzzle pieces” on each page represent workflow steps in the creation of a web page or print document. Drag the pieces up to the red line to create a logical workflow. When the correct card is placed after each step, a chime will sound.
The production of print products is often described as a “process-resource model.” A process is an activity like printing or folding, while a resource is a physical object, such as a plate or a sheet, or a digital unit such as a file or a parameter set. Each process requires input resources and generates at least one output resource. Sometimes several processes are combined to a process group. Thus, processes (or process groups) and resources alternate in a workflow. The processes in this game are yellow, the resources are blue and process groups are gray.
When the page is reloaded, the cards will be reshuffled to new starting positions. However the “Print Page” can be used to print the completed page or save it as a PDF.
Printed versions of the workflow cards were developed by the first author for use in his classes at the Hochschule der Medien, Stuttgart, Germany, and Ryerson University, Toronto, Canada.
To customize the cards for a specific workflow, visit the Developer Page.
We like to thank Živko Pavlović from the University of Novi Sad. He created the puzzle “LAMS Flexographic Plates” together with his students and translated some of the puzzles into Serbian.