ARTEC 35 @ IPT, Tomar 2025-04-07
https://www.instagram.com/artec_dtag/
In this hands-on, beginner-friendly workshop, you’ll discover how to turn computer algorithms into symbols, brands, or full dynamic visual systems. We will use code to develop our concepts and designs into captivating visual identities.
No prior coding experience? No problem! We’ll guide you through the playful world of p5.js —a coding library designed to keep this simple and fun, loved by artists and designers— to craft generative graphics that breathe life into visual branding, or other communication pictographic and communication design systems.
Inspired by Karl Gerstner Designing Programmes, and Martin Lorenz’s Flexible Visual Systems, you’ll learn to design a dynamic rule-based process, instead of static single logos or symbols. You will be able to create dynamic patterns that morph, adapt, and surprise. Imagine coding a brand that evolves with every click, or a visual identity that generates infinite variations—all while sipping coffee and geeking out with fellow designers.
We’ll draw inspiration from iconic Portuguese designers and reverse-engineer their concepts into interactive code. By the end, you’ll export your own generative assets, ready to plug into posters, apps, or animations. Spoiler-alert: You’ll leave wondering why you didn’t start coding sooner!
Workshop
Code a flexible visual identity inspired by a Portuguese brand. Start with rules (e.g., “All circles must align to a grid, but colors are wild”). Add interactivity: Let users “remix” your system with sliders or clicks. Make it available to use or edit in other DTP software.
Total (Maximum) Time:3 hours
Program:
Icebreaker (~15 mins)
Introduction (participants, instructors);
Conceptual reference
“Instead of Solutions for Problems Programmes for Solutions” Karl Gerstner and Martin Lorenz systematic approach
Visual and Historical references,
Quick overview of the processing and p5js “ecosystem” (Website and Editor);
Let’s Get Sketchy! (~45 minutes)
Hello World! — basic filesystem and program structure;
Drawing with code instructions: basic shapes & properties;
Drawing in a "normalized space" (0-1 space for endless scalability transformations!);
Turn numbers into design dials (color palettes, spacing, rotation) by using variables: from simple numeric variables, complex(ish) array variables;
Challenge: Create a geometric logo that resizes flawlessly.
Short (will there be Coffee?) break! (~15 minutes)
Build Your Brand System (~90 minutes)
I'm a function, you're a function, we are all… er… custom functions?;
Making patterns by using Loop (cycles) and Nested Loops;
Add “personality” to your system: controlling the flow with If-else conditions;
Challenge: Design a pattern-based logo that reacts to mouse movement.
[Hey… if we have time, we'll be] Using Media: loading fonts and images;
Using randomness;
Putting it all together!
Saving and exporting the results;
Show & Tell: Rapid-fire presentations + feedback. (~15 minutes)