generative tools illustration

Brands in Motion — The Future of Generative Tools

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 creative coding input output system.

The input-output model by Tim Rodenbröker and Patrik Hübner.

What is creative coding?

What is Creative Coding?

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.

What I Offer: Custom Generative Tools

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.

Wirefarme view of a generative tool.

The Generative Tool (schema)

The generative tool workflow, exporting assets and using them accross media.

Adding the Generative Tool to your Workflow

Project 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

  • Development Duration: 2-6 months
  • Cost: €10-30k depending on the complexity, features, and use-case of the tool.

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.

video play button
Isometric illustrations generated with the iso type generator.

Iso Type Generator developed for Future Campus Ruhr.

Website for Future Campus Ruhr that uses generated isometric illustrations.

Illustations in use on the website.

Strategies: how to integrate a creative coder into your workflow?

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

  • Understanding the vastness of possibilities can be difficult if you don’t have a coding background. That’s why an initial research and experimentation phase is crucial and can lead to unseen and strong and innovative results.
  • Specifically plan for this phase and set a budget to it. This could be done at a fixed rate or as a round-based iterative approach. By designating a budget for this phase, you create a framework that helps manage client expectations while keeping experimentation focused and grounded.
  • This allows the creative coder the freedom to explore various approaches and technologies and find the best setup to your project’s goals and your artistic direction.

2. Kick-off workshop

  • Ask the coder for an initial workshop where you pitch your project and discuss first ideas on how this could be realized. Being aware of the possibilities but also limitations of different technologies will affect your whole project.

3. Go through the coder’s archive

  • Many creative coders keep a library – a treasure box – of past projects, prototypes, and experiments. Explore this archive to get a grasp of the potential of creative coding. You can also use it as a resource to offer your clients a glimpse of the possibilities.
  • Building on this vocabulary of things can kick off new ideas and inspire you how to implement new forms of visuals, interaction or understanding of data into your projects.
  • Expanding upon existing prototypes can also lower the research and development costs from the coder.
  • If you are a coder this means that it is vital for you to document your experiments and make them accessible for clients to explore.

4. Structure your project in tiers

  • MVP (Minimum Viable Product): Start with a minimal functional prototype and make sure the core functionalities work as intended. Testing these functionalities might also affect your understanding of the project. Use this early phase for testing and finding the right setup.
  • Experiment & iterate: with the MVP as a foundation you can now explore different designs, visual languages and forms of interaction. A round based approach allows you to give feedback to the coder during this process. You can specifically ask for regular updates, video calls and a documentation of the updated prototypes. This give you variety of options to chose from and present to your client. Working in iterations also enables flexibility in your budgeting.
  • Final output: Refine and finalize one of the prototypes from the experimentation phase into the final product. For this step all artistic choices should already be clear so that the coder can focus on finalizing and fine-tuning.

5. Expectation management, scope, deliverables

  • Being clear about the expectations from all sides – client, creative agency, coder – is a fundamental requirement, especially given the explorative and innovative nature of creative coding.
  • It is vital to ensure that clients have a realistic understanding of what can be achieved within the given constraints of time, scope and money. Regular check-ins, transparent communication, and showcasing progress through prototypes can help managing these expectations. Also clearly define what will be the final deliverable for the project, is it the tool itself? Or a certain number of generated videos, images or audio files?
  • The more clarity you can create between design team, coder and client the more potential misdirections, extra rounds and dead ends you can avoid.

6. Have fun :-)

  • Trying out new things is always exciting. Have fun and make the most out of this process!
  • In a world full of visual overkill, creating interactive and engaging experiences between users and brands really can make a difference.
  • Use this opportunity and let your users have a real impact on the look and feel of a brand. Let them form strong and personal connections that they will remember.

Resources

  • 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