With branding increasingly moving toward motion, generative tools have proven to be a powerful and future-proof solution. But what exactly are generative tools? And how can creative agencies and brands make use of them?
In simple terms, they’re custom-made digital tools that can create an infinite amount of visuals, animations and other media. These tools allow brands to produce unique content quickly and easily, saving time while ensuring consistency and offering wide creative freedom. The challenge here lies in finding the right balance between technical possibilities and aesthetically curated output.
Designers and coders together can create beautiful systems – algorithms – that translate user input into visual language while respecting the restrictions of commercial branding needs. Ultimately the goal is to define a rule system that will generate the design, instead of designing the output itself.
In this article I will break down my own experience as a designer who transitioned into creative coding and also give concrete examples of what I am offering as a service to agencies now. Also I want to share insight and provide help for creative agencies that want to work with creative coders but have difficulties planning and budgeting such a collaboration.
The input-output model by Tim Rodenbröker and Patrik Hübner.
What is Creative Coding?
The term itself is very open and you will get different answers depending on who you talk to. I personally use it to describe a method of using code through the creative lens of a designer. Code becomes the fabric, the tool we work with and it opens doors to creating new things and generative tools that live outside the boundaries of the traditional designer’s toolkit.
I view it as an explorative method allowing me to playfully navigate and adapt to new technologies, an experimental playground where code becomes both tool and artistic device. It will lead you on an artistic journey with uncertain and unexpected outcome. In that sense creative coders are pioneers operating at the frontier of new technologies and exploring their potential.
The term is linked very closely to the field of Generative Design. If we define Creative Coding as a practice inside the realm of speculative design than Generative Design can be seen as its commercially applied counterpart. Ultimately both of these practices fuse techniques and concepts from the worlds of design and code with the goal of creating new things.
As a creative technologist drawing from both of these worlds — design and code — I develop custom-built generative tools that allow brands to create visuals, animations and other media aligned with their identity. These tools generate unique content based on the brand’s core values, offering a flexible way to produce assets for social media, websites, print, exhibitions and more.
This approach helps brands to easily create consistent and dynamic content, saving time and effort while maintaining their unique voice.
The Generative Tool (schema)
Adding the Generative Tool to your Workflow
Understanding the project workflow and making it work for all sides — brand, designer, coder — is vital for a successful collaboration. Drawing from long-term experience as a freelance designer and coder I divide projects into the following phases:
Phase 1 — Exploration (Iterative Prototyping)
The first phase involves rounds of prototyping to explore technical functionality, style, and creative potential, resulting in a minimum viable product (MVP). Each round, lasting about 1-2 weeks, is priced at a fixed rate. In these rounds, we hold bi-weekly meetings for feedback, allowing clients to steer the project and determine the budget and timeline by deciding the number of rounds to proceed with.
The main artistic impulse comes from the creative agency, usually represented by an art director or designer. Based on their experience with their client, they usually have an intuitive understanding of how the visual language for the brand should look and feel like. These experimental rounds serve to translate this understanding to an interactive environment governed by code and algorithms.
It is the creative coders task to show the potential and the possibilities of coding applied to branding and to find interesting and innovative solutions within the client’s and designer’s vision.
Phase 2 — Refinement / Final Development
Once the final prototype is selected, we move to the refinement stage. Here, the user interface is polished, and the tool is prepared as a fully functioning website. This phase is offered at a fixed price, ensuring clarity in expectations and outcomes.
For this phase the bulk of the work lies on the side of the creative coder. It is also possible to integrate a custom designed user interface that represents the brands visual language. Usually the generative tool is developed for a desktop environment, since we primarily want to use it to generate assets.
Phase 3 — Testing / Adjusting /Continuous Development
In the final step, testing and adjustments take place. While the tool is in use, ideas for improvements and additions will naturally arise. Follow-up projects can be initiated to adapt the tool for new campaigns or initiatives by the brand, ensuring its continued relevance and effectiveness.
Pricing and Timeline
Initial Consultation
The first consultation is free and allows us to understand the client’s needs and brainstorm ideas. Afterward, I present a tailored proposal, ensuring we align our expectations and goals.
If you’re curious about how a generative tool could work for your brand, let’s brainstorm! Feel free to reach out, and we can explore the possibilities together.
Licensing and Usage Rights
Depending on the use case, the generative tool’s licensing can be adjusted. If the tool is used only for a specific campaign, the application will naturally be limited. However, if it forms part of the core elements of a Corporate Identity, we can define usage rights similar to traditional licensing models—restricted by time, geographical scope, and exclusivity, based on the client’s budget.
After the initial term, extended or unlimited usage can be negotiated.
Iso Type Generator developed for Future Campus Ruhr.
Illustations in use on the website.
If you are a creative agency, collaborating with a creative coder can open completely new directions for innovation and creativity. Here are several strategies on how to effectively integrate this strange animal into your workflow:
1. Plan for a research budget
2. Kick-off workshop
3. Go through the coder’s archive
4. Structure your project in tiers
5. Expectation management, scope, deliverables
6. Have fun :-)
p5.js Design Tools Directory
A selection of generative tools built with p5.js and Processing, curated by Tim Rodenbröker:
Design Tools
Expand your Toolbox: Creative Coding as Design Discipline
Keynote slides of a talk I held at Mutabor Academy on how to integrate creative coding to the commercial branding world.
Expand your Toolbox