Teaser – animated flipbook of the 12-page accordian fold brochure in fast forward
Process
Based on multimedia sources, we conducted extensive research to filter out relevant topics and interesting stories, which we then organized clearly through visual mapping.
We then developed a concept to convey the collected content through an engaging guide. Additionally, we sketched appropriate visualization models based on the data and information, with the aim of either adjusting existing representations or developing new compositions.
Based on a concept that we developed through our research and considerations on storytelling, we sketched out a total of five double pages. We then focused on various elements—whether diagrammatic visualization models, illustrations, icons, or content texts. This allowed us to insert the individual elements into the respective layouts step by step and adjust them again, both in their entirety and in terms of color atmosphere.
Since we were working with individual DIN A3 pages, we also created test prints to check the effect of the scaling.
Since we were working with individual DIN A3 pages, we also created test prints to check the effect of the scaling.
Here you can view the individual visualizations in detail. We have taken care to use a consistent design and color scheme throughout.
Note – The icons used are from Google Material Icons and are provided under the Apache License 2.0. We have neither designed nor modified them ourselves. In addition, all diagrams and maps are based on previously visualized representations from the internet, allowing us to focus on formal aspects.
Character design created by Elena de la Antonia.
Note – The icons used are from Google Material Icons and are provided under the Apache License 2.0. We have neither designed nor modified them ourselves. In addition, all diagrams and maps are based on previously visualized representations from the internet, allowing us to focus on formal aspects.
Character design created by Elena de la Antonia.
Since we designed a brochure, we also created the front and back covers. From a series of variations, we ultimately attempted to create an abstract allusion to prisons and symbolize the fictional narrator with the help of an orange butterfly.
In addition to the analog brochure, which was the main focus of our project, we also worked on a digital extension. Our concept was to not only look at prisons nationwide, but also to make international comparisons, which we visualized using different characteristics.
Result
For the implementation, we jointly designed the layout of a 12-page brochure, including the cover and back cover, and developed a suitable system in terms of form, font, and color.
At the same time, we designed a digital tablet application and created an interactive prototype. In doing so, we prepared additional content related to the brochure and conveyed it in an experiential way through various interactions.
| Concept development | FigJam |
| Accordion fold brochure | Adobe Illustrator |
| Tablet application | Figma Design |
| Documentation | Figma Design |
Printing and binding the brochure ultimately proved more difficult than expected. The height was 420 mm and the width 297 mm for each of the 12 pages that had to be bound together. The reason for this was that we created a leporello, in which all pages are folded into a bundle. In addition, we could only print individual sections, as the maximum print width was 1600 mm. With a lot of effort and hard work, we finally cut the three sections to size, glued them together, and folded them.
For the tablet application, we created an interactive prototype in Figma. It consists of a world map as a landing page, where you can click on different countries to display key data about prisons and the respective country. In addition, you can dive deeper into the information to discover further details, which are supplemented by an image carousel.
If you would like to see more projects I did at university, feel free to check out my university's digital exhibition.
| More information |
at the university's digital exhibition
|
Continue to the next project
