UDO Audio

Winter 2020

  • Craft CMS
Browser bar illustration

Having been first approached by the UDO team in 2019 to put together a slick holding page, I was delighted to be asked to return to build out the next phase of their web ambitions – a full CMS-backed site to showcase the company and their new Super 6 analog hybrid synth.

I’ve worked with Magnus, UDO’s designer, on a couple of projects now and we’re very much on each other’s wavelength. His expertly prepared responsive designs and thorough briefing told me exactly what was required, and having decided on Craft as the appropriate CMS based on our previous work together, I was able to quickly configure the content schema to cater for UDO’s requirements. The designs employed thoughful re-use of common layouts and modules so I was able to represent the various sections and pages of the site in Craft with minimal hassle, and quickly get started on building out the frontend.

Browser bar illustration

The brief included a number of behaviours and interactions that required careful thought. The homepage design called for a background video for which we employed a Vimeo embed using their premium chromeless “background mode”. This needed a bit of finessing in order to ensure the viewport was properly covered regardless of its size, and to switch between two video sources based on the viewport aspect ratio. The carousel of synthesizer product shots includes a neat colour-switching control, and some CSS Grid layout tricks are used here to allow native scrolling of this horizontal content (with scroll-snapping) regardless of the number of slides, without requiring JavaScript.

Browser bar illustration

The homepage also includes a scroll-activated schematic animation, which uses the IntersectionObserver API and Airbnb’s Lottie library to reproduce an After Effects vector animation in the browser. And the various block-based content configurations required some planning for sensible responsive behaviour and co-ordination with the fields available in the CMS.

The resulting site should provide a comprehensive and flexible platform for UDO and their products for some time to come, and I’ve been pleased to see how its content has already evolved in the weeks since launch.

Mobile device illustration

This preview is scrollable!