Coding Type with AI

A recent trip to Munich, coupled with inspiration from magazines kick-started this exploration of coding text animation. As a moto I had this sentence 'Design Before Design’ in the back of my head as a great exploration and excuse to get me going. A project I’m working on, emphasizing that the design preparation (exploration of context and problem), is essential for the act of design itself. On the type journey, AI was my coding partner.

Code is now a creative tool for designers, artists, this book — Form+Code, explores how software enables innovative form generation and idea translation.

A first approach

I wanted to build with type—not just set it or style it, but truly construct it. This passion fueled Design Before Design, a project exploring the power of research in design. It's about the belief that designers must deeply understand context before creating.

A spark of curiosity—an article about coding type—led to this experiment. I explored CodePen.io and GenAI tools, wondering: How can letters become more than symbols? How can they transform into dynamic, expressive forms? Design Before Design is the result. It's a reminder that good design starts with thought

I set out to understand the power of letters— how the can move and express so many ideas. This exploration wasn’t about finding the perfect font; it was about capturing and expressing the qualities of type through coded, animated forms. AI was my collaborator it failed to help me express and forced me to think what I needed to convey which made the journey that much more interesting.

In the end, Design Before Design sentence, became a great excuse to uncover this creative process of coding animated letters.

The type changes on hover.
Just like your design changes when you actively engage in the pre-design work

Next step? Making the first ‘Design’ change the second as a consequence.