Bubble Gum Bliss

"Bubble Gum Bliss" is a groundbreaking web project that blurs the boundaries between imagination and digital storytelling. Designed as a virtual shop, the project offers users a unique opportunity to explore immersive journeys through fictional worlds, all triggered by consuming virtual bubble gums. Each gum acts as a gateway to a different, richly detailed experience, combining elements of art, technology, and user engagement.

The project was developed as part of the course "Design Against the Machine – Nonlinear Narratives of the Near Future," led by Prof. Boris Müller, at the University of Applied Sciences Potsdam, in collaboration with Nina Kahmke. The course emphasized breaking traditional web design rules by exploring experimental CSS approaches to create non-standardized and engaging websites.

Set in a speculative future where conventional web guidelines no longer attract users, the course challenged us to design for a reality where only highly creative and unconventional web experiences stand out. We engaged intensively with and against generative "AI" tools, using them to create, disrupt, and reimagine code, visuals, and narratives, while reflecting on their ethical and creative implications. This experimental approach allowed us to produce a visionary perspective on the influence of AI in design and storytelling.

Key Achievements

• Conceptualized and executed a fictional universe that integrates abstract patterns, optical illusions, and dynamic animations to captivate users.
• Developed a 360° rotating skybox using advanced JavaScript techniques.
• Utilized AI-generated content for visuals and text.
• Implemented interactive storytelling techniques for deeper engagement.

Technologies Used

• HTML5, CSS3, JavaScript: for responsive design and interactivity.
• CSS Animations: for transitions and user engagement.
• AI Tools: MidJourney and Photoshop for visuals.
• Figma: for prototyping and UI design.

Challenges and Learnings

Balancing the creative freedom of AI tools with the need for high-quality outputs was challenging. Tools like MidJourney and Photoshop accelerated the design process, but manual refinement was necessary. Coding a 360° skybox was technically demanding, especially for compatibility across devices.

We learned a lot about integrating AI into design workflows and the importance of human oversight. It also sharpened our understanding of user-centered design and how to make experiences intuitive and fun.