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.
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.
Once animated, they look like this...