Macbook on a table
Macbook on a table

Wroclaw

Software House Website

Innovative new perspective on UI design

2020

My master's thesis project emerged from a fascinating question: Could we make code visually beautiful? I set out to reimagine how we present programming, transforming the abstract world of coding into engaging visual experiences. The challenge was to redesign imakeable.com, turning it into a canvas where code comes alive through dynamic animations.

SERVICES

Animation Design UX Design UI Design Branding Design User Research Creative Coding Interactive Design

Animation preview
Animation preview
Animation preview
Animation preview
Animation preview
Animation preview

Project Overview

Code is beautiful - but not everyone sees it that way. My mission was to change this perception by creating a visual language that speaks to both developers and designers. Using TouchDesigner, I developed a series of abstract animations that transform real-time coding activities into mesmerizing visual patterns, making the invisible world of programming visible and engaging.

I developed abstract animations using TouchDesigner and integrated them into the website to visually represent code.

Approach

Rather than treating code and design as separate entities, I envisioned them as two sides of the same coin. Every animation was carefully crafted to reflect actual development processes, creating a dynamic bridge between function and form. The result was an interactive experience where visitors could literally see code come to life through motion and interaction.

Process

The journey of bringing this project to life was both challenging and exciting. I started by immersing myself in animation techniques and coding patterns, spending countless hours exploring how to make code visually engaging. TouchDesigner became my playground for experimentation, where I developed and refined different approaches to visualizing code. The breakthrough came when I created a unique cube animation system that could track viewer movements and transform real coding activity into dynamic visual patterns. Through multiple rounds of testing with both developers and design enthusiasts, I continuously refined the animations, balancing visual appeal with technical performance. The final result was an interactive system that could translate our daily code output into fluid, responsive visuals while maintaining smooth performance across devices - something I'm particularly proud of achieving.

The project not only fulfilled its academic goals but also opened new possibilities for how we think about presenting technical concepts through design. It stands as a testament to the potential of bridging the gap between code and visual design, showing that technology can be both functional and beautiful.

Final Design

Visually Presented Code

Visually Presented Code

Integrated Animations

Integrated Animations

Redesigned the website

Redesigned the website

Merge Code and Visuals

Merge Code and Visuals

The final design brought together the best of both technical innovation and user experience.

At its heart was an interactive visualization system that transformed dry code statistics into beautiful, meaningful visual elements that responded to user interaction. I paid special attention to performance optimization, finding the sweet spot between visual complexity and smooth operation - after all, even the most beautiful animations aren't worth much if they don't run smoothly across different devices. What I'm most proud of is how the final product made complex technical concepts feel accessible and engaging, creating an intuitive experience that resonated with both developers and design enthusiasts alike.

Product Images

The image showcases a MacBook Pro set against a minimalist, textured background, displaying a website.
The image showcases a MacBook Pro set against a minimalist, textured background, displaying a website.
The image showcases a MacBook Pro set against a minimalist, textured background, displaying a website.
The image showcases a MacBook Pro set against a minimalist, textured background, displaying a website.
The image showcases a MacBook Pro set against a minimalist, textured background, displaying a website.
The image showcases a MacBook Pro set against a minimalist, textured background, displaying a website.
The image showcases a MacBook Pro set against a minimalist, textured background, displaying a website.
Macbook on a table

Achievements

This project became much more than just a thesis - it was a real breakthrough in how we can present code visually. By merging technical functionality with artistic expression, I managed to create something that resonated with both developers and design enthusiasts, which was incredibly rewarding. Along the way, I dove deep into TouchDesigner and Python, pushing my skills into new territory. What started as an academic exercise evolved into a fresh approach to visualizing development processes, proving that code doesn't have to be intimidating or boring - it can be both beautiful and engaging. Looking back, I'm proud that this work helped challenge the traditional separation between code and design, showing that technology can be both functional and visually stunning when we think creatively about its presentation.