A mockup-design-tool built with Processing
Mockups can be used to effectively simulate and visualize graphic design applications. i’ve been using this technique for years to showcase ideas and how they work in urban environments.
I’ve been experimenting a lot with open source design tools for a few years now. I find the idea of breaking away from dependencies on big players like Adobe or Apple and exploring the multiplicity of unusual solutions exciting. For my animated mockups, I tried various open source software (Natron and Blender) and quickly reached their limits. Both solutions are too complex for my simple use case and would have required quite a few more hours of learning.
So I decided to develop my own tool with Processing. The first prototype took me a few hours of development time. I intentionally designed the tool with many constraints and wanted to position the motifs only flat and in color on black and white photographs found on unsplash.com. This was a conscious choice and with a little effort it could definitely be refined. For me it was also an aesthetic decision. In this way the result looks honest: it doesn’t even try to look as if it were real. The tool in this case is therefore also the design system.
Related
![](https://timrodenbroeker.de/wp-content/uploads/2024/08/Portrait_02_web.jpg)
In an age of increasing digital consumption, Hannah, a recent visual communication graduate, explored “Permacomputing”—a sustainable approach to technology inspired […]
![](https://timrodenbroeker.de/wp-content/uploads/2024/08/tools.gif)
Click here to login or connect!To view this content, you must be a member of Tim's Patreon Unlock with PatreonAlready […]
![](https://timrodenbroeker.de/wp-content/uploads/2024/08/demomockup.gif)
Limitations have always been playing a major role in my creative work; I was only able to develop my best […]
![](https://timrodenbroeker.de/wp-content/uploads/2024/08/Tameem_Port_1.jpg)
In this interview, Copenhagen-based creative director Tameem Sankari shares his journey into Creative Coding, combining Processing, Blender, and Adobe CC. […]
![](https://timrodenbroeker.de/wp-content/uploads/2024/07/Sam-2.jpg)
In this post I’d like to introduce you to Sam Griffith, a talented graphic designer based in Detroit, to discuss […]
![](https://timrodenbroeker.de/wp-content/uploads/2024/07/tnd.jpg)
The next edition of the DEMO Festival is already approaching and I am currently developing a brand new talk for […]
![](https://timrodenbroeker.de/wp-content/uploads/2024/07/lenaw.gif)
20 = 1 21 = 222 = 323 = 824 = 1625 = 3226 = 6427 = 128 … »In […]
![](https://timrodenbroeker.de/wp-content/uploads/2024/05/tool.gif)
Hi! In this post I’ll collect case studies and direct links to tools that people have built with p5.js and […]