UDO Audio
Showcasing a brand-new range of synthesisers designed in Bristol
Launched:
- Winter 2020
Link:
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.
UDO provided expertly prepared responsive designs and a thorough briefing which 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 their requirements. The designs employed thoughtful 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.
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”. Some further finessing enabled switching between multiple video sources based on the viewport aspect ratio. The carousel of synthesizer product shots includes a neat colour-switching control, and some native 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.
The homepage includes a scroll-activated schematic animation, using 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.