When Developers Meet Designers: Lessons from Vibe Coding and the Art of Creative Expression

Have you ever wondered what happens when you mix climate data, artificial intelligence, and a group of creative people? I recently found out at a “Future Fridays” workshop, a collaboration between infogr8 and the Data Visualization Society. The goal was to experiment with AI-assisted creative coding to visualize climate data.

It was a fascinating experience in which data creatives and designers—along with a few developers—came together. We wanted to create visuals that do not just display numbers, but actually spark emotion and inspire action. In this article, I’ll share what I learned about bringing data to life and why you, as a developer, should care about AI-assisted coding.

I. What Is Creative Coding?

So, how can we define creative coding? Simply put, the goal of creative coding is to create an expressive animation that resonates emotionally. It’s not just about function; it’s about feeling. A key characteristic of this approach is the use of randomness. But how do you get from a simple idea to a complex animation?

From Idea to Animation

The process usually looks like this:

You start with an idea. Then you want to turn that idea into a simulation or an animation. The “bridge” between your thought and the final result is code generation. Here, programming becomes a method of producing art.

Even if you do not know a specific language, AI models can help you write the code. This is where we get the term “vibe coding.” It means you accept the code the AI generates as it is, purely to get the “vibe” or look you want. In real life, you may want to check the generated code, but we won’t focus on that now. The code in this context is a medium—a tool that creates shapes, text, or images. The use of AI models lowers the barrier to entry significantly.

The Magic of Randomness: Perlin Noise

One of the most important algorithms in creative coding is Perlin noise, created by Ken Perlin.

Its magic lies in its ability to transition smoothly between points. It avoids those sharp, unrealistic changes that would result in unnatural textures.

It creates organic-looking randomness that feels natural to the human eye. This allows for:

• Complex textures.
• Natural-looking landscapes (rolling hills, mountains).
• Weather effects like clouds, rain, water, smoke, and fire.
• Fluid movements like waves or dust particles.

In texture synthesis, Perlin noise helps you avoid boring repetition. It allows you to use your creativity not just in selecting the right algorithm, but in how you apply it to make something unique.

Defining the Practice

To formulate it another way, creative coding is the practice of using code as an art and design tool. It produces expressive outputs like visuals, music, and interactive experiences.

Here are the key aspects you should know:

• Artistic Focus: Unlike traditional programming, which prioritizes functionality, this prioritizes aesthetics, beauty, emotion, and creative expression.
• Diverse Applications: It’s used in digital art, game development, live visuals, art installations, projection mapping, and advertising.
• Interactive Experiences: You can create pieces that respond to sound, data, or user input.
• Creative Problem-Solving: It encourages you to find unconventional solutions and develop your creative thinking.

II. Why Should a Software Engineer Care?

You might be asking, “I’m a back-end developer. I write logic. Why do I need to know about creative coding?” That is a fair question. Here is why it is worth your time:

• New Perspectives: It helps you explore new ways people perceive data. You can create designs that do not just function but encourage the audience to reflect and think deeply about a topic. You can bring this understanding of “emotional engagement” and creative coding back to your daily work.
• Better Front-ends: If you want to move beyond back-end-heavy apps, this is key. Creative coding teaches you about aesthetics, color theory, and choosing the right typefaces. It helps you make harmonious user interfaces that give your customers an extra artistic touch. It’s one step beyond what you learned in computer science school.
• Broadening Knowledge: It is important to know what is possible. You do not need to be an expert, but creating a mental map of these tools is useful. When you eventually need a form of creative expression, you will know exactly where to look.

III. Implementing Tools

While you can use almost any language for this, some frameworks or libraries are built specifically for creative work. Famous examples include Processing, p5.js, and openFrameworks.

Why p5.js?

For our workshop, we focused on p5.js. It is a client-side JavaScript platform for artists, designers, and students. It is based on the core principles of Processing but built for the web.

The Features:

• It is a JavaScript library, meaning it runs directly in the browser.
• It integrates easily with HTML/CSS.
• It allows for real-time collaboration.
• It is very accessible for beginners.

The Weaknesses:

• It has performance limitations for highly complex projects.
• It depends on the browser’s capabilities.

Basically, p5.js is an implementation of the creative coding concept. You do not need prior knowledge of complex visualization libraries. You can start immediately.

Why it’s ideal for beginners:

• It is open source and beginner-friendly.
• It supports randomness and noise (like the Perlin noise we discussed).
• It is perfect for animations.
• You get immediate results via the online editor.

You can find tutorials on p5.js’s website or inspiring projects on OpenProcessing.

Using AI with p5.js is surprisingly easy. You can instruct an AI model to generate code, paste it into the p5.js online editor, and immediately preview the animation.

With p5.js you can:

• Build shapes and patterns.
• Create frame-based animations.
• Attach input data (such as a CSV file).
• Add sound or video.
• Play with text and images.

IV. How to Do creative Coding?

Let’s look at how we actually approached the creative process during the “Future Fridays” workshop. The steps were accessible even if you aren’t a designer and are quite similar to those that software developers or data scientists are familiar with.

1. Foundational Work

• Goal & Audience: Our goal was to create an engaging animation to make climate data approachable for a broad, non-scientific audience. The target medium was an Instagram Story. We needed a narrative that was simple, clear, emotional, and thought-provoking.
• Data Source: We explored various climate datasets. Many participants focused on sea-level rise. I chose snow measurement data from Switzerland (open government data).

My hypothesis was simple: Warming winters lead to shorter, less snowy winters.
My message became: “The snowman is shrinking.”

• Storytelling & Constraints: The challenge was communicating this idea simply. The animation had to fit Instagram’s dimensions and last about 30 seconds to keep the audience engaged. The goal was to leave the audience surprised and reflective.

2. Cleaning & Analyzing the Data

I started by cleaning the data and creating basic charts. I noticed that high-altitude stations had more variation in snow height, but lower altitudes were more consistent.

However, I couldn’t detect a clear trend without additional data necessary to draw a scientifically solid conclusion.

Here is where my process differed from normal development: In a typical project, analysis comes first, then insights. Here, I was driven by my personal experience with nature.

I acknowledged that this project wasn’t a scientific paper. I simplified the data processing to fit the narrative, while ensuring I didn’t present misleading conclusions. It was a deliberate balance between accuracy and storytelling.

3. Sketching Designs

• Mood Boards: We created mood boards to collect visual inspiration. I learned that a mood board isn’t just random images. It defines the “look and feel” of your concept, including font pairings and color palettes that match your emotional tone. We used OpenProcessing to find unconventional shapes and effects.
• Sketching: Sketching helps you experiment with different design options. I mapped the median number of snowy days to the size of a snowman. More snow equals a bigger snowman. The selection of winter colors was key to reinforcing the theme.

There are plenty of digital tools available for sketching. I realized that choosing the right typeface is essential: it harmonizes the design.

This process is iterative; every step builds on the previous one.

4. Creating & Delivering the Visualization

In the final phase, I turned my sketch into a simple animation.

This involved vibe coding. I refined AI prompts to get the design I wanted and tested them in the p5.js online editor.

Unlike normal coding, I didn’t focus on reading or writing every line myself. The focus was on the results. Many designers did the same. As most of them weren’t developers, they couldn’t judge the code for correctness. You need to be precise in formulating your requirements to get the right results.

I checked the constraints (Instagram safe zones) and finalized the video. In the real world, you’d typically show your progress to the client regularly to gather feedback. This helps ensure you’re on track, adjust the design if needed, and keep the client engaged.

For our Future Fridays workshop, instead of client presentations, we shared the creative process and the final product within the group. The result? A short video animation for Instagram.

V. Comparing the Results

This was the most interesting part: comparing the work of designers versus developers.

How were the designers’ results?

• Most had little to no coding experience.
• They showed incredible imagination and creativity. It proved their deep experience with the creative process.
• They were fearless: eager to try AI code generation.
• They were curious, experimented a lot, and had a lot of fun.
• They had great patience, iterating until the result matched their vision exactly.
• Their work captured the emotion and urgency of climate change through color and composition.

How was my result, as a software developer?

• I had a strong concept, an appealing visual design, and a thoughtful use of texture.
• I understood the code perfectly and could read it easily.
• However, I had less patience with iterations. I delivered a “pragmatic” result due to time constraints (do we developers always leave delivery for the last minute?).
• My data storytelling was less clear than theirs.

The most valuable part for me was seeing the designers’ creative process, learning from their thinking, and understanding their decisions.

VI. Interpreting the Results

What does this tell us?

I realized that while vibe coding (prompting AI) wasn’t difficult for me, the designers delivered a result with more emotional impact.

Designers mastered the art of creative expression. Their experience, creativity, workflow, and affinity for aesthetics gave them an edge. They knew instinctively which colors and shapes would work and what designer tool to choose.

Developers are better at programming and are more pragmatic. However, they think less about the emotions a visualization might provoke.

But my takeaway is that developers can catch up. Our technical foundation is strong. We can learn to make better visualizations by reverse-engineering existing art and learning to see with a designer’s eye.

VII. Is AI Replacing Professionals?

Is AI going to replace developers, designers, or data storytellers?

No, at least not at this stage.

AI tools and methods like vibe coding don’t replace skilled professionals; they amplify them.

• Designers use AI to execute complex ideas they couldn’t code before.
• Developers use AI to bridge the gap in visual creativity.

The emotional richness, taste, and art direction come from you. They are unique to the individual. Creativity and the ability to spark emotions are still your privilege. An AI cannot come up with that human spark by itself.

If you are an experienced professional, AI is an indispensable tool to master in order to enhance your work.

If you are a beginner, you need a solid foundation to judge the results AI gives you. Without the basics, you will be left guessing.

VIII. Combining Approaches: Giving You Power

I see a lot of potential for creating truly powerful, engaging, and effective visualizations when you combine the “Design Vibe” with “Developer Logic.”

We currently have two very strong skill sets:

• Software engineers’ strengths: We bring analytical thinking, critical code analysis, automated tests, API integration, real-time data delivery knowledge, scalability, and performance. We make things work at scale and sometimes take a pragmatic approach.
• Designers’ strengths: They bring the “perfect” aesthetic, emotional storytelling, a design that reflects the nature of data, curiosity, and deep creativity. They make things feel right.

Both groups start with a concept, can analyze the data, know their audience, and practice iterative implementation.

Why not let them work together—for instance, when building an interactive web application with advanced graphical requirements.

How to Benefit from This Combination

A Combined Approach for Stronger Visualizations

When designers and developers collaborate, the result is a more effective and engaging visualization. Designers bring expertise in visual storytelling, while developers ensure technical reliability. By working together early, both can test ideas, identify potential issues, and ensure a seamless experience.

How to Work Together

• Designers: Define the emotional journey of the user. How should the experience feel—surprising, reassuring, or empowering? Reflect this in the design and interactions.
• Developers: Ensure that interactions are fast, responsive, and stable, even with large or complex data sets.

Why This Works

• Balanced Results: The final product blends emotional engagement with technical robustness.
• Faster Problem-Solving: Issues with design or performance are detected early, saving time and reducing rework.
• Better Engagement: User interactions—whether hovering, filtering, or exploring data—should feel like a guided journey, enhancing the experience.

This approach keeps your users engaged and in control, benefiting from a smooth and thoughtful experience created by both creative and technical strengths.

Improving as a Developer Without a Designer

If you’re working without designers, you can still improve your visualization skills by learning from design principles. Study concepts like color theory, visual channels, hierarchy, and layout, and explore visualizations you admire.

Reverse-engineer the designs: What choices did the designer make? Why use one technique or form over another? Understanding these decisions helps you improve your own work.

Experiment and explore new approaches when time allows. You don’t need to become a designer, but having a grasp of fundamental principles will help you create more effective, engaging visualizations.

A Final Thought

The workshop taught me that code is more than just logic; it is a medium for expression. Whether you are building a massive back-end or a small web animation, remembering the human element makes your work better.

So, here is my challenge to you: Next time you have a free afternoon, open up p5.js, prompt an AI to give you some “Perlin noise code,” and see what happens. You might just surprise yourself with what you create.

---

Further sources:

Snowman animation turned into a mini web application

Free eBook – my data visualization checklist