pijl

CodeBusters

Duration:

April 2024 - June 2024

Skills:

Creative coding, workshop design, teamwork, storytelling, educational content development

In collaboration with:

Bernard Lievegoed College Maastricht

Team

Max Presanza (designer), Fu Reinen (designer), Shania Matakena (developer) and me (designer)

For this project, I worked with a team to introduce students to creative coding through P5.js, a visual programming language. Our goal was to help students turn their ideas into digital artworks while developing computational thinking skills.

Design

Problem:

Many students have little to no exposure to coding and see it as something complex or purely technical. This can make it feel inaccessible, especially in creative fields. Schools are looking for ways to integrate computational thinking and digital skills into education, but traditional approaches don’t always engage students in a meaningful way.

Solution:

We designed and delivered an interactive "Art with Code" workshop, where students learned to express their creativity through P5.js, a visual coding language. By connecting programming with art, we made coding fun, engaging, and accessible, helping students create their own generative digital artworks while developing logical thinking and problem-solving skills

Our project CodeBusters involved creating a workshop for students at Bernard Lievegoed College in Maastricht. For that we needed a structured and visually engaging workbook and presentation. These materials were designed for people to learn P5.js.

drawing
brandboard

We started by researching similar projects to get a good feel for the right style and tone. We created a moodboard to explore different visual directions and ensure our design matched the project’s theme. We also brainstormed and refined the project’s name to make sure it fit well. Once we had a clear direction, we started sketching and experimenting with different graphic ideas. We played around with various layouts and styles before deciding on a final concept. To keep everything consistent, we documented our design choices in a brand board, making sure the workbook and Presentation had a strong, unified look..

voorkant_werkboek werkboek2 werkboek3 werkboek4

I put together the werkboekje and PowerPoint, making sure they looked great and worked well together. Every detail, from layout to visuals, was thought through to keep everything clear, engaging, and on-brand.

beginscherm powerpoint

We also designed a website for CodeBusters, and I contributed to the design process in Figma. I helped shape the layout and visuals to ensure everything matched the project’s style and provided a smooth user experience.

website website2
divider1