Responses by Gaia Fabiani, cofounder/CEO/project manger and Michael Morsicani, cofounder/head of design, HUD
Background: Wow Tapes is a video production company and a collective of video wayfarer heroes that work closer to the edge to bring wonder back to the earth. Supported by One Up Studio, HUD created an immersive and interactive website that brings users into the videos, thanks to a continuous project navigation. We also developed every page to enhance both the video technical requirements and the personal experiences of each hero.
Highlights: The website design combines an elegant, minimal style with full-width elements, white spaces, joyful colors and typography with abundant letter spacing. We used a particular color palette inspired by the ’80s and funny animated icons to mark Wow Tapes’s personality, while maintaining an institutional and easy-to-understand approach.
Favorite details: How the animation, motion graphics, coding, typography, videos and cool design show users the hidden beauty of the Wow Tapes heroes. We were looking for alternative creative ways to represent the singular sign of each place and work experience, so we opted for a full-width design and animated icons, combining user interface choices with captivating visual elements and interactions.
Navigational structure: On the homepage, we opted for a horizontal slider that users can drag to the next interaction, making the users an active part of the story. The transition from one slide to another has been designed to remember the effects and sounds used by the company in their videos. To make the experience as smooth as possible, we developed seamless transitions to the next project page with an Ajax transition effect.
Technical features: We used ES6, Sass and Mustache, Webpack and Node. The site can be viewed without required particular plugins, although it is advisable to use updated browsers. As for libraries, we mainly used GSAP, Barbajs, Lottie and a smooth scroll plugin. We also opted for a simple division by file type—JS, SCSS, HTML and assets—that were divided into other small files. We also used mustache.js and babel.js.