Our site ‘Seven Years of WONDR‘ won a global award for ‘Site of the Day‘ from the CSSDesignAwards, a platform that recognises the best in design and development from around the world.
To celebrate our seventh year we designed a bespoke digital experience utilising beautiful 3D work that works seamlessly from mobile through to larger screens. In this experience, you get to visit 7 different stories that reflect on what we have achieved as a team and where we are going next.
You view a short video preview below & visit the site.
As well as winning the ‘Site of the Day‘ Award from CSSDA, it also picked up a ‘Mobile Excellence’ award & honourable mention from Awwwards.
Our site ‘Seven Years of WONDR‘ has been awarded by one of the industry’s top award sites, Awwwards, for ‘Mobile Excellence‘ as well as an honourable mention.
To celebrate our seventh year we designed a bespoke digital experience utilising beautiful 3D work that works seamlessly from mobile through to larger screens. In this experience, you get to visit 7 different stories that reflect on what we have achieved as a team and where we are going next.
You view a short video preview below & visit the site.
As well as winning the ‘Mobile Excellence’ from Awwwards, the site has also won ‘Site of the Day’ from CSSDesignAwards.
In the week that WONDR celebrated its 7th birthday, we were recognised by the Insititute of Designers of Ireland as having designed the best website at their annual IDI Awards 2020.
The awards showcase exceptional Irish design across digital, fashion/textiles, product, visual comms, structures & spaces. Due to the current pandemic there was no physical awards ceremony, however there are plans for a meetup later in the year.
We’ll be picking up our specially crafted IDI Winner trophy next week.
Dermot O'Shea WONDR - FounderIt was the perfect way to mark our 7th birthday with an exciting award win for an exceptional global brand. We're building something special here in WONDR and we're looking forward to what 2021 will bring.
The Institute of Designers Ireland (IDI) has shortlisted 4 of our entries in the #IDIAWARDS2020. The awards showcase the best in Irish design across fashion/textiles, product, digital, visual comms, structures & spaces.
We’re obviously honoured to be shortlisted and we’re looking forward to the awards night itself.
Where exceptional work is determined
Best Site
Best Site
Our work with our friends in ftrprf for Google Cloud was also shortlisted for Best Website Design.
Animated Short Film
Animated Short Film
Our Director of Creative Brand Strategy, Oisín Hurst, created ‘Saor’ which was shortlisted for Best Animated Short Film.
Best Experience
Our work for CCSDA WOTY was also shortlisted for Best Experience Design.
Whilst we intend to enter some of our stand out work from the last year, we were keen to get involved in events and contribute to promoting Irish design talent at a local level.
This year, the IDI Awards will showcase exceptional design using a digital platform. Awards will cover fashion/textiles, product, digital, visual comms, structures & spaces.
Due to the current pandemic there will be no physical awards event, however that won’t stop everyone enjoying the moment to celebrate the best design work in Ireland with awards announced live on instagram.
Where exceptional design is determined
Our support for the IDI follows on from our recent collaboration with CCSDA on their global Website of the Year Awards, which had over a million visits, to celebrate the best in web design so it’s a good time to follow this on with something local too.
Dermot O'Shea Founder - WONDRIt's time to award those who had the attitude & ability to bring clarity + bravery to their work
For more on the IDI Awards 2020 you can visit the site or search for the IDI on the social channel of your choice. You should also check out the WOTY site here, it’s pretty cool.
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.