A big chunk of Resn’s business comes from working with international brands, and plenty of that work has ended up winning international web design awards. That trend has continued after the website it built recently to help tell the tale of Subaru of America’s environmental legacy took out two site of the month awards.
‘Zero Landfill: We Are What We Leave Behind‘ was the result of a collaboration between Resn and US advertising agency Carmichael Lynch (let’s hope no-one discovers any emissions cheating software a la Volkswagen or this could be awkward) and it resulted in Resn’s first ever site of the month award in the Awwwards and another win in the CSS Design Awards.
As it explained: “Growth rings are a record of the life of a tree. Each year, a tree lays down another ring, revealing clues about its history and environment. Scientists study these rings because they tell us about the environmental conditions in which the tree grew. This discipline, known as dendrochronology, offers us a window into the past … The timeline, bark, and tree rings were built using a canvas element. As the user interacts with the tree, the points on each of the rings reposition themselves, creating an organic motion. Scrolling through the page causes the tree to unfold and form a timeline. We calculate not one, but two sets of coordinates for each point; one located on a line, and one on a circle. To acquire the final position of a point, a weighted average between these coordinates is calculated, gradually shifting between the sets. The bark, forming the outermost ring, animates using an irregular sine wave, mimicking the growth of a tree. This animation was initially prototyped using SVG, then ported to canvas for performance reasons. A content layer is placed over the canvas layer. We track coordinates along each line within the canvas layer, as the user navigates through the website. DOM elements are continually appended and detached from the content layer during this interaction. By ensuring the elements we use are transformed wherever possible, repaints are kept to a minimum.”
Resn, which has offices in both Wellington and Amsterdam and is one of the leading proponents of putting strange quotes in press releases, says it is incredibly happy to receive such global recognition.
“They only give out one of these each month. So, annually, that’s only, like, ten or something. Maybe less,” an anonymous Resn spokeshuman said.
The Awwwards are based on votes from a jury and from the public and Resn’s convincing appeal on Facebook undoubtedly assisted in its quest for victory. As it said: “Studies show that voting lowers your risk of developing bad breath. As your dental hygienist, we advise you to vote. Also, floss. Seriously.”
Resn says it has had a stellar 2015 on the awards front, winning two Webbys, 25 FWA Awards, eight Awwwards and numerous others for sites such as the McWhopper proposal, the self-destructing book, Chekov is Alive, Wildflowers, the 4news Wall and KFC’s Hall of Colonels.
It has also created a Tumblr page featuring a wide range of online experiments that shows how the agency is pushing the boundaries of web design. Be prepared to spend a few hours exploring all the visual trickery.