#StopWarInUkraine Save the children
ENGLISH

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
01 Collect

The DNA Project wins SOTM for December!

Article by Awwwards in Web Design -

Can you believe it? The last SOTM of the year. How time flies! We are saying goodbye to 2014 with a knockout website created by none other than one of the most admired agencies on the planet - Hello Monday. The team ran away with the Site of the Year 2013 award for Into the Arctic - Greenpeace; this win has put them back into the hat along with the other ridiculously talented SOTM winners from 2014. Stay tuned to see if history repeats itself.

Back to your SOTM for December...The DNA Project

Grammy-nominated producer and music innovator j.viewz opens up the creative process through a first-of-its-kind music experiment: an online journal documenting every step that goes into the making of an album.

The visual language of the DNA site is inspired by the music and the musical world that Jonathan Dagan (j.viewz) works within - an ethereal and multilayered space.

Hello Monday wanted to give visitors a feeling that the site is interactive and alive, so they created a minimalistic and subtle universe. At the same time they tried to create a sense of depth for the visitor to move around in, contribute to, and explore.

the DNA project

The lines of the DNA were built using Three.js  - while Pixi.js was used for the sound visualisation parts and TweenMax for the overall animations.

Some smaller, subtle effects were also added to the site to make it feel even more alive and engaging. If you wear headphones while on the site and move your mouse from one side of the screen to the other side, you can hear the background music panning from one ear to the other.

the DNA project

In the background you will also sometimes see small hexagon shapes that appear to float and drift - these small hexagons are actually other visitors that are on the site with you, and you can visually see their movements in real-time. Inspired by j.viewz’s collaborative artistic process, this helps to create life on the site, and a feeling that the visitor isn’t alone.

Although there's probably only a small portion of visitors who will actually notice what these hexagon shapes represent, the movements and seemingly random motion that’s created is something that's not achievable through code.

Winners!

Each month we give away exclusive design prizes just for voting for your Site of the Month and sharing them on social media. The lucky winners of 3 licenses of “One year Webydo Pro Plan” are: @RaphMalka, @MauroFontanari, @matildasundaker.