Feb 18, 2021 / Brand

Creating the helix

An important part of creating our new brand and website was the design and creation of what we call ‘the dots’. It was never going to be enough to create a static visualisation of dots for our website, we wanted much more. Something that looks elegant and simple, but also interacts with you as you move through our website. The process was anything but simple.

As a business whose logo, and part of our history, is closely linked to the initialisation DNA, it was important that we embedded the idea more deeply than just the three letters. We went right back to the idea of the double helix which makes up deoxyribonucleic acid and found that our answer was right there, we just were not looking for it.

A helix is a three-dimensional shape like a corkscrew or spiral staircase. In the case of the double helix of DNA, it is like a ladder that has been twisted into a spiral. We used this as our inspiration, and by placing a dot at each point where the rungs of the ladder met the sides we created the first strand of dots. This was not quite the look we wanted so we stretched it and repeated the shape until we had the series of dots we have as part of our brand.

Now that we had the shape we wanted it was time to make it move and provide the visual interaction that we wanted for the site. The shape was so complex that none of the technologies that we use day to day could cope with it, so we started looking for more complicated 3D rendering tools. Initially, we considered developing it all in three.js, a 3D JavaScript library but decided instead to use Cables, a visual programming tool for creating the type of beautiful interactive content we had in mind. The surface level output from Cables is web.gl which is a native 3D renderer in the browser so once the dots were just how we wanted them we could export them and add them to our Craft CMS.

We started by focusing on the core shape. Using the inbuilt functions in Cables we created the helices and then applied a dot to each intersection. Once we had the core shape, we could remove everything but the dots. Now we had the static shape we had originally designed but in a format that we could animate. The effect that we wanted was a movement on page load, as well as interaction when the cursor is moved or the page is scrolled. There was a fair amount of tweaking to get it just right. Once we were happy, we applied this to the site and further customised it to allow it to be editable through our CMS where we can customise the colour and opacity of the dots. This means they can add to the experience without distracting from the content of each page.