BASIC® Launches Year-in-Review 2016

02.10.17
Category (Press)
Date Published (02.10.17)
Read Time (0 Min)

Our BASIC® 2016 Year-In-Review microsite—steeped in the theme of controlled chaos—reflects upon a remarkable 12 months for our agency in a confrontationally engaging fashion.

  • Press
  • Work
BASIC® Launches Year-in-Review 2016
(02.10.17)

Our BASIC® 2016 Year-In-Review microsite—steeped in the theme of controlled chaos—reflects upon a remarkable 12 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 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 BASIC® CEO Matt Faulk. “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 reworked. 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, unanticipated feeling of controlled chaos.

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 visualizations 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 analyzer 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.

    Sec.
    /

    (BASIC®)

    BASIC® is an experience design company that thrives at the crossroads of culture and technology. Combining human intuition with systematic thinking, its work in strategy, design, and digital transformation is recognized for challenging business convention alongside the world’s most forward-thinking brands.