Responses by Michele Angeloro, designer and creative director, Den.Cool; and Renaud Rohlinger, developer, Utsubo.
Background: “Den.Cool is an interactive portfolio website designed to showcase my most recent and appealing works,” says Michele Angeloro. “It features a user-friendly homepage that highlights the content of each project in detail and is adorned with 3-D elements users can play with. The project detail page is a simple slideshow where users click left and right to navigate the slides.”
Navigational structure: “I wanted the navigation bar to play different roles without changing its appearance throughout the navigation,” Angeloro explains. “So, when the site is being loaded, the bar shows the loading progress, but then it flips to become the container for the project titles. A cool feature is that it dynamically detects the user’s position on the page and flips every time a new project is detected to display the corresponding project title. Furthermore, once you enter the project detail page and start navigating the slideshow, the bar fills with white, subtly displaying your progress until the end, where it flips again and asks you to continue to the next project.”
Challenges: “Implementing the 3-D balloons,” says Angeloro. “I had decided early in the design phase that I wanted users to be able to interact with 3-D elements that don’t necessarily belong to the layout but rather represent an addition that makes the experience more playful.”
Favorite details: “The detail I am most proud of is, in fact, the most secret one,” says Angeloro. “Because the site is all about interactive exploration and fun, I placed a secret button on the homepage that triggers a game. The game is an alternative version of the classic game Space Invaders, but instead of shooting aliens, you shoot at words representing bad UX behaviors. I called it Design Invaders—can you find it?”
“We're proud to announce that this is one of the first websites to use WebGPU when available, automatically falling back to WebGL if WebGPU is not supported,” says Renaud Rohlinger. “This ensures that our users experience cutting-edge web-graphics technology while maintaining broad compatibility across web browsers and devices.”
Special technical features: “The site’s setup allows us to implement advanced features, such as computing shaders for interactions and optimized performance, providing better access to new GPU architectures via a more recent web 3-D API,” says Rohlinger. “Our commitment to leveraging the latest advancements in web-graphics technology while ensuring accessibility for all users is a significant achievement.”
Browse Projects
