Build in Amsterdam

Foam Talent 2021

Scroll, stop, listen, watch, enjoy!

Best Mobile User Interface / Webby Winner

Build in Amsterdam

Best Mobile User Interface

Webby Winner

We translated the physical experience of visiting a photography exhibition into emotional browsing. Karla Vincheva, Project Manager

Watch

Q: Can you briefly describe your project and the concept behind it?

A: Foam & Build in Amsterdam created a digital exhibition which showcases the work of 20 photographers, selected through the annual Foam Talent Call. Seamlessly integrating audio, video, and interactive elements, the online realm transcends museum walls, redefining photography's boundaries and future potential.

Q: Once you settled on your idea, what influenced your decision on the chosen technical approach? How did it differ or go beyond approaches you’ve taken in the past?

A: To evoke emotion and suggest visitor presence, we designed two exploratory spaces with non-linear navigation, reminiscent of what it feels to wander around the Foam museum. The horizontal scroll imitates exhibition walls, while an open grid facilitates a fluid browsing experience and fluttering navigation pattern.

Q: What were some of your biggest learning and takeaways from this project?

A: We never cropped any artwork and made use of the whole width/height of the screen. Maintaining artistic integrity and capturing each artist's atmosphere and tone was challenging. With minimal intervention, we conveyed diverse ambiances and emotions through layout, color, animation, and captions. Some projects have an organic, collage-approach like Neuromantic, while others are following one sequential storyline like Extendable Ears.

Q: What web technologies, approaches, tools, or resources did you use to develop this experience (WordPress, headless, AI, Sublime Text, HTML5, Adobe XD, etc)?

A: We used our main BiA stack; Next.js and Vercel which offers an incredible synergy, performance and fluid setup for developers. We selected the Storyblok for its adaptable setup, quick modifications, variable components and live preview. It uses the input values directly from Figma inspect tool. The project also included complex & interpolated animations for which we chose a powerful animation library for React, Framer Motion.

Q: How did the final product meet or exceed your expectations? What results did you see?

A: An interesting setup is Thommy Kha's project page. It combines components of all sorts; images, videos, even draggable heads, but without doubt, one to highlight is the 3D cloth that we did with React Three Fiber (React renderer of Three.js ) to resemble his real artwork ‘Reunification’ (see folder for video).

Q: Why is this an exciting time to create new digital experiences? How does your team fit into this?

A: Because of global lockdowns, more people than ever before were able to visit the Foam Talent exhibition which is usually a physical touring exhibition (London, NYC, Berlin, etc). Analytics showed that having a fully digital version enables a true worldwide reach. This aligns with our idea of making art more accessible on Foam.org that we also designed and developed. We enabled Foam team members to create their own online exhibitions in the CMS.

Q: How did you reach a good balance of your own creative ideas and technical capabilities with a fair representation of the client’s brand?

A: We worked in close collaboration on design and animations with Foam curator Hinde Haest but also the artists themselves to ensure the results were in line with their body of work and expectations. We let them choose their own emoji for the live interactions module! Our flexible Figma to CMS approach allowed us to create and iterate fast.

Q: What did your initial moodboard, wireframe, or prototype look like? How did those ideas change throughout the design process?

A: We began designing with the artists' beautiful and poignant work as our foundation, while drawing inspiration from Foam magazine and the museum's spatial layout. The design of the project pages evolved through multiple feedback rounds. The user interface was refined to unobtrusively support and showcase the artworks, allowing it to fade away when needed.

Q: What is unique to Foam Talent above other projects you have worked on?

A: We were inspired by how visitors can be drawn to a room just by seeing other people already in there. This resulted in the creation of a visitor counter & live interactions, which indicate what projects other people are viewing in a little notification format & the possibility to react with various emoji linked to the project themes. The way it works; we use a React hook that consumes a Serverless API endpoint every 10 seconds. Furthermore, it posts to that same endpoint the page that you are visiting, the action (whether you leave or enter) and your unique id as a visitor. We used the help of isReady and asPath of Next.js useRouter hook to be able to know what page the user is visiting, and when the route is ready, to execute the code.