Our BASIC 2016 Year-In-Review microsite - steeped in the theme of controlled chaos - reflects upon a remarkable twelve months for our agency in a confrontationally engaging fashion. This was an internal challenge, born from the will to collaborate, learn new skills, and create the unexpected.

Our Approach

Our iterative approach brought everyone from each department together to contribute ideas. The single-page scroll design highlights our most recent projects, latest brand reel and biggest accomplishments. The unconventional experience demands engagement.

“The brief was simple: make something unexpected and different, and get people talking. There was no set direction to where the site should go,” explained Matt Faulk, BASIC CEO & Executive Creative Director. “The beauty of this project was all in the process. It was great to see ideas and concepts being passed around, refined, and then, in many instances, completely re-worked. Ultimately, it was all about pushing ourselves to create something fresh, and something that may not have been possible within the scope of our client projects.”

The creation of this experience stands in complete juxtaposition to the rigidity of our swiss-influenced brand standards. The user experience features smooth scroll animations and subtle text fades, and all to the bass-heavy beat of an ambient soundtrack. Text distortions and image displacement maps that alter at peak frequencies contribute to a raw an unanticipated feeling of controlled chaos.

Synchronized Disorder

The fully responsive site supports animations through desktop and mobile devices. The glitches are optimized to run in a 2D canvas, allowing effects to function without the assistance of webGL. To ensure smooth rendering across various screen sizes, the algorithm generates and renders chunks that are relative to the image size.

We created a series of algorithms that operate en masse to slice the images and SVGs into random-sized chunks and dismantled lines. These assets are then transformed and repositioned using various patterns to create a deliberate glitch or distortion effect. In order for the program to run at 60fps, the chunks only exist as theoretical data objects; they aren’t rendered until all effects are applied, allowing the site to surface a resized and pre-rendered version of the image.

We combined the soundtrack with the glitch effect, bringing a stronger connection between the music and visuals. Before the sound hits the speaker, it runs through various filters and analyzers that expose frequency data in real-time. This data is used to render ‘oscilloscope style’ visualisations and trigger on-screen distortion.

Modern mobile browsers and devices support the vibration javascript API. It empowers developers to pulsate the vibration hardware on a device to any given pattern. We connected the audio analyser with the API to trigger vibration when certain frequencies peak, engaging the user with a tangible and tactile experience.

Head over to the Year in Review microsite to view the full experience.

About BASIC

BASIC is a brand strategy and digital design agency that brings brands and culture together. Creating on the principle that culture drives commerce, BASIC leverages shared values and ideals to inform strategy and design, making digital experiences that inspire human interaction.

With a growing client list of the world’s leading passion-brands, BASIC specializes in millennial insights, strategy-driven and design-led brand development, user experience and digital innovation. 2016 awarded BASIC 7 Webby Award Recognitions, including shopping site of the year, best practices finalist, as well as honoree awards for mobile shopping and three other categories. BASIC also earned two site of the year recognitions at the 2016 OMMA awards in the fashion and retail categories.

Want to work with us? Get In Touch