Here at WONDR, we’re excited to reveal that we had the exciting job of setting the brand narrative for the CSS Design Award’s Website of the Year 2018 showcase website.
We’re so proud to be flying the flag for Irish design 🇮🇪 at on a global stage. The site is an immersive underwater world titled “Coral” — a metaphor for the sea of creativity and design unearthed by CSS Design Awards.
We caught up with two of the WONDR team responsible for bringing this landscape to life. Meet Creative Director, Oisín Hurst and Creative Front End Developer, Clément Grellier. They chatted about the highs, the lows and all the jellyfish in between.
What was it like to be involved in creating Website of the Year Awards site?
Oisín Hurst: Exciting and intimidating.
Clément Grellier: Yes, it was great to work on something focussed on collaboration with freedom of creativity. Of course there’s a big responsibility and expectations at are an all time high — it’s being seen by the entire design community! But that’s an incentive to make sure the work was unique and interesting.
What makes the CSS Design Awards so special?
OH: For me, their mantra of ‘Inspire and be inspired’. The highest thing you can do as a creative is inspire others. If you have work commended on CSS Design Awards you have a platform to potentially inspire someone else. That cycle of creativity can start again. It’s a great social goal.
Why, in your opinion, are the CSS Design Awards important to creatives in the industry?
OH: To me it’s the peer review that adds value. With the CSS Design Awards you genuinely rate the judges — it gives huge weight to the awards. It’s not someone from outside of your field judging design.
I also have a huge admiration for the effort that goes into judging and maintaining the site, and the depth of the view, you can really lose yourself in it. There’s lots of great work to discover.
CG: Yes, for me the wider community aspect as well as the peer review of the rewards.
What inspired the brand narrative “Coral”, our world under the sea?
OH: We wanted to create a narrative that tied in with the proposition and positioning of the CSS Design Awards brand and translate that into a visual concept and a wider digital experience.
Oisín Hurst WONDRTwo aspects stood out to us; firstly the sense of community at the heart of CSS Design Awards, and two, the cyclical journey of inspiration.
Creative Director
It was a metaphor that encompassed thriving creativity and crucially, the idea of community. The notion that we are floating through a vast sea of noise and debris on the internet but when you discover CSS Design Awards you land on a vibrant creative community. It’s our own creative island to be inhabited, much like a thriving coral beneath the sea.
Can you tell us how “Coral” was brought to life?
OH: The coral is a neon island of creativity, floating in a vast digital environment. We created the 3D hero coral by dressing it with neon plant life and lighting it with hues of pink and cyan. We also created a range of secondary corals that included the trophy, crystals and our jellyfish (named Squee).
There’s also a little surprise when you reach the footer. When a visitor scrolls down to the base of each page, they break the water’s surface and discover that the entire experience is actually upside-down.
You explored a few themes before you got to “Under The Sea”, what ideas were killed during the process?
OH: We explored a few different avenues.We wanted a world that had enough variety to create a convincing environment. Our initial idea was a typographic route that encompassed a complete alphabet with seven versions of each letter. But in the end, we decided the typographic route was a little too cold and clinical. It felt natural to come back to the coral which was a richer interpretation of community. That notion was core of the brief.
Oisin, typography still features heavily, how did that evolve?
OH: We took some of the typographic learnings from our initial creative research into the final typography for the site. We agonised over getting movement lifelike and in the end we decided it didn’t have to be literal, as long as the underwater feeling was achieved.
That movement is integral to the theme, can you talk us through that, Clément?
CG: I tried to recreate some of the ideas Oisín had around typography by taking 2D assets and making them look 3D to give them depth. We were keen that the letters would move with the mouse to mimic the underwater feeling of floating, in order to match the coral world.
Clément WONDRHarmonising the movements with the under the sea concept so it was believable was important to the concept. It also kept it natural looking, interesting and interactive.
Front End Developer
The 3D coral is a hero element, can you tell us about the making of it?
CG: An element of play was really important which is why the 3D effect is key. Again we wanted to mimic the underwater feel and make it look more dynamic and interesting for the user.
OH: Yes it was key to bring that habitat to live with 3D. At first we made rotating 3D animations for every asset. We had a master coral with about 5 different coral “children” not forgetting, Squee, our jellyfish. We even created a coral version of the Website of the Year trophy, the CSS Design Awards logo and our own WONDR brandmark that blended nature and technology together.
How was the collaborative process between design and front end development for this project?
OH: It was really open. We didn’t do detailed page designs. It was always more of a conversation on how things could work rather than a prescriptive process. Clément instinctively knew how to elevate the designs I brought to him, creating an immersive experience that surprises the user — giving it the ‘wow factor’ I suppose.
CG: Yes, it was always a work in progress — we just kept bouncing ideas off each other. I think this is the best way to work. It’s how we were able to make the experience a bit more interesting. Open communication meant we stayed on schedule, which is important!
It’s sounds like that dialogue was key to this project?
OH: For me, when I finish something there’s always the temptation to go back and over-work it. It was really important to have the input from the team to know when to stop!
Any challenges you had to overcome once you got into the project?
CG: One of the main challenges was performance because of the amount of data. The weight of data for this project is quite high as we have to parse all the votes, nominees, judges, winners and display them in a dynamic way. It was quite challenging to handle all that data and re-organize it, sort it and filter it.
The other challenge was the assets. As we wanted to make the assets interactive and have them move and rotate, we needed to have a sequence of images for each asset ,like the letters and the coral, which increases the weight of the page. We tested and went back and forth before finding the right way to do that and made sure everything is loaded correctly.
We used very specific properties like masking videos, which made the QA more difficult because some of these properties are not available on all browsers. We often had to code a specific alternative to make sure it displays properly on all modern browsers (although the experience is best viewed on Chrome).
OH: Yes, as you work through it, you think you’ve killed all your darlings at concept stage, but then you realise there’s plenty more to kill. We had particle effects and additional movement that sadly, had to be cut. There comes a time you sacrifice things to the ‘gods of performance’. You have to decide what’s bone and what’s flesh. Protect and what you can, sacrifice what you can’t.
Favourite thing about the Website of the Year website, now it’s complete?
CG: The underwater universe. The creativity of the concept and bringing it to life.
OH: The magical realism of the site. The fact it floats and it feels electronic and magical at the same time.