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 (Fachhochschule 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.

Gallery

Bubble Gum Bliss Screenshot 1 Bubble Gum Bliss Screenshot 2 Bubble Gum Bliss Screenshot 3 Bubble Gum Bliss Screenshot 4 Bubble Gum Bliss Screenshot 5 Bubble Gum Bliss Screenshot 6

Project Showcase

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, allowing users to feel fully immersed in the virtual environments.
  • Utilized AI-generated content for visuals and text, creating a consistent aesthetic that aligns with the futuristic theme of the project.
  • Implemented interactive storytelling techniques, encouraging users to engage deeply with the content and return for new experiences.

Technologies Used

  • HTML5, CSS3, JavaScript: The backbone of the project, enabling responsive design and rich interactivity.
  • CSS Animations: Used for smooth transitions and to enhance user engagement.
  • AI Tools: MidJourney and Photoshop were utilized to generate visual assets that seamlessly fit the project's narrative.
  • Figma: Played a crucial role in prototyping and ensuring that the design was both user-friendly and visually appealing.

Challenges and Learnings

One of the biggest challenges was balancing the creative freedom afforded by AI tools with the need for precise, high-quality outputs. While tools like MidJourney and Photoshop accelerated the design process, they often required manual refinement to align with the project’s vision. Additionally, coding a seamless 360° skybox presented technical hurdles, particularly in ensuring compatibility across devices and browsers.

Through this project, we gained valuable insights into the integration of AI into creative workflows. It reinforced the importance of human oversight and iterative testing to achieve a polished final product. The experience also deepened our understanding of user-centered design, emphasizing the need to make every interaction intuitive and enjoyable.