A mockup-design-tool built with Processing

Published by Tim on Thursday November 18, 2021

Last modified on September 25th, 2023 at 22:44

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.

YouTube

By loading the video, you agree to YouTube’s privacy policy.
Learn more

Load video

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

Preview: When Computers create Collages

2023-12-01 Today I want to share with you a first prototype that will be the basis for a new course […]

Preview: Random Compositions

One of the most exciting and maybe even unsettling discoveries in the learning process of Creative Coding in Graphic Design […]

What Creative Coding can teach you beyond crafting visuals

Learning to code has had a bad reputation for ages. Many people have the impression that it’s all about acquiring […]

I’ve updated my Mockup Generator

For my students at Elisava, I have updated my mockup generator. Now its possible to load animations in the .gif […]

How I built myself a Digital Garden

It was a red hot day in July 2023 when I met Alex Muñoz for breakfast in the morning at […]

Instagram-Live with Lena Weber

I met Lena Weber at a workshop at International Assembly, after that we became friends and she helped me over […]

A conversation with Raphaël de Courville

A few weeks ago I had the honor to meet Raphaël de Courville in person at the audivisual jam at […]

New work for the New York Times

Once again, I had the honor of illustrating an article for the New York Times that I myself am very […]